import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Dialog } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { useUI } from '@/stores/ui';
import { useAuth } from '@/stores/auth';
import { api, setToken } from '@/lib/api';

export function SettingsDialog() {
  const { settingsOpen, setSettings } = useUI();
  const { user, updatePrefs } = useAuth();
  const nav = useNavigate();
  const [busy, setBusy] = useState(false);
  const [cur, setCur] = useState('');
  const [nw, setNw] = useState('');
  const [pwMsg, setPwMsg] = useState<string | null>(null);
  if (!user) return null;
  const p = user.preferences;

  const purge = async () => {
    if (!confirm('Supprimer définitivement toutes tes conversations, fichiers et ton compte ? Cette action est irréversible.')) return;
    setBusy(true);
    try {
      await api('/me', { method: 'DELETE' });
      setToken(null);
      useAuth.setState({ user: null });
      nav('/connexion');
    } finally {
      setBusy(false);
      setSettings(false);
    }
  };

  const Row = ({ label, children, hint }: { label: string; hint?: string; children: React.ReactNode }) => (
    <div className="flex items-center justify-between gap-4 py-3 border-b border-neutral-line/70 last:border-0">
      <div><div className="text-sm font-medium">{label}</div>{hint && <div className="text-xs text-neutral-muted">{hint}</div>}</div>
      {children}
    </div>
  );

  return (
    <Dialog open={settingsOpen} onOpenChange={setSettings} title="Préférences" description={user.email}>
      <Row label="Nom affiché">
        <input defaultValue={user.display_name || ''} onBlur={(e) => e.target.value !== user.display_name && updatePrefs({ display_name: e.target.value })} className="h-11 w-44 rounded-xl border border-neutral-line px-3 text-sm" />
      </Row>
      <Row label="Tutoiement" hint="Le tuteur te tutoie ou te vouvoie">
        <button onClick={() => updatePrefs({ tutoiement: !(p.tutoiement ?? true) })} className={`h-9 w-16 rounded-full relative transition-colors ${(p.tutoiement ?? true) ? 'bg-uqo-blue' : 'bg-neutral-line'}`} aria-pressed={p.tutoiement ?? true} aria-label="Tutoiement">
          <span className={`absolute top-1 h-7 w-7 rounded-full bg-white shadow transition-all ${(p.tutoiement ?? true) ? 'left-8' : 'left-1'}`} />
        </button>
      </Row>
      <Row label="Cours par défaut">
        <select value={p.course || 'IMM1003'} onChange={(e) => { updatePrefs({ course: e.target.value }); useUI.getState().setCourse(e.target.value); }} className="h-11 rounded-xl border border-neutral-line px-3 text-sm bg-white">
          <option>IMM1003</option><option>IMM1033</option>
        </select>
      </Row>
      <Row label="Réflexion approfondie par défaut" hint="Modèle plus puissant, plus lent et plus coûteux">
        <input type="checkbox" checked={!!p.deep} onChange={(e) => updatePrefs({ deep: e.target.checked })} className="h-5 w-5 accent-uqo-blue" />
      </Row>
      <Row label="Taille du texte">
        <div className="flex gap-1">
          {[0.9, 1, 1.15, 1.3].map((v) => (
            <button key={v} onClick={() => updatePrefs({ font_scale: v })} className={`h-9 px-2.5 rounded-lg text-sm border ${(p.font_scale ?? 1) === v ? 'bg-uqo-blue text-white border-uqo-blue' : 'border-neutral-line'}`}>{v === 0.9 ? 'A−' : v === 1 ? 'A' : v === 1.15 ? 'A+' : 'A++'}</button>
          ))}
        </div>
      </Row>
      <div className="mt-4 rounded-xl border border-neutral-line p-4 text-sm">
        <div className="font-medium">{user.has_password ? 'Changer mon mot de passe' : 'Définir un mot de passe'}</div>
        <p className="text-neutral-muted mt-1">Tu te connectes avec ton courriel et ce mot de passe. Oublié ? Utilise « Première connexion ou mot de passe oublié » sur la page de connexion.</p>
        <div className="mt-2 grid gap-2 sm:grid-cols-2">
          {user.has_password && <input type="password" value={cur} onChange={(e) => setCur(e.target.value)} placeholder="Mot de passe actuel" autoComplete="current-password" className="h-11 rounded-xl border border-neutral-line px-3" />}
          <input type="password" value={nw} onChange={(e) => setNw(e.target.value)} placeholder="Nouveau mot de passe (≥ 8)" autoComplete="new-password" className="h-11 rounded-xl border border-neutral-line px-3" />
        </div>
        <div className="mt-2 flex items-center gap-3">
          <Button size="sm" variant="secondary" disabled={nw.length < 8} onClick={() => api('/me/password', { method: 'POST', body: JSON.stringify({ current_password: cur || null, new_password: nw }) }).then(() => { setPwMsg('Mot de passe enregistré.'); setCur(''); setNw(''); useAuth.getState().load(); }).catch((e) => setPwMsg(e.message))}>Enregistrer</Button>
          {pwMsg && <span className="text-neutral-muted">{pwMsg}</span>}
        </div>
      </div>
      <div className="mt-4 rounded-xl bg-neutral-surface p-4 text-sm">
        <div className="font-medium">Vie privée (Loi 25)</div>
        <p className="text-neutral-muted mt-1">Tes conversations sont conservées 12 mois puis anonymisées ; les fichiers 7 jours (30 si épinglés). Aucune donnée n'est vendue ni utilisée pour entraîner des modèles. <a href="/confidentialite" className="text-uqo-blue underline">Politique complète</a>.</p>
        <Button variant="danger" size="sm" className="mt-3" onClick={purge} disabled={busy}>Supprimer mes données</Button>
      </div>
    </Dialog>
  );
}