/* screens-knowledge.jsx — 知识源总览 + 子页（知识库 / 我的文档 / Apple Health） */
/* global React, Screen, Ic */

/* 通用数据源卡片行 */
function SourceRow({ icon: I, name, meta, status, last }) {
  return (
    <div className="row">
      <span className="r-ic" style={{ background: 'var(--purple-bg)', color: 'var(--purple-dark)' }}><I size={18} /></span>
      <div className="r-main">
        <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
          <span className="r-title">{name}</span>
          {status === 'on' && <span className="badge on"><span className="dot on" />已授权</span>}
          {status === 'off' && <span className="badge off"><span className="dot off" />未授权</span>}
        </div>
        <div className="r-meta">{meta}</div>
      </div>
      <Ic.chevR size={17} className="chev" />
    </div>
  );
}

/* ---------- 总览页 ---------- */
function KnowledgeOverview() {
  const prompts = [
    '上周我开会最多那天，身体状态怎么样？',
    '结合日历，提醒我明天要准备什么',
  ];
  return (
    <Screen tinted>
      <div className="appbar" style={{ background: 'var(--bg-subtle)' }}>
        <button className="iconbtn"><Ic.back size={22} /></button>
        <div className="appbar-title">知识源</div>
        <div className="spacer" />
        <button className="iconbtn"><Ic.gear size={20} /></button>
      </div>
      <div className="body">
        <div className="scroll" style={{ paddingBottom: 16 }}>
          {/* 跨源提示词 */}
          <div style={{ padding: '6px 16px 0' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12.5, fontWeight: 600, color: 'var(--t3)', marginBottom: 10 }}>
              <Ic.sparkle size={15} color="var(--purple-dark)" /> 试试跨源问一句
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
              {prompts.map((p) => (
                <div key={p} style={{ display: 'flex', alignItems: 'center', gap: 10, background: 'var(--purple-bg)', border: '1px solid var(--purple-border)', borderRadius: 12, padding: '12px 14px' }}>
                  <span style={{ flex: 1, fontSize: 13.5, color: 'var(--t2)', lineHeight: 1.5 }}>{p}</span>
                  <Ic.arrowUp size={16} color="var(--purple-dark)" style={{ transform: 'rotate(45deg)' }} />
                </div>
              ))}
            </div>
          </div>

          {/* 小浣熊内置 */}
          <div style={{ padding: '20px 18px 9px' }} className="section-label">小浣熊内置</div>
          <div className="card" style={{ margin: '0 16px' }}>
            <SourceRow icon={Ic.books} name="内置知识库" meta="12 个文件 · 267 MB · 更新于 2 天前" />
            <SourceRow icon={Ic.doc} name="我的文档" meta="28 篇 · 更新于 9 天前" />
          </div>

          {/* 第三方数据源 */}
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '20px 18px 9px' }}>
            <span className="section-label">第三方数据源</span>
            <span style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--purple-dark)', display: 'inline-flex', alignItems: 'center', gap: 3 }}><Ic.plus size={14} /> 添加</span>
          </div>
          <div className="card" style={{ margin: '0 16px' }}>
            <SourceRow icon={Ic.cal} name="本地日历" status="on" meta="同步至 2 分钟前" />
            <SourceRow icon={Ic.heart} name="Apple Health" status="on" meta="同步至 5 分钟前" />
            <SourceRow icon={Ic.check} name="Mac 提醒事项" status="off" meta="点击授权后可用" />
            <SourceRow icon={Ic.mail} name="邮件" status="off" meta="点击授权后可用" />
          </div>
        </div>
      </div>
    </Screen>
  );
}

/* 子页底部对话框（标注 scope） */
function ScopeDock({ scope, chip, action }) {
  return (
    <div className="dock-wrap" style={{ paddingTop: 12, borderTop: '1px solid var(--border)' }}>
      {chip && (
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, marginBottom: 10, fontSize: 12, fontWeight: 500, color: 'var(--purple-dark)', background: 'var(--purple-bg)', border: '1px solid var(--purple-border)', padding: '5px 10px', borderRadius: 20 }}>
          正在对话：{chip} <Ic.x size={13} />
        </div>
      )}
      <div className="dock" style={{ background: '#fff' }}>
        <span className="ph">发起对话 · 基于{scope}</span>
        {action === 'upload' && <span className="iconbtn" style={{ width: 32, color: 'var(--muted)' }}><Ic.upload size={19} /></span>}
        {action === 'pen' && <span className="iconbtn" style={{ width: 32, color: 'var(--muted)' }}><Ic.pen size={18} /></span>}
        <span className="mic"><Ic.mic size={19} /></span>
      </div>
    </div>
  );
}

/* ---------- 知识库子页（文档型） ---------- */
function FileRow({ icon: I, name, time, error }) {
  return (
    <div className="row">
      <span className="r-ic" style={{ background: 'transparent', color: I === Ic.folder ? 'var(--warning)' : 'var(--t3)' }}><I size={22} /></span>
      <div className="r-main">
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <span className="r-title">{name}</span>
          {error && <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--danger)' }} />}
        </div>
        <div className="r-meta">{error ? '入库失败 · 点击查看' : time}</div>
      </div>
    </div>
  );
}

function KbSubpage() {
  return (
    <Screen tinted>
      <div className="appbar" style={{ background: 'var(--bg-subtle)' }}>
        <button className="iconbtn"><Ic.back size={22} /></button>
        <div className="appbar-title">内置知识库</div>
      </div>
      <div className="body">
        {/* 存储状态条 */}
        <div style={{ padding: '4px 18px 12px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'var(--muted)', marginBottom: 6 }}>
            <span>已用 267 MB</span><span>500 MB</span>
          </div>
          <div style={{ height: 6, borderRadius: 3, background: 'var(--bg-soft)', overflow: 'hidden' }}>
            <div style={{ width: '53%', height: '100%', background: 'var(--purple)', borderRadius: 3 }} />
          </div>
        </div>
        {/* tabs + search */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '0 16px 8px' }}>
          <div className="switcher" style={{ margin: 0, flex: 1 }}>
            <div className="seg active" style={{ height: 32 }}>按文件夹</div>
            <div className="seg" style={{ height: 32 }}>所有文件</div>
          </div>
          <button className="iconbtn" style={{ background: '#fff', border: '1px solid var(--border)' }}><Ic.search size={18} /></button>
        </div>
        <div className="scroll">
          <div className="card" style={{ margin: '4px 16px 0' }}>
            <FileRow icon={Ic.folder} name="品牌物料" time="1 年前" />
            <FileRow icon={Ic.folder} name="财务报表" time="6 个月前" />
            <FileRow icon={Ic.doc} name="2024 年度复盘.pdf" time="6 个月前" />
            <FileRow icon={Ic.doc} name="供应商合同汇总.xlsx" time="3 个月前" error />
            <FileRow icon={Ic.doc} name="产品需求文档 v3.docx" time="1 个月前" />
          </div>
        </div>
        <ScopeDock scope="内置知识库" chip="《2024 年度复盘.pdf》" action="upload" />
      </div>
    </Screen>
  );
}

/* ---------- 我的文档子页（文档型） ---------- */
function DocsSubpage() {
  const docs = [
    { name: '周一团队同步纪要', time: '更新于 9 天前' },
    { name: 'Q2 复盘提纲', time: '更新于 2 个月前' },
    { name: '产品发布会演讲稿', time: '更新于 3 个月前' },
    { name: '招聘 JD · 高级产品经理', time: '更新于 4 个月前' },
  ];
  return (
    <Screen tinted>
      <div className="appbar" style={{ background: 'var(--bg-subtle)' }}>
        <button className="iconbtn"><Ic.back size={22} /></button>
        <div className="appbar-title">我的文档</div>
      </div>
      <div className="body">
        <div style={{ padding: '4px 16px 10px' }}>
          <div className="dock" style={{ minHeight: 42, background: '#fff', borderRadius: 11, padding: '0 14px', gap: 8 }}>
            <Ic.search size={17} color="var(--muted)" />
            <span className="ph" style={{ fontSize: 14 }}>搜索文档</span>
          </div>
        </div>
        <div className="scroll">
          <div className="card" style={{ margin: '0 16px' }}>
            {docs.map((d) => (
              <div className="row" key={d.name}>
                <span className="r-ic" style={{ background: 'transparent', color: 'var(--t3)' }}><Ic.doc size={22} /></span>
                <div className="r-main">
                  <div className="r-title">{d.name}</div>
                  <div className="r-meta">{d.time}</div>
                </div>
                <Ic.chevR size={17} className="chev" />
              </div>
            ))}
          </div>
        </div>
        <ScopeDock scope="我的文档" action="pen" />
      </div>
    </Screen>
  );
}

/* ---------- Apple Health 子页（流数据型） ---------- */
function HealthSubpage() {
  const stats = [
    { k: '平均步数', v: '8,200', u: '步 / 天' },
    { k: '平均睡眠', v: '7h 12m', u: '每晚' },
    { k: '静息心率', v: '62', u: 'bpm' },
  ];
  return (
    <Screen tinted>
      <div className="appbar" style={{ background: 'var(--bg-subtle)' }}>
        <button className="iconbtn"><Ic.back size={22} /></button>
        <div className="appbar-title">Apple Health</div>
      </div>
      <div className="body">
        {/* 状态条 */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '4px 18px 14px' }}>
          <span className="badge on"><span className="dot on" />已授权</span>
          <span style={{ fontSize: 12.5, color: 'var(--muted)', flex: 1 }}>最近同步 2 分钟前</span>
          <span style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--purple-dark)' }}>管理授权</span>
        </div>
        <div className="scroll">
          <div className="section-label" style={{ padding: '0 18px 10px' }}>最近 7 天摘要</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, padding: '0 16px' }}>
            {stats.map((s) => (
              <div className="card" key={s.k} style={{ padding: '14px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <span style={{ fontSize: 14, color: 'var(--t2)' }}>{s.k}</span>
                <span style={{ display: 'flex', alignItems: 'baseline', gap: 5 }}>
                  <span style={{ fontSize: 21, fontWeight: 700, color: 'var(--t1)' }}>{s.v}</span>
                  <span style={{ fontSize: 11.5, color: 'var(--muted)' }}>{s.u}</span>
                </span>
              </div>
            ))}
          </div>
          <p style={{ fontSize: 12, color: 'var(--subtle)', textAlign: 'center', marginTop: 16, padding: '0 30px', lineHeight: 1.6 }}>
            先看到「这里有什么」，再决定问什么。可整体对话这个数据源。
          </p>
        </div>
        <ScopeDock scope="Apple Health" />
      </div>
    </Screen>
  );
}

Object.assign(window, { KnowledgeOverview, KbSubpage, DocsSubpage, HealthSubpage });