"use client";

import { useState, useEffect, useCallback, useRef } from "react";

/* ══════════════════════════════════════════════
   Types
   ══════════════════════════════════════════════ */

/** Entrée de l'historique des calculs */
interface HistoryEntry {
  expression: string;
  result: string;
  steps?: string[];
  timestamp: number;
}

/* ══════════════════════════════════════════════
   Constantes
   ══════════════════════════════════════════════ */

const HISTORY_KEY = "calc-history";
const THEME_KEY = "calc-theme";
const MAX_HISTORY = 50;

/* ══════════════════════════════════════════════
   Utilitaires mathématiques
   ══════════════════════════════════════════════ */

/** Calcule la factorielle d'un entier positif */
function factorial(n: number): number {
  if (n < 0) throw new Error("Factorielle non définie pour les nombres négatifs");
  if (n > 170) throw new Error("Nombre trop grand pour la factorielle");
  if (!Number.isInteger(n)) throw new Error("La factorielle nécessite un entier");
  if (n === 0 || n === 1) return 1;
  let result = 1;
  for (let i = 2; i <= n; i++) result *= i;
  return result;
}

/**
 * Évalue une expression mathématique de manière sécurisée.
 * Retourne le résultat et les étapes de calcul.
 */
function evaluateExpression(expr: string): { result: number; steps: string[] } {
  const steps: string[] = [];
  let processed = expr;

  // Étape 1 : Remplacer les constantes
  if (processed.includes("π") || processed.includes("e")) {
    processed = processed.replace(/π/g, `(${Math.PI})`);
    // Remplacer 'e' seulement quand c'est la constante (pas dans 'exp' etc.)
    processed = processed.replace(/(?<![a-zA-Z])e(?![a-zA-Z0-9.])/g, `(${Math.E})`);
    steps.push(`Constantes remplacées : ${processed}`);
  }

  // Étape 2 : Remplacer les opérateurs visuels
  processed = processed.replace(/×/g, "*").replace(/÷/g, "/");

  // Étape 3 : Traiter les factorielles (ex: 5!)
  const factRegex = /(\d+)!/g;
  let match;
  while ((match = factRegex.exec(processed)) !== null) {
    const n = parseInt(match[1]);
    const result = factorial(n);
    processed = processed.replace(match[0], result.toString());
    steps.push(`${n}! = ${result}`);
  }

  // Étape 4 : Traiter les fonctions scientifiques
  const funcMap: Record<string, (x: number) => number> = {
    sin: Math.sin,
    cos: Math.cos,
    tan: Math.tan,
    log: Math.log10,
    ln: Math.log,
    sqrt: Math.sqrt,
    "√": Math.sqrt,
  };

  for (const [name, fn] of Object.entries(funcMap)) {
    const escapedName = name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
    const regex = new RegExp(`${escapedName}\\(([^()]+)\\)`, "g");
    let funcMatch;
    while ((funcMatch = regex.exec(processed)) !== null) {
      const inner = funcMatch[1];
      // Évaluer l'expression interne d'abord
      const innerResult = safeEval(inner);
      const funcResult = fn(innerResult);
      processed = processed.replace(funcMatch[0], `(${funcResult})`);
      steps.push(`${name}(${inner}) = ${formatNumber(funcResult)}`);
      regex.lastIndex = 0; // Recommencer la recherche
    }
  }

  // Étape 5 : Traiter les puissances (^)
  processed = processed.replace(/\^/g, "**");

  // Étape 6 : Évaluer l'expression finale
  steps.push(`Expression finale : ${processed}`);
  const result = safeEval(processed);

  // Vérifier les erreurs
  if (!isFinite(result)) {
    if (isNaN(result)) throw new Error("Résultat indéfini");
    throw new Error("Division par zéro");
  }

  return { result, steps };
}

/** Évalue une expression arithmétique de manière sécurisée (sans eval) */
function safeEval(expr: string): number {
  // Vérifier que l'expression ne contient que des caractères autorisés
  const sanitized = expr.replace(/\s/g, "");
  if (!/^[0-9+\-*/().e]+$/i.test(sanitized)) {
    throw new Error("Expression invalide");
  }
  // Utiliser Function au lieu d'eval pour un scope isolé
  try {
    const fn = new Function(`"use strict"; return (${sanitized});`);
    return fn();
  } catch {
    throw new Error("Expression invalide");
  }
}

/** Formate un nombre pour l'affichage */
function formatNumber(n: number): string {
  if (Number.isInteger(n) && Math.abs(n) < 1e15) {
    return n.toString();
  }
  // Arrondir à 10 décimales max pour éviter les erreurs de flottant
  const rounded = parseFloat(n.toPrecision(12));
  if (Math.abs(rounded) < 1e-10 && rounded !== 0) {
    return rounded.toExponential(4);
  }
  if (Math.abs(rounded) >= 1e15) {
    return rounded.toExponential(4);
  }
  return rounded.toString();
}

/* ══════════════════════════════════════════════
   Composant principal : Calculator
   ══════════════════════════════════════════════ */

export default function Calculator() {
  // ── État ──
  const [expression, setExpression] = useState(""); // Expression en cours
  const [result, setResult] = useState(""); // Résultat calculé
  const [error, setError] = useState(""); // Message d'erreur
  const [steps, setSteps] = useState<string[]>([]); // Étapes de calcul
  const [showSteps, setShowSteps] = useState(false); // Afficher les étapes
  const [history, setHistory] = useState<HistoryEntry[]>([]); // Historique
  const [showHistory, setShowHistory] = useState(false); // Panneau historique visible
  const [isScientific, setIsScientific] = useState(false); // Mode scientifique
  const [isDark, setIsDark] = useState(false); // Thème sombre
  const [copied, setCopied] = useState(false); // Feedback copie
  const [lastKey, setLastKey] = useState(""); // Dernière touche pressée (feedback visuel)

  const displayRef = useRef<HTMLDivElement>(null);
  const simpleRef = useRef<HTMLButtonElement>(null);
  const sciRef = useRef<HTMLButtonElement>(null);

  // ── Chargement initial depuis localStorage ──
  useEffect(() => {
    try {
      const savedHistory = localStorage.getItem(HISTORY_KEY);
      if (savedHistory) setHistory(JSON.parse(savedHistory));

      const savedTheme = localStorage.getItem(THEME_KEY);
      if (savedTheme === "dark") {
        setIsDark(true);
        document.documentElement.classList.add("dark");
      } else if (savedTheme === "light") {
        setIsDark(false);
        document.documentElement.classList.remove("dark");
      } else {
        // Détecter la préférence système
        const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
        setIsDark(prefersDark);
      }
    } catch {
      // localStorage non disponible
    }
  }, []);

  // ── Sauvegarder l'historique dans localStorage ──
  useEffect(() => {
    try {
      localStorage.setItem(HISTORY_KEY, JSON.stringify(history));
    } catch {
      // localStorage non disponible
    }
  }, [history]);

  // ── Basculer le thème ──
  const toggleTheme = useCallback(() => {
    setIsDark((prev) => {
      const next = !prev;
      if (next) {
        document.documentElement.classList.add("dark");
        localStorage.setItem(THEME_KEY, "dark");
      } else {
        document.documentElement.classList.remove("dark");
        localStorage.setItem(THEME_KEY, "light");
      }
      return next;
    });
  }, []);

  // ── Ajouter un caractère à l'expression ──
  const append = useCallback((value: string) => {
    setError("");
    setResult("");
    setSteps([]);
    setShowSteps(false);
    setExpression((prev) => prev + value);
  }, []);

  // ── Effacer tout ──
  const clear = useCallback(() => {
    setExpression("");
    setResult("");
    setError("");
    setSteps([]);
    setShowSteps(false);
  }, []);

  // ── Supprimer le dernier caractère ──
  const backspace = useCallback(() => {
    setError("");
    setExpression((prev) => {
      // Vérifier si on doit supprimer un mot-clé entier (sin(, cos(, etc.)
      const keywords = ["sin(", "cos(", "tan(", "log(", "ln(", "sqrt(", "√("];
      for (const kw of keywords) {
        if (prev.endsWith(kw)) {
          return prev.slice(0, -kw.length);
        }
      }
      return prev.slice(0, -1);
    });
  }, []);

  // ── Calculer le résultat ──
  const calculate = useCallback(() => {
    if (!expression.trim()) return;

    try {
      const { result: numResult, steps: calcSteps } = evaluateExpression(expression);
      const formatted = formatNumber(numResult);
      setResult(formatted);
      setSteps(calcSteps);
      setError("");

      // Ajouter à l'historique
      const entry: HistoryEntry = {
        expression,
        result: formatted,
        steps: calcSteps,
        timestamp: Date.now(),
      };
      setHistory((prev) => [entry, ...prev].slice(0, MAX_HISTORY));
    } catch (err) {
      setError(err instanceof Error ? err.message : "Erreur de calcul");
      setResult("");
      setSteps([]);
    }
  }, [expression]);

  // ── Copier le résultat ──
  const copyResult = useCallback(async () => {
    const textToCopy = result || expression;
    if (!textToCopy) return;
    try {
      await navigator.clipboard.writeText(textToCopy);
      setCopied(true);
      setTimeout(() => setCopied(false), 1500);
    } catch {
      // Fallback
      const textarea = document.createElement("textarea");
      textarea.value = textToCopy;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand("copy");
      document.body.removeChild(textarea);
      setCopied(true);
      setTimeout(() => setCopied(false), 1500);
    }
  }, [result, expression]);

  // ── Effacer l'historique ──
  const clearHistory = useCallback(() => {
    setHistory([]);
    try {
      localStorage.removeItem(HISTORY_KEY);
    } catch {
      // ignore
    }
  }, []);

  // ── Charger une entrée de l'historique ──
  const loadFromHistory = useCallback((entry: HistoryEntry) => {
    setExpression(entry.expression);
    setResult(entry.result);
    setSteps(entry.steps || []);
    setError("");
  }, []);

  // ── Raccourcis clavier ──
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      // Ignorer si un input est focus
      if (
        document.activeElement instanceof HTMLInputElement ||
        document.activeElement instanceof HTMLTextAreaElement
      ) {
        return;
      }

      const key = e.key;
      setLastKey(key);
      setTimeout(() => setLastKey(""), 150);

      // Chiffres et opérateurs
      if (/^[0-9]$/.test(key)) {
        e.preventDefault();
        append(key);
      } else if (key === "+" || key === "-") {
        e.preventDefault();
        append(key);
      } else if (key === "*") {
        e.preventDefault();
        append("×");
      } else if (key === "/") {
        e.preventDefault();
        append("÷");
      } else if (key === ".") {
        e.preventDefault();
        append(".");
      } else if (key === "(" || key === ")") {
        e.preventDefault();
        append(key);
      } else if (key === "^") {
        e.preventDefault();
        append("^");
      } else if (key === "!" ) {
        e.preventDefault();
        append("!");
      } else if (key === "Enter" || key === "=") {
        e.preventDefault();
        calculate();
      } else if (key === "Backspace") {
        e.preventDefault();
        backspace();
      } else if (key === "Escape" || key === "Delete") {
        e.preventDefault();
        clear();
      } else if (key === "c" && (e.ctrlKey || e.metaKey)) {
        // Ctrl+C copie le résultat
        if (result) {
          e.preventDefault();
          copyResult();
        }
      }
    };

    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [append, calculate, backspace, clear, copyResult, result]);

  // ── Scroll automatique de l'affichage ──
  useEffect(() => {
    if (displayRef.current) {
      displayRef.current.scrollLeft = displayRef.current.scrollWidth;
    }
  }, [expression]);

  /* ════════════════════════════════════════════
     Boutons de la calculatrice
     ════════════════════════════════════════════ */

  // Boutons du mode simple
  const simpleButtons = [
    { label: "C", action: clear, style: "calc-btn-clear" },
    { label: "(", action: () => append("("), style: "calc-btn-op" },
    { label: ")", action: () => append(")"), style: "calc-btn-op" },
    { label: "÷", action: () => append("÷"), style: "calc-btn-op" },
    { label: "7", action: () => append("7"), style: "calc-btn-num" },
    { label: "8", action: () => append("8"), style: "calc-btn-num" },
    { label: "9", action: () => append("9"), style: "calc-btn-num" },
    { label: "×", action: () => append("×"), style: "calc-btn-op" },
    { label: "4", action: () => append("4"), style: "calc-btn-num" },
    { label: "5", action: () => append("5"), style: "calc-btn-num" },
    { label: "6", action: () => append("6"), style: "calc-btn-num" },
    { label: "−", action: () => append("-"), style: "calc-btn-op" },
    { label: "1", action: () => append("1"), style: "calc-btn-num" },
    { label: "2", action: () => append("2"), style: "calc-btn-num" },
    { label: "3", action: () => append("3"), style: "calc-btn-num" },
    { label: "+", action: () => append("+"), style: "calc-btn-op" },
    { label: "⌫", action: backspace, style: "calc-btn-clear" },
    { label: "0", action: () => append("0"), style: "calc-btn-num" },
    { label: ".", action: () => append("."), style: "calc-btn-num" },
    { label: "=", action: calculate, style: "calc-btn-equal" },
  ];

  // Boutons scientifiques supplémentaires
  const scientificButtons = [
    { label: "sin", action: () => append("sin("), style: "calc-btn-sci" },
    { label: "cos", action: () => append("cos("), style: "calc-btn-sci" },
    { label: "tan", action: () => append("tan("), style: "calc-btn-sci" },
    { label: "π", action: () => append("π"), style: "calc-btn-sci" },
    { label: "log", action: () => append("log("), style: "calc-btn-sci" },
    { label: "ln", action: () => append("ln("), style: "calc-btn-sci" },
    { label: "√", action: () => append("sqrt("), style: "calc-btn-sci" },
    { label: "e", action: () => append("e"), style: "calc-btn-sci" },
    { label: "x²", action: () => append("^2"), style: "calc-btn-sci" },
    { label: "xⁿ", action: () => append("^"), style: "calc-btn-sci" },
    { label: "n!", action: () => append("!"), style: "calc-btn-sci" },
    { label: "( )", action: () => {
      // Insertion intelligente de parenthèses
      const open = (expression.match(/\(/g) || []).length;
      const close = (expression.match(/\)/g) || []).length;
      append(open > close ? ")" : "(");
    }, style: "calc-btn-sci" },
  ];

  /* ════════════════════════════════════════════
     Rendu
     ════════════════════════════════════════════ */

  return (
    <div className="min-h-screen flex flex-col items-center justify-center p-4 sm:p-8 transition-colors duration-300">
      {/* Lien d'accessibilité : aller au contenu principal */}
      <a
        href="#calculatrice"
        className="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-50 focus:px-4 focus:py-2 focus:rounded-lg focus:bg-[var(--primary)] focus:text-white"
      >
        Aller à la calculatrice
      </a>

      {/* ── En-tête ── */}
      <header className="w-full max-w-lg mb-6 animate-fade-in">
        <div className="flex items-center justify-between">
          <h1 className="text-2xl sm:text-3xl font-bold tracking-tight">
            <span className="text-[var(--primary)]">Calc</span>ulatrice en ligne gratuite
          </h1>
          <div className="flex items-center gap-3">
            {/* Icône soleil/lune */}
            <span className="text-sm">{isDark ? "🌙" : "☀️"}</span>
            <button
              onClick={toggleTheme}
              className="theme-toggle"
              aria-label="Basculer le thème"
              title="Basculer thème clair/sombre"
            />
          </div>
        </div>

        {/* Toggle Simple / Scientifique */}
        <div className="mt-4 flex items-center gap-4">
          <div className="mode-toggle relative">
            <div
              className="mode-slider"
              style={{
                left: isScientific
                  ? (simpleRef.current?.offsetWidth ?? 80) + 2 + "px"
                  : "2px",
                width: isScientific
                  ? (sciRef.current?.offsetWidth ?? 100) + "px"
                  : (simpleRef.current?.offsetWidth ?? 80) + "px",
              }}
            />
            <button
              ref={simpleRef}
              className={!isScientific ? "active" : ""}
              onClick={() => setIsScientific(false)}
            >
              Simple
            </button>
            <button
              ref={sciRef}
              className={isScientific ? "active" : ""}
              onClick={() => setIsScientific(true)}
            >
              Scientifique
            </button>
          </div>

          {/* Bouton historique */}
          <button
            onClick={() => setShowHistory(!showHistory)}
            className="ml-auto flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors"
            style={{
              background: showHistory ? "var(--primary)" : "var(--surface)",
              color: showHistory ? "white" : "var(--muted)",
              border: `1px solid ${showHistory ? "transparent" : "var(--border-color)"}`,
            }}
            title="Historique des calculs"
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="12" cy="12" r="10" />
              <polyline points="12 6 12 12 16 14" />
            </svg>
            Historique
          </button>
        </div>
      </header>

      {/* ── Corps principal ── */}
      <main
        id="calculatrice"
        className="w-full max-w-lg animate-fade-in"
        style={{ animationDelay: "0.1s" }}
        role="application"
        aria-label="Calculatrice"
      >
        <div
          className="rounded-2xl overflow-hidden transition-shadow duration-300"
          style={{
            background: "var(--surface)",
            boxShadow: "var(--shadow-lg)",
            border: "1px solid var(--border-color)",
          }}
        >
          {/* ── Affichage ── */}
          <div className="calc-display m-3 sm:m-4 p-4 sm:p-5" role="region" aria-label="Écran de la calculatrice">
            {/* Expression en cours */}
            <div
              ref={displayRef}
              className="overflow-x-auto whitespace-nowrap text-right font-mono text-lg sm:text-xl min-h-[28px] custom-scrollbar"
              style={{ color: "var(--muted)" }}
              aria-label="Expression en cours"
              aria-live="polite"
            >
              {expression || <span className="opacity-40">0</span>}
            </div>

            {/* Résultat */}
            <div
              className="text-right font-mono text-3xl sm:text-4xl font-bold mt-2 min-h-[44px] flex items-center justify-end gap-2"
              aria-label={error ? `Erreur : ${error}` : `Résultat : ${result || '0'}`}
              aria-live="assertive"
              role="status"
            >
              {error ? (
                <span className="text-red-500 text-lg sm:text-xl animate-fade-in">{error}</span>
              ) : result ? (
                <span className="animate-fade-in">{result}</span>
              ) : (
                <span className="opacity-20">0</span>
              )}

              {/* Bouton copier */}
              {(result || expression) && (
                <button
                  onClick={copyResult}
                  className="p-1.5 rounded-lg transition-colors hover:bg-[var(--surface-hover)]"
                  title="Copier le résultat"
                >
                  {copied ? (
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#22c55e" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                      <polyline points="20 6 9 17 4 12" />
                    </svg>
                  ) : (
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--muted)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
                      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
                    </svg>
                  )}
                </button>
              )}
            </div>
          </div>

          {/* ── Étapes de calcul ── */}
          {steps.length > 0 && result && (
            <div className="mx-3 sm:mx-4 mb-2">
              <button
                onClick={() => setShowSteps(!showSteps)}
                className="text-xs font-medium flex items-center gap-1 px-2 py-1 rounded-md transition-colors"
                style={{ color: "var(--primary)" }}
              >
                <svg
                  width="12"
                  height="12"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  style={{
                    transform: showSteps ? "rotate(90deg)" : "rotate(0)",
                    transition: "transform 0.2s ease",
                  }}
                >
                  <polyline points="9 18 15 12 9 6" />
                </svg>
                Voir les étapes
              </button>
              {showSteps && (
                <div className="mt-1 p-3 rounded-lg text-xs font-mono space-y-1 animate-fade-in" style={{ background: "var(--display-bg)" }}>
                  {steps.map((step, i) => (
                    <div key={i} style={{ color: "var(--muted)" }}>
                      <span style={{ color: "var(--primary)" }}>→</span> {step}
                    </div>
                  ))}
                </div>
              )}
            </div>
          )}

          {/* ── Boutons scientifiques ── */}
          {isScientific && (
            <div
              className="grid grid-cols-4 gap-2 px-3 sm:px-4 pb-2 animate-fade-in"
              role="group"
              aria-label="Fonctions scientifiques"
            >
              {scientificButtons.map((btn) => (
                <button
                  key={btn.label}
                  onClick={btn.action}
                  className={`calc-btn ${btn.style} h-11 text-sm`}
                  aria-label={`Fonction ${btn.label}`}
                >
                  {btn.label}
                </button>
              ))}
            </div>
          )}

          {/* ── Boutons principaux ── */}
          <div
            className="grid grid-cols-4 gap-2 p-3 sm:p-4 pt-2"
            role="group"
            aria-label="Clavier de la calculatrice"
          >
            {simpleButtons.map((btn) => (
              <button
                key={btn.label}
                onClick={btn.action}
                className={`calc-btn ${btn.style} h-14 sm:h-16 text-lg ${
                  lastKey === btn.label ? "animate-press" : ""
                }`}
                aria-label={btn.label === "⌫" ? "Supprimer" : btn.label === "C" ? "Tout effacer" : btn.label === "=" ? "Calculer" : btn.label === "−" ? "Moins" : btn.label}
              >
                {btn.label}
              </button>
            ))}
          </div>
        </div>

        {/* ── Raccourcis clavier (info) ── */}
        <nav className="mt-3 text-center" aria-label="Informations sur les raccourcis">
          <p className="text-xs" style={{ color: "var(--muted)" }}>
            ⌨️ Raccourcis : chiffres, opérateurs, Entrée = calculer, Échap = effacer, Retour = supprimer
          </p>
        </nav>
      </main>

      {/* ── Panneau historique (slide-in) ── */}
      {showHistory && (
        <div
          className="fixed inset-0 z-50 flex justify-end"
          onClick={(e) => {
            if (e.target === e.currentTarget) setShowHistory(false);
          }}
        >
          {/* Fond semi-transparent */}
          <div className="absolute inset-0 bg-black/30 backdrop-blur-sm animate-fade-in" />

          {/* Panneau */}
          <div
            className="relative w-full max-w-sm h-full overflow-y-auto custom-scrollbar p-5 animate-fade-in"
            style={{
              background: "var(--surface)",
              borderLeft: "1px solid var(--border-color)",
              boxShadow: "var(--shadow-lg)",
            }}
          >
            <div className="flex items-center justify-between mb-4">
              <h2 className="text-lg font-bold">Historique</h2>
              <div className="flex items-center gap-2">
                {history.length > 0 && (
                  <button
                    onClick={clearHistory}
                    className="text-xs px-2 py-1 rounded-md text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
                  >
                    Tout effacer
                  </button>
                )}
                <button
                  onClick={() => setShowHistory(false)}
                  className="p-1 rounded-lg hover:bg-[var(--surface-hover)] transition-colors"
                  aria-label="Fermer l'historique"
                >
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <line x1="18" y1="6" x2="6" y2="18" />
                    <line x1="6" y1="6" x2="18" y2="18" />
                  </svg>
                </button>
              </div>
            </div>

            {history.length === 0 ? (
              <div className="text-center py-12" style={{ color: "var(--muted)" }}>
                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="mx-auto mb-3 opacity-30">
                  <circle cx="12" cy="12" r="10" />
                  <polyline points="12 6 12 12 16 14" />
                </svg>
                <p className="text-sm">Aucun calcul pour l&apos;instant</p>
                <p className="text-xs mt-1 opacity-60">Vos calculs apparaîtront ici</p>
              </div>
            ) : (
              <div className="space-y-2">
                {history.map((entry, i) => (
                  <div
                    key={entry.timestamp + "-" + i}
                    className="history-item animate-fade-in"
                    style={{ animationDelay: `${i * 0.03}s` }}
                    onClick={() => {
                      loadFromHistory(entry);
                      setShowHistory(false);
                    }}
                  >
                    <div className="font-mono text-sm truncate" style={{ color: "var(--muted)" }}>
                      {entry.expression}
                    </div>
                    <div className="font-mono text-lg font-bold truncate">
                      = {entry.result}
                    </div>
                    <div className="text-xs mt-1" style={{ color: "var(--muted)", opacity: 0.6 }}>
                      {new Date(entry.timestamp).toLocaleString("fr-FR", {
                        hour: "2-digit",
                        minute: "2-digit",
                        day: "2-digit",
                        month: "short",
                      })}
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      )}

      {/* ── Footer SEO avec contenu sémantique ── */}
      <footer className="mt-12 w-full max-w-2xl animate-fade-in" style={{ animationDelay: "0.3s" }}>
        {/* Contenu textuel riche pour le SEO */}
        <article className="mb-8 px-4">
          <h2 className="text-xl font-bold mb-3" style={{ color: "var(--foreground)" }}>
            Calculatrice en ligne gratuite
          </h2>
          <p className="text-sm leading-relaxed mb-4" style={{ color: "var(--muted)" }}>
            Notre calculatrice en ligne gratuite vous permet d&apos;effectuer tous vos calculs
            directement dans votre navigateur, sans installation ni inscription. Que vous ayez
            besoin d&apos;une simple addition ou d&apos;un calcul scientifique complexe avec des
            fonctions trigonométriques, notre outil s&apos;adapte à vos besoins.
          </p>

          <h2 className="text-lg font-semibold mb-2" style={{ color: "var(--foreground)" }}>
            Mode simple : les opérations essentielles
          </h2>
          <p className="text-sm leading-relaxed mb-4" style={{ color: "var(--muted)" }}>
            Le mode simple couvre les quatre opérations fondamentales : addition (+),
            soustraction (−), multiplication (×) et division (÷). Vous pouvez utiliser
            des parenthèses pour structurer vos expressions et obtenir des résultats
            précis. La gestion des erreurs vous avertit automatiquement en cas de
            division par zéro.
          </p>

          <h2 className="text-lg font-semibold mb-2" style={{ color: "var(--foreground)" }}>
            Mode scientifique : des fonctions avancées
          </h2>
          <p className="text-sm leading-relaxed mb-4" style={{ color: "var(--muted)" }}>
            Basculez en mode scientifique pour accéder aux fonctions trigonométriques
            (sinus, cosinus, tangente), aux logarithmes (log décimal, logarithme naturel),
            à la racine carrée, aux puissances, à la factorielle, ainsi qu&apos;aux
            constantes mathématiques π et e. Idéal pour les étudiants, ingénieurs et
            professionnels.
          </p>
        </article>

        {/* Section FAQ pour le SEO */}
        <section className="mb-8 px-4" aria-labelledby="faq-heading">
          <h2 id="faq-heading" className="text-lg font-semibold mb-3" style={{ color: "var(--foreground)" }}>
            Questions fréquentes
          </h2>
          <div className="space-y-3">
            {[
              {
                q: "Comment utiliser la calculatrice en ligne ?",
                a: "Cliquez sur les boutons ou utilisez votre clavier pour saisir une expression mathématique, puis appuyez sur « = » ou Entrée pour obtenir le résultat.",
              },
              {
                q: "Quelles fonctions scientifiques sont disponibles ?",
                a: "Sinus, cosinus, tangente, logarithme décimal, logarithme naturel, racine carrée, puissances, factorielle, et les constantes π et e.",
              },
              {
                q: "L'historique des calculs est-il sauvegardé ?",
                a: "Oui, vos 50 derniers calculs sont sauvegardés automatiquement dans votre navigateur et persistent même après fermeture de la page.",
              },
              {
                q: "La calculatrice est-elle vraiment gratuite ?",
                a: "Oui, 100 % gratuite, sans publicité et sans inscription. Utilisez-la autant que vous le souhaitez.",
              },
              {
                q: "Puis-je utiliser des raccourcis clavier ?",
                a: "Oui ! Chiffres et opérateurs au clavier, Entrée pour calculer, Échap pour effacer, Retour arrière pour supprimer, Ctrl+C pour copier.",
              },
            ].map((faq, i) => (
              <details
                key={i}
                className="rounded-lg overflow-hidden transition-all"
                style={{
                  background: "var(--surface)",
                  border: "1px solid var(--border-color)",
                }}
              >
                <summary
                  className="px-4 py-3 cursor-pointer text-sm font-medium select-none hover:bg-[var(--surface-hover)] transition-colors"
                  style={{ color: "var(--foreground)" }}
                >
                  {faq.q}
                </summary>
                <p
                  className="px-4 pb-3 text-sm leading-relaxed"
                  style={{ color: "var(--muted)" }}
                >
                  {faq.a}
                </p>
              </details>
            ))}
          </div>
        </section>

        {/* Copyright */}
        <div className="text-center text-xs pb-4" style={{ color: "var(--muted)" }}>
          <p>© {new Date().getFullYear()} Calculatrice en ligne gratuite — Simple &amp; Scientifique</p>
          <p className="mt-1 opacity-60">
            Outil de calcul en ligne rapide, gratuit et sans inscription.
          </p>
        </div>
      </footer>
    </div>
  );
}