// settings.jsx — 设置
const { useState: useStateS } = React;

const PANELS = [
  { id: "account",   label: "账户",       ic: "Lock" },
  { id: "appearance",label: "外观",       ic: "Sparkle" },
  { id: "graph",     label: "图谱",       ic: "Globe" },
  { id: "play",      label: "Playground", ic: "Brain" },
  { id: "notif",     label: "通知",       ic: "Audio" },
  { id: "data",      label: "导入导出", ic: "Folder" },
  { id: "labs",      label: "Labs",       ic: "Sparkle", soon: false, beta: true },
  { id: "kbd",       label: "快捷键",     ic: "More" },
  { id: "privacy",   label: "隐私",       ic: "Lock" },
  { id: "dev",       label: "Developers", ic: "File", soon: true },
];

function SettingsPage({ tweaks }) {
  const [panel, setPanel] = useStateS("account");
  const P = PANELS.find(p => p.id === panel);

  return (
    <div className="settings page-fade">
      <aside className="s-side">
        <h4>偏好</h4>
        {PANELS.map(p => {
          const Icon = Ic[p.ic] || Ic.More;
          return (
            <div key={p.id} className={"s-side-item " + (panel === p.id ? "active" : "")} onClick={() => !p.soon && setPanel(p.id)} style={p.soon ? { opacity: 0.5, cursor: "default" } : {}}>
              <span className="ic"><Icon /></span>
              <span>{p.label}</span>
              {p.beta && <span className="badge-new" style={{ marginLeft: "auto" }}>BETA</span>}
              {p.soon && <span className="badge-soon badge-new" style={{ marginLeft: "auto" }}>SOON</span>}
            </div>
          );
        })}
        <h4>团队</h4>
        <div className="s-side-item"><Ic.Globe /> 工作区</div>
        <div className="s-side-item"><Ic.Lock /> 成员与权限</div>
        <h4>账单</h4>
        <div className="s-side-item"><Ic.File /> 订阅</div>
        <div className="s-side-item"><Ic.File /> 发票历史</div>
      </aside>

      <main className="s-main">
        <div className="s-pageHead">
          <div>
            <h1>{P.label}</h1>
            <p className="desc">{descFor(panel)}</p>
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            {panel === "account" && <button className="btn btn-sm btn-quiet">取消</button>}
            {panel === "account" && <button className="btn btn-sm btn-primary">保存修改</button>}
          </div>
        </div>

        {panel === "account" && <AccountPanel/>}
        {panel === "appearance" && <AppearancePanel/>}
        {panel === "graph" && <GraphPanel/>}
        {panel === "play" && <PlayPanel/>}
        {panel === "notif" && <NotifPanel/>}
        {panel === "data" && <DataPanel/>}
        {panel === "labs" && <LabsPanel/>}
        {panel === "kbd" && <KbdPanel/>}
        {panel === "privacy" && <PrivacyPanel/>}
      </main>
    </div>
  );
}

function descFor(id) {
  return {
    account: "你的身份、邮箱、订阅。修改后立即生效。",
    appearance: "主题、字体、深浅模式。",
    graph: "节点显示、关系筛选、颜色映射。",
    play: "Playground 的默认对话行为。",
    notif: "邮件 weekly digest、重大更新、付款提醒。",
    data: "上传源管理、导出与备份。",
    labs: "提前体验。这些功能可能不稳定,可能随时下线。",
    kbd: "所有快捷键。⌘ K 命令面板入口。",
    privacy: "训练数据、删除账号、导出 ZIP。",
  }[id] || "";
}

function Row({ label, hint, children }) {
  return (
    <div className="s-row">
      <div>
        <div className="row-label">{label}</div>
        {hint && <div className="row-hint">{hint}</div>}
      </div>
      <div className="row-control">{children}</div>
    </div>
  );
}

function Switch({ on, onChange }) {
  return <div className="s-switch" data-on={on ? 1 : 0} onClick={() => onChange(!on)}/>;
}

function Seg({ value, options, onChange }) {
  return (
    <div className="s-segmented">
      {options.map(([v, l]) => (
        <button key={v} className={value === v ? "active" : ""} onClick={() => onChange(v)}>{l}</button>
      ))}
    </div>
  );
}

/* —— Account —— */
function AccountPanel() {
  const [emailNotif, setE] = useStateS(true);
  return (
    <>
      <div className="s-section">
        <h3>个人资料</h3>
        <p className="sec-desc">公开图谱贡献时,他人会看到你的展示名。</p>
        <Row label="头像">
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <div className="s-avatar">JQ</div>
            <button className="btn btn-sm btn-quiet">上传新头像</button>
            <button className="btn btn-sm btn-quiet" style={{ color: "var(--accent-warm)" }}>移除</button>
          </div>
        </Row>
        <Row label="展示名">
          <input className="s-input" defaultValue="JQ Roy"/>
        </Row>
        <Row label="邮箱" hint="用于登录和密码重置。修改后需新邮箱验证。">
          <input className="s-input" defaultValue="jq.roy@nodeidea.app"/>
        </Row>
        <Row label="手机号" hint="可选,用于 2FA 与重要通知。">
          <input className="s-input" defaultValue="+86 138 **** 8888"/>
        </Row>
      </div>

      <div className="s-section">
        <h3>密码与登录</h3>
        <Row label="密码" hint="上次更改于 32 天前。建议每 90 天更换一次。">
          <button className="btn btn-sm btn-quiet">修改密码</button>
        </Row>
        <Row label="双重认证" hint="登录时除密码外要求验证器码。">
          <Switch on={true} onChange={() => {}}/>
        </Row>
        <Row label="会话管理" hint="3 台设备在线 · 最近 macOS · Chrome / iOS · Safari / Android · Beta">
          <button className="btn btn-sm btn-quiet">查看会话</button>
        </Row>
      </div>

      <div className="s-section">
        <h3>订阅</h3>
        <Row label={<span>当前方案 <span className="badge-new accent" style={{ marginLeft: 8 }}>PRO · 年付</span></span>} hint="续费日 2026-08-12 · ¥374.4 / 年">
          <button className="btn btn-sm btn-quiet">管理</button>
        </Row>
        <Row label="发票历史" hint="可下载所有历史发票 PDF / 开增值税专票">
          <button className="btn btn-sm btn-quiet">查看</button>
        </Row>
        <Row label="本月用量">
          <div style={{ width: 240 }}>
            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, color: "var(--text-dim)" }}>
              <span>14.2 M / 无限 token</span>
              <span style={{ fontFamily: "var(--font-mono)", color: "var(--text)" }}>—</span>
            </div>
            <div className="usage-bar"><i style={{ width: "30%" }}/></div>
          </div>
        </Row>
      </div>

      <div className="s-section">
        <h3 style={{ color: "var(--accent-warm)" }}>危险区</h3>
        <Row label="导出全部数据" hint="ZIP 包含 chats / 私有节点 / uploads / activity log。">
          <button className="btn btn-sm btn-quiet">请求导出</button>
        </Row>
        <Row label="删除账号" hint="30 天内可恢复。30 天后永久删除,不可逆。">
          <button className="btn btn-sm btn-quiet" style={{ color: "var(--accent-warm)", borderColor: "rgba(255,122,144,0.3)" }}>删除账号</button>
        </Row>
      </div>
    </>
  );
}

/* —— Appearance —— */
function AppearancePanel() {
  const [theme, setTheme] = useStateS("dark");
  const [font, setFont] = useStateS("inter");
  const [density, setDens] = useStateS("regular");
  const [accent, setAccent] = useStateS("A");
  return (
    <>
      <div className="s-section">
        <h3>主题</h3>
        <Row label="模式" hint="跟随系统会在切换 OS 主题时自动同步。">
          <Seg value={theme} onChange={setTheme} options={[["dark","深色"],["light","浅色"],["system","跟随系统"]]}/>
        </Row>
        <Row label="字体" hint="Linear 默认使用 Inter Variable。中文回退到 PingFang SC。">
          <Seg value={font} onChange={setFont} options={[["inter","Inter"],["sfpro","SF Pro"],["serif","Serif"]]}/>
        </Row>
        <Row label="密度" hint="影响列表行高与卡片间距。">
          <Seg value={density} onChange={setDens} options={[["compact","紧凑"],["regular","标准"],["comfy","宽松"]]}/>
        </Row>
      </div>

      <div className="s-section">
        <h3>主强调色</h3>
        <Row label="色卡">
          <div style={{ display: "flex", gap: 8 }}>
            {[
              ["A", ["#5E6AD2","#7C8CFF","#4EA7FC"]],
              ["B", ["#6E73E6","#8F98FF","#6BC9B1"]],
            ].map(([id, cs]) => (
              <button key={id} onClick={() => setAccent(id)} style={{
                padding: 8, display: "grid", gap: 4,
                background: "var(--surface)",
                border: "1px solid " + (accent === id ? "var(--accent)" : "var(--border)"),
                borderRadius: 8,
                cursor: "pointer",
              }}>
                <div style={{ display: "flex", gap: 3, width: 100 }}>
                  {cs.map((c, i) => <div key={i} style={{ height: 22, flex: i === 0 ? 2 : 1, background: c, borderRadius: 3 }}/>)}
                </div>
                <span style={{ fontSize: 11, color: accent === id ? "var(--text)" : "var(--text-dim)" }}>{id === "A" ? "Key Accent" : "Muted Premium"}</span>
              </button>
            ))}
          </div>
        </Row>
      </div>
    </>
  );
}

/* —— Graph —— */
function GraphPanel() {
  return (
    <>
      <div className="s-section">
        <h3>显示</h3>
        <Row label="默认展开层级" hint="进入图谱时默认显示的深度。">
          <Seg value="3" onChange={() => {}} options={[["1","L1"],["2","L2"],["3","L3"],["4","L4"],["5","All"]]}/>
        </Row>
        <Row label="节点颜色映射">
          <Seg value="domain" onChange={() => {}} options={[["domain","Domain"],["layer","Layer"],["mastery","Mastery"]]}/>
        </Row>
        <Row label="ghost neighbors" hint="未关联但邻近的节点以浅色显示。">
          <Switch on={true} onChange={() => {}}/>
        </Row>
        <Row label="标签密度" hint="高密度图谱里只显示高优先级节点的名称。">
          <Seg value="auto" onChange={() => {}} options={[["sparse","稀疏"],["auto","自动"],["dense","密集"]]}/>
        </Row>
      </div>
      <div className="s-section">
        <h3>关系筛选</h3>
        <Row label="只看 hypernym 关系" hint="精简到上下位关系,排除横向关联。">
          <Switch on={false} onChange={() => {}}/>
        </Row>
        <Row label="隐藏 see_also" hint="降低噪声,适合精读模式。">
          <Switch on={false} onChange={() => {}}/>
        </Row>
        <Row label="阈值 - 相似度" hint="低于该阈值的边不显示。">
          <input className="s-input" type="number" defaultValue="0.62" step="0.01" min="0" max="1"/>
        </Row>
      </div>
    </>
  );
}

/* —— Playground —— */
function PlayPanel() {
  return (
    <>
      <div className="s-section">
        <h3>对话默认行为</h3>
        <Row label="默认模式">
          <Seg value="direct" onChange={() => {}} options={[["direct","Direct"],["socratic","Socratic"]]}/>
        </Row>
        <Row label="意图路由" hint="选 Always LLM 用于调试,Rules only 速度最快。">
          <Seg value="auto" onChange={() => {}} options={[["auto","Auto"],["rules","Rules only"],["llm","Always LLM"]]}/>
        </Row>
        <Row label="回复语言" hint="独立于 UI 语言。设为「跟随提问」会自动检测。">
          <select className="s-select" defaultValue="follow">
            <option value="follow">跟随提问</option>
            <option>中文</option>
            <option>English</option>
            <option>日本語</option>
          </select>
        </Row>
        <Row label="默认模型">
          <select className="s-select" defaultValue="auto">
            <option value="auto">自动路由</option>
            <option>Claude Sonnet 4.5</option>
            <option>GPT-5</option>
            <option>Gemini Pro</option>
          </select>
        </Row>
      </div>
      <div className="s-section">
        <h3>生成</h3>
        <Row label="回复后自动建议「接下来可问」" hint="基于对话上下文给出 3 条延伸问题。">
          <Switch on={true} onChange={() => {}}/>
        </Row>
        <Row label="展开 reasoning chain" hint="默认折叠;开启后每条 assistant 回复底部直接展开推理。">
          <Switch on={false} onChange={() => {}}/>
        </Row>
        <Row label="把我的 chat 用于改进 Weavr" hint="默认关闭。开启后会做匿名化抽样,绝不用于训练第三方模型。">
          <Switch on={false} onChange={() => {}}/>
        </Row>
      </div>
    </>
  );
}

/* —— Notifications —— */
function NotifPanel() {
  return (
    <>
      <div className="s-section">
        <h3>邮件</h3>
        <Row label="Weekly digest" hint="每周一发,内含本周节点 / 对话 / 误区与下周推荐。"><Switch on={true} onChange={() => {}}/></Row>
        <Row label="账户安全" hint="登录、密码修改、订阅变更。建议保持开启。"><Switch on={true} onChange={() => {}}/></Row>
        <Row label="新功能与更新" hint="重要 Changelog 与公告。"><Switch on={true} onChange={() => {}}/></Row>
        <Row label="付款与发票"><Switch on={true} onChange={() => {}}/></Row>
      </div>
      <div className="s-section">
        <h3>浏览器推送</h3>
        <Row label="学习提醒" hint="按设定时间提醒你回到学习计划。"><Switch on={false} onChange={() => {}}/></Row>
        <Row label="对话回复完成" hint="后台长对话完成时通知。"><Switch on={false} onChange={() => {}}/></Row>
      </div>
    </>
  );
}

/* —— Data —— */
function DataPanel() {
  return (
    <>
      <div className="s-section">
        <h3>已上传</h3>
        <p className="sec-desc">42 MB / 10 GB 已用。最大单文件 100 MB。</p>
        <div className="usage-bar" style={{ marginBottom: 16 }}><i style={{ width: "0.42%" }}/></div>
        <div style={{ background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 10, overflow: "hidden" }}>
          {[
            ["measure_theory.pdf", "12.4 MB", "已索引", "2 天前"],
            ["lecture_notes_w3.md", "84 KB", "已索引", "2 天前"],
            ["topology_handbook.pdf", "44 MB", "索引中…", "刚才"],
            ["RL_book_ch7.pdf", "8.2 MB", "已索引", "上周"],
          ].map(([n, s, st, t], i) => (
            <div key={i} style={{ display: "grid", gridTemplateColumns: "auto 1fr auto auto auto", gap: 14, alignItems: "center", padding: "12px 16px", borderBottom: i < 3 ? "1px solid var(--divider)" : "none", fontSize: 13 }}>
              <div style={{ width: 26, height: 26, borderRadius: 5, background: "var(--surface-2)", display: "grid", placeItems: "center", fontSize: 10, color: "var(--text-dim)" }}>{n.split(".").pop().toUpperCase()}</div>
              <span>{n}</span>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-faint)" }}>{s}</span>
              <span style={{ fontSize: 11, color: st.includes("中") ? "var(--accent-hi)" : "var(--accent-fresh)" }}>{st}</span>
              <span style={{ fontSize: 11, color: "var(--text-dim)" }}>{t}</span>
            </div>
          ))}
        </div>
      </div>
      <div className="s-section">
        <h3>导出</h3>
        <Row label="导出全部数据" hint="ZIP · chats + 私有节点 + uploads + activity log">
          <button className="btn btn-sm btn-quiet">请求 ZIP</button>
        </Row>
        <Row label="单会话导出" hint="Markdown · 包含 [[节点引用]] 渲染为链接">
          <button className="btn btn-sm btn-quiet">在对话内导出</button>
        </Row>
        <Row label="闪卡导出" hint="Anki .apkg · 包含正反面与引用节点">
          <button className="btn btn-sm btn-quiet">导出闪卡</button>
        </Row>
        <Row label="私有图谱导出" hint="JSON · 节点 + 边 + mastery">
          <button className="btn btn-sm btn-quiet">导出 JSON</button>
        </Row>
      </div>
    </>
  );
}

/* —— Labs —— */
function LabsPanel() {
  const labs = [
    ["多模态输入", "B13", "支持图片 / 截图 / 音频作为对话输入。识别率约 92%。", true],
    ["跨域类比", "A13", "把你不熟悉的概念用你熟悉的学科解释。可能产生误导,谨慎使用。", true],
    ["子图发现", "A9", "自动识别图谱中紧密联系的小社区,作为学习单元推荐。", false],
    ["命令面板 ⌘K", "A20", "全站跳转 + 设置项搜索。", true],
    ["Voice mode", "—", "口语化对话 + Socratic 主考官风。仅 Pro。", false],
    ["可执行模拟自定义", "—", "为任意公共节点写自定义模拟脚本(WebGL / Canvas)。", false],
  ];
  return (
    <div className="s-section">
      <h3>提前体验</h3>
      <p className="sec-desc">这些功能可能不稳定、可能随时下线。开启即同意我们收集匿名遥测以改进它们。</p>
      {labs.map(([name, code, desc, on]) => (
        <Row key={name} label={<span>{name} {code !== "—" && <span style={{ fontFamily: "var(--font-mono)", color: "var(--text-faint)", fontSize: 11, marginLeft: 8 }}>{code}</span>}</span>} hint={desc}>
          <Switch on={on} onChange={() => {}}/>
        </Row>
      ))}
    </div>
  );
}

/* —— Keyboard —— */
function KbdPanel() {
  const groups = {
    "全局": [
      ["命令面板", ["⌘", "K"]],
      ["切换 tab(下一个)", ["⌘", "]"]],
      ["切换 tab(上一个)", ["⌘", "["]],
      ["搜索节点", ["⌘", "/"]],
      ["设置", ["⌘", ","]],
    ],
    "图谱": [
      ["选中节点的相邻", ["A"]],
      ["展开 / 收起 drawer", ["Esc"]],
      ["放大图谱", ["+"]],
      ["缩小图谱", ["-"]],
      ["重置视角", ["0"]],
      ["从这里提问", ["Q"]],
    ],
    "Playground": [
      ["新对话", ["⌘", "N"]],
      ["发送", ["⌘", "↵"]],
      ["搜索对话", ["⌘", "/"]],
      ["切换 Direct ↔ Socratic", ["⌘", "M"]],
      ["插入节点引用", ["@"]],
    ],
  };
  return (
    <>
      {Object.entries(groups).map(([g, rows]) => (
        <div key={g} className="s-section">
          <h3>{g}</h3>
          {rows.map(([label, keys]) => (
            <div key={label} className="kbd-row">
              <span>{label}</span>
              <span className="keys">
                {keys.map((k, i) => <kbd key={i}>{k}</kbd>)}
              </span>
            </div>
          ))}
        </div>
      ))}
    </>
  );
}

/* —— Privacy —— */
function PrivacyPanel() {
  return (
    <>
      <div className="s-section">
        <h3>数据使用</h3>
        <Row label="把我的 chat 用于改进 Weavr" hint="默认关闭。开启后我们对该会话做匿名化抽样用于评估,绝不用于训练第三方模型。"><Switch on={false} onChange={() => {}}/></Row>
        <Row label="允许遥测" hint="匿名 UI 事件,用于发现性能问题。不含对话内容。"><Switch on={true} onChange={() => {}}/></Row>
        <Row label="错误报告" hint="自动上报 JS 错误堆栈,帮助我们修 bug。"><Switch on={true} onChange={() => {}}/></Row>
      </div>
      <div className="s-section">
        <h3>数据所在</h3>
        <Row label="存储区域" hint="目前不可更改。Studio 客户可申请。">
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text)" }}>Supabase · ap-southeast-1</span>
        </Row>
        <Row label="加密" hint="At rest: AES-256 · In transit: TLS 1.3">
          <span style={{ color: "var(--accent-fresh)" }}>已启用</span>
        </Row>
        <Row label="备份" hint="每小时增量,保留 30 天。">
          <span style={{ color: "var(--accent-fresh)" }}>已启用</span>
        </Row>
      </div>
    </>
  );
}

window.SettingsPage = SettingsPage;