/* ============================================================
   COMMONS — Read (articles) view + Reader
   ============================================================ */

function Read({ go }) {
  const feat = ARTICLES.find(a => a.feat);
  const rest = ARTICLES.filter(a => !a.feat);
  const [cat, setCat] = useState("All");
  const cats = ["All", ...Array.from(new Set(ARTICLES.filter(a => !a.feat).map(a => a.cat).filter(Boolean)))].slice(0, 7);
  const shown = cat === "All" ? rest : rest.filter(a => a.cat === cat);

  return (
    <div className="view read">
      <section className="read-masthead">
        <div className="shell read-mast-inner">
          <span className="kicker" style={{ "--i": 0 }}>iPanjab · Stories</span>
          <h1 className="read-mast-title serif" style={{ "--i": 1 }}>
            Stories from the <span className="italic">diaspora</span>.
          </h1>
          <p className="read-mast-sub" style={{ "--i": 2 }}>Essays, guides, and profiles about the small machinery of living somewhere on purpose.</p>
        </div>
      </section>

      <div className="shell">
        {/* Featured */}
        <Reveal>
          <article className="lead" onClick={() => go("read/" + feat.id)}>
            <Cover seed={feat.id} aspect="auto" radius="var(--radius-lg)" className="lead-cover">
              <div className="lead-cat serif italic">{feat.cat}</div>
            </Cover>
            <div className="lead-copy">
              <span className="kicker">{feat.kicker}</span>
              <h2 className="lead-title serif">{feat.title}</h2>
              <p className="lead-dek">{feat.dek}</p>
              <div className="byline">
                <Avatar seed={feat.authorU} label={feat.author} size={32} />
                <span><b>{feat.author}</b><i>{feat.date} · {feat.read} read</i></span>
              </div>
              <span className="lead-link">Read the story <Icon name="arrowRight" size={16} /></span>
            </div>
          </article>
        </Reveal>

        <div className="read-tabs">
          {cats.map(c => <button key={c} className="seg" data-on={cat === c} onClick={() => setCat(c)}>{c}</button>)}
        </div>

        <div className="art-grid">
          {shown.map((a, i) => (
            <article key={a.id} className="art-card" style={{ "--i": i }} onClick={() => go("read/" + a.id)}>
              <Cover seed={a.id} aspect="16 / 10" radius="12px" className="art-cover" />
              <div className="art-body">
                <span className="kicker">{a.kicker}</span>
                <h3 className="art-title serif">{a.title}</h3>
                <p className="art-dek">{a.dek}</p>
                <div className="byline sm">
                  <Avatar seed={a.authorU} label={a.author} size={26} />
                  <span><b>{a.author}</b><i>{a.date} · {a.read}</i></span>
                </div>
              </div>
            </article>
          ))}
        </div>

        <div className="write-cta">
          <div>
            <span className="kicker">Have something to say?</span>
            <h2 className="serif">Write for iPanjab.</h2>
            <p>A clean, distraction-free editor and an audience of Punjabis who actually read.</p>
          </div>
          <button className="btn btn-primary" onClick={() => go("compose")}><Icon name="plus" size={16} /> Start writing</button>
        </div>
      </div>
    </div>
  );
}

/* ---------- Reader ---------- */
function Reader({ id, go }) {
  const a = ARTICLES.find(x => x.id === id) || ARTICLES[0];
  const [progress, setProgress] = useState(0);
  const [liked, setLiked] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    const onScroll = () => {
      const el = ref.current; if (!el) return;
      const total = el.offsetHeight - window.innerHeight;
      const passed = Math.min(1, Math.max(0, (window.scrollY - el.offsetTop + 120) / Math.max(1, total)));
      setProgress(passed);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, [id]);
  const more = ARTICLES.filter(x => x.id !== a.id).slice(0, 2);

  return (
    <div className="view reader" ref={ref}>
      <div className="read-progress" style={{ transform: `scaleX(${progress})` }} />
      <div className="shell reader-shell">
        <button className="back" onClick={() => go("read")}><Icon name="arrowLeft" size={16} /> Stories</button>
        <header className="reader-head">
          <span className="kicker">{a.kicker} · {a.cat}</span>
          <h1 className="reader-title serif">{a.title}</h1>
          <p className="reader-dek serif">{a.dek}</p>
          <div className="reader-byline">
            <Avatar seed={a.authorU} label={a.author} size={42} />
            <div className="reader-by-txt">
              <b>{a.author}</b>
              <span>{a.date} · {a.read} read</span>
            </div>
            <div className="reader-actions">
              <button className={"icon-pill" + (liked ? " on" : "")} onClick={() => setLiked(!liked)} aria-label="Like"><Icon name="heart" size={18} /></button>
              <button className="icon-pill" aria-label="Bookmark"><Icon name="bookmark" size={18} /></button>
              <button className="icon-pill" aria-label="Share"><Icon name="share" size={18} /></button>
            </div>
          </div>
        </header>
        <Cover seed={a.id} aspect="16 / 8" radius="var(--radius-lg)" className="reader-cover" />
        <article className="prose">
          {((a.body && a.body.length) ? a.body : ARTICLE_BODY).map((p, i) => (
            <p key={i} className={i === 0 ? "lede" : ""}>{p}</p>
          ))}
        </article>

        <div className="reader-foot surface">
          <div className="byline">
            <Avatar seed={a.authorU} label={a.author} size={48} />
            <span><b>{a.author}</b><i>Writes about people and the places that hold them.</i></span>
          </div>
          <button className="btn btn-soft">Follow</button>
        </div>

        <div className="section-head" style={{ marginTop: 52 }}>
          <h2 className="serif">Keep reading</h2>
        </div>
        <div className="art-grid two">
          {more.map((m, i) => (
            <article key={m.id} className="art-card" style={{ "--i": i }} onClick={() => { window.scrollTo(0, 0); go("read/" + m.id); }}>
              <Cover seed={m.id} aspect="16 / 9" radius="12px" className="art-cover" />
              <div className="art-body">
                <span className="kicker">{m.kicker}</span>
                <h3 className="art-title serif">{m.title}</h3>
                <div className="byline sm"><Avatar seed={m.authorU} label={m.author} size={24} /><span><b>{m.author}</b><i>{m.read}</i></span></div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Read, Reader });