<script setup lang="ts">
const { login } = useAuth()
const password = ref('')
const error = ref('')

async function submit() {
  try {
    error.value = ''
    await login(password.value)
    navigateTo('/admin')
  } catch {
    error.value = 'Contraseña incorrecta'
  }
}
</script>

<template>
  <div class="min-h-screen flex items-center justify-center bg-neutral-50 p-4">
    <UCard class="w-full max-w-sm">
      <template #header>
        <h1 class="text-xl font-bold text-center">Admin Login</h1>
      </template>
      <form class="space-y-4" @submit.prevent="submit">
        <UFormField label="Contraseña">
          <UInput v-model="password" type="password" placeholder="Contraseña de admin" />
        </UFormField>
        <p v-if="error" class="text-sm text-red-500">{{ error }}</p>
        <UButton type="submit" block :disabled="!password">
          Entrar
        </UButton>
      </form>
      <template #footer>
        <NuxtLink to="/" class="text-sm text-neutral-500 hover:underline">Volver al tablón</NuxtLink>
      </template>
    </UCard>
  </div>
</template>
