import { useState, type FormEvent } from 'react';
import { Link, useNavigate, useSearchParams } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import { CheckCircle2, Eye, EyeOff, Lock, ShieldCheck, XCircle } from 'lucide-react';
import { api, ApiError, 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';

interface TokenInfo { email: string; purpose: 'invite' | 'reset'; first_time: boolean; display_name: string | null; expires_at: string }
interface SetResp { token?: string; user?: User }

const MIN = 8;

function strength(pw: string): { score: number; label: string } {
  let s = 0;
  if (pw.length >= MIN) s++;
  if (pw.length >= 12) s++;
  if (/[a-z]/.test(pw) && /[A-Z]/.test(pw)) s++;
  if (/\d/.test(pw)) s++;
  if (/[^A-Za-z0-9]/.test(pw)) s++;
  const label = pw.length < MIN ? 'Trop court' : s <= 2 ? 'Faible' : s === 3 ? 'Correct' : s === 4 ? 'Bon' : 'Excellent';
  return { score: pw.length < MIN ? 0 : s, label };
}

/** /mot-de-passe?token=… — first activation (invitation) or password reset. */
export function SetPasswordPage() {
  const nav = useNavigate();
  const [params] = useSearchParams();
  const token = params.get('token') || '';
  const setUser = useAuth((s) => s.setUser);
  const info = useQuery({
    queryKey: ['password-token', token],
    queryFn: () => api<TokenInfo>(`/auth/password-token?token=${encodeURIComponent(token)}`),
    enabled: !!token,
    retry: false,
  });
  const [pw, setPw] = useState('');
  const [pw2, setPw2] = useState('');
  const [show, setShow] = useState(false);
  const [consent, setConsent] = useState(false);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const st = strength(pw);
  const firstTime = info.data?.first_time ?? true;

  const submit = async (e: FormEvent) => {
    e.preventDefault();
    setError(null);
    if (pw.length < MIN) { setError(`Le mot de passe doit contenir au moins ${MIN} caractères.`); return; }
    if (pw !== pw2) { setError('Les deux mots de passe ne correspondent pas.'); return; }
    if (firstTime && !consent) { setError('Merci d\'accepter la politique de confidentialité pour continuer.'); return; }
    setBusy(true);
    try {
      const r = await api<SetResp>('/auth/set-password', { method: 'POST', body: JSON.stringify({ token, password: pw }) });
      if (r.token) setToken(r.token);
      if (r.user) setUser(r.user);
      if (firstTime) await api('/me/consent', { method: 'POST' }).catch(() => undefined);
      nav('/', { replace: true });
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Impossible d\'enregistrer le mot de passe.');
    } finally {
      setBusy(false);
    }
  };

  const invalid = !token || (info.isError && (info.error as ApiError | undefined)?.status === 400) || info.isError;
  const title = info.data ? (firstTime ? 'Choisis ton mot de passe' : 'Nouveau mot de passe') : 'Mot de passe';

  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]">{firstTime ? 'Bienvenue ! Une dernière étape avant de commencer avec ton tuteur.' : 'Choisis un nouveau mot de passe pour ton compte.'}</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">
          {info.isLoading && token && <div className="flex items-center gap-2 text-sm"><Spinner /> Vérification du lien…</div>}
          {invalid && !info.isLoading && (
            <div className="space-y-3">
              <div className="flex items-center gap-2 text-semantic-error font-semibold"><XCircle size={20} /> Lien invalide ou expiré</div>
              <p className="text-sm text-neutral-muted">Les liens ne servent qu'une fois et expirent. Demande un nouveau lien : il arrivera par courriel en quelques secondes.</p>
              <Link to="/connexion?mode=forgot" className="block"><Button type="button" size="lg" className="w-full">Demander un nouveau lien</Button></Link>
              <Link to="/connexion" className="block text-center text-sm text-uqo-blue underline min-h-[32px]">Retour à la connexion</Link>
            </div>
          )}
          {info.data && (
            <>
              <div>
                <h1 className="text-xl font-bold text-uqo-blue-dark">{title}</h1>
                <p className="text-sm text-neutral-muted mt-1">Compte <b>{info.data.email}</b>{info.data.display_name && !info.data.display_name.includes('@') ? ` · ${info.data.display_name}` : ''}. Tu te connecteras ensuite avec ce courriel et ce mot de passe.</p>
              </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={show ? 'text' : 'password'} required minLength={MIN} value={pw} onChange={(e) => setPw(e.target.value)} autoComplete="new-password" placeholder={`${MIN} caractères minimum`} className="h-12 flex-1 bg-transparent px-3 outline-none" />
                  <button type="button" onClick={() => setShow((s) => !s)} className="h-12 w-12 inline-flex items-center justify-center text-neutral-muted" aria-label={show ? 'Masquer' : 'Afficher'}>{show ? <EyeOff size={18} /> : <Eye size={18} />}</button>
                </span>
                {pw && (
                  <span className="mt-2 flex items-center gap-2 text-xs text-neutral-muted">
                    <span className="flex gap-1 flex-1">{[1, 2, 3, 4, 5].map((i) => <span key={i} className={`h-1.5 flex-1 rounded-full ${i <= st.score ? (st.score <= 2 ? 'bg-semantic-error' : st.score === 3 ? 'bg-amber-400' : 'bg-uqo-green') : 'bg-neutral-line'}`} />)}</span>
                    <span className="w-20 text-right">{st.label}</span>
                  </span>
                )}
              </label>
              <label className="block">
                <span className="text-sm font-medium">Confirme le 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={show ? 'text' : 'password'} required value={pw2} onChange={(e) => setPw2(e.target.value)} autoComplete="new-password" className="h-12 flex-1 bg-transparent px-3 outline-none" />
                  {pw2 && (pw === pw2 ? <CheckCircle2 size={18} className="mr-3 text-uqo-green" /> : <XCircle size={18} className="mr-3 text-semantic-error" />)}
                </span>
              </label>
              {firstTime && (
                <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 || pw.length < MIN || pw !== pw2}>{busy ? <Spinner className="text-white" /> : firstTime ? 'Activer mon compte' : 'Enregistrer le mot de passe'}</Button>
              <p className="text-xs text-neutral-muted flex items-start gap-1.5"><ShieldCheck size={14} className="shrink-0 mt-0.5" /> Mot de passe chiffré (PBKDF2). Personne, pas même le professeur, ne peut le lire.</p>
            </>
          )}
        </form>
      </div>
    </div>
  );
}