<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useAuthStore } from "../stores/auth";
import { LogIn, ShieldCheck } from "lucide-vue-next";
import logoUrl from "../assets/SB Sports.jpg";

const router = useRouter();
const auth = useAuthStore();

const username = ref("");
const password = ref("");
const error = ref("");
const loading = ref(false);

async function handleLogin() {
  error.value = "";
  loading.value = true;
  try {
    await auth.login(username.value, password.value);
    router.push("/");
  } catch (e) {
    error.value = e.message;
  } finally {
    loading.value = false;
  }
}
</script>

<template>
  <div class="min-h-screen gradient-brand flex items-center justify-center p-6">
    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md p-10">
      <!-- Logo -->
      <div class="flex flex-col items-center mb-8">
        <img :src="logoUrl" alt="SB Sport" class="h-20 w-auto object-contain mb-2" />
      </div>

      <!-- Form -->
      <form @submit.prevent="handleLogin" class="flex flex-col gap-4">
        <div>
          <label class="block text-sm font-semibold text-gray-700 mb-1">
            Utilisateur
          </label>
          <input
            v-model="username"
            type="text"
            autocomplete="username"
            required
            placeholder="sanae"
            class="w-full border border-gray-300 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-800"
          />
        </div>

        <div>
          <label class="block text-sm font-semibold text-gray-700 mb-1">
            Mot de passe
          </label>
          <input
            v-model="password"
            type="password"
            autocomplete="current-password"
            required
            class="w-full border border-gray-300 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-800"
          />
        </div>

        <p v-if="error" class="text-red-500 text-sm text-center">{{ error }}</p>

        <button
          type="submit"
          :disabled="loading"
          class="flex items-center justify-center gap-2 bg-blue-900 hover:bg-blue-800 disabled:opacity-60 text-white font-semibold py-3 rounded-xl transition-colors mt-2"
        >
          <LogIn class="w-4 h-4" />
          {{ loading ? "Connexion…" : "Se connecter" }}
        </button>
      </form>

      <div
        class="flex items-center justify-center gap-1 mt-6 text-xs text-gray-400"
      >
        <ShieldCheck class="w-3 h-3" />
        Accès sécurisé
      </div>
    </div>
  </div>
</template>
