/* global React, ReactDOM, BlogNav, Newsletter, Footer, Tag, Confidence, VideoTile, EmotionTimeline, Transcript, InsightCard */

const FIGS = {
  transcript: (p) => <Transcript time={p.time} speaker={p.speaker}>{p.children}</Transcript>,
  timeline: (p) => <EmotionTimeline moments={p.moments} />,
  insight: (p) => <InsightCard accent={p.accent} title={p.title} clips={p.clips} participants={p.participants} segments={p.segments} confidence={p.confidence}><p style={{ fontSize: 14, color: "var(--fg-muted)", lineHeight: 1.5, margin: 0 }} dangerouslySetInnerHTML={{ __html: p.body }} /></InsightCard>,
  confidence: (p) => <Confidence pct={p.pct} />,
};

function Block({ block }) {
  const b = block;
  switch (b.t) {
    case "h2": return <h2 id={b.id} data-num={b.num}>{b.text}</h2>;
    case "p": return <p dangerouslySetInnerHTML={{ __html: b.html }} />;
    case "pullquote": return <div className="pullquote">{b.text}</div>;
    case "blockquote": return <blockquote><span dangerouslySetInnerHTML={{ __html: b.html }} />{b.cite && <cite>{b.cite}</cite>}</blockquote>;
    case "ul": return <ul>{b.items.map((it, i) => <li key={i} dangerouslySetInnerHTML={{ __html: it }} />)}</ul>;
    case "ol": return <ol>{b.items.map((it, i) => <li key={i} dangerouslySetInnerHTML={{ __html: it }} />)}</ol>;
    case "figure": return (
      <figure className="figure">
        <div className="card" style={{ padding: 20 }}>{FIGS[b.fig.key](b.fig.props)}</div>
        <figcaption className="figure__caption"><b>{b.ref}</b><span>{b.caption}</span></figcaption>
      </figure>
    );
    case "table": return (
      <div style={{ overflowX: "auto", margin: "20px 0" }}>
        <table className="article__table">
          <thead><tr>{b.headers.map((h, i) => <th key={i}>{h}</th>)}</tr></thead>
          <tbody>{b.rows.map((r, i) => <tr key={i}>{r.map((c, j) => <td key={j} dangerouslySetInnerHTML={{ __html: c }} />)}</tr>)}</tbody>
        </table>
      </div>
    );
    case "references": return (
      <div className="article__refs">
        <h2 data-num="REFERENCES">References</h2>
        <ol>{b.items.map((it) => <li key={it.n} dangerouslySetInnerHTML={{ __html: it.html }} />)}</ol>
      </div>
    );
    default: return null;
  }
}

function BlogArticle({ article: a }) {
  const [active, setActive] = React.useState(a.toc[0]?.id);
  const [copied, setCopied] = React.useState(false);

  React.useEffect(() => {
    const ids = a.toc.map((s) => s.id);
    const onScroll = () => {
      let cur = ids[0];
      for (const id of ids) { const el = document.getElementById(id); if (el && el.getBoundingClientRect().top < 200) cur = id; }
      setActive(cur);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const url = () => (typeof window !== "undefined" ? window.location.href : "");
  const copyLink = async () => { try { await navigator.clipboard.writeText(url()); setCopied(true); setTimeout(() => setCopied(false), 1800); } catch (e) { window.prompt("Copy this link:", url()); } };
  const shareX = () => window.open(`https://twitter.com/intent/tweet?url=${encodeURIComponent(url())}&text=${encodeURIComponent(a.title)}`, "_blank", "noopener,width=600,height=520");
  const shareIn = () => window.open(`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url())}`, "_blank", "noopener,width=600,height=520");

  return (
    <div className="blog-page app" data-density="comfortable">
      <BlogNav active="blog" />
      <article className="container">
        <div className="article">
          <header className="article__header">
            <div className="article__lane"><b>{a.laneLabel}</b><span>·</span><span>{a.kicker}</span><span>·</span><span>{a.readMins} MIN READ</span></div>
            <h1 className="article__title">{a.title}</h1>
            <p className="article__deck">{a.deck}</p>
            <div className="article__byline">
              <div><span>AUTHOR</span><strong>NeroView Research</strong></div>
              <div><span>PRACTICE</span><strong>Evidence Practice</strong></div>
              <div><span>PUBLISHED</span><strong>{a.dateLabel}</strong></div>
            </div>
            <div style={{ display: "flex", gap: 8, marginTop: 24, flexWrap: "wrap" }}>
              {a.tags.map((t) => <Tag key={t}>#{t}</Tag>)}
            </div>
          </header>

          <aside className="article__toc">
            <div className="article__toc-head">CONTENTS · {String(a.toc.length).padStart(2, "0")}</div>
            <ol>{a.toc.map((s) => <li key={s.id}><a href={`#${s.id}`} className={active === s.id ? "active" : ""}><span>{s.title}</span></a></li>)}</ol>
            <div style={{ marginTop: 28, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.12em", color: "var(--fg-dim)" }}>SHARE</div>
            <div style={{ display: "flex", gap: 6, marginTop: 10 }}>
              <button className="btn btn--ghost" style={{ padding: "6px 10px", fontSize: 11 }} onClick={copyLink} aria-label="Copy link">{copied ? "Copied ✓" : "Copy"}</button>
              <button className="btn btn--ghost" style={{ padding: "6px 10px", fontSize: 11 }} onClick={shareX} aria-label="Share on X">X</button>
              <button className="btn btn--ghost" style={{ padding: "6px 10px", fontSize: 11 }} onClick={shareIn} aria-label="Share on LinkedIn">in</button>
            </div>
          </aside>

          <div className="article__body">
            {a.body.map((block, i) => <Block key={i} block={block} />)}
            <div className="endcta">
              <div>
                <h3 className="endcta__title">See the evidence trail in your own data.</h3>
                <p className="endcta__desc">A 30-minute working session on a real study of yours — no slides, no demo theater.</p>
              </div>
              <a className="btn btn--primary btn--lg" href="/#demo">Book a working session <span className="btn-arrow">→</span></a>
            </div>
          </div>

          <aside className="article__aside">
            {a.related?.length > 0 && (
              <div className="aside-card">
                <div className="aside-card__head">RELATED READING</div>
                <ul>{a.related.map((r, i) => <li key={i}><a href={r.href}>{r.title}<small>{r.meta}</small></a></li>)}</ul>
              </div>
            )}
            <div className="aside-card" style={{ background: "color-mix(in oklab, var(--accent) 6%, var(--bg-elev))", borderColor: "color-mix(in oklab, var(--accent) 30%, var(--border))" }}>
              <div className="aside-card__head">SAMPLE REPORT</div>
              <div style={{ fontSize: 14, fontWeight: 500, marginBottom: 8, lineHeight: 1.3 }}>See a full NeroView report end to end — the challenger sportswear study, n=259.</div>
              <a href="/blog/sample-report.html" className="btn btn--primary" style={{ fontSize: 12 }}>Open report →</a>
            </div>
          </aside>
        </div>
      </article>
      <div className="container"><Newsletter /></div>
      <Footer />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<BlogArticle article={window.__ARTICLE__} />);