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

const router = useRouter()
const route = useRoute()
const { login, isAuthenticated, logout } = useAuth()

// Après login, on retourne à `next` si fourni (cas où l'utilisateur a tenté
// d'accéder à /admin/X sans token et a été redirigé ici).
function postLoginTarget(): { name: string } | string {
  const next = route.query.next
  if (typeof next === 'string' && next.startsWith('/') && next !== '/admin/login') {
    return next
  }
  return { name: 'admin-overview' }
}
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 {
    // L'API n'a pas de route "whoami". Trick : POST /api/members avec body vide
    // -> renvoie 422 si l'auth est OK (validation_failed), 401 si le token est faux.
    await api.post('/api/members', {})
    router.push(postLoginTarget())
  } 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(postLoginTarget())
      }
    } 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>
