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

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

defineProps<{
  form: AdminOperationalSettingsForm
  saving: boolean
  canManage: boolean
  demoPassword: string
  demoPasswordHint: string
  demoPasswordSet: boolean
  demoManagedByDatabase: boolean
  demoCredentialsComplete: boolean
}>()

const emit = defineEmits<{
  'update:demoPassword': [value: string]
}>()
</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 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 bg-violet-100 text-violet-700">
          <KeyRound class="h-5 w-5" />
        </div>
        <div>
          <p class="text-xs font-semibold uppercase tracking-[0.22em] text-violet-500">Demo Login</p>
          <h3 class="mt-1 text-xl font-bold text-slate-900">Landingpage temporär sperren</h3>
          <p class="mt-1 text-sm leading-6 text-slate-500">
            Für Demo-Deployments oder nicht öffentliche Tests. Danach kann der Schutz hier wieder aus.
          </p>
        </div>
      </div>

      <AdminSettingsToggle
        v-model="form.demoLoginEnabled"
        label="Demo Login aktivieren"
        :disabled="saving || !canManage"
      />
    </div>

    <p
      v-if="form.demoLoginEnabled && !demoCredentialsComplete"
      class="mt-4 rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm font-semibold text-amber-800"
    >
      Zum Aktivieren fehlen noch Login, Twitch-ID, Anzeigename oder ein gesetztes Passwort.
    </p>

    <div class="mt-5 grid gap-4 md:grid-cols-2">
      <label class="block">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Login</span>
        <input v-model="form.demoLoginIdentifier" :disabled="saving || !canManage" type="text" autocomplete="username" placeholder="E-Mail oder Username" 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" />
        <span class="mt-2 block text-xs leading-5 text-slate-500">E-Mail, Username oder dieselbe Kennung wie die Twitch-ID.</span>
      </label>
      <label class="block">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Passwort setzen</span>
        <PasswordField
          :model-value="demoPassword"
          :disabled="saving || !canManage"
          autocomplete="new-password"
          placeholder="Leer lassen = behalten"
          root-class="mt-2"
          input-class="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"
          @update:model-value="emit('update:demoPassword', $event)"
        />
        <span class="mt-2 block text-xs leading-5 text-slate-500">{{ demoPasswordHint }}</span>
      </label>
      <label class="block">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Twitch-ID</span>
        <input v-model="form.demoLoginTwitchUserId" :disabled="saving || !canManage" type="text" 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">Anzeigename</span>
        <input v-model="form.demoLoginDisplayName" :disabled="saving || !canManage" type="text" 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>

    <div class="mt-4 flex flex-wrap gap-2 text-xs font-semibold">
      <span class="rounded-full bg-violet-50 px-3 py-1 text-violet-700">{{ demoManagedByDatabase ? 'Quelle: Datenbank' : 'Quelle: Config' }}</span>
      <span class="rounded-full px-3 py-1" :class="demoPasswordSet ? 'bg-emerald-50 text-emerald-700' : 'bg-amber-50 text-amber-700'">
        {{ demoPasswordSet ? 'Passwort vorhanden' : 'Passwort fehlt' }}
      </span>
    </div>
  </section>
</template>
