"use client";
// Paramètres : profil (lecture), changement de mot de passe, thème,
// raccourcis clavier documentés, transparence (à propos).
import { useState } from "react";
import { Info, Keyboard, KeyRound, Palette, UserRound } from "lucide-react";
import { PageHeader } from "@/components/app-shell";
import { Button, Card, Input, Label, Spinner } from "@/components/ui";
import { ThemeToggle } from "@/components/theme-toggle";
import { ErrorBanner, postJson } from "./shared";

const SHORTCUTS: { keys: string[]; description: string }[] = [
  { keys: ["⌘", "K"], description: "Nouvelle conversation dans le chat" },
  { keys: ["⌘", "J"], description: "Ouvrir le centre d'apprentissage" },
  { keys: ["Échap"], description: "Arrêter la réponse en cours (chat) ou fermer un panneau" },
  { keys: ["Entrée"], description: "Envoyer le message (Maj+Entrée : nouvelle ligne)" },
  { keys: ["Espace"], description: "Retourner la carte mémoire (flashcards)" },
  { keys: ["1", "–", "4"], description: "Noter la carte : Encore / Difficile / Bien / Facile" },
];

export function SettingsApp({
  displayName,
  username,
  email,
  role,
}: {
  displayName: string;
  username: string;
  email: string | null;
  role: "student" | "instructor" | "admin";
}) {
  const [current, setCurrent] = useState("");
  const [next, setNext] = useState("");
  const [confirmPwd, setConfirmPwd] = useState("");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState(false);

  async function changePassword(e: React.FormEvent) {
    e.preventDefault();
    setError(null);
    setSuccess(false);
    if (next !== confirmPwd) {
      setError("La confirmation ne correspond pas au nouveau mot de passe.");
      return;
    }
    setBusy(true);
    try {
      await postJson("/api/auth/change-password", { currentPassword: current, newPassword: next });
      setSuccess(true);
      setCurrent("");
      setNext("");
      setConfirmPwd("");
    } catch (err) {
      setError(err instanceof Error ? err.message : "Erreur lors du changement de mot de passe.");
    } finally {
      setBusy(false);
    }
  }

  const roleLabel = role === "student" ? "Étudiant·e" : role === "admin" ? "Administrateur" : "Professeur";

  return (
    <main className="px-4 sm:px-6 py-6 max-w-2xl mx-auto w-full space-y-6">
      <PageHeader title="Paramètres" subtitle="Votre compte, votre affichage et le fonctionnement de la plateforme." />

      {/* Profil */}
      <Card className="p-5">
        <h2 className="flex items-center gap-2 font-semibold text-fg mb-4"><UserRound size={17} className="text-brand-500" /> Profil</h2>
        <dl className="grid grid-cols-[130px_1fr] gap-y-2.5 text-sm">
          <dt className="text-muted">Nom affiché</dt>
          <dd className="text-fg font-medium">{displayName}</dd>
          <dt className="text-muted">Identifiant</dt>
          <dd className="text-fg font-mono text-[13px]">{username}</dd>
          {email && (
            <>
              <dt className="text-muted">Courriel</dt>
              <dd className="text-fg">{email}</dd>
            </>
          )}
          <dt className="text-muted">Rôle</dt>
          <dd className="text-fg">{roleLabel}</dd>
        </dl>
        <p className="text-[12px] text-muted mt-3">Pour modifier votre nom affiché ou vos cours, contactez votre professeur.</p>
      </Card>

      {/* Mot de passe */}
      <Card className="p-5">
        <h2 className="flex items-center gap-2 font-semibold text-fg mb-4"><KeyRound size={17} className="text-brand-500" /> Mot de passe</h2>
        <form onSubmit={changePassword} className="space-y-3.5">
          <div>
            <Label htmlFor="pwd-current">Mot de passe actuel</Label>
            <Input
              id="pwd-current" type="password" required autoComplete="current-password"
              value={current} onChange={(e) => setCurrent(e.target.value)}
            />
          </div>
          <div className="grid sm:grid-cols-2 gap-3.5">
            <div>
              <Label htmlFor="pwd-new">Nouveau mot de passe</Label>
              <Input
                id="pwd-new" type="password" required autoComplete="new-password" minLength={8}
                value={next} onChange={(e) => setNext(e.target.value)}
              />
            </div>
            <div>
              <Label htmlFor="pwd-confirm">Confirmer le nouveau</Label>
              <Input
                id="pwd-confirm" type="password" required autoComplete="new-password"
                value={confirmPwd} onChange={(e) => setConfirmPwd(e.target.value)}
              />
            </div>
          </div>
          {error && <ErrorBanner message={error} />}
          {success && (
            <p className="text-sm text-emerald-600 dark:text-emerald-400 bg-emerald-500/10 border border-emerald-500/25 rounded-xl px-4 py-3" role="status">
              Mot de passe modifié — vos autres sessions ont été déconnectées par sécurité.
            </p>
          )}
          <Button type="submit" disabled={busy || !current || !next || !confirmPwd}>
            {busy ? <Spinner /> : "Changer le mot de passe"}
          </Button>
        </form>
      </Card>

      {/* Thème */}
      <Card className="p-5">
        <h2 className="flex items-center gap-2 font-semibold text-fg mb-3"><Palette size={17} className="text-brand-500" /> Thème</h2>
        <div className="flex items-center gap-3">
          <ThemeToggle className="border border-app bg-card" />
          <p className="text-[13px] text-muted">
            Cliquez pour alterner entre clair, sombre et système. « Système » suit automatiquement le réglage de votre
            appareil. Le choix est mémorisé sur cet appareil.
          </p>
        </div>
      </Card>

      {/* Raccourcis clavier */}
      <Card className="p-5">
        <h2 className="flex items-center gap-2 font-semibold text-fg mb-4"><Keyboard size={17} className="text-brand-500" /> Raccourcis clavier</h2>
        <ul className="space-y-2.5">
          {SHORTCUTS.map((s, i) => (
            <li key={i} className="flex items-center gap-3 text-sm">
              <span className="flex gap-1 shrink-0 w-24">
                {s.keys.map((k, j) => (
                  <kbd key={j} className="px-1.5 py-0.5 rounded-md border border-app bg-surface-2 dark:bg-brand-900/50 text-[11.5px] font-semibold text-fg font-mono">
                    {k}
                  </kbd>
                ))}
              </span>
              <span className="text-fg">{s.description}</span>
            </li>
          ))}
        </ul>
      </Card>

      {/* À propos / transparence */}
      <Card className="p-5">
        <h2 className="flex items-center gap-2 font-semibold text-fg mb-4"><Info size={17} className="text-brand-500" /> À propos et transparence</h2>
        <div className="space-y-4 text-[13.5px] leading-relaxed text-fg">
          <div>
            <h3 className="font-semibold mb-1">Modes de connaissances</h3>
            <p className="text-muted">
              <strong className="text-fg">Cours uniquement</strong> (par défaut) : les réponses s'appuient exclusivement sur le
              matériel officiel des cours, avec les diapositives citées.{" "}
              <strong className="text-fg">Cours + général</strong> : le matériel cité est complété par les connaissances du
              modèle, clairement distinguées.{" "}
              <strong className="text-fg">Général</strong> : réponse sans le matériel du cours, toujours signalée comme telle.
            </p>
          </div>
          <div>
            <h3 className="font-semibold mb-1">Origine des données</h3>
            <p className="text-muted">
              Le contenu pédagogique provient des documents officiels d'IMM1003 et IMM1033 (UQO), indexés localement.
              Vos activités (cartes, quiz, examens) restent sur le serveur du cours et servent uniquement à estimer votre
              maîtrise et à personnaliser les recommandations. La maîtrise affichée est une <em>estimation</em>, jamais une note.
            </p>
          </div>
          <div>
            <h3 className="font-semibold mb-1">Budget d'usage</h3>
            <p className="text-muted">
              Les fonctions d'IA (chat, résumés, génération de cartes) consomment un budget partagé plafonné par personne et
              par jour, pour garder la plateforme équitable et durable. Si vous atteignez la limite, un message vous l'indique —
              les révisions (flashcards, quiz, examens) restent toujours disponibles, car elles ne consomment pas d'IA.
            </p>
          </div>
          <div>
            <h3 className="font-semibold mb-1">Limites</h3>
            <p className="text-muted">
              Immbot AI peut se tromper. Vérifiez les sources citées, signalez les erreurs avec l'icône drapeau du chat, et
              référez-vous aux documents officiels du cours en cas de doute.
            </p>
          </div>
        </div>
      </Card>
    </main>
  );
}