// Settings — 体现 Hermes 作为企业 Agent 底座的关键配置面

const { useState: useSV } = React;

const SETTINGS_SECTIONS = [
  { id: 'workspace', label: '工作区', desc: '名称、成员、归属' },
  { id: 'models', label: 'Agent 模型', desc: '每个 Agent 使用的 LLM' },
  { id: 'memory', label: '多层记忆策略', desc: '容量、TTL、淘汰' },
  { id: 'tools', label: '工具 & MCP', desc: '外部能力接入' },
  { id: 'rbac', label: '权限 & 审计', desc: 'RBAC 与操作日志' },
  { id: 'quota', label: '配额 & 成本', desc: '预算与限流' },
  { id: 'deploy', label: '部署', desc: '私有化与 endpoint' },
  { id: 'compliance', label: '数据合规', desc: 'PII / 留存' },
];

function Field({ label, hint, children }) {
  return (
    <div className="set-field">
      <div className="set-field-l">
        <div className="set-field-label">{label}</div>
        {hint && <div className="set-field-hint">{hint}</div>}
      </div>
      <div className="set-field-r">{children}</div>
    </div>
  );
}

function Toggle({ on, onChange }) {
  return (
    <button type="button" className="set-toggle" data-on={on ? '1' : '0'}
            onClick={() => onChange(!on)}><i /></button>
  );
}

function WorkspaceSection() {
  const [name, setName] = useSV('Fenghuang Tech');
  const [region, setRegion] = useSV('cn-shanghai');
  return (
    <>
      <h3 className="set-h3">工作区</h3>
      <Field label="工作区名称">
        <input className="proj-search" style={{ maxWidth: 320, width: '100%' }} value={name} onChange={(e) => setName(e.target.value)} />
      </Field>
      <Field label="部署区域" hint="数据驻留区域，创建后不可更改">
        <select className="proj-search" style={{ maxWidth: 220, width: '100%', appearance: 'auto' }} value={region} onChange={(e) => setRegion(e.target.value)}>
          <option value="cn-shanghai">cn-shanghai · 上海</option>
          <option value="cn-beijing">cn-beijing · 北京</option>
          <option value="ap-singapore">ap-singapore · 新加坡</option>
          <option value="us-west-2">us-west-2 · 俄勒冈</option>
        </select>
      </Field>
      <Field label="成员" hint="管理员可邀请成员、分配 Agent 与项目权限">
        <div className="set-members">
          <span className="owner-av" style={{ background: 'oklch(0.62 0.14 55)' }}>L</span>
          <span className="owner-av" style={{ background: 'oklch(0.55 0.13 240)' }}>Y</span>
          <span className="owner-av" style={{ background: 'oklch(0.58 0.11 160)' }}>L</span>
          <span className="owner-av" style={{ background: 'oklch(0.55 0.18 25)' }}>R</span>
          <span className="owner-av" style={{ background: 'var(--ink-3)' }}>+8</span>
          <button className="hdr-btn" style={{ marginLeft: 12 }}>邀请成员</button>
        </div>
      </Field>
    </>
  );
}

function ModelsSection() {
  const [models, setModels] = useSV({
    req: { provider: 'anthropic', model: 'claude-sonnet-4.5', temp: 0.3 },
    prd: { provider: 'openai', model: 'gpt-4.1', temp: 0.2 },
    proto: { provider: 'anthropic', model: 'claude-opus-4', temp: 0.5 },
  });
  const agents = window.HERMES_AGENTS;
  const update = (id, key, val) => setModels(prev => ({ ...prev, [id]: { ...prev[id], [key]: val } }));
  return (
    <>
      <h3 className="set-h3">Agent 模型配置</h3>
      <p className="set-h3-sub">Hermes 模型无关 — 每个 Agent 可独立选择不同 provider 与模型，温度等推理参数也按 Agent 维度控制。</p>
      {agents.map(a => (
        <div className="set-card" key={a.id}>
          <div className="set-card-head">
            <span className="agent-glyph" style={{ background: a.color }}>{a.code.split('-')[0]}</span>
            <b>{a.name}</b>
            <span className="set-tag">{a.code}</span>
          </div>
          <div className="set-card-body">
            <Field label="Provider">
              <select className="proj-search" style={{ width: 180, appearance: 'auto' }}
                      value={models[a.id].provider} onChange={(e) => update(a.id, 'provider', e.target.value)}>
                <option value="anthropic">Anthropic</option>
                <option value="openai">OpenAI</option>
                <option value="qwen">通义千问</option>
                <option value="zhipu">智谱 GLM</option>
                <option value="local">本地 vLLM</option>
              </select>
            </Field>
            <Field label="模型">
              <input className="proj-search" style={{ width: 240 }}
                     value={models[a.id].model} onChange={(e) => update(a.id, 'model', e.target.value)} />
            </Field>
            <Field label="Temperature" hint={`${models[a.id].temp}`}>
              <input type="range" min="0" max="1" step="0.1" value={models[a.id].temp}
                     onChange={(e) => update(a.id, 'temp', Number(e.target.value))}
                     style={{ width: 200 }} />
            </Field>
          </div>
        </div>
      ))}
    </>
  );
}

function MemorySection() {
  return (
    <>
      <h3 className="set-h3">多层记忆策略</h3>
      <p className="set-h3-sub">为每一级记忆配置容量、TTL 与淘汰策略。Hermes 推理时按需召回，越上层越快、越下层越完整。</p>
      <table className="set-table">
        <thead><tr><th>层级</th><th>容量</th><th>TTL</th><th>淘汰策略</th><th>加密</th><th>启用</th></tr></thead>
        <tbody>
          <tr>
            <td><span className="mem-id">L0</span> 即时上下文</td>
            <td>8,192 tokens</td><td>会话结束</td><td>LRU</td>
            <td>at-rest</td><td><Toggle on={true} onChange={() => {}} /></td>
          </tr>
          <tr>
            <td><span className="mem-id">L1</span> 任务记忆</td>
            <td>64 entries</td><td>7 天后归档</td><td>LRU</td>
            <td>at-rest</td><td><Toggle on={true} onChange={() => {}} /></td>
          </tr>
          <tr>
            <td><span className="mem-id">L2</span> 项目记忆</td>
            <td>512 entries</td><td>项目归档</td><td>importance score</td>
            <td>at-rest + transit</td><td><Toggle on={true} onChange={() => {}} /></td>
          </tr>
          <tr>
            <td><span className="mem-id">L3</span> 长期记忆</td>
            <td>16,384 entries</td><td>永久</td><td>定期 compact</td>
            <td>at-rest + transit + KMS</td><td><Toggle on={true} onChange={() => {}} /></td>
          </tr>
        </tbody>
      </table>
      <Field label="召回策略" hint="Agent 推理时按需从上至下检索，命中即返回">
        <div className="proj-filter-group">
          <button className="on">分级召回</button>
          <button>全量召回</button>
          <button>仅 L0+L1</button>
        </div>
      </Field>
      <Field label="跨项目共享 L3" hint="允许同工作区项目共享长期沉淀。关闭则每个项目隔离。">
        <Toggle on={true} onChange={() => {}} />
      </Field>
    </>
  );
}

function ToolsSection() {
  const tools = [
    { name: 'vector_search', kind: '内置', desc: '基于 embedding 的语义检索', status: 'on' },
    { name: 'graph_build', kind: '内置', desc: '构建依赖/流程图谱', status: 'on' },
    { name: 'jira-mcp', kind: 'MCP', desc: '读取/创建 Jira 工单', status: 'on' },
    { name: 'figma-mcp', kind: 'MCP', desc: '读写 Figma 文件', status: 'on' },
    { name: 'github-mcp', kind: 'MCP', desc: '代码仓与 PR 操作', status: 'on' },
    { name: 'slack-mcp', kind: 'MCP', desc: '发送通知与请求审批', status: 'off' },
    { name: 'sql-runner', kind: '自建', desc: '只读访问 BI 数仓', status: 'on' },
  ];
  return (
    <>
      <h3 className="set-h3">工具 & MCP</h3>
      <p className="set-h3-sub">Agent 可调用的外部能力。所有 MCP server 走统一沙箱 + 审计 + 配额。</p>
      <table className="set-table">
        <thead><tr><th>名称</th><th>类型</th><th>描述</th><th>状态</th><th></th></tr></thead>
        <tbody>
          {tools.map(t => (
            <tr key={t.name}>
              <td><code style={{ fontFamily: 'var(--font-mono)', fontSize: 12 }}>{t.name}</code></td>
              <td><span className="set-tag">{t.kind}</span></td>
              <td style={{ color: 'var(--ink-3)' }}>{t.desc}</td>
              <td><span className={`status-pill-table ${t.status === 'on' ? 'done' : 'queued'}`}>{t.status === 'on' ? '已启用' : '已禁用'}</span></td>
              <td style={{ textAlign: 'right' }}><button className="hdr-btn">配置</button></td>
            </tr>
          ))}
        </tbody>
      </table>
      <button className="hdr-btn primary" style={{ marginTop: 12 }}>+ 接入新工具</button>
    </>
  );
}

function RbacSection() {
  return (
    <>
      <h3 className="set-h3">权限 & 审计</h3>
      <p className="set-h3-sub">基于角色的访问控制 (RBAC) + 全量操作审计。所有 Agent 调用、记忆写入、Skill 注册都有可追溯日志。</p>
      <Field label="角色矩阵">
        <table className="set-table" style={{ marginTop: 0 }}>
          <thead><tr><th>角色</th><th>启动 Pipeline</th><th>注册 Skill</th><th>修改记忆</th><th>查看审计</th></tr></thead>
          <tbody>
            <tr><td><b>Admin</b></td><td>✓</td><td>✓</td><td>✓</td><td>✓</td></tr>
            <tr><td><b>Engineer</b></td><td>✓</td><td>✓</td><td>L0/L1</td><td>—</td></tr>
            <tr><td><b>Reviewer</b></td><td>✓</td><td>—</td><td>—</td><td>✓</td></tr>
            <tr><td><b>Viewer</b></td><td>—</td><td>—</td><td>—</td><td>—</td></tr>
          </tbody>
        </table>
      </Field>
      <Field label="审计日志保留期">
        <select className="proj-search" style={{ width: 180, appearance: 'auto' }} defaultValue="365">
          <option value="30">30 天</option>
          <option value="90">90 天</option>
          <option value="365">365 天</option>
          <option value="forever">永久</option>
        </select>
      </Field>
      <Field label="敏感操作二次确认" hint="生产项目的 Pipeline 启动需 reviewer 双签">
        <Toggle on={true} onChange={() => {}} />
      </Field>
      <Field label="导出至 SIEM" hint="Splunk / Datadog / 阿里云 SLS">
        <Toggle on={false} onChange={() => {}} />
      </Field>
    </>
  );
}

function QuotaSection() {
  return (
    <>
      <h3 className="set-h3">配额 & 成本</h3>
      <p className="set-h3-sub">为每个 Agent 设定调用与 token 预算，防止意外突增。超额可降级到便宜模型。</p>
      <div className="set-quota-grid">
        <div className="set-quota-card">
          <div className="set-quota-label">本月已花费</div>
          <div className="set-quota-val">¥ 8,742</div>
          <div className="set-quota-bar"><i style={{ width: '58%' }} /></div>
          <div className="set-quota-sub">预算 ¥ 15,000 · 58%</div>
        </div>
        <div className="set-quota-card">
          <div className="set-quota-label">Token 用量</div>
          <div className="set-quota-val">42.8M</div>
          <div className="set-quota-bar"><i style={{ width: '71%' }} /></div>
          <div className="set-quota-sub">月度上限 60M · 71%</div>
        </div>
        <div className="set-quota-card">
          <div className="set-quota-label">最贵 Agent</div>
          <div className="set-quota-val">原型 Agent</div>
          <div className="set-quota-sub">¥ 4,210 · 占 48%</div>
        </div>
      </div>
      <Field label="月度预算 (CNY)">
        <input className="proj-search" style={{ width: 160 }} defaultValue="15000" />
      </Field>
      <Field label="超预算行为">
        <div className="proj-filter-group">
          <button className="on">告警 + 降级</button>
          <button>仅告警</button>
          <button>停机</button>
        </div>
      </Field>
      <Field label="单 Pipeline 调用上限">
        <input className="proj-search" style={{ width: 120 }} defaultValue="200" /> <span style={{ marginLeft: 8, color: 'var(--ink-3)' }}>次</span>
      </Field>
    </>
  );
}

function DeploySection() {
  return (
    <>
      <h3 className="set-h3">部署</h3>
      <p className="set-h3-sub">支持 SaaS 多租户、私有化 (VPC / IDC) 与混合部署。所有数据流可走专线。</p>
      <Field label="部署形态">
        <div className="proj-filter-group">
          <button className="on">SaaS</button>
          <button>VPC 私有化</button>
          <button>IDC 物理机</button>
          <button>混合</button>
        </div>
      </Field>
      <Field label="API Endpoint">
        <code className="set-code">https://hermes.fenghuang-tech.io/v1</code>
      </Field>
      <Field label="开放 API" hint="允许外部系统通过 API 触发 Pipeline">
        <Toggle on={true} onChange={() => {}} />
      </Field>
      <Field label="出站白名单" hint="限制 Agent 能访问的外网域名">
        <code className="set-code">api.openai.com, api.anthropic.com, *.fenghuang-tech.io</code>
      </Field>
      <Field label="灰度通道" hint="可将部分 Pipeline 路由至新版本 Agent 进行 A/B">
        <Toggle on={false} onChange={() => {}} />
      </Field>
    </>
  );
}

function ComplianceSection() {
  return (
    <>
      <h3 className="set-h3">数据合规</h3>
      <p className="set-h3-sub">企业级合规要求：PII 脱敏、跨境管控、留存策略、数据出境审批。</p>
      <Field label="PII 自动检测与脱敏" hint="手机号 / 身份证 / 邮箱 / 信用卡 等">
        <Toggle on={true} onChange={() => {}} />
      </Field>
      <Field label="模型训练数据脱敏" hint="发送给 LLM 前替换为占位符，回填后再恢复">
        <Toggle on={true} onChange={() => {}} />
      </Field>
      <Field label="禁止数据出境" hint="所有请求必须落在境内 provider">
        <Toggle on={false} onChange={() => {}} />
      </Field>
      <Field label="对话与产物留存">
        <select className="proj-search" style={{ width: 180, appearance: 'auto' }} defaultValue="365">
          <option value="30">30 天</option>
          <option value="180">180 天</option>
          <option value="365">365 天</option>
          <option value="forever">永久</option>
        </select>
      </Field>
      <Field label="合规框架">
        <div className="set-tags-row">
          <span className="set-tag-on">ISO 27001</span>
          <span className="set-tag-on">SOC 2 Type II</span>
          <span className="set-tag-on">等保三级</span>
          <span className="set-tag">GDPR</span>
          <span className="set-tag">HIPAA</span>
        </div>
      </Field>
    </>
  );
}

function SettingsView() {
  const [section, setSection] = useSV('models');

  const sectionContent = {
    workspace: <WorkspaceSection />,
    models: <ModelsSection />,
    memory: <MemorySection />,
    tools: <ToolsSection />,
    rbac: <RbacSection />,
    quota: <QuotaSection />,
    deploy: <DeploySection />,
    compliance: <ComplianceSection />,
  };

  return (
    <div className="proj-view">
      <div className="proj-head">
        <div className="proj-head-l">
          <h1>Settings</h1>
          <p>工作区级配置。Hermes 作为企业 Agent 底座的所有能力 — 模型、记忆、工具、权限、配额、合规 — 都在这里集中管理。</p>
        </div>
      </div>
      <div className="set-shell">
        <nav className="set-nav">
          {SETTINGS_SECTIONS.map(s => (
            <button key={s.id} className={`set-nav-btn ${section === s.id ? 'on' : ''}`}
                    onClick={() => setSection(s.id)}>
              <div className="set-nav-label">{s.label}</div>
              <div className="set-nav-desc">{s.desc}</div>
            </button>
          ))}
        </nav>
        <div className="set-form">
          {sectionContent[section]}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { SettingsView });