/* ============================================================
   DICTIONNAIRE — index navigable des prénoms & noms
   Parcourir / chercher (utile SEO). Chaque entrée ouvre la
   fiche complète via onOpenFiche (→ Essence du prénom).
   Source : window.PRENOMS (~145) + window.NOMS (~37).
   ============================================================ */
const { useState: useStateD } = React;

function dicoNorm(s) {
  return (s || "").normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
}

function DicoEntry({ e, kind, onOpenFiche }) {
  // Si une fiche statique (SEO) existe pour ce prénom → on l'ouvre comme une vraie page.
  // Sinon → lecture JS in-app (en attendant la génération serveur de la fiche).
  const slug = kind === "prenoms" && window.ficheSlug ? window.ficheSlug(e.p) : null;
  const inner = (
    <React.Fragment>
      <span className="dico-card-letter">{e.p[0]}</span>
      <span className="dico-card-body">
        <span className="dico-card-name">{e.p}</span>
        <span className="dico-card-orig">{kind === "noms" ? (e.type || "nom") : (e.o || "")}</span>
        {e.s && <span className="dico-card-sens">{e.s}</span>}
      </span>
      <span className="dico-card-go">{slug ? "Sa fiche →" : "Lire →"}</span>
    </React.Fragment>);

  if (slug) {
    return (
      <a className="dico-card" href={"prenom/" + slug + ".html"}>{inner}</a>);

  }
  return (
    <button className="dico-card" onClick={() => onOpenFiche(e.p, "")}>{inner}</button>);

}

function DictionarySpace({ onOpenFiche }) {
  const [q, setQ] = useStateD("");
  const [kind, setKind] = useStateD("prenoms"); // prenoms | noms
  const [letter, setLetter] = useStateD("");

  const PRENOMS = window.PRENOMS || {};
  const NOMS = window.NOMS || {};
  const src = kind === "prenoms" ? PRENOMS : NOMS;

  const all = Object.keys(src)
    .map((k) => Object.assign({ key: k }, src[k]))
    .filter((e) => e.p)
    .sort((a, b) => a.p.localeCompare(b.p, "fr"));

  const filtered = all.filter((e) => {
    if (letter && dicoNorm(e.p)[0] !== letter) return false;
    if (q.trim() && dicoNorm(e.p).indexOf(dicoNorm(q.trim())) < 0) return false;
    return true;
  });

  // lettres réellement présentes dans la source courante
  const present = {};
  all.forEach((e) => { present[dicoNorm(e.p)[0]] = true; });
  const alpha = "abcdefghijklmnopqrstuvwxyz".split("");

  return (
    <div className="fade-screen dico">
      <div className="eyebrow">Le dictionnaire</div>
      <h1 className="lede">Parcourir les prénoms<br />et les <em>noms</em>.</h1>
      <p className="sub">Un index pour flâner : cherche un prénom, parcours l'alphabet, ouvre la fiche complète de celui qui t'arrête. {all.length} entrées répertoriées — chaque lecture reste calculée depuis les lettres.</p>

      <div className="dico-toolbar">
        <div className="dico-seg">
          <button className={"nm-seg" + (kind === "prenoms" ? " nm-seg-on" : "")} onClick={() => { setKind("prenoms"); setLetter(""); }}>Prénoms</button>
          <button className={"nm-seg" + (kind === "noms" ? " nm-seg-on" : "")} onClick={() => { setKind("noms"); setLetter(""); }}>Noms de famille</button>
        </div>
        <div className="dico-search">
          <span className="dico-search-icon" aria-hidden="true">⌕</span>
          <input className="dico-search-input" type="text" value={q} placeholder={"Chercher un " + (kind === "noms" ? "nom" : "prénom") + "…"} onChange={(ev) => setQ(ev.target.value)} />
          {q && <button className="dico-search-x" onClick={() => setQ("")} aria-label="effacer">×</button>}
        </div>
      </div>

      <div className="dico-alpha">
        <button className={"dico-alpha-b" + (letter === "" ? " is-on" : "")} onClick={() => setLetter("")}>Tout</button>
        {alpha.map((l) => (
          <button key={l} className={"dico-alpha-b" + (letter === l ? " is-on" : "") + (present[l] ? "" : " is-empty")}
            disabled={!present[l]} onClick={() => setLetter(letter === l ? "" : l)}>{l.toUpperCase()}</button>
        ))}
      </div>

      <p className="dico-count">{filtered.length} {filtered.length > 1 ? "entrées" : "entrée"}{letter ? " · " + letter.toUpperCase() : ""}{q ? " · « " + q + " »" : ""}</p>

      {filtered.length > 0 ?
      <div className="dico-grid">
        {filtered.map((e) => <DicoEntry key={e.key} e={e} kind={kind} onOpenFiche={onOpenFiche} />)}
      </div> :
      <div className="dico-empty">
        <p>Aucune entrée pour cette recherche dans le dictionnaire.</p>
        <p className="dico-empty-sub">Tu peux quand même en lire la fiche — toute lecture se calcule depuis les lettres.</p>
        {q.trim() && <button className="btn-primary" onClick={() => onOpenFiche(q.trim().charAt(0).toUpperCase() + q.trim().slice(1), "")}>Lire « {q.trim()} » →</button>}
      </div>}

      <div className="mirror-note">
        <span>↳</span>
        <span><b>Le dictionnaire n'est pas une liste close.</b> N'importe quel prénom ou nom, même absent d'ici, obtient sa lecture : tout part des lettres. Cherche, puis ouvre la fiche.</span>
      </div>
    </div>);

}

window.DictionarySpace = DictionarySpace;