<template>
  <div class="login-page">
    <form class="login-form" @submit.prevent="login">
      <div class="i-lucide-lock h-10 w-10 text-primary mb-4 mx-auto" />
      <h1 class="font-display text-2xl font-bold text-white text-center mb-6">Administration</h1>

      <div v-if="error" class="login-error">
        {{ error }}
      </div>

      <label class="login-label" for="password">Mot de passe</label>
      <input
        id="password"
        v-model="password"
        type="password"
        class="login-input"
        placeholder="Entrez le mot de passe"
        autofocus
      />

      <button type="submit" class="login-btn" :disabled="loading">
        <div v-if="loading" class="i-lucide-loader-2 h-4 w-4 animate-spin" />
        Se connecter
      </button>

      <p v-if="devHint" class="dev-hint">
        Dev : <code>{{ devHint }}</code>
      </p>
    </form>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: false,
})

const password = ref('')
const error = ref('')
const loading = ref(false)
const devHint = ref('')

if (import.meta.dev) {
  $fetch('/api/admin/auth/hint').then((res: any) => {
    devHint.value = res.password
  }).catch(() => {})
}

async function login() {
  error.value = ''
  loading.value = true

  try {
    await $fetch('/api/admin/auth/login', {
      method: 'POST',
      body: { password: password.value },
    })
    navigateTo('/admin')
  }
  catch {
    error.value = 'Mot de passe incorrect'
  }
  finally {
    loading.value = false
  }
}
</script>

<style scoped>
.login-page {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--color-bg));
}

.login-form {
  width: 100%;
  max-width: 24rem;
  padding: 2.5rem;
  border: 1px solid hsl(var(--color-surface-light));
  border-radius: 1rem;
  background: hsl(var(--color-bg));
}

.login-error {
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: hsl(0 60% 45% / 0.15);
  color: hsl(0 60% 70%);
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.login-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: hsl(var(--color-text-muted));
  margin-bottom: 0.375rem;
}

.login-input {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid hsl(var(--color-surface-light));
  background: hsl(var(--color-bg));
  color: hsl(var(--color-text));
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
}

.login-input:focus {
  outline: none;
  border-color: hsl(var(--color-primary) / 0.5);
}

.login-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem;
  border-radius: 0.5rem;
  border: none;
  background: hsl(var(--color-primary));
  color: white;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s;
}

.login-btn:hover:not(:disabled) {
  background: hsl(var(--color-primary));
}

.login-btn:disabled {
  opacity: 0.7;
  cursor: wait;
}

.dev-hint {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.75rem;
  color: hsl(var(--color-text-muted));
}

.dev-hint code {
  color: hsl(var(--color-primary));
  background: hsl(var(--color-surface));
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
}
</style>
