// playground.jsx — Playground (chat with grounded QA + file context)
const { useState: useStateY } = React;

const CONVOS = {
  today: [
    { id: "c1", title: "用拓扑学解释稳定流形", preview: "假设有一个动力系统...", active: true, pinned: false },
    { id: "c2", title: "Transformer 中 QKV 的几何意义", preview: "Q 投影定义查询方向...", pinned: true },
  ],
  yesterday: [
    { id: "c3", title: "对偶间隙 vs 最优性间隙", preview: "两者经常混用,但..." },
    { id: "c4", title: "Lebesgue 积分入门 — 用面包切片类比", preview: "Riemann 把横轴切..." },
  ],
  week: [
    { id: "c5", title: "为什么残差连接缓解梯度消失", preview: "考虑链式法则..." },
    { id: "c6", title: "范畴论 · Yoneda 引理的两种讲法", preview: "Yoneda 说一个对象..." },
    { id: "c7", title: "Adam 优化器的偏置修正推导", preview: "初始化为零导致..." },
  ],
  earlier: [
    { id: "c8", title: "信息熵与压缩的联系" },
    { id: "c9", title: "Bellman 方程逐步推导" },
    { id: "c10", title: "如何在 measure-theoretic 框架下重述 PDF" },
  ],
};

function Playground({ tweaks }) {
  const [activeId, setActiveId] = useStateY("c1");
  const [mode, setMode] = useStateY("direct"); // direct | socratic

  return (
    <div className="playground page-fade">
      {/* LEFT — convo list */}
      <aside className="convo-list">
        <div className="convo-head">
          <h3>对话</h3>
          <button className="new-btn" title="新对话"><Ic.Plus/></button>
        </div>
        <div className="convo-search">
          <Ic.Search/>
          <input placeholder="搜索标题与正文"/>
          <kbd className="kbd">⌘ /</kbd>
        </div>
        <div className="convo-scroll">
          {[
            ["today", "今天"],
            ["yesterday", "昨天"],
            ["week", "本周"],
            ["earlier", "更早"],
          ].map(([k, label]) => (
            <div key={k} className="convo-group">
              <h5>{label}</h5>
              {CONVOS[k].map(c => (
                <div
                  key={c.id}
                  className={"convo-item " + (c.id === activeId ? "active" : "")}
                  onClick={() => setActiveId(c.id)}
                >
                  <span className="ttl">{c.title}</span>
                  {c.preview && <span className="preview">{c.preview}</span>}
                  {c.pinned && <span className="pinned"><Ic.Pin/></span>}
                </div>
              ))}
            </div>
          ))}
        </div>
      </aside>

      {/* CENTER — thread */}
      <main className="thread">
        <header className="thread-head">
          <span className="title">用拓扑学解释稳定流形</span>
          <div className="mode-pill">
            <button className={mode === "direct" ? "active" : ""} onClick={() => setMode("direct")}>Direct</button>
            <button className={mode === "socratic" ? "active" : ""} onClick={() => setMode("socratic")}>Socratic</button>
          </div>
          <button className="btn btn-sm btn-quiet"><Ic.Share/> 导出 .md</button>
          <button className="btn btn-sm btn-quiet" style={{ width: 32, padding: 0, justifyContent: "center" }}><Ic.More/></button>
        </header>
        <div className="thread-body">
          <div className="thread-inner">

            <div className="msg user">
              <div className="avatar">JQ</div>
              <div className="body">
                <div className="who">你 · 14:32</div>
                <p>能用拓扑学的视角解释一下什么是稳定流形吗?我读了 <span className="node-chip">动力系统</span> 这一章但还是觉得这个概念很抽象。</p>
              </div>
            </div>

            <div className="msg bot">
              <div className="avatar">N</div>
              <div className="body">
                <div className="who">Nodeidea · Claude Sonnet 4.5 · 引用 4 个节点</div>
                <p>把一个动力系统想象成空间里的"流"——每个点告诉你下一秒该往哪走。<span className="node-chip">稳定流形</span> 就是所有最终会"汇入"某个不动点的轨迹集合。</p>
                <p>从拓扑学看,它是 <span className="node-chip">不动点</span> 的"吸引邻域"在整个空间中向后追溯的极限。与之相伴的还有 <span className="node-chip">不稳定流形</span>——所有从不动点散出去的轨迹。</p>
                <p>关键直觉:稳定流形的<strong>维度</strong>等于线性化后矩阵中负特征值的数量。这就是 <span className="node-chip">Hartman-Grobman 定理</span> 在告诉我们的:在不动点附近,非线性系统的几何与它的线性化版本同胚。</p>

                <details className="reasoning" open>
                  <summary><Ic.Sparkle className="ic"/> 这次推理 · 4 步</summary>
                  <div className="content">
                    <div className="step-line"><span className="n">01</span><span>识别问题:用户想要拓扑视角而非纯解析视角。优先用几何直觉,而非公式。</span></div>
                    <div className="step-line"><span className="n">02</span><span>选定核心隐喻:动力系统 = 向量场流。"汇入" 对应 stable manifold。</span></div>
                    <div className="step-line"><span className="n">03</span><span>引入维度信息(线性化、特征值)——这是用户读到的章节常见但少有解释的桥梁。</span></div>
                    <div className="step-line"><span className="n">04</span><span>用 Hartman-Grobman 闭环,把非线性还原回可视化的线性图像。</span></div>
                  </div>
                </details>

                <div className="action-row">
                  <button className="qbtn"><Ic.Sparkle/> ⚡ 生成闪卡</button>
                  <button className="qbtn"><Ic.File/> 📝 生成笔记</button>
                  <button className="qbtn"><Ic.ArrowR/> 跳到节点</button>
                  <button className="qbtn"><Ic.Share/> 分享回答</button>
                </div>
              </div>
            </div>

            <div className="msg user">
              <div className="avatar">JQ</div>
              <div className="body">
                <div className="who">你 · 14:38</div>
                <p>那如果一个不动点的所有特征值都是 0,稳定流形的维度怎么定义?</p>
              </div>
            </div>

            <div className="msg bot">
              <div className="avatar">N</div>
              <div className="body">
                <div className="who">Nodeidea · 引用 measure_theory.pdf · pp. 142–144</div>
                <p>这是<strong>退化情形</strong>。线性化不再决定行为——你必须看高阶项,这就进入 <span className="node-chip">中心流形理论</span>。</p>
                <p>简单说:中心流形是与零特征值对应的方向,系统在这些方向上的动力学需要单独分析,通常通过约化定理把高维问题降到中心流形上。</p>
              </div>
            </div>

          </div>
        </div>
        <div className="composer">
          <div className="composer-shell">
            <textarea placeholder={mode === "socratic" ? "Socratic 模式:Nodeidea 会反问你,引导自己找到答案…" : "继续对话——可拖拽节点或文件到此处…"}/>
            <div className="composer-tools">
              <button className="icbtn" title="图片"><Ic.Image/></button>
              <button className="icbtn" title="文件"><Ic.File/></button>
              <button className="icbtn" title="截图"><Ic.Camera/></button>
              <button className="icbtn" title="节点引用"><Ic.Plus/></button>
              <button className="model-pick">Claude Sonnet 4.5 <Ic.ArrowR style={{ transform: "rotate(90deg)" }}/></button>
              <button className="send">发送 <Ic.Send/></button>
            </div>
          </div>
        </div>
      </main>

      {/* RIGHT — context rail */}
      <aside className="context-rail">
        <div className="context-section">
          <h4>引用的节点 <button>4</button></h4>
          {[
            "稳定流形", "不动点", "不稳定流形", "Hartman-Grobman 定理", "中心流形理论"
          ].map(n => (
            <div key={n} style={{ marginBottom: 4 }}>
              <span className="node-chip">{n}</span>
            </div>
          ))}
        </div>

        <div className="context-section">
          <h4>本会话的文件 <button>+</button></h4>
          <div className="file-item">
            <div className="ic">PDF</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="file-name">measure_theory.pdf</div>
              <div className="file-meta">12.4 MB · 已索引</div>
            </div>
          </div>
          <div className="file-item">
            <div className="ic">MD</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="file-name">动力系统笔记.md</div>
              <div className="file-meta">84 KB · 已索引</div>
            </div>
          </div>
          <div className="file-item">
            <div className="ic">PDF</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="file-name">topology_handbook_ch3.pdf</div>
              <div className="file-meta">2.1 MB · 索引中…</div>
            </div>
          </div>
          <button className="btn btn-sm btn-quiet" style={{ width: "100%", justifyContent: "center", marginTop: 8 }}>
            <Ic.Plus/> 拖拽或点击上传
          </button>
        </div>

        <div className="context-section">
          <h4>建议 · 接下来可问</h4>
          {[
            "稳定流形如何用于混沌的数值检测?",
            "Hartman-Grobman 在无限维时还成立吗?",
            "把中心流形和分岔理论关联起来",
          ].map(s => (
            <div key={s} style={{
              padding: "10px 12px",
              background: "var(--surface)",
              border: "1px solid var(--border)",
              borderRadius: 8,
              fontSize: 12.5,
              color: "var(--text-soft)",
              marginBottom: 6,
              cursor: "pointer",
            }}>
              {s}
            </div>
          ))}
        </div>

        <div className="context-section">
          <h4>这次会话</h4>
          <div style={{ display: "grid", gap: 8, fontSize: 12, color: "var(--text-dim)" }}>
            <div style={{ display: "flex", justifyContent: "space-between" }}><span>消息</span><span style={{ color: "var(--text)" }}>11</span></div>
            <div style={{ display: "flex", justifyContent: "space-between" }}><span>引用节点</span><span style={{ color: "var(--text)" }}>4</span></div>
            <div style={{ display: "flex", justifyContent: "space-between" }}><span>耗时</span><span style={{ color: "var(--text)" }}>23 分</span></div>
            <div style={{ display: "flex", justifyContent: "space-between" }}><span>Token 使用</span><span style={{ color: "var(--text)" }}>14.2k</span></div>
          </div>
        </div>
      </aside>
    </div>
  );
}

window.Playground = Playground;