// src/thinking.jsx — THINKING module: Essays / Insights / Mental Models / Reading

function Thinking() {
  const [tab, setTab] = React.useState("essays");
  const essays = publicItems(window.DATA.essays);
  const insights = publicItems(window.DATA.insights);
  const tabs = [
    { id: "essays", label: "观点 · Essays", count: essays.length },
    { id: "insights", label: "洞察 · Insights", count: insights.length },
    { id: "models", label: "知识结构 · Mental Models", count: "1 张图" },
    { id: "reading", label: "我在读什么 · Reading", count: "" },
  ];

  return (
    <section id="thinking" className="sec" style={{ background: "var(--bg-sunk)" }}>
      <div className="wrap">
        <Reveal>
          <div className="sec-head">
            <div>
              <div className="sec-tag">03 / Thinking</div>
              <h2>不是供应商，是<em style={{ fontStyle: "normal", color: "var(--accent)", fontFamily: "var(--display)" }}>同行者</em>。<br/>这里是我所有判断与方法的来源。</h2>
            </div>
            <div className="sec-meta">最近更新 2025.04.18</div>
          </div>
        </Reveal>

        <Reveal>
          <div className="think-tabs">
            {tabs.map((t) => (
              <button key={t.id} className={tab === t.id ? "active" : ""} onClick={() => setTab(t.id)}>
                {t.label} {t.count && <span className="count">{t.count}</span>}
              </button>
            ))}
          </div>
        </Reveal>

        {tab === "essays" && <Essays />}
        {tab === "insights" && <Insights />}
        {tab === "models" && <MentalModels />}
        {tab === "reading" && <Reading />}
      </div>
    </section>
  );
}

function Essays() {
  const essays = publicItems(window.DATA.essays);
  return (
    <Reveal>
      <div className="essay-list">
        {essays.map((e, i) => (
          <a className="essay-row" key={i} href={`article.html?id=${encodeURIComponent(e.id || e.articleId || `essay-${e.num || i + 1}`)}`}>
            <div className="num">{e.num}</div>
            <div className="body">
              <div className="tags">{e.tags.map((t, j) => <span className="tag" key={j}>{t}</span>)}</div>
              <div className="ttl">{e.ttl}</div>
              <div className="sub">{e.sub}</div>
            </div>
            <div className="meta">
              {e.date}<br/>
              {e.words} · {e.read}<br/>
              <span className="reads">{e.reads} 阅读</span>
            </div>
          </a>
        ))}
      </div>
    </Reveal>
  );
}

function Insights() {
  const insights = publicItems(window.DATA.insights);
  const { insightTopics } = window.DATA;
  const [filter, setFilter] = React.useState("全部");
  const [copied, setCopied] = React.useState(null);
  const filtered = filter === "全部" ? insights : insights.filter((i) => i.topic === filter);

  const onCopy = (idx, i) => {
    const text = `${i.quote}\n\n${i.closer}\n\n— Sober阿铭 · ${i.date}`;
    if (navigator.clipboard) navigator.clipboard.writeText(text).catch(() => {});
    setCopied(idx);
    setTimeout(() => setCopied(null), 1500);
  };

  return (
    <Reveal>
      <div className="insight-filters">
        <span className="lbl">按主题</span>
        {insightTopics.map((t) => (
          <button key={t} className={`pill${filter === t ? " active" : ""}`} onClick={() => setFilter(t)}>{t}</button>
        ))}
      </div>
      <div className="insights-grid">
        {filtered.map((i, idx) => (
          <div className={`insight${copied === idx ? " copied" : ""}`} key={idx}>
            <div className="topic">#{i.topic}</div>
            <div className="quote">"{i.quote}"</div>
            <div className="closer">— {i.closer}</div>
            <div className="foot">
              <span>{i.date} · 引用 {i.cites} 次</span>
              <button className="copy-btn" onClick={() => onCopy(idx, i)}>
                {copied === idx ? "✓ 已复制" : "↗ 复制"}
              </button>
            </div>
          </div>
        ))}
      </div>
    </Reveal>
  );
}

function MentalModels() {
  const m = window.DATA.mentalModel;
  const [active, setActive] = React.useState(m.root.id);
  const [hover, setHover] = React.useState(null);

  // Build coordinates in canvas px — based on container size
  const ref = React.useRef(null);
  const [size, setSize] = React.useState({ w: 1000, h: 580 });
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const ro = new ResizeObserver(() => {
      const r = el.getBoundingClientRect();
      setSize({ w: r.width, h: r.height });
    });
    ro.observe(el);
    return () => ro.disconnect();
  }, []);

  const allNodes = [m.root, ...m.l1, ...m.l2];
  const lookup = Object.fromEntries(allNodes.map((n) => [n.id, n]));

  // Build edges
  const edges = [
    ...m.l1.map((n) => ({ from: m.root, to: n })),
    ...m.l2.map((n) => ({ from: lookup[n.parent], to: n })),
  ];

  const isActiveEdge = (e) => {
    if (active === e.from.id || active === e.to.id) return true;
    // Light up the chain from active to root
    const node = lookup[active];
    if (node && node.parent === e.from.id && active === e.to.id) return true;
    return false;
  };

  const px = (n) => ({ left: n.x * size.w, top: n.y * size.h });
  const activeNode = lookup[active];

  return (
    <Reveal>
      <div className="mm-canvas" ref={ref}>
        <div className="grid-bg" />
        <svg className="mm-svg" viewBox={`0 0 ${size.w} ${size.h}`} preserveAspectRatio="none">
          {edges.map((e, i) => {
            const x1 = e.from.x * size.w;
            const y1 = e.from.y * size.h;
            const x2 = e.to.x * size.w;
            const y2 = e.to.y * size.h;
            const ym = (y1 + y2) / 2;
            // smooth curve via cubic
            const d = `M ${x1} ${y1} C ${x1} ${ym}, ${x2} ${ym}, ${x2} ${y2}`;
            return <path key={i} d={d} className={isActiveEdge(e) ? "active" : ""} />;
          })}
        </svg>
        {/* Root */}
        {[m.root].map((n) => (
          <div key={n.id} className={`mm-node root${active === n.id ? " active" : ""}`}
               style={px(n)} onClick={() => setActive(n.id)}>
            <div className="mm-node-inner">{n.label}</div>
          </div>
        ))}
        {m.l1.map((n) => (
          <div key={n.id} className={`mm-node l1${active === n.id ? " active" : ""}`}
               style={px(n)} onClick={() => setActive(n.id)}>
            <div className="mm-node-inner">{n.label}</div>
          </div>
        ))}
        {m.l2.map((n) => (
          <div key={n.id} className={`mm-node l2${active === n.id ? " active" : ""}`}
               style={px(n)} onClick={() => setActive(n.id)}>
            <div className="mm-node-inner">{n.label}</div>
          </div>
        ))}

        <div className={`mm-detail${activeNode ? " show" : ""}`}>
          <div className="topic">{activeNode.detail.topic}</div>
          <h4>{activeNode.detail.h}</h4>
          <p>{activeNode.detail.p}</p>
          {activeNode.detail.list && (
            <ul>{activeNode.detail.list.map((x, i) => <li key={i}>{x}</li>)}</ul>
          )}
        </div>
      </div>
      <p style={{ marginTop: 18, fontSize: 13, color: "var(--mute)", textAlign: "center" }}>
        点击任意节点查看该层的方法论详情。完整版本（含 32 个子节点）在年度顾问与训练营内开放。
      </p>
    </Reveal>
  );
}

function Reading() {
  const readingNow = publicItems(window.DATA.readingNow);
  const readingRec = publicItems(window.DATA.readingRec);
  const newsletters = publicItems(window.DATA.newsletters);
  const followingPeople = publicItems(window.DATA.followingPeople);
  const Col = ({ title, items, kind }) => (
    <div className="reading-col">
      <h4>{title}</h4>
      <div className="reading-list">
        {items.map((it, i) => (
          <div className="reading-item" key={i}>
            <div>
              <div className="ttl">{it.ttl}</div>
              <div className="by">{it.by}</div>
            </div>
            <div className={`status-chip ${kind === "now" ? "now" : "rec"}`}>{kind === "now" ? "正在读" : kind === "letter" ? "订阅" : kind === "people" ? "关注" : "推荐"}</div>
          </div>
        ))}
      </div>
    </div>
  );
  return (
    <Reveal>
      <div className="reading-grid">
        <Col title="正在读" items={readingNow} kind="now" />
        <Col title="推荐书单" items={readingRec} kind="rec" />
        <Col title="订阅的 Newsletter" items={newsletters} kind="letter" />
        <Col title="关注的人" items={followingPeople} kind="people" />
      </div>
      <p style={{ marginTop: 32, fontSize: 13, color: "var(--mute)", textAlign: "center", maxWidth: 540, marginLeft: "auto", marginRight: "auto", lineHeight: 1.7 }}>
        如果你的阅读列表里有 3 本以上和我重合，欢迎来打个招呼——同好相吸，
        这比任何"专业认证"都管用。
      </p>
    </Reveal>
  );
}

Object.assign(window, { Thinking });