import { useEffect, useState, type FormEvent } from 'react';
import { Link, useNavigate, useSearchParams } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import { ArrowLeft, Lock, Mail, MailCheck, ShieldCheck } from 'lucide-react';
import { api, setToken } from '@/lib/api';
import type { User } from '@/lib/types';
import { useAuth } from '@/stores/auth';
import { Logo } from '@/components/ui/logo';
import { Button } from '@/components/ui/button';
import { Spinner } from '@/components/ui/spinner';

export interface AuthConfig { mail: boolean; password: boolean; min_password: number; domains: string[]; courses: string[]; term: string }
interface LoginResp { mode: string; token?: string; user?: User }
interface ForgotResp { sent: boolean; first_time: boolean; ttl_minutes: number; dev_link?: string; hint?: string }

export function LoginPage() {
  const nav = useNavigate();
  const [params] = useSearchParams();
  const setUser = useAuth((s) => s.setUser);
  const { data: cfg } = useQuery({ queryKey: ['auth-config'], queryFn: () => api<AuthConfig>('/auth/config') });
  const [email, setEmail] = useState(params.get('email') || '');
  const [password, setPassword] = useState('');
  const [mode, setMode] = useState<'password' | 'forgot'>(params.get('mode') === 'forgot' ? 'forgot' : 'password');
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [sent, setSent] = useState<ForgotResp | null>(null);
  const [consent, setConsent] = useState(false);
  const token = params.get('token');

  // Legacy direct sign-in links (/connexion?token=…) sent before the password flow.
  useEffect(() => {
    if (!token) return;
    setBusy(true);
    api<LoginResp>('/auth/verify', { method: 'POST', body: JSON.stringify({ token }) })
      .then((r) => { if (r.token) setToken(r.token); if (r.user) setUser(r.user); nav('/', { replace: true }); })
      .catch((e) => setError(e.message))
      .finally(() => setBusy(false));
  }, [token, nav, setUser]);

  const submit = async (e: FormEvent) => {
    e.preventDefault();
    setError(null);
    setSent(null);
    setBusy(true);
    try {
      if (mode === 'forgot') {
        const r = await api<ForgotResp>('/auth/forgot', { method: 'POST', body: JSON.stringify({ email: email.trim() }) });
        setSent(r);
        return;
      }
      if (!consent) { setError('Merci d\'accepter la politique de confidentialité pour continuer.'); return; }
      const r = await api<LoginResp>('/auth/login', { method: 'POST', body: JSON.stringify({ email: email.trim(), password }) });
      if (r.token) setToken(r.token);
      if (r.user) setUser(r.user);
      await api('/me/consent', { method: 'POST' }).catch(() => undefined);
      nav('/', { replace: true });
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Connexion impossible.');
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="min-h-[100dvh] flex flex-col bg-neutral-surface">
      <div className="relative overflow-hidden bg-uqo-gradient text-white px-6 pt-[calc(28px+var(--safe-top))] pb-16">
        <svg className="absolute -right-16 -top-16 h-72 w-72 opacity-10" viewBox="0 0 200 200" aria-hidden="true"><circle cx="100" cy="100" r="100" fill="white" /></svg>
        <div className="mx-auto max-w-[440px]">
          <Logo inverted size="lg" />
          <p className="mt-5 text-[15px] text-white/85 max-w-[380px]">Comprendre, pratiquer et calculer en évaluation immobilière — avec un tuteur qui cite tes notes de cours.</p>
        </div>
      </div>
      <div className="flex-1 px-4 -mt-9 pb-[calc(24px+var(--safe-bottom))]">
        <form onSubmit={submit} className="relative z-10 mx-auto max-w-[440px] rounded-[24px] bg-white shadow-float p-6 space-y-4 animate-fadein">
          {mode === 'password' ? (
            <div>
              <h1 className="text-xl font-bold text-uqo-blue-dark">Connexion</h1>
              <p className="text-sm text-neutral-muted mt-1">IMM1003 · IMM1033 · {cfg?.term || ''}. Réservé aux étudiant·es inscrit·es par le professeur (courriel <b>@{cfg?.domains?.[0] || 'uqo.ca'}</b>).</p>
            </div>
          ) : (
            <div>
              <button type="button" onClick={() => { setMode('password'); setSent(null); setError(null); }} className="inline-flex items-center gap-1 text-sm text-uqo-blue min-h-[32px]"><ArrowLeft size={16} /> Retour</button>
              <h1 className="text-xl font-bold text-uqo-blue-dark mt-1">Première connexion ou mot de passe oublié</h1>
              <p className="text-sm text-neutral-muted mt-1">Saisis ton courriel UQO : tu recevras un lien pour choisir ton mot de passe. Le lien est valide {sent?.ttl_minutes ?? 60} minutes.</p>
            </div>
          )}
          {token && busy && <div className="flex items-center gap-2 text-sm"><Spinner /> Vérification du lien…</div>}
          {sent ? (
            <div className="rounded-2xl bg-uqo-blue-light p-4 text-sm text-uqo-blue-dark space-y-2">
              <div className="flex items-center gap-2 font-semibold"><MailCheck size={18} /> {sent.sent ? 'Courriel envoyé' : 'Courriel non envoyé'}</div>
              {sent.sent && <p>Ouvre le message « {sent.first_time ? 'Choisis ton mot de passe UQO-Chat' : 'Réinitialisation de ton mot de passe UQO-Chat'} » envoyé à <b>{email.trim()}</b> et clique sur le bouton. Pense à vérifier les indésirables.</p>}
              {sent.hint && <p>{sent.hint}</p>}
              {sent.dev_link && <p className="break-all">Mode développement — lien : <a className="underline" href={sent.dev_link}>{sent.dev_link}</a></p>}
              <button type="button" onClick={() => { setMode('password'); setSent(null); }} className="text-uqo-blue underline min-h-[32px]">Retour à la connexion</button>
            </div>
          ) : (
            <>
              <label className="block">
                <span className="text-sm font-medium">Courriel UQO</span>
                <span className="mt-1 flex items-center rounded-xl border border-neutral-line focus-within:border-uqo-blue">
                  <Mail size={18} className="ml-3 text-neutral-muted" />
                  <input type="email" required autoComplete="username" inputMode="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="prenom.nom@uqo.ca" className="h-12 flex-1 bg-transparent px-3 outline-none" />
                </span>
              </label>
              {mode === 'password' && (
                <div>
                  <label className="block">
                    <span className="text-sm font-medium">Mot de passe</span>
                    <span className="mt-1 flex items-center rounded-xl border border-neutral-line focus-within:border-uqo-blue">
                      <Lock size={18} className="ml-3 text-neutral-muted" />
                      <input type="password" required value={password} onChange={(e) => setPassword(e.target.value)} autoComplete="current-password" className="h-12 flex-1 bg-transparent px-3 outline-none" />
                    </span>
                  </label>
                  <button type="button" onClick={() => { setMode('forgot'); setError(null); }} className="mt-1.5 text-sm text-uqo-blue underline min-h-[32px] text-left">Première connexion ou mot de passe oublié ?</button>
                </div>
              )}
              {mode === 'password' && (
                <label className="flex items-start gap-2 text-sm">
                  <input type="checkbox" checked={consent} onChange={(e) => setConsent(e.target.checked)} className="mt-1 h-4 w-4 accent-uqo-blue" />
                  <span>J'ai lu la <a href="/confidentialite" target="_blank" className="text-uqo-blue underline">politique de confidentialité</a> et j'accepte que mes conversations soient traitées pour m'aider dans le cours (Loi 25).</span>
                </label>
              )}
              {error && <p className="text-sm text-semantic-error">{error}</p>}
              <Button type="submit" size="lg" className="w-full" disabled={busy}>{busy ? <Spinner className="text-white" /> : mode === 'forgot' ? 'Recevoir le lien par courriel' : 'Se connecter'}</Button>
            </>
          )}
          <p className="text-xs text-neutral-muted flex items-start gap-1.5"><ShieldCheck size={14} className="shrink-0 mt-0.5" /> Outil pédagogique. Ne remplace pas un évaluateur agréé (É.A.) de l'OEAQ. L'utilisation de l'IA doit être déclarée dans tes travaux, conformément au plan de cours.</p>
          <p className="text-xs text-neutral-muted">Pas encore de compte ? Ton professeur doit ajouter ton courriel dans UQO-Chat ; tu recevras alors une invitation. <Link to="/confidentialite" className="underline">Confidentialité</Link></p>
        </form>
      </div>
    </div>
  );
}