/* =========================================================
   NOTEBOOK POP-UP
   Desktop: two-page spread with 3D flip.
   Mobile:  single-page horizontal slide (faster, smoother,
            also correct since left page is hidden on mobile).
   ========================================================= */
const { useMemo } = React;

function chunkPairs(arr) {
  const out = [];
  for (let i = 0; i < arr.length; i += 2) out.push([arr[i], arr[i+1] || null]);
  return out;
}

function useIsMobile() {
  const [m, setM] = useState(() =>
    typeof window !== "undefined" &&
    window.matchMedia("(max-width: 860px), (orientation: portrait)").matches
  );
  useEffect(() => {
    const mq = window.matchMedia("(max-width: 860px), (orientation: portrait)");
    const on = () => setM(mq.matches);
    mq.addEventListener ? mq.addEventListener("change", on) : mq.addListener(on);
    return () => mq.removeEventListener ? mq.removeEventListener("change", on) : mq.removeListener(on);
  }, []);
  return m;
}

function PageView({ page, side, pageNumber, total, showStamp, extraClass }) {
  if (!page) {
    return (
      <div className={`page ${side} ${extraClass || ""}`}>
        <span className="margin"></span>
        <div className="head"></div>
        <div className="endmark">~ end of entry ~</div>
        <div className="pagenum"></div>
      </div>
    );
  }
  return (
    <div className={`page ${side} ${extraClass || ""}`}>
      <span className="margin"></span>
      <div className="head">
        {page.title && <h4 className="title">{page.title}</h4>}
      </div>
      <div className="body">
        {page.body.split(/\n\s*\n/).map((para, i) => (
          <p key={i} className="para">{para}</p>
        ))}
      </div>
      <div className="pagenum">— pg. {String(pageNumber).padStart(2,"0")} / {String(total).padStart(2,"0")} —</div>
    </div>
  );
}

function Notebook({ entry, onClose }) {
  const isMobile = useIsMobile();
  const pages = entry.pages;

  // On mobile we navigate page-by-page; on desktop two-page spreads.
  const units = useMemo(
    () => (isMobile ? pages.map(p => [p]) : chunkPairs(pages)),
    [pages, isMobile]
  );

  const [idx, setIdx] = useState(0);
  const [opened, setOpened] = useState(false);
  const [closing, setClosing] = useState(false);

  // mobile slide state
  const [slide, setSlide] = useState(null); // { dir, prevPage }

  // desktop flip state
  const [flip, setFlip] = useState(null);

  useEffect(() => {
    const t = setTimeout(() => setOpened(true), 700);
    return () => clearTimeout(t);
  }, []);

  const totalPages = pages.length;
  const canPrev = idx > 0 && !flip && !slide;
  const canNext = idx < units.length - 1 && !flip && !slide;

  const doNav = (dir) => {
    if (flip || slide) return;
    const to = dir === "next" ? idx + 1 : idx - 1;
    if (to < 0 || to >= units.length) return;

    if (isMobile) {
      const prev = units[idx][0];
      // mount both pages first (prev at center, new off-screen)
      setSlide({ dir, prevPage: prev, prevIdx: idx, phase: "mounted" });
      setIdx(to);
      // next frame: trigger transition (prev slides out, new slides in)
      requestAnimationFrame(() => requestAnimationFrame(() => {
        setSlide(s => s ? { ...s, phase: "active" } : null);
      }));
      setTimeout(() => setSlide(null), 420);
      return;
    }

    // desktop 3D flip (unchanged from original)
    setFlip({ dir, from: idx, to, t: 0 });
    requestAnimationFrame(() => requestAnimationFrame(() => {
      setFlip(f => f ? { ...f, t: 1 } : null);
    }));
    setTimeout(() => {
      setIdx(to);
      setFlip(null);
    }, 820);
  };

  const close = () => {
    setClosing(true);
    setTimeout(onClose, 440);
  };

  useEffect(() => {
    const onKey = (e) => {
      if (e.key === "Escape") close();
      if (e.key === "ArrowRight") doNav("next");
      if (e.key === "ArrowLeft") doNav("prev");
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  });

  // === MOBILE RENDER ===
  if (isMobile) {
    const cur = units[idx][0];
    const pageNumber = idx + 1;
    const showStamp = idx === 0;

    return (
      <div
        className={`bookoverlay ${closing ? "closing" : ""}`}
        onClick={(e) => { if (e.target.classList.contains("bookoverlay")) close(); }}
      >
        <button className="closebtn" onClick={close} aria-label="close">×</button>

        <div className={`book mobile ${opened ? "opened" : ""}`}>
          <div className="pages">
            <div className="holes"><i/><i/><i/><i/><i/><i/></div>

            {slide && (
              <PageView
                key={`out-${slide.prevIdx}`}
                page={slide.prevPage}
                side="right"
                pageNumber={slide.prevIdx + 1}
                total={totalPages}
                extraClass={
                  slide.phase === "active"
                    ? (slide.dir === "next" ? "slide-out-left" : "slide-out-right")
                    : "slide-active"
                }
              />
            )}

            <PageView
              key={`in-${idx}`}
              page={cur}
              side="right"
              pageNumber={pageNumber}
              total={totalPages}
              showStamp={showStamp}
              extraClass={
                slide
                  ? (slide.phase === "active"
                      ? "slide-active"
                      : (slide.dir === "next" ? "slide-in-right" : "slide-in-left"))
                  : "slide-active"
              }
            />
          </div>

          <div className="cover">
            <span className="ribbon">PRIVATE</span>
            <h3>{entry.title}</h3>
            <div className="meta">{entry.date}</div>
            <div className="scrib">— pink curation —</div>
            <span className="sticker" style={{ top: 18, right: 24, transform: "rotate(8deg)" }}>♡ read me</span>
          </div>

          <div className="booknav">
            <button className="navbtn" disabled={!canPrev} onClick={() => doNav("prev")}>← prev</button>
            <span className="pagepips">
              {pageNumber} / {totalPages}
            </span>
            <button className="navbtn" disabled={!canNext} onClick={() => doNav("next")}>next →</button>
          </div>
        </div>
      </div>
    );
  }

  // === DESKTOP RENDER (original 3D-flip two-page spread) ===
  const cur = units[idx] || [null, null];
  const tgt = flip ? units[flip.to] : null;

  let leafStyle = null, leafFrontPage = null, leafBackPage = null, leafSideFront = null, leafSideBack = null;
  if (flip) {
    const t = flip.t;
    if (flip.dir === "next") {
      leafSideFront = "right"; leafSideBack = "left";
      leafFrontPage = cur[1];
      leafBackPage = tgt[0];
      leafStyle = {
        right: 0, left: "50%",
        transformOrigin: "left center",
        transform: `rotateY(${t ? -180 : 0}deg)`,
        transition: "transform .8s cubic-bezier(.5,.05,.4,1)",
        boxShadow: t ? "0 0 0 rgba(0,0,0,0)" : "0 10px 30px rgba(0,0,0,.3)"
      };
    } else {
      leafSideFront = "left"; leafSideBack = "right";
      leafFrontPage = cur[0];
      leafBackPage = tgt[1];
      leafStyle = {
        left: 0, right: "50%",
        transformOrigin: "right center",
        transform: `rotateY(${t ? 180 : 0}deg)`,
        transition: "transform .8s cubic-bezier(.5,.05,.4,1)",
        boxShadow: t ? "0 0 0 rgba(0,0,0,0)" : "0 10px 30px rgba(0,0,0,.3)"
      };
    }
  }

  const leftPageNumber = idx * 2 + 1;
  const rightPageNumber = idx * 2 + 2;

  return (
    <div
      className={`bookoverlay ${closing ? "closing" : ""}`}
      onClick={(e) => { if (e.target.classList.contains("bookoverlay")) close(); }}
    >
      <button className="closebtn" onClick={close} aria-label="close">×</button>

      <div className={`book ${opened ? "opened" : ""}`}>
        <div className="pages">
          <div className="holes">
            <i/><i/><i/><i/><i/><i/>
          </div>
          <PageView page={cur[0]} side="left"  pageNumber={leftPageNumber}  total={totalPages} />
          <PageView page={cur[1]} side="right" pageNumber={rightPageNumber} total={totalPages} showStamp={idx===0} />

          {flip && (
            <div className="flip-leaf" style={leafStyle}>
              <div className="face">
                <PageView
                  page={leafFrontPage}
                  side={leafSideFront}
                  pageNumber={leafSideFront==="right" ? rightPageNumber : leftPageNumber}
                  total={totalPages}
                />
              </div>
              <div className="face back">
                <PageView
                  page={leafBackPage}
                  side={leafSideBack}
                  pageNumber={leafSideBack==="right" ? rightPageNumber : leftPageNumber}
                  total={totalPages}
                />
              </div>
            </div>
          )}
        </div>

        <div className="cover">
          <span className="ribbon">PRIVATE</span>
          <h3>{entry.title}</h3>
          <div className="meta">{entry.date}</div>
          <div className="scrib">— pink curation —</div>
          <span className="sticker" style={{ top: 18, right: 24, transform: "rotate(8deg)" }}>♡ read me</span>
        </div>

        <div className="booknav">
          <button className="navbtn" disabled={!canPrev} onClick={() => doNav("prev")}>← prev</button>
          <span className="pagepips">
            {Math.min(idx * 2 + 1, totalPages)}–{Math.min(idx * 2 + 2, totalPages)} / {totalPages}
          </span>
          <button className="navbtn" disabled={!canNext} onClick={() => doNav("next")}>next →</button>
        </div>
      </div>
    </div>
  );
}

window.Notebook = Notebook;