"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, cn } from "@/components/ui";

const COURSES = [
  { code: "IMM1003" as const, title: "Éléments d'évaluation immobilière", session: "Automne 2026" },
  { code: "IMM1033" as const, title: "Méthodes du coût", session: "Automne 2026" },
];

export default function RegisterPage() {
  const router = useRouter();
  const [form, setForm] = useState({ username: "", displayName: "", email: "", password: "", accessCode: "" });
  const [courses, setCourses] = useState<string[]>(["IMM1003"]);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  const set = (k: keyof typeof form) => (e: React.ChangeEvent<HTMLInputElement>) =>
    setForm((f) => ({ ...f, [k]: e.target.value }));

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    setError(null);
    if (courses.length === 0) return setError("Choisissez au moins un cours.");
    setLoading(true);
    try {
      const res = await fetch("/api/auth/register", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ ...form, courses }),
      });
      const data = await res.json();
      if (!res.ok) return setError(data.error ?? "Erreur d'inscription.");
      router.push("/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 py-10">
      <Link href="/" className="mb-8"><ImmbotLogo size={34} /></Link>
      <Card className="w-full max-w-md p-7 animate-fade-up">
        <h1 className="text-lg font-bold text-fg">Créer un compte étudiant</h1>
        <p className="text-sm text-muted mt-1">Choisissez vos cours et commencez à étudier.</p>
        <form onSubmit={submit} className="mt-6 space-y-4">
          <div className="grid grid-cols-2 gap-3">
            <div>
              <Label htmlFor="username">Identifiant</Label>
              <Input id="username" value={form.username} onChange={set("username")} autoComplete="username" required minLength={3} />
            </div>
            <div>
              <Label htmlFor="displayName">Nom affiché</Label>
              <Input id="displayName" value={form.displayName} onChange={set("displayName")} autoComplete="name" required />
            </div>
          </div>
          <div>
            <Label htmlFor="email">Courriel (optionnel)</Label>
            <Input id="email" type="email" value={form.email} onChange={set("email")} autoComplete="email" placeholder="prenom.nom@uqo.ca" />
          </div>
          <div>
            <Label htmlFor="password">Mot de passe (10 caractères minimum)</Label>
            <Input id="password" type="password" value={form.password} onChange={set("password")} autoComplete="new-password" required minLength={10} />
          </div>
          <div>
            <Label>Vos cours</Label>
            <div className="grid gap-2.5">
              {COURSES.map((c) => {
                const on = courses.includes(c.code);
                return (
                  <button
                    key={c.code}
                    type="button"
                    aria-pressed={on}
                    onClick={() => setCourses((cs) => (on ? cs.filter((x) => x !== c.code) : [...cs, c.code]))}
                    className={cn(
                      "flex items-center justify-between px-4 py-3 rounded-xl border text-left transition-colors",
                      on ? "border-brand-500 bg-brand-100/60 dark:bg-brand-900/50" : "border-app bg-card hover:bg-surface-2 dark:hover:bg-brand-900/30"
                    )}
                  >
                    <span>
                      <span className="block text-sm font-semibold text-fg">{c.code} — {c.title}</span>
                      <span className="block text-[12px] text-muted mt-0.5">{c.session}</span>
                    </span>
                    <span className={cn("w-5 h-5 rounded-full border-2 flex items-center justify-center shrink-0", on ? "border-brand-500 bg-brand-500" : "border-app")}>
                      {on && <span className="text-white text-[11px] leading-none">✓</span>}
                    </span>
                  </button>
                );
              })}
            </div>
          </div>
          <div>
            <Label htmlFor="accessCode">Code d'accès (si fourni par le professeur)</Label>
            <Input id="accessCode" value={form.accessCode} onChange={set("accessCode")} placeholder="Optionnel" />
          </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 /> : "Créer mon compte"}
          </Button>
          <p className="text-[11.5px] text-muted text-center leading-relaxed">
            En créant un compte, vous acceptez les{" "}
            <Link href="/conditions" className="text-brand-500 hover:underline">conditions d'utilisation</Link> et la{" "}
            <Link href="/confidentialite" className="text-brand-500 hover:underline">politique de confidentialité</Link>{" "}
            (plateforme pédagogique réservée aux cours IMM1003 et IMM1033).
          </p>
        </form>
        <p className="text-[13px] text-muted mt-5 text-center">
          Déjà inscrit ? <Link href="/connexion" className="text-brand-500 font-medium hover:underline">Connexion</Link>
        </p>
      </Card>
      <div className="mt-8"><UqoLogo height={28} className="opacity-80 dark:invert" /></div>
    </div>
  );
}