<script setup lang="ts">
const password = ref('')
const error = ref('')
const pending = ref(false)

async function submit() {
  if (!password.value) return
  pending.value = true
  error.value = ''
  try {
    await $fetch('/api/auth/login', { method: 'POST', body: { password: password.value } })
    navigateTo('/')
  } catch {
    error.value = 'Mot de passe incorrect.'
  } finally {
    pending.value = false
  }
}
</script>

<template>
  <div class="flex min-h-screen items-center justify-center p-4">
    <UCard class="w-full max-w-sm">
      <div class="mb-6 flex flex-col items-center gap-3 text-center">
        <span class="flex size-12 items-center justify-center rounded-full bg-[var(--fl-ink)] font-bold text-white">FL</span>
        <div>
          <h1 class="text-lg font-bold text-[var(--fl-ink)] dark:text-white">Portfolios Figures Libres</h1>
          <p class="text-sm text-neutral-500">Générateur de portfolios PDF</p>
        </div>
      </div>
      <form class="space-y-4" @submit.prevent="submit">
        <UInput
          v-model="password"
          type="password"
          placeholder="Mot de passe partagé"
          icon="i-lucide-lock"
          size="lg"
          class="w-full"
          autofocus
        />
        <p v-if="error" class="text-sm text-red-600">{{ error }}</p>
        <UButton type="submit" block size="lg" :loading="pending" label="Entrer" />
      </form>
    </UCard>
  </div>
</template>
