const { useState: useStateR, useEffect: useEffectR, useRef: useRefR } = React;

function ReaderProgress() {
  const [pct, setPct] = useStateR(0);
  useEffectR(() => {
    const onScroll = () => {
      const h = document.documentElement;
      const scrolled = h.scrollTop;
      const max = h.scrollHeight - h.clientHeight;
      setPct(max > 0 ? (scrolled / max) * 100 : 0);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return <div className="reader-progress" style={{ width: `${pct}%` }} />;
}

function ReaderTop({ onBack, size, setSize }) {
  const sizes = [
    { k: "s",  label: "A", fs: "0.85rem" },
    { k: "m",  label: "A", fs: "1rem"    },
    { k: "l",  label: "A", fs: "1.15rem" },
    { k: "xl", label: "A", fs: "1.3rem"  },
  ];
  return (
    <div className="reader-top">
      <button className="back" onClick={onBack}>Letters</button>
      <div className="controls-right">
        <div className="size-group" role="group" aria-label="Text size">
          {sizes.map((s) => (
            <button
              key={s.k}
              className={size === s.k ? "active" : ""}
              onClick={() => setSize(s.k)}
              style={{ fontSize: s.fs, fontFamily: "var(--serif)" }}
              aria-label={`Text size ${s.k}`}
            >A</button>
          ))}
        </div>
      </div>
    </div>
  );
}

function ReaderNav({ prev, next, onOpen }) {
  return (
    <nav className="reader-nav" aria-label="Article navigation">
      <a className={prev ? "" : "disabled"} onClick={() => prev && onOpen(prev.path)}>
        <span className="dir">← Previous</span>
        <span className="title">{prev ? prev.meta.title : "This is the first letter"}</span>
      </a>
      <a className={next ? "next" : "next disabled"} onClick={() => next && onOpen(next.path)}>
        <span className="dir">Next →</span>
        <span className="title">{next ? next.meta.title : "You're up to date"}</span>
      </a>
    </nav>
  );
}

function Reader({ article, articles, onBack, onOpen, dropCap }) {
  const [size, setSize] = useStateR(() => localStorage.getItem("ctp.size") || "m");
  useEffectR(() => { localStorage.setItem("ctp.size", size); }, [size]);

  const scale = { s: 0.92, m: 1.0, l: 1.12, xl: 1.25 }[size];

  useEffectR(() => { window.scrollTo(0, 0); }, [article.path]);

  const d = fmtDate(article.meta.date);
  const n = issueNum(articles, article);

  const sorted = [...articles].sort((a, b) => b.meta.date.localeCompare(a.meta.date));
  const idx = sorted.findIndex((a) => a.path === article.path);
  const newer = idx > 0 ? sorted[idx - 1] : null;
  const older = idx < sorted.length - 1 ? sorted[idx + 1] : null;

  return (
    <div className={`reader ${dropCap ? "drop-cap" : ""}`} style={{ "--reader-scale": scale }}>
      <ReaderProgress />
      <ReaderTop onBack={onBack} size={size} setSize={setSize} />

      <article className="article">
        <header className="article-header">
          <span className="mono">
            Issue № {n} &nbsp;·&nbsp; {d.month} {d.year}
          </span>
          <h1>{article.meta.title}</h1>
          <p className="dek">{article.meta.dek}</p>
          <div className="byline">
            <span>{article.meta.readTime}</span>
            <span>·</span>
            <span>Anteambulo</span>
            {Array.isArray(article.meta.tags) && article.meta.tags.length > 0 && (
              <>
                <span>·</span>
                <span>{article.meta.tags.join(" / ")}</span>
              </>
            )}
          </div>
        </header>
        <div className="prose" dangerouslySetInnerHTML={{ __html: article.html }} />
      </article>

      <ReaderNav prev={older} next={newer} onOpen={onOpen} />
    </div>
  );
}

Object.assign(window, { Reader });