/* === Le stagioni del silenzio — Catalogue Book === */

const { useState: useStateA, useEffect: useEffectA, useMemo: useMemoA, useCallback: useCallbackA } = React;

/* buildSpreads is loaded from spreads.jsx → window.buildSpreads */


/* === App === */

function App() {
  const [lang, setLang] = useStateA(() => {
    try {
      const saved = localStorage.getItem("preferred-lang");
      if (saved && ["it", "en", "fr", "de"].includes(saved)) return saved;
    } catch (e) {}
    const navLang = (navigator.language || "it").slice(0, 2).toLowerCase();
    return ["it", "en", "fr", "de"].includes(navLang) ? navLang : "it";
  });
  const [spreadIdx, setSpreadIdx] = useStateA(0);

  // Persist language choice (shared with landing page)
  useEffectA(() => {
    try { localStorage.setItem("preferred-lang", lang); } catch (e) {}
  }, [lang]);
  const [flipping, setFlipping] = useStateA(false);

  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "paper": "warm",
    "coverLeftImg": "opere/dt-09-volo-1981.jpg",
    "coverRightImg": "opere/lv-11-modulazioni-1996.jpg",
    "coverStyle": "duo",
    "showCaptions": true
  }/*EDITMODE-END*/;
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply paper variant on body
  useEffectA(() => {
    document.body.dataset.paper = tweaks.paper;
  }, [tweaks.paper]);

  const t = window.I18N[lang];
  const spreads = useMemoA(() => window.buildSpreads(t, lang, tweaks), [lang, tweaks.coverLeftImg, tweaks.coverRightImg, t]);

  const total = spreads.length;
  const safeIdx = Math.min(spreadIdx, total - 1);
  const current = spreads[safeIdx];

  const goTo = useCallbackA((i) => {
    if (i < 0 || i >= total || i === safeIdx) return;
    setFlipping(true);
    setTimeout(() => setFlipping(false), 460);
    setSpreadIdx(i);
  }, [safeIdx, total]);

  const prev = () => goTo(safeIdx - 1);
  const next = () => goTo(safeIdx + 1);

  // Keyboard nav
  useEffectA(() => {
    const onKey = (e) => {
      if (e.key === "ArrowRight" || e.key === " ") { e.preventDefault(); next(); }
      else if (e.key === "ArrowLeft") { e.preventDefault(); prev(); }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [safeIdx, total]);

  // Persist position
  useEffectA(() => {
    const saved = localStorage.getItem("catalogo-spread");
    if (saved) {
      const n = parseInt(saved, 10);
      if (!isNaN(n) && n >= 0 && n < total) setSpreadIdx(n);
    }
  }, []);
  useEffectA(() => {
    localStorage.setItem("catalogo-spread", String(safeIdx));
  }, [safeIdx]);

  const progress = ((safeIdx + 1) / total) * 100;

  // Render
  let leftEl, rightEl;
  if (current.leftKind === "empty-dark") {
    leftEl = <div style={{ width: "100%", height: "100%", background: "#1d1916" }}></div>;
  } else {
    leftEl = current.left;
  }
  if (current.rightKind === "cover") {
    rightEl = <CoverPage {...current.rightProps} />;
  } else {
    rightEl = current.right;
  }

  // Use no-padding wrapper for full-bleed pages
  const isFullBleed = (el, kind) => kind === "cover" || (el && el.type && (el.type === BackCoverPage || el.type === CoverPage));
  const leftFullBleed = current.leftKind === "empty-dark" || (current.left && current.left.type === BackCoverPage);
  const rightFullBleed = current.rightKind === "cover" || (current.right && current.right.type === BackCoverPage);

  return (
    <>
      {/* Top bar */}
      <div className="topbar">
        <div className="topbar-brand">Galleria Marini · Catalogo</div>
        <div className="lang-switch">
          {["it", "en", "fr", "de"].map((l) => (
            <button
              key={l}
              className={lang === l ? "active" : ""}
              onClick={() => setLang(l)}
            >{l}</button>
          ))}
        </div>
      </div>

      {/* Stage */}
      <div className="stage">
        <div className={`book ${flipping ? "flipping" : ""}`} key={safeIdx}>
          <div className={`page page--left`}>
            <div className={`page-content ${leftFullBleed ? "page-content--no-pad" : ""}`}>
              {leftEl}
            </div>
          </div>
          <div className={`page page--right`}>
            <div className={`page-content ${rightFullBleed ? "page-content--no-pad" : ""}`}>
              {rightEl}
            </div>
          </div>
        </div>
      </div>

      {/* Nav arrows */}
      <button className="nav-arrow nav-arrow--prev" onClick={prev} disabled={safeIdx === 0} aria-label="Previous">‹</button>
      <button className="nav-arrow nav-arrow--next" onClick={next} disabled={safeIdx === total - 1} aria-label="Next">›</button>

      {/* Spread counter */}
      <div className="spread-counter">
        <span>{String(safeIdx + 1).padStart(2,"0")}</span>
        <div className="progress-bar" style={{ "--p": `${progress}%` }}></div>
        <span>{String(total).padStart(2,"0")}</span>
      </div>

      {/* Tweaks panel */}
      <TweaksPanel title="Tweaks">
        <TweakSection title="Carta">
          <TweakRadio
            label="Tonalità carta"
            value={tweaks.paper}
            onChange={(v) => setTweak('paper', v)}
            options={[
              { value: "warm", label: "Avorio caldo" },
              { value: "snow", label: "Avorio neve" },
              { value: "white", label: "Carta chiara" },
            ]}
          />
        </TweakSection>
        <TweakSection title="Copertina">
          <TweakSelect
            label="Opera (sx) — Della Torre"
            value={tweaks.coverLeftImg}
            onChange={(v) => setTweak('coverLeftImg', v)}
            options={window.WORKS.dt.map((w) => ({ value: w.file, label: `${w.title} (${w.year})` }))}
          />
          <TweakSelect
            label="Opera (dx) — Lavagnino"
            value={tweaks.coverRightImg}
            onChange={(v) => setTweak('coverRightImg', v)}
            options={window.WORKS.lv.map((w) => ({ value: w.file, label: `${w.title} (${w.year})` }))}
          />
        </TweakSection>
        <TweakSection title="Navigazione">
          <TweakButton onClick={() => goTo(0)}>↩ Torna alla copertina</TweakButton>
          <TweakSelect
            label="Salta a sezione"
            value={String(safeIdx)}
            onChange={(v) => goTo(parseInt(v, 10))}
            options={spreads.map((s, i) => ({ value: String(i), label: `${String(i+1).padStart(2,"0")} · ${s.id}` }))}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);