// private.jsx — 我的 (Private Page)
const { useEffect: useEffectP, useRef: useRefP, useState: useStateP } = React;

const PRIVATE_LABELS = [
  "测度论 · 个人笔记", "Lebesgue 积分", "σ 代数", "Carathéodory 扩张", "Fubini 定理",
  "概率测度", "拉东-尼科迪姆", "可测函数", "几乎处处", "依测度收敛",
  "梯度下降 · 推导", "自适应学习率", "Adam 直觉", "动量项", "鞍点逃逸",
  "Transformer 阅读笔记", "QKV 几何意义", "多头并行", "位置编码", "残差连接",
  "范畴论入门", "函子", "自然变换", "Yoneda 引理", "极限与余极限",
  "RL 笔记", "Bellman 方程", "策略梯度", "价值函数", "Q 学习",
];

function PrivatePage({ tweaks }) {
  const [view, setView] = useStateP("3d"); // 3d | list
  const [empty, setEmpty] = useStateP(false);
  const canvasRef = useRefP(null);

  useEffectP(() => {
    if (view !== "3d" || empty || !canvasRef.current) return;
    const css = getComputedStyle(document.documentElement);
    const accent = css.getPropertyValue("--accent").trim() || "#5E6AD2";
    const accent2 = css.getPropertyValue("--accent-2").trim() || "#7C8CFF";
    const accent3 = css.getPropertyValue("--accent-fresh").trim() || "#37C8AB";
    const accent4 = css.getPropertyValue("--accent-warm").trim() || "#FF7A90";
    const accent5 = css.getPropertyValue("--accent-hi").trim() || "#F2B45A";
    const inst = window.Graph3D.init(canvasRef.current, {
      nodeCount: 140, accent, accent2, accent3, accent4, accent5,
      labels: PRIVATE_LABELS, showLabels: true, speed: 0.03,
      colorMode: tweaks.colorMode || "domain", radius: 280,
    });
    return () => inst.destroy();
  }, [view, empty, tweaks.palette, tweaks.colorMode]);

  return (
    <div className="private-page page-fade">
      <div className="graph-canvas">
        <div className="star-bg"/>
        {view === "3d" && !empty && <canvas ref={canvasRef}/>}
      </div>

      <div className="view-toggle">
        <button className={view === "3d" ? "active" : ""} onClick={() => setView("3d")}>3D 图谱</button>
        <button className={view === "list" ? "active" : ""} onClick={() => setView("list")}>列表</button>
        <button onClick={() => setEmpty(e => !e)} title="切换示例状态" style={{ color: "var(--text-faint)" }}>·</button>
      </div>

      {empty && (
        <div className="empty-state">
          <div className="inner">
            <div className="glyph">
              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M4 4h10l4 4v12H4z"/><path d="M14 4v4h4M8 13h8M8 17h5"/></svg>
            </div>
            <h3>还没有私有节点</h3>
            <p>把你读过的 PDF 上传上来,或从公共图谱导入你想跟进的节点。Nodeidea 会自动抽取概念并对齐到现有图谱。</p>
            <div style={{ display: "flex", gap: 10, marginTop: 6 }}>
              <button className="btn btn-accent"><Ic.Plus /> 上传第一份 PDF</button>
              <button className="btn btn-ghost"><Ic.Globe /> 从公共图谱导入</button>
            </div>
            <div style={{ fontSize: 12, color: "var(--text-faint)", marginTop: 10 }}>
              支持 PDF · Markdown · TXT · DOCX,最大 100MB
            </div>
          </div>
        </div>
      )}

      {!empty && view === "list" && (
        <div className="list-view">
          <div className="list-toolbar">
            <div className="filters">
              <button className="btn btn-sm btn-quiet">全部 · 87</button>
              <button className="btn btn-sm btn-quiet">已掌握 · 32</button>
              <button className="btn btn-sm btn-quiet">学习中 · 41</button>
              <button className="btn btn-sm btn-quiet">待复习 · 14</button>
            </div>
            <button className="btn btn-sm btn-quiet"><Ic.Filter/> 筛选</button>
            <button className="btn btn-sm btn-accent"><Ic.Plus/> 新建节点</button>
          </div>
          <div className="note-table">
            <div className="note-row head">
              <span>主题 · TOPIC</span>
              <span>关联公共节点</span>
              <span>创建时间</span>
              <span>掌握度</span>
              <span></span>
            </div>
            {PRIVATE_NOTES.map((n, i) => (
              <div className="note-row" key={i}>
                <span className="topic">{n.topic}</span>
                <span className="linked-public"><span className="marker"/>{n.link}</span>
                <span className="meta">{n.created}</span>
                <span className="mastery">
                  <div className="mastery-bar"><i style={{ width: n.mastery + "%" }}/></div>
                  <span>{n.mastery}%</span>
                </span>
                <span style={{ display: "flex", gap: 6, justifyContent: "flex-end" }}>
                  <button className="btn btn-sm btn-quiet" style={{ width: 28, padding: 0, justifyContent: "center" }}><Ic.More/></button>
                </span>
              </div>
            ))}
          </div>
        </div>
      )}

      {!empty && view === "3d" && (
        <>
          <div className="activity-rail float-panel">
            <h4>本周活动 · WEEKLY</h4>
            <div className="activity-item">
              <span className="when">今天</span>
              <div className="body">完成与 <strong>梯度下降</strong> 的苏格拉底对话<span className="tag">+1 mastery</span></div>
            </div>
            <div className="activity-item">
              <span className="when">昨天</span>
              <div className="body">上传 <strong>measure_theory.pdf</strong>,抽取 24 个概念</div>
            </div>
            <div className="activity-item">
              <span className="when">周三</span>
              <div className="body">修正误区:把 <strong>σ 代数</strong> 误认为拓扑</div>
            </div>
            <div className="activity-item">
              <span className="when">周二</span>
              <div className="body">新增 6 个私有节点,关联 <strong>测度论</strong></div>
            </div>
            <div className="activity-item">
              <span className="when">周一</span>
              <div className="body">完成 <strong>函子</strong> 的闪卡复习<span className="tag">回忆 4/5</span></div>
            </div>
            <div className="activity-item">
              <span className="when">上周</span>
              <div className="body">建立你与 <strong>范畴论</strong> 的第一条连接</div>
            </div>

            <h4 style={{ marginTop: 28 }}>统计</h4>
            <div style={{ display: "grid", gap: 12, padding: "6px 0" }}>
              <Stat label="私有节点" v="87" sub="+ 12 本周"/>
              <Stat label="对齐公共节点" v="64 / 87" sub="73%"/>
              <Stat label="完成对话" v="29"/>
              <Stat label="上传 / 100MB" v="42 MB"/>
            </div>
          </div>

          <div className="mastery-legend">
            <h5>掌握度图例</h5>
            <div className="bar"/>
            <div className="legend-labels">
              <span>未触及</span>
              <span>学习中</span>
              <span>掌握</span>
            </div>
          </div>
        </>
      )}
    </div>
  );
}

function Stat({ label, v, sub }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
      <span style={{ fontSize: 12.5, color: "var(--text-dim)" }}>{label}</span>
      <span style={{ display: "flex", alignItems: "baseline", gap: 6 }}>
        <span style={{ fontSize: 15, fontWeight: 500, color: "var(--text)" }}>{v}</span>
        {sub && <span style={{ fontSize: 11, color: "var(--text-faint)" }}>{sub}</span>}
      </span>
    </div>
  );
}

const PRIVATE_NOTES = [
  { topic: "测度论 · Carathéodory 扩张", link: "测度论", created: "2 天前", mastery: 72 },
  { topic: "Lebesgue 积分与 Riemann 的区别", link: "积分理论", created: "2 天前", mastery: 88 },
  { topic: "σ 代数 vs 拓扑(误区已修正)", link: "测度论", created: "3 天前", mastery: 65 },
  { topic: "Transformer · QKV 的几何意义", link: "注意力机制", created: "上周一", mastery: 54 },
  { topic: "残差连接为什么解决梯度消失", link: "残差网络", created: "上周一", mastery: 78 },
  { topic: "范畴论:函子的两个直觉", link: "范畴论", created: "上周三", mastery: 41 },
  { topic: "Yoneda 引理读书笔记", link: "范畴论", created: "上周三", mastery: 22 },
  { topic: "Adam 优化器的偏置修正", link: "梯度下降", created: "上周五", mastery: 84 },
  { topic: "Bellman 方程推导", link: "强化学习", created: "10 天前", mastery: 60 },
  { topic: "策略梯度 vs Q 学习", link: "强化学习", created: "10 天前", mastery: 45 },
  { topic: "信息熵与压缩的联系", link: "信息熵", created: "12 天前", mastery: 92 },
];

window.PrivatePage = PrivatePage;