<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { supabase } from "@/integrations/supabase/client";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Loader2, LogIn } from "lucide-vue-next";
import { useToast } from "@/components/ui/toast/use-toast";

const email = ref("");
const password = ref("");
const loading = ref(false);
const router = useRouter();
const { toast } = useToast();

const handleLogin = async (e: Event) => {
  e.preventDefault();
  loading.value = true;

  const { error } = await supabase.auth.signInWithPassword({ email: email.value, password: password.value });

  if (error) {
    // If user doesn't exist, try signup
    if (error.message.includes("Invalid login")) {
      const { error: signUpError } = await supabase.auth.signUp({
        email: email.value,
        password: password.value,
        options: { emailRedirectTo: window.location.origin },
      });
      if (signUpError) {
        toast({ title: "Erreur", description: signUpError.message, variant: "destructive" });
        loading.value = false;
        return;
      }
      toast({ title: "Compte créé", description: "Connexion en cours..." });
      // Auto-confirm is on, so sign in immediately
      const { error: loginErr } = await supabase.auth.signInWithPassword({ email: email.value, password: password.value });
      if (loginErr) {
        toast({ title: "Erreur", description: loginErr.message, variant: "destructive" });
        loading.value = false;
        return;
      }
    } else {
      toast({ title: "Erreur", description: error.message, variant: "destructive" });
      loading.value = false;
      return;
    }
  }

  router.push("/admin/import");
  loading.value = false;
};
</script>

<template>
  <div class="min-h-screen bg-background flex items-center justify-center">
    <div class="w-full max-w-sm space-y-6 p-6">
      <div class="text-center space-y-2">
        <h1 class="font-display text-2xl font-bold">Administration</h1>
        <p class="text-sm text-muted-foreground">Connectez-vous pour accéder à l'import</p>
      </div>
      <form @submit="handleLogin" class="space-y-4">
        <div class="space-y-2">
          <Label for="email">Courriel</Label>
          <Input
            id="email"
            type="email"
            v-model="email"
            placeholder="admin@targo.ca"
            required
          />
        </div>
        <div class="space-y-2">
          <Label for="password">Mot de passe</Label>
          <Input
            id="password"
            type="password"
            v-model="password"
            placeholder="••••••••"
            required
            :minlength="6"
          />
        </div>
        <Button type="submit" class="w-full" :disabled="loading">
          <Loader2 v-if="loading" class="w-4 h-4 animate-spin mr-2" />
          <LogIn v-else class="w-4 h-4 mr-2" />
          Se connecter
        </Button>
      </form>
    </div>
  </div>
</template>
