<script setup lang="ts">
import { ShieldCheck, Wrench } from '@lucide/vue'
import { RouterLink } from 'vue-router'

import type { AdminOperationalSettingsForm } from './adminSettingsTypes'
import AdminSettingsToggle from './AdminSettingsToggle.vue'

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

<template>
  <section class="rounded-[26px] border p-5 shadow-[0_18px_46px_rgba(168,145,214,0.08)]" :class="form.maintenanceModeEnabled ? 'border-amber-200 bg-amber-50/70' : 'border-violet-100 bg-white/85'">
    <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
      <div class="flex gap-3">
        <div class="grid h-12 w-12 shrink-0 place-items-center rounded-2xl" :class="form.maintenanceModeEnabled ? 'bg-amber-100 text-amber-700' : 'bg-violet-100 text-violet-700'">
          <Wrench class="h-5 w-5" />
        </div>
        <div>
          <p class="text-xs font-semibold uppercase tracking-[0.22em]" :class="form.maintenanceModeEnabled ? 'text-amber-600' : 'text-violet-500'">Wartungsmodus</p>
          <h3 class="mt-1 text-xl font-bold text-slate-900">Sternenpause anzeigen</h3>
          <p class="mt-1 text-sm leading-6 text-slate-500">
            Besucher landen auf der Wartungsseite. Login und Admin bleiben erreichbar.
          </p>
        </div>
      </div>

      <AdminSettingsToggle
        v-model="form.maintenanceModeEnabled"
        label="Wartungsmodus aktivieren"
        tone="amber"
        :disabled="saving || !canManage"
      />
    </div>

    <div class="mt-5 space-y-4">
      <label class="block">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Titel der Wartungsseite</span>
        <input v-model="form.maintenanceTitle" :disabled="saving || !canManage" type="text" maxlength="120" 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>
      <label class="block">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Hinweistext</span>
        <textarea v-model="form.maintenanceMessage" :disabled="saving || !canManage" rows="4" maxlength="600" class="mt-2 w-full resize-none rounded-2xl border border-violet-200 bg-white px-4 py-3 text-sm font-semibold leading-6 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"></textarea>
      </label>
      <RouterLink to="/maintenance?preview=true" class="inline-flex h-11 items-center gap-2 rounded-2xl border border-violet-200 bg-white px-4 text-sm font-semibold text-violet-700 transition hover:bg-violet-50">
        <ShieldCheck class="h-4 w-4" />
        Wartungsseite ansehen
      </RouterLink>
    </div>
  </section>
</template>
