/* === Print version: render every facciata as its own 18×18cm page === */

const { useState: useStateP, useEffect: useEffectP, useMemo: useMemoP } = React;

function getLangFromUrl() {
  const u = new URL(window.location.href);
  const l = u.searchParams.get('lang');
  return ['it', 'en', 'fr', 'de'].includes(l) ? l : 'it';
}

function setLangInUrl(lang) {
  const u = new URL(window.location.href);
  u.searchParams.set('lang', lang);
  window.history.replaceState({}, '', u.toString());
}

/* Mirrors the App's render logic for one side of one spread.
   Returns { kind: 'left'|'right'|'dark', el: ReactNode, fullBleed: bool } */
function pickSide(spread, side) {
  if (side === 'left') {
    if (spread.leftKind === 'empty-dark') {
      return { dark: true, el: null, fullBleed: true };
    }
    return {
      el: spread.left,
      fullBleed: spread.left && spread.left.type === window.BackCoverPage,
    };
  } else {
    if (spread.rightKind === 'cover') {
      return {
        el: <window.CoverPage {...spread.rightProps} />,
        fullBleed: true,
      };
    }
    return {
      el: spread.right,
      fullBleed: spread.right && spread.right.type === window.BackCoverPage,
    };
  }
}

function PrintPage({ spread, side, page }) {
  const info = pickSide(spread, side);
  const sideClass = side === 'left' ? 'print-page--left' : 'print-page--right';
  const darkClass = info.dark ? 'print-page--dark' : '';
  return (
    <div className={`print-page ${sideClass} ${darkClass}`} data-page={page}>
      <div className="print-page-inner">
        <div className={`page-content ${info.fullBleed ? 'page-content--no-pad' : ''}`}>
          {info.el}
        </div>
      </div>
    </div>
  );
}

function PrintApp() {
  const [lang, setLang] = useStateP(getLangFromUrl());

  useEffectP(() => {
    document.body.dataset.paper = 'warm';
    setLangInUrl(lang);
    document.documentElement.lang = lang;
  }, [lang]);

  const t = window.I18N[lang];
  const tweaks = {
    paper: 'warm',
    coverLeftImg: 'opere/dt-09-volo-1981.jpg',
    coverRightImg: 'opere/lv-11-modulazioni-1996.jpg',
    coverStyle: 'duo',
    showCaptions: true,
  };

  const spreads = useMemoP(() => window.buildSpreads(t, lang, tweaks), [lang, t]);

  // Flatten spreads into single facciata pages: [left, right, left, right, ...]
  const pages = [];
  spreads.forEach((spread) => {
    pages.push({ spread, side: 'left' });
    pages.push({ spread, side: 'right' });
  });

  // Bind UI controls
  useEffectP(() => {
    const sel = document.getElementById('lang-sel');
    const btn = document.getElementById('print-btn');
    if (sel) {
      sel.value = lang;
      sel.onchange = (e) => setLang(e.target.value);
    }
    if (btn) {
      btn.onclick = () => window.print();
    }
  }, [lang]);

  return (
    <div className="print-stack">
      {pages.map((p, i) => (
        <PrintPage key={i} spread={p.spread} side={p.side} page={i + 1} />
      ))}
    </div>
  );
}

const printRoot = ReactDOM.createRoot(document.getElementById('root'));
printRoot.render(<PrintApp />);