/* =========================================================
   Long scroll layout (cuộn giấy dài) — all pages stacked
   On mobile (≤820px): sidebar TOC becomes drawer, FAB ☰ toggles.
   ========================================================= */
const { useState: useStateLS } = React;

function LongScrollLayout({ scrollRef, onJump, onPreviewHover, onPreviewLeave, activeIdx }) {
  const [tocOpen, setTocOpen] = useStateLS(false);

  // Build flat TOC for sidebar
  const flatToc = [];
  TOC.forEach(c => {
    flatToc.push({ ...c, isSub: false });
    if (c.subs) c.subs.forEach(s => flatToc.push({ ...s, chapter: c.chapter, isSub: true }));
  });

  // Detect chapter boundaries to add divider ornament
  const chapterStarts = new Set();
  let prevCh = null;
  PAGES.forEach((p, i) => {
    if (p.chapter !== prevCh && i > 0) chapterStarts.add(i);
    prevCh = p.chapter;
  });

  // Wrap onJump so that picking from drawer also closes it on mobile
  const jumpAndClose = (idx) => {
    onJump(idx);
    setTocOpen(false);
  };

  return (
    <div className="long-scroll-layout">
      <div
        className={"toc-backdrop" + (tocOpen ? " open" : "")}
        onClick={() => setTocOpen(false)}
        aria-hidden="true"
      />

      <aside className={"scroll-toc" + (tocOpen ? " open" : "")}>
        <button
          className="toc-close"
          onClick={() => setTocOpen(false)}
          aria-label="Đóng mục lục">✕</button>
        <h3>Mục lục · Quyển I</h3>
        <ol>
          <li
            data-active={PAGES[activeIdx]?.chapter === "cover"}
            onClick={() => jumpAndClose(0)}>
            <span>Bìa &amp; Lời mở</span>
            <span className="folio-mini">1</span>
          </li>
          <li
            data-active={PAGES[activeIdx]?.chapter === "toc"}
            onClick={() => jumpAndClose(2)}>
            <span>Mục lục</span>
            <span className="folio-mini">3</span>
          </li>
          {flatToc.map((c, i) => {
            const pg = PAGES[activeIdx];
            const isActive = c.id
              ? pg?.character === c.id
              : c.chid
                ? (pg?.kind === "chapter-highlight" && pg?.chapterId === c.chid)
                : c.chfull
                  ? (pg?.kind === "chapter-full" && pg?.chapterId === c.chfull)
                  : c.appfull
                    ? (pg?.kind === "appendix-full" && pg?.appendixId === c.appfull)
                    : (!c.isSub && pg?.chapter === c.chapter && !flatToc.some(s => (s.id && s.id === pg?.character) || (s.chid && s.chid === pg?.chapterId) || (s.chfull && s.chfull === pg?.chapterId) || (s.appfull && s.appfull === pg?.appendixId)));
            return (
              <li
                key={i}
                className={c.isSub ? "sub" : ""}
                data-active={isActive}
                onClick={() => jumpAndClose(c.page)}>
                <span>{c.label}</span>
                <span className="folio-mini">{c.page + 1}</span>
              </li>
            );
          })}
        </ol>
        <div style={{ marginTop: 28, paddingTop: 18, borderTop: "1px solid rgba(168,132,58,0.2)" }}>
          <div className="small" style={{ color: "var(--gold)" }}>Cuộn xuống để đọc</div>
          <p style={{ fontSize: 12, color: "rgba(241,231,208,0.6)", marginTop: 6, lineHeight: 1.5 }}>
            Toàn bộ sách trải dài trên một cuộn parchment. Bấm mục để cuộn tới phần đó.
          </p>
        </div>
      </aside>

      <button
        className="toc-toggle"
        onClick={() => setTocOpen(o => !o)}
        aria-label={tocOpen ? "Đóng mục lục" : "Mở mục lục"}>
        <span aria-hidden="true">☰</span>
        <span className="toc-toggle-label">Mục lục</span>
      </button>

      <div className="long-scroll-paper-wrap" ref={scrollRef}>
        <div className="scroll-roll top"></div>
        <div className="long-scroll-paper">
          {PAGES.map((p, i) => (
            <section
              key={i}
              id={`section-${i}`}
              data-idx={i}
              className={"scroll-section" + (chapterStarts.has(i) ? " chapter-start" : "")}>
              <PageRenderer
                idx={i}
                onJump={onJump}
                onPreviewHover={onPreviewHover}
                onPreviewLeave={onPreviewLeave}
              />
            </section>
          ))}
        </div>
        <div className="scroll-roll bottom"></div>
      </div>
    </div>
  );
}

Object.assign(window, { LongScrollLayout });