<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { api, ApiError } from '@/api/client'
import { useAuth } from '@/composables/useAuth'

const router = useRouter()
const { login, isAuthenticated, logout } = useAuth()
const token = ref('')
const submitting = ref(false)
const error = ref<string | null>(null)

async function submit() {
  error.value = null
  const t = token.value.trim()
  if (!t) return
  submitting.value = true
  // On stocke le token, puis on tente un appel protégé pour le valider.
  // Si 401 -> on l'efface et on affiche l'erreur. Si OK -> on redirige.
  login(t)
  try {
    // Le plus léger : POST sur une route protégée avec un body invalide volontairement
    // pour récupérer 422 (auth OK) ou 401 (auth KO) sans créer de ressource.
    // Mais c'est sale. Mieux : faire un GET protégé. On n'a pas de "whoami".
    // Solution : POST /api/members avec body vide -> renvoie 422 si admin OK, 401 sinon.
    await api.post('/api/members', {})
    router.push({ name: 'dashboard' })
  } catch (e) {
    if (e instanceof ApiError) {
      if (e.status === 401) {
        logout()
        error.value = 'Token invalide.'
      } else {
        // 422 (validation_failed) signifie que l'auth est OK, on continue.
        router.push({ name: 'dashboard' })
      }
    } else {
      logout()
      error.value = 'Erreur réseau — réessaie.'
    }
  } finally {
    submitting.value = false
  }
}
</script>

<template>
  <section class="min-h-full flex items-start justify-center px-6 py-16">
    <div class="w-full max-w-md">
      <header class="text-center mb-6">
        <h1 class="text-2xl font-semibold text-donut-text">Connexion admin</h1>
        <p class="text-donut-muted text-sm mt-2">
          Saisis le token Bearer pour débloquer la création de projets, l'édition et la modération.
        </p>
      </header>

      <div v-if="isAuthenticated" class="rounded-xl border border-green-200 bg-green-50 text-green-800 p-4 text-sm">
        Tu es déjà connecté en admin.
        <button @click="logout" class="ml-2 underline font-medium">Se déconnecter</button>
      </div>

      <form v-else @submit.prevent="submit" class="rounded-xl border border-donut-border bg-donut-surface p-6 space-y-4">
        <div>
          <label class="block text-sm font-medium text-donut-text mb-1">Token admin</label>
          <input
            v-model="token"
            type="password"
            autocomplete="off"
            placeholder="64 caractères hex"
            class="w-full bg-white border border-donut-border rounded-lg px-3 py-2.5 text-sm font-mono outline-none focus:border-donut-text"
            :class="error ? 'border-red-400' : ''"
          />
          <p class="text-xs text-donut-muted mt-1">
            Visible dans <code>.env</code> sous <code>ADMIN_TOKEN</code>.
          </p>
        </div>

        <div v-if="error" class="rounded-lg border border-red-200 bg-red-50 text-red-700 px-3 py-2 text-sm">
          {{ error }}
        </div>

        <button
          type="submit"
          :disabled="submitting || !token.trim()"
          class="w-full bg-donut-text text-white rounded-lg px-4 py-2.5 text-sm font-medium hover:bg-black disabled:opacity-50"
        >
          {{ submitting ? 'Vérification…' : 'Se connecter' }}
        </button>
      </form>

      <p class="text-xs text-donut-muted text-center mt-4">
        Pas de session côté serveur : le token est stocké dans <code>localStorage</code>.
      </p>
    </div>
  </section>
</template>
