// history.jsx — 历史
const { useState: useStateH } = React;

const H_ITEMS = {
  today: [
    { src: "graph", title: "对偶间隙 vs 最优性间隙", preview: "两者经常混用,但对偶间隙特指原对偶差,而最优性间隙是当前解到最优值的距离…", chips: ["对偶间隙", "强对偶", "KKT"], time: "14:32" },
    { src: "play", title: "用拓扑学解释稳定流形", preview: "把一个动力系统想象成空间里的流——每个点告诉你下一秒该往哪走。", chips: ["稳定流形", "Hartman-Grobman"], time: "11:08", pinned: true },
    { src: "node", title: "访问了 12 个节点", preview: "测度论 → σ 代数 → Carathéodory 扩张 → Lebesgue 积分 → ...", chips: [], time: "09:14" },
  ],
  yesterday: [
    { src: "graph", title: "为什么残差连接能缓解梯度消失", preview: "考虑链式法则,每一层的梯度都要乘以前一层的导数…", chips: ["残差网络", "梯度消失"], time: "昨天 22:14" },
    { src: "play", title: "Transformer 中 QKV 的几何意义", preview: "Q 投影定义查询方向,K 投影定义键空间…", chips: ["Transformer", "注意力机制"], time: "昨天 16:40" },
    { src: "play", title: "Adam 优化器的偏置修正推导", preview: "初始化为零导致前几步估计有偏…", chips: ["梯度下降"], time: "昨天 10:02" },
  ],
  week: [
    { src: "graph", title: "Lebesgue 积分入门 — 用面包切片类比", preview: "Riemann 把横轴切片,Lebesgue 把纵轴切片…", chips: ["测度论", "积分理论"], time: "周五" },
    { src: "play", title: "范畴论 · Yoneda 引理的两种讲法", preview: "Yoneda 说一个对象完全由它的态射决定…", chips: ["范畴论", "函子"], time: "周四" },
    { src: "node", title: "上传 measure_theory.pdf", preview: "已抽取 24 个概念,对齐 18 个公共节点", chips: [], time: "周四" },
    { src: "graph", title: "信息熵与压缩的联系", preview: "Shannon 证明了熵就是平均编码长度的下界…", chips: ["信息熵", "互信息"], time: "周三" },
    { src: "play", title: "Bellman 方程逐步推导", preview: "考虑一个 MDP 在策略 π 下的价值函数…", chips: ["强化学习"], time: "周一" },
  ],
  earlier: [
    { src: "graph", title: "如何在 measure-theoretic 框架下重述 PDF", preview: "在抽象测度空间里,概率密度其实是 Radon-Nikodym 导数…", chips: ["拉东-尼科迪姆"], time: "10 天前" },
    { src: "graph", title: "为什么贝叶斯定理可以这样用", preview: "把先验和似然写成测度比…", chips: ["贝叶斯定理"], time: "12 天前" },
    { src: "play", title: "L^p 空间为什么完备", preview: "Riesz-Fischer 定理保证了…", chips: ["希尔伯特空间", "完备性"], time: "2 周前" },
  ],
};

// 7-day x 26-week contribution heat
function genContribs() {
  const cells = [];
  for (let w = 0; w < 26; w++) for (let d = 0; d < 7; d++) {
    const r = Math.random();
    const l = r > 0.85 ? 4 : r > 0.7 ? 3 : r > 0.5 ? 2 : r > 0.3 ? 1 : 0;
    cells.push(l);
  }
  return cells;
}
const CONTRIBS = genContribs();

function HistoryPage({ tweaks }) {
  const [filter, setFilter] = useStateH("all"); // all | graph | play | node | pinned
  const [view, setView] = useStateH("list"); // list | activity

  const visible = (s) => filter === "all" || filter === s || (filter === "pinned" && false);

  return (
    <div className="history page-fade">
      <aside className="h-side">
        <h4>来源</h4>
        <div className={"h-side-item " + (filter === "all" ? "active" : "")} onClick={() => setFilter("all")}>
          全部 · 历史 <span className="count">186</span>
        </div>
        <div className={"h-side-item " + (filter === "graph" ? "active" : "")} onClick={() => setFilter("graph")}>
          <span className="dot" style={{ background: "var(--accent-2)" }}/>图谱对话 <span className="count">94</span>
        </div>
        <div className={"h-side-item " + (filter === "play" ? "active" : "")} onClick={() => setFilter("play")}>
          <span className="dot" style={{ background: "var(--accent-fresh)" }}/>Playground <span className="count">61</span>
        </div>
        <div className={"h-side-item " + (filter === "node" ? "active" : "")} onClick={() => setFilter("node")}>
          <span className="dot" style={{ background: "var(--text-faint)" }}/>节点足迹 <span className="count">31</span>
        </div>

        <h4>视图</h4>
        <div className={"h-side-item " + (view === "list" ? "active" : "")} onClick={() => setView("list")}>
          <Ic.Filter /> 时间倒序
        </div>
        <div className={"h-side-item " + (view === "activity" ? "active" : "")} onClick={() => setView("activity")}>
          <Ic.Sparkle /> 学习活动
        </div>

        <h4>已置顶</h4>
        <div className="h-side-item"><Ic.Pin /> 用拓扑学解释稳定流形</div>
        <div className="h-side-item"><Ic.Pin /> Yoneda 引理的两种讲法</div>

        <h4>导出</h4>
        <div className="h-side-item"><Ic.Share /> 导出全部为 ZIP</div>
        <div className="h-side-item"><Ic.File /> 导出当前筛选</div>
      </aside>

      <div className="h-main">
        <div className="h-toolbar">
          <div className="h-search">
            <Ic.Search />
            <input placeholder="搜索标题或正文…" />
            <kbd className="kbd">⌘ /</kbd>
          </div>
          <button className="btn btn-sm btn-quiet"><Ic.Filter /> 筛选</button>
          <button className="btn btn-sm btn-quiet">批量</button>
        </div>

        {/* Weekly digest + activity heat */}
        <div className="h-digest">
          <div className="card">
            <div className="digest-title"><Ic.Sparkle /> 本周摘要 · WEEKLY DIGEST</div>
            <h3>你完成了 14 段对话,接触了 38 个新节点。</h3>
            <div className="digest-stats">
              <div className="ds"><span className="n">+38</span><span className="l">新接触节点</span></div>
              <div className="ds"><span className="n">14</span><span className="l">完成对话</span></div>
              <div className="ds"><span className="n">3</span><span className="l">前置缺口</span></div>
            </div>
          </div>
          <div className="card" style={{ padding: 22, display: "flex", flexDirection: "column" }}>
            <div className="digest-title">最近 26 周</div>
            <div className="contribs" style={{ flex: 1 }}>
              {CONTRIBS.map((l, i) => <i key={i} data-l={l > 0 ? l : undefined} />)}
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", marginTop: 8, fontSize: 11, color: "var(--text-faint)" }}>
              <span>少</span>
              <div style={{ display: "flex", gap: 3 }}>
                {[0,1,2,3,4].map(l => <i key={l} className="contribs" style={{ display: "inline-block" }}><i data-l={l > 0 ? l : undefined} style={{ width: 10, height: 10, display: "block", borderRadius: 2, background: l===0 ? "var(--surface-3)" : `rgba(94,106,210,${0.2 + l*0.18})` }}/></i>)}
              </div>
              <span>多</span>
            </div>
          </div>
        </div>

        {/* Grouped list */}
        {[
          ["today", "今天"],
          ["yesterday", "昨天"],
          ["week", "本周"],
          ["earlier", "更早"],
        ].map(([k, label]) => {
          const items = H_ITEMS[k].filter(i => filter === "all" || filter === i.src);
          if (items.length === 0) return null;
          return (
            <div className="h-group" key={k}>
              <div className="h-group-head">
                <span>{label} · {items.length}</span>
                {k === "today" && <span style={{ fontFamily: "var(--font-mono)" }}>2026-05-17</span>}
              </div>
              {items.map((it, i) => (
                <div key={i} className={"h-item src-" + it.src}>
                  <div className="src-icn">
                    {it.src === "graph" && <Ic.Globe />}
                    {it.src === "play"  && <Ic.Sparkle />}
                    {it.src === "node"  && <Ic.Brain />}
                  </div>
                  <div style={{ minWidth: 0 }}>
                    <div className="title">{it.title}{it.pinned && <span className="pinned-mark" style={{ marginLeft: 6 }}><Ic.Pin/></span>}</div>
                    {it.preview && <div className="preview">{it.preview}</div>}
                    {it.chips && it.chips.length > 0 && (
                      <div className="chips">
                        {it.chips.map(c => <span key={c} className="node-chip">{c}</span>)}
                      </div>
                    )}
                  </div>
                  <div className="meta">
                    <span>{it.time}</span>
                    <button className="resume">恢复 →</button>
                  </div>
                </div>
              ))}
            </div>
          );
        })}
      </div>
    </div>
  );
}

window.HistoryPage = HistoryPage;