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

// Props typées via interface, enfants typés avec ReactNode
interface CarteProps {
  titre: string;
  sousTitre?: string;
  enfants: ReactNode;
  onFermer?: () => void;
}

function Carte({ titre, sousTitre, enfants, onFermer }: CarteProps) {
  return (
    <div className="carte">
      <h2>{titre}</h2>
      {sousTitre && <p>{sousTitre}</p>}
      {enfants}
      {onFermer && <button onClick={onFermer}>Fermer</button>}
    </div>
  );
}

// useState typé : l'union inclut explicitement "null" quand pertinent
function ProfilUtilisateur({ id }: { id: number }) {
  const [utilisateur, setUtilisateur] = useState<{ nom: string; email: string } | null>(null);
  const [chargement, setChargement] = useState<boolean>(true);

  useEffect(() => {
    let annule = false;
    async function charger() {
      const reponse = await fetch(`/api/utilisateurs/${id}`);
      const donnees = await reponse.json();
      if (!annule) {
        setUtilisateur(donnees);
        setChargement(false);
      }
    }
    charger();
    return () => {
      annule = true; // évite un setState après démontage
    };
  }, [id]);

  if (chargement) return <p>Chargement...</p>;
  return utilisateur ? <p>{utilisateur.nom}</p> : <p>Introuvable</p>;
}

// useRef typé sur un élément DOM : current peut être null avant le montage
function ChampFocus() {
  const inputRef = useRef<HTMLInputElement>(null);
  useEffect(() => {
    inputRef.current?.focus();
  }, []);
  return <input ref={inputRef} />;
}

// Composant générique : réutilisable pour n'importe quel type d'élément de liste
interface ListeProps<T> {
  items: T[];
  renduItem: (item: T) => ReactNode;
  cleItem: (item: T) => string | number;
}

function Liste<T>({ items, renduItem, cleItem }: ListeProps<T>) {
  return (
    <ul>
      {items.map((item) => (
        <li key={cleItem(item)}>{renduItem(item)}</li>
      ))}
    </ul>
  );
}
// <Liste items={produits} cleItem={(p) => p.id} renduItem={(p) => <span>{p.nom}</span>} />
// Le type <Produit> est inféré automatiquement depuis "items"

// Hook personnalisé typé avec générique, retour typé en tuple
function useLocalStorage<T>(cle: string, valeurInitiale: T): [T, (v: T) => void] {
  const [valeur, setValeur] = useState<T>(() => {
    const stocke = localStorage.getItem(cle);
    return stocke ? (JSON.parse(stocke) as T) : valeurInitiale;
  });

  const set = useCallback(
    (nouvelleValeur: T) => {
      setValeur(nouvelleValeur);
      localStorage.setItem(cle, JSON.stringify(nouvelleValeur));
    },
    [cle]
  );

  return [valeur, set];
}

// Props avec union discriminée : TS narrow automatiquement selon "variante"
type ProprietesAlerte =
  | { variante: "succes"; message: string }
  | { variante: "erreur"; message: string; codeErreur: number };

function Alerte(props: ProprietesAlerte) {
  if (props.variante === "erreur") {
    return (
      <div className="erreur">
        {props.message} (code {props.codeErreur})
      </div>
    );
  }
  return <div className="succes">{props.message}</div>;
}