import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
import { Header } from "@/components/Header";
import { Footer } from "@/components/Footer";
import { useState } from "react";
import { supabase } from "@/integrations/supabase/client";
import { toast } from "sonner";

export const Route = createFileRoute("/auth")({
  head: () => ({ meta: [{ title: "Connexion — ORIS" }, { name: "robots", content: "noindex" }] }),
  component: AuthPage,
});

function AuthPage() {
  const [mode, setMode] = useState<"signin" | "signup">("signin");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();

  async function onSubmit(e: React.FormEvent) {
    e.preventDefault();
    setLoading(true);
    try {
      if (mode === "signup") {
        const { error } = await supabase.auth.signUp({ email, password, options: { emailRedirectTo: `${window.location.origin}/admin` } });
        if (error) throw error;
        toast.success("Compte créé. Vous êtes connecté.");
      } else {
        const { error } = await supabase.auth.signInWithPassword({ email, password });
        if (error) throw error;
      }
      navigate({ to: "/admin" });
    } catch (err: any) {
      toast.error(err.message ?? "Erreur");
    } finally { setLoading(false); }
  }

  return (
    <>
      <Header />
      <main className="mx-auto max-w-md px-6 py-20">
        <div className="rounded-2xl border border-border bg-card/60 p-8 backdrop-blur shadow-elegant">
          <h1 className="font-display text-3xl font-bold text-gradient">
            {mode === "signin" ? "Connexion" : "Créer un compte"}
          </h1>
          <p className="mt-2 text-sm text-muted-foreground">Accès au tableau de bord administrateur.</p>
          <form onSubmit={onSubmit} className="mt-6 space-y-4">
            <div>
              <label className="text-sm font-medium">Email</label>
              <input type="email" required value={email} onChange={(e) => setEmail(e.target.value)} className="mt-2 w-full rounded-lg bg-input/60 border border-border px-4 py-3 text-sm focus:outline-none focus:border-primary" />
            </div>
            <div>
              <label className="text-sm font-medium">Mot de passe</label>
              <input type="password" required minLength={6} value={password} onChange={(e) => setPassword(e.target.value)} className="mt-2 w-full rounded-lg bg-input/60 border border-border px-4 py-3 text-sm focus:outline-none focus:border-primary" />
            </div>
            <button disabled={loading} type="submit" className="w-full rounded-full bg-primary px-6 py-3 text-sm font-medium text-primary-foreground shadow-glow disabled:opacity-50">
              {loading ? "..." : mode === "signin" ? "Se connecter" : "Créer le compte"}
            </button>
          </form>
          <button onClick={() => setMode(mode === "signin" ? "signup" : "signin")} className="mt-4 text-xs text-muted-foreground hover:text-foreground">
            {mode === "signin" ? "Pas de compte ? Créer" : "Déjà un compte ? Se connecter"}
          </button>
          <p className="mt-6 text-xs text-muted-foreground">
            <Link to="/" className="hover:text-foreground">← Retour au site</Link>
          </p>
        </div>
      </main>
      <Footer />
    </>
  );
}