// Skill Library — 跨 agent 的能力目录，体现 Hermes 的版本管理 / Schema / 可观测性

const { useState: useSL } = React;

// 扩充：每个 skill 的完整元数据。注意这里的 trend 是为 sparkline 准备的，
// 数据基于 SKILLS_BY_AGENT 派生 + 增加企业级元信息。
const SKILL_CATALOG = [
  // REQ
  { id: 'sk_req_story', agent: 'req', name: '用户故事拆解', desc: '将业务诉求拆为标准 User Story 三段式', version: 'v2.4', status: 'stable',
    inv: 312, level: 4, success: 96.2, p95: 1.8, owner: '需求 Agent · 内置', deps: ['vector_search', 'llm_call'], usedIn: 47, tags: ['需求'],
    trend: [4,5,6,8,9,11,14,16,18,22,28,34], schema: { in: 'business_brief: string', out: 'stories: UserStory[]' } },
  { id: 'sk_req_bnd', agent: 'req', name: '边界条件枚举', desc: '基于 happy path 反向枚举异常与边界场景', version: 'v1.7', status: 'stable',
    inv: 198, level: 3, success: 91.5, p95: 2.1, owner: '需求 Agent · 内置', deps: ['llm_call'], usedIn: 32, tags: ['需求', '质量'],
    trend: [2,3,3,5,6,7,9,12,14,15,17,20], schema: { in: 'happy_path: Flow', out: 'edges: EdgeCase[]' } },
  { id: 'sk_req_search', agent: 'req', name: '相似项目检索', desc: '在 L3 长期记忆中检索相似历史项目', version: 'v3.1', status: 'stable',
    inv: 421, level: 5, success: 98.4, p95: 0.6, owner: '需求 Agent · 内置', deps: ['memory_l3', 'embedding'], usedIn: 64, tags: ['检索', '记忆'],
    trend: [8,10,13,15,18,22,28,33,38,42,47,52], schema: { in: 'query: string', out: 'matches: Project[]' } },
  { id: 'sk_req_stake', agent: 'req', name: '利益相关者识别', desc: '从场景描述中识别 stakeholders 与影响面', version: 'v0.9', status: 'beta',
    inv: 87, level: 2, success: 87.1, p95: 2.8, owner: '需求 Agent', deps: ['llm_call'], usedIn: 14, tags: ['需求'],
    trend: [1,2,2,3,3,4,5,6,6,7,8,10], schema: { in: 'context: string', out: 'stakeholders: Persona[]' } },
  { id: 'sk_req_align', agent: 'req', name: '业务目标对齐', desc: '对齐 user story 与北极星指标', version: 'v1.3', status: 'stable',
    inv: 156, level: 3, success: 93.8, p95: 1.5, owner: '需求 Agent · 内置', deps: ['llm_call', 'memory_l2'], usedIn: 28, tags: ['需求', '指标'],
    trend: [3,4,5,7,8,9,11,13,14,15,16,18], schema: { in: 'stories, north_star', out: 'gaps: Issue[]' } },
  // PRD
  { id: 'sk_prd_ac', agent: 'prd', name: '验收标准生成', desc: '为每条 story 生成 Given-When-Then 三段式 AC', version: 'v2.0', status: 'stable',
    inv: 267, level: 4, success: 95.1, p95: 1.2, owner: 'PRD Agent · 内置', deps: ['llm_call'], usedIn: 51, tags: ['PRD', '验收'],
    trend: [3,5,7,9,11,14,17,20,22,25,28,32], schema: { in: 'story: UserStory', out: 'criteria: AC[]' } },
  { id: 'sk_prd_struct', agent: 'prd', name: '功能列表结构化', desc: '将散点功能整理为四级结构化 PRD 章节', version: 'v1.8', status: 'stable',
    inv: 198, level: 3, success: 92.7, p95: 2.4, owner: 'PRD Agent · 内置', deps: ['llm_call'], usedIn: 38, tags: ['PRD'],
    trend: [2,4,5,7,9,11,13,15,17,19,21,24], schema: { in: 'features: Feature[]', out: 'doc: PRD' } },
  { id: 'sk_prd_dep', agent: 'prd', name: '依赖关系标注', desc: '识别功能间依赖与实现先后', version: 'v1.4', status: 'stable',
    inv: 124, level: 3, success: 89.4, p95: 1.7, owner: 'PRD Agent', deps: ['graph_build'], usedIn: 22, tags: ['PRD', '依赖'],
    trend: [1,2,3,4,5,6,8,10,11,13,15,17], schema: { in: 'features', out: 'graph: DAG' } },
  { id: 'sk_prd_metric', agent: 'prd', name: '指标定义', desc: '为每个核心功能定义可观测指标', version: 'v0.7', status: 'beta',
    inv: 89, level: 2, success: 84.3, p95: 2.2, owner: 'PRD Agent', deps: ['llm_call'], usedIn: 17, tags: ['PRD', '指标'],
    trend: [1,1,2,3,3,4,5,6,7,8,9,11], schema: { in: 'feature', out: 'metrics: Metric[]' } },
  // PROTO
  { id: 'sk_proto_tree', agent: 'proto', name: '组件树搭建', desc: '基于 PRD 自动生成组件层级与命名', version: 'v1.6', status: 'stable',
    inv: 178, level: 3, success: 90.8, p95: 2.6, owner: '原型 Agent · 内置', deps: ['llm_call', 'design_system'], usedIn: 26, tags: ['原型'],
    trend: [2,3,4,6,8,10,12,14,16,18,20,23], schema: { in: 'prd: PRD', out: 'tree: ComponentTree' } },
  { id: 'sk_proto_flow', agent: 'proto', name: '交互流程图', desc: '将主流程转化为可点击节点图', version: 'v1.2', status: 'stable',
    inv: 142, level: 3, success: 88.7, p95: 1.9, owner: '原型 Agent', deps: ['graph_build', 'llm_call'], usedIn: 19, tags: ['原型', '流程'],
    trend: [1,2,3,5,7,9,11,13,15,16,18,20], schema: { in: 'use_cases', out: 'flow: FlowGraph' } },
  { id: 'sk_proto_empty', agent: 'proto', name: '空状态设计', desc: '为列表/卡片/抽屉自动设计空状态文案与图示', version: 'v0.5', status: 'experimental',
    inv: 67, level: 2, success: 79.2, p95: 3.1, owner: '原型 Agent', deps: ['llm_call'], usedIn: 11, tags: ['原型', 'UX'],
    trend: [0,1,1,2,3,3,4,5,6,7,8,9], schema: { in: 'screen', out: 'empty: EmptyState' } },
];

const SKILL_KPIS = [
  { label: '已注册 Skill', value: 54, sub: '+3 本月', tone: 'ink' },
  { label: '本周调用次数', value: '2,648', sub: '+12% vs 上周', tone: 'green' },
  { label: '平均成功率', value: '92.4%', sub: '↑ 1.8 pp', tone: 'green' },
  { label: '平均 p95 延迟', value: '1.94s', sub: '稳定', tone: 'ink' },
  { label: 'Beta / 实验', value: '6', sub: '待提升', tone: 'accent' },
];

function SkillRow({ skill, active, onClick, agentColor }) {
  const max = Math.max(...skill.trend, 1);
  return (
    <div className={`sk-row ${active ? 'active' : ''}`} onClick={onClick}>
      <div className="sk-row-head">
        <span className="sk-glyph" style={{ background: agentColor }}>
          {skill.agent === 'req' ? 'R' : skill.agent === 'prd' ? 'P' : 'D'}
        </span>
        <span className="sk-row-name">{skill.name}</span>
        <span className={`sk-status ${skill.status}`}>{skill.status}</span>
      </div>
      <div className="sk-row-meta">
        <span className="sk-ver">{skill.version}</span>
        <span>·</span>
        <span>{skill.inv.toLocaleString()} 次</span>
        <span>·</span>
        <span>{skill.success}% 成功</span>
      </div>
      <div className="sk-spark">
        {skill.trend.map((v, i) => (
          <i key={i} style={{ height: `${(v / max) * 100}%` }}
             className={i === skill.trend.length - 1 ? 'last' : ''} />
        ))}
      </div>
    </div>
  );
}

function SkillDetail({ skill, agent }) {
  if (!skill) return <div className="sk-empty">选择左侧 Skill 查看详情</div>;
  const max = Math.max(...skill.trend, 1);
  return (
    <div className="sk-detail">
      <div className="sk-detail-head">
        <div>
          <div className="sk-d-title">
            <span className="sk-glyph" style={{ background: agent.color, width: 24, height: 24 }}>
              {skill.agent === 'req' ? 'R' : skill.agent === 'prd' ? 'P' : 'D'}
            </span>
            <h2>{skill.name}</h2>
            <span className="sk-ver-pill">{skill.version}</span>
            <span className={`sk-status ${skill.status}`}>{skill.status}</span>
          </div>
          <div className="sk-d-desc">{skill.desc}</div>
        </div>
        <div className="sk-d-actions">
          <button className="hdr-btn">查看版本历史</button>
          <button className="hdr-btn">回滚</button>
          <button className="hdr-btn primary">运行测试</button>
        </div>
      </div>

      <div className="sk-d-stats">
        <div className="sk-stat"><div className="lbl">调用次数</div><div className="val">{skill.inv.toLocaleString()}</div></div>
        <div className="sk-stat"><div className="lbl">成功率</div><div className="val green">{skill.success}%</div></div>
        <div className="sk-stat"><div className="lbl">p95 延迟</div><div className="val">{skill.p95}s</div></div>
        <div className="sk-stat"><div className="lbl">熟练度</div><div className="val">
          <span className="skill-level" style={{verticalAlign:'middle'}}>
            {[1,2,3,4,5].map(n => <i key={n} className={n <= skill.level ? 'on' : ''} />)}
          </span>
          <span style={{ marginLeft: 8, fontSize: 12, color: 'var(--ink-3)' }}>Lv.{skill.level}</span>
        </div></div>
        <div className="sk-stat"><div className="lbl">引用项目</div><div className="val">{skill.usedIn}</div></div>
      </div>

      <div className="sk-d-section">
        <h4>成长曲线 · 近 12 周调用量</h4>
        <div className="sk-chart">
          {skill.trend.map((v, i) => (
            <div key={i} className="sk-bar">
              <i style={{ height: `${(v / max) * 100}%` }}
                 className={i === skill.trend.length - 1 ? 'last' : ''} />
              <span className="x">W{i + 1}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="sk-d-grid">
        <div className="sk-d-section">
          <h4>I/O Schema</h4>
          <pre className="sk-code"><span className="kw">in</span>  : {skill.schema.in}
<span className="kw">out</span> : {skill.schema.out}</pre>
        </div>
        <div className="sk-d-section">
          <h4>依赖工具</h4>
          <div className="sk-deps">
            {skill.deps.map(d => <span key={d} className="sk-dep">{d}</span>)}
          </div>
        </div>
      </div>

      <div className="sk-d-section">
        <h4>近期调用 · 最新 5 条</h4>
        <table className="sk-log">
          <thead><tr><th>时间</th><th>项目</th><th>状态</th><th>耗时</th><th>记忆写入</th></tr></thead>
          <tbody>
            <tr><td>14:32:41</td><td>#2891 反馈管理</td><td><span className="ok">success</span></td><td>1.4s</td><td>L0 → L1</td></tr>
            <tr><td>14:28:09</td><td>#2891 反馈管理</td><td><span className="ok">success</span></td><td>1.7s</td><td>L0</td></tr>
            <tr><td>14:11:03</td><td>#2887 会员体系</td><td><span className="ok">success</span></td><td>2.0s</td><td>L0 → L1 → L2</td></tr>
            <tr><td>13:48:22</td><td>#2890 优惠券中台</td><td><span className="warn">retry</span></td><td>3.1s</td><td>L0</td></tr>
            <tr><td>13:48:18</td><td>#2890 优惠券中台</td><td><span className="ok">success</span></td><td>1.5s</td><td>L0 → L1</td></tr>
          </tbody>
        </table>
      </div>
    </div>
  );
}

function SkillLibraryView() {
  const [agentFilter, setAgentFilter] = useSL('all');
  const [statusFilter, setStatusFilter] = useSL('all');
  const [query, setQuery] = useSL('');
  const [selectedId, setSelectedId] = useSL('sk_req_search');

  const agents = window.HERMES_AGENTS;
  const list = SKILL_CATALOG.filter(s => {
    if (agentFilter !== 'all' && s.agent !== agentFilter) return false;
    if (statusFilter !== 'all' && s.status !== statusFilter) return false;
    if (query.trim() && !s.name.includes(query) && !s.desc.includes(query)) return false;
    return true;
  });

  const selected = SKILL_CATALOG.find(s => s.id === selectedId);
  const selectedAgent = selected ? agents.find(a => a.id === selected.agent) : null;
  const colorOf = (id) => agents.find(a => a.id === id)?.color || 'var(--muted)';

  return (
    <div className="proj-view">
      <div className="proj-head">
        <div className="proj-head-l">
          <h1>Skill Library</h1>
          <p>跨 Agent 的能力目录。每个 Skill 都有版本、Schema、调用历史与可观测性指标 — 高频被调用的 Skill 持续沉淀到 L3 长期记忆。</p>
        </div>
        <div className="proj-head-r">
          <button className="hdr-btn">导入</button>
          <button className="hdr-btn primary">+ 注册新 Skill</button>
        </div>
      </div>

      <div className="proj-kpis" style={{ gridTemplateColumns: 'repeat(5, 1fr)' }}>
        {SKILL_KPIS.map(k => (
          <div className="kpi" key={k.label}>
            <div className="kpi-label">{k.label}</div>
            <div className={`kpi-val ${k.tone}`}>{k.value}</div>
            <div className="kpi-sub">{k.sub}</div>
          </div>
        ))}
      </div>

      <div className="proj-toolbar">
        <div className="proj-filter-group">
          <button className={agentFilter === 'all' ? 'on' : ''} onClick={() => setAgentFilter('all')}>全部 Agent</button>
          <button className={agentFilter === 'req' ? 'on' : ''} onClick={() => setAgentFilter('req')}>需求</button>
          <button className={agentFilter === 'prd' ? 'on' : ''} onClick={() => setAgentFilter('prd')}>PRD</button>
          <button className={agentFilter === 'proto' ? 'on' : ''} onClick={() => setAgentFilter('proto')}>原型</button>
        </div>
        <div className="proj-filter-group">
          <button className={statusFilter === 'all' ? 'on' : ''} onClick={() => setStatusFilter('all')}>全部</button>
          <button className={statusFilter === 'stable' ? 'on' : ''} onClick={() => setStatusFilter('stable')}>稳定</button>
          <button className={statusFilter === 'beta' ? 'on' : ''} onClick={() => setStatusFilter('beta')}>Beta</button>
          <button className={statusFilter === 'experimental' ? 'on' : ''} onClick={() => setStatusFilter('experimental')}>实验</button>
        </div>
        <input className="proj-search" placeholder="按名称/描述搜索…" value={query} onChange={(e) => setQuery(e.target.value)} />
        <div className="proj-toolbar-spacer" />
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-3)' }}>
          {list.length} / {SKILL_CATALOG.length}
        </span>
      </div>

      <div className="sk-master-detail">
        <div className="sk-list">
          {list.map(s => (
            <SkillRow key={s.id} skill={s} active={s.id === selectedId}
                      onClick={() => setSelectedId(s.id)} agentColor={colorOf(s.agent)} />
          ))}
          {list.length === 0 && <div className="sk-empty" style={{ padding: 24 }}>无匹配 Skill</div>}
        </div>
        <div className="sk-detail-wrap">
          <SkillDetail skill={selected} agent={selectedAgent} />
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { SkillLibraryView });