/* eslint-disable */
// SlideMenu — vertical column on the right side of the map.
// Lists every appellation; each has a stack of château seals.
// Tap a seal to fly to that château. Tap an appellation header to fly to it.

function SlideMenu({ open, country, onPickChateau, onPickAppellation, activeId, lang, onToggleLang }) {
  const { byAppellation, APPELLATIONS, CHATEAUX } = window.CMGC_DATA;
  const [search, setSearch] = React.useState("");

  // Only show appellations relevant to current country
  const countryAppellations = APPELLATIONS.filter((a) => {
    const ll = byAppellation[a] || [];
    return ll.some((ch) => ch.country === country);
  });

  // Normalise : supprime accents, remplace tirets/espaces par espace, minuscules
  const normalize = (s) => s.normalize("NFD").replace(/[\u0300-\u036f]/g, "")
    .replace(/[-_]/g, " ").toLowerCase().trim();

  const matchesSearch = (ch) => {
    if (!search.trim()) return true;
    const q = normalize(search);
    return normalize(ch.n).includes(q) || normalize(ch.c).includes(q);
  };

  // Les exclusivités CMGC sont incluses dans la recherche
  const searchable = CHATEAUX.filter(ch => ch.country === country);
  const t = lang === "en"
    ? { placeholder: "Search a château…", noResult: "No results", secondVin: "2nd wine", excl: "excl." }
    : { placeholder: "Rechercher un château…", noResult: "Aucun résultat", secondVin: "second vin", excl: "excl." };

  const filtered = search.trim() ?
  searchable.filter((ch) => matchesSearch(ch)).sort((a, b) => a.n.localeCompare(b.n, "fr")) :
  null;

  return (
    <aside className={"slide-menu " + (open ? "open" : "closed")}>
      <div className="slide-menu-inner">
        {onToggleLang && (
          <div className="slide-lang-bar">
            <button className={"slide-lang-btn" + (lang !== "en" ? " active" : "")} onClick={() => lang !== "fr" && onToggleLang()}>FR</button>
            <span className="slide-lang-sep">/</span>
            <button className={"slide-lang-btn" + (lang === "en" ? " active" : "")} onClick={() => lang !== "en" && onToggleLang()}>EN</button>
          </div>
        )}
        <div className="slide-menu-search">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="7" stroke="#F99C2A" strokeWidth="2" />
            <line x1="21" y1="21" x2="16" y2="16" stroke="#F99C2A" strokeWidth="2" strokeLinecap="round" />
          </svg>
          <input
            type="text"
            placeholder={t.placeholder}
            value={search}
            onChange={(e) => setSearch(e.target.value)} />
          
        </div>

        {filtered ?
        <div className="slide-search-results">
            {filtered.length === 0 && <div className="slide-empty">{t.noResult}</div>}
            {filtered.map((ch) =>
          <button key={ch.c} className={"slide-chateau" + (activeId === ch.c ? " active" : "") + (ch.exclusivite ? " slide-chateau-excl" : "")} onClick={() => onPickChateau(ch)}>
                <img src={"assets/chateau-logos/" + ch.l} alt={ch.n} loading="lazy" decoding="async" />
                <span>{ch.n}{ch.exclusivite && <em className="slide-excl-badge">{ch.secondVin ? t.secondVin : t.excl}</em>}</span>
              </button>
          )}
          </div> :

        <div className="slide-tree">
            {countryAppellations.map((app) => {
            const list = byAppellation[app].filter((c) => c.country === country);
            return (
              <section key={app} className="slide-app-block">
                  <button className="slide-app-header" onClick={() => onPickAppellation(app)}>
                    {app.toUpperCase().split("").join("\u202F")}
                  </button>
                  <div className="slide-app-list">
                    {(() => {
                      const mains = list.filter(ch => !ch.exclusivite).sort((a, b) => a.n.localeCompare(b.n, "fr"));
                      const excls = list.filter(ch => ch.exclusivite);
                      return mains.map((ch) => {
                        const sats = excls.filter(e => e.parent === ch.c);
                        return (
                          <div key={ch.c} className="slide-list-group">
                            <button
                              className={"slide-chateau" + (activeId === ch.c ? " active" : "")}
                              onClick={() => onPickChateau(ch)}>
                              <img src={"assets/chateau-logos/" + ch.l} alt={ch.n} loading="lazy" decoding="async" />
                              <span>{ch.n}</span>
                            </button>
                            {sats.map(sat => (
                              <button
                                key={sat.c}
                                className={"slide-chateau slide-chateau-excl slide-chateau-sat" + (activeId === sat.c ? " active" : "")}
                                onClick={() => onPickChateau(sat)}>
                                <img src={"assets/chateau-logos/" + sat.l} alt={sat.n} loading="lazy" decoding="async" />
                                <span>{sat.n}<em className="slide-excl-badge">{sat.secondVin ? t.secondVin : t.excl}</em></span>
                              </button>
                            ))}
                          </div>
                        );
                      });
                    })()}
                  </div>
                </section>);

          })}
          </div>
        }
      </div>
    </aside>);

}

window.SlideMenu = SlideMenu;