<script setup lang="ts">
import { Clock3 } from '@lucide/vue'

import type { AdminOperationalSettingsForm } from './adminSettingsTypes'

defineProps<{
  form: AdminOperationalSettingsForm
  saving: boolean
  canManage: boolean
}>()
</script>

<template>
  <section class="rounded-[26px] border border-violet-100 bg-white/85 p-5 shadow-[0_18px_46px_rgba(168,145,214,0.08)]">
    <div class="flex gap-3">
      <div class="grid h-12 w-12 shrink-0 place-items-center rounded-2xl bg-violet-100 text-violet-700">
        <Clock3 class="h-5 w-5" />
      </div>
      <div>
        <p class="text-xs font-semibold uppercase tracking-[0.22em] text-violet-500">Session Timeout</p>
        <h3 class="mt-1 text-xl font-bold text-slate-900">Automatischer Logout bei Inaktivitaet</h3>
        <p class="mt-1 text-sm leading-6 text-slate-500">
          Team- und Admin-Sessions werden nach der eingestellten Zeit ohne Aktivitaet automatisch beendet. Minimum sind 3 Stunden.
        </p>
      </div>
    </div>

    <div class="mt-5 grid gap-4 md:grid-cols-[minmax(0,220px)_1fr] md:items-start">
      <label class="block">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Inaktiv nach Stunden</span>
        <input
          v-model.number="form.sessionIdleTimeoutHours"
          :disabled="saving || !canManage"
          type="number"
          min="3"
          step="1"
          inputmode="numeric"
          class="mt-2 h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm font-semibold text-slate-800 outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100 disabled:bg-slate-50 disabled:text-slate-400"
        />
      </label>
      <div class="rounded-2xl border border-violet-100 bg-violet-50/60 px-4 py-3 text-sm leading-6 text-violet-900">
        Der Logout reagiert auf echte Nutzeraktivität wie Klicks, Tasten, Scrollen oder Touch. Die Session bleibt serverseitig trotzdem autoritativ und läuft spätestens nach 30 Tagen absolut ab.
      </div>
    </div>
  </section>
</template>
