"use client";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { ImmbotLogo, UqoLogo } from "@/components/logo";
import { Button, Card, Input, Label, Spinner } from "@/components/ui";

export default function LoginPage() {
  const router = useRouter();
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    setError(null);
    setLoading(true);
    try {
      const res = await fetch("/api/auth/login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ username, password }),
      });
      const data = await res.json();
      if (!res.ok) {
        setError(data.error ?? "Erreur de connexion.");
        return;
      }
      router.push(data.mustChangePassword ? "/changer-mot-de-passe?force=1" : "/chat");
      router.refresh();
    } catch {
      setError("Impossible de joindre le serveur.");
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="min-h-dvh bg-app flex flex-col items-center justify-center px-4">
      <Link href="/" className="mb-8"><ImmbotLogo size={34} /></Link>
      <Card className="w-full max-w-sm p-7 animate-fade-up">
        <h1 className="text-lg font-bold text-fg">Connexion</h1>
        <p className="text-sm text-muted mt-1">Accédez à vos cours d'évaluation immobilière.</p>
        <form onSubmit={submit} className="mt-6 space-y-4">
          <div>
            <Label htmlFor="username">Identifiant</Label>
            <Input id="username" value={username} onChange={(e) => setUsername(e.target.value)} autoComplete="username" autoFocus required />
          </div>
          <div>
            <Label htmlFor="password">Mot de passe</Label>
            <Input id="password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} autoComplete="current-password" required />
          </div>
          {error && <p className="text-sm text-red-600 dark:text-red-400 bg-red-500/10 rounded-lg px-3 py-2" role="alert">{error}</p>}
          <Button type="submit" className="w-full justify-center" disabled={loading}>
            {loading ? <Spinner /> : "Se connecter"}
          </Button>
        </form>
        <p className="text-[13px] text-muted mt-5 text-center">
          Pas de compte ? <Link href="/inscription" className="text-brand-500 font-medium hover:underline">S'inscrire</Link>
        </p>
      </Card>
      <div className="mt-8"><UqoLogo height={28} className="opacity-80 dark:invert" /></div>
    </div>
  );
}