/* global React, Icon */

// ─── S09 MCP Servers ──────────────────────────────────
function S09_MCP() {
  const servers = [
    { name: "github", status: "ok", scope: "global", tools: 18, transport: "stdio", cmd: "npx -y @modelcontextprotocol/server-github", latency: "42ms" },
    { name: "linear", status: "ok", scope: "global", tools: 11, transport: "stdio", cmd: "npx -y mcp-linear", latency: "88ms" },
    { name: "postgres-prod", status: "err", scope: "project", tools: 0, transport: "stdio", cmd: "uvx mcp-server-postgres", latency: "—", error: "auth failed: PGPASSWORD not set" },
    { name: "filesystem", status: "ok", scope: "project", tools: 6, transport: "stdio", cmd: "npx -y @mcp/filesystem ~/projects", latency: "8ms" },
    { name: "sentry", status: "off", scope: "global", tools: 0, transport: "http", cmd: "https://mcp.sentry.dev", latency: "—" },
  ];
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="crumbs">manager / <span>mcp servers</span></div>
          <h1>MCP servers</h1>
          <p>5 configured · 3 connected · 1 error · 1 disabled</p>
        </div>
        <div className="actions">
          <button className="btn"><Icon name="refresh" size={12}/> Reconnect all</button>
          <button className="btn primary"><Icon name="plus" size={12}/> Add server</button>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 360px", gap: 14 }}>
        <div className="card">
          <div className="card-head"><h3>Servers</h3><span className="meta">stdio + http</span></div>
          <div className="card-body flush">
            <table className="tbl">
              <thead>
                <tr><th></th><th>Server</th><th>Tools</th><th>Transport</th><th>Latency</th><th>Scope</th><th>Status</th><th></th></tr>
              </thead>
              <tbody>
                {servers.map((s, i) => (
                  <tr key={s.name}>
                    <td style={{ width: 28 }}><span className={`toggle ${s.status !== "off" ? "on" : ""}`}/></td>
                    <td>
                      <div style={{ fontWeight: 500 }}>{s.name}</div>
                      <div className="mono" style={{ fontSize: 10.5, color: "var(--ink-3)", marginTop: 2 }}>{s.cmd}</div>
                      {s.error && <div style={{ fontSize: 10.5, color: "var(--err)", marginTop: 3 }}>! {s.error}</div>}
                    </td>
                    <td className="mono">{s.tools || "—"}</td>
                    <td><span className="pill"><span className="swatch"/>{s.transport}</span></td>
                    <td className="mono">{s.latency}</td>
                    <td className="mono" style={{ fontSize: 11 }}>{s.scope}</td>
                    <td>
                      {s.status === "ok" && <span className="pill ok"><span className="swatch"/>connected</span>}
                      {s.status === "err" && <span className="pill err"><span className="swatch"/>error</span>}
                      {s.status === "off" && <span className="pill"><span className="swatch"/>disabled</span>}
                    </td>
                    <td><Icon name="edit" size={12}/></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <h3><Icon name="mcp" size={12}/> github · 18 tools</h3>
            <span className="pill ok"><span className="swatch"/>connected</span>
          </div>
          <div className="card-body" style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            <dl className="kv">
              <dt>command</dt><dd className="mono" style={{ fontSize: 11 }}>npx -y @modelcontextprotocol/server-github</dd>
              <dt>env</dt><dd className="mono" style={{ fontSize: 11 }}>GITHUB_TOKEN=ghp_•••••</dd>
              <dt>started</dt><dd>14:02:11 · pid 28471</dd>
              <dt>messages</dt><dd className="mono">↑ 412 / ↓ 398</dd>
            </dl>
            <div>
              <div style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: ".06em", color: "var(--ink-3)", margin: "8px 0 6px" }}>Available tools</div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 4 }}>
                {["create_issue","list_issues","get_issue","create_pr","list_prs","merge_pr","create_branch","list_branches","get_file","create_file","update_file","delete_file","search_code","search_issues","list_commits","get_commit","add_comment","list_repos"].map(t => (
                  <span key={t} className="pill mono" style={{ fontSize: 10 }}>{t}</span>
                ))}
              </div>
            </div>
            <div style={{ display: "flex", gap: 6, marginTop: 4 }}>
              <button className="btn sm"><Icon name="bolt" size={11}/> Test call</button>
              <button className="btn sm"><Icon name="terminal" size={11}/> Logs</button>
              <div style={{ flex: 1 }}/>
              <button className="btn sm danger"><Icon name="x" size={11}/> Remove</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── S10 Claude Settings ──────────────────────────────
function S10_ClaudeSettings() {
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="crumbs">manager / <span>claude settings</span></div>
          <h1>Claude Code settings</h1>
          <p>Resolved view · global ~/.claude/settings.json overrides project .claude/settings.json where conflicts exist</p>
        </div>
        <div className="actions">
          <button className="btn"><Icon name="ext" size={12}/> View raw JSON</button>
          <button className="btn primary">Save</button>
        </div>
      </div>

      <div className="tabs">
        <span className="tab active">Permissions</span>
        <span className="tab">Models</span>
        <span className="tab">Environment</span>
        <span className="tab">Logging</span>
        <span className="tab">Output style</span>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
        <div className="card">
          <div className="card-head">
            <h3><Icon name="check" size={12}/> Allow rules <span className="pill ok"><span className="swatch"/>8</span></h3>
            <span className="meta">global</span>
          </div>
          <div className="card-body" style={{ display: "flex", flexDirection: "column", gap: 4 }}>
            {[
              "Bash(bun *)", "Bash(git status)", "Bash(git diff *)", "Bash(npm test)",
              "Read(~/projects/**)", "Edit(~/projects/**)", "WebFetch(domain:docs.anthropic.com)", "Glob(**/*)"
            ].map(r => (
              <div key={r} style={{ display: "flex", alignItems: "center", gap: 8, padding: "5px 10px", background: "var(--bg-1)", border: "1px solid var(--border)", borderRadius: 4 }}>
                <Icon name="check" size={12} className=""/>
                <span className="mono" style={{ fontSize: 11.5, flex: 1 }}>{r}</span>
                <Icon name="x" size={11} className=""/>
              </div>
            ))}
            <button className="btn sm ghost" style={{ marginTop: 4, justifyContent: "flex-start" }}><Icon name="plus" size={11}/> Add allow rule</button>
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <h3><Icon name="x" size={12}/> Deny rules <span className="pill err"><span className="swatch"/>4</span></h3>
            <span className="meta">global</span>
          </div>
          <div className="card-body" style={{ display: "flex", flexDirection: "column", gap: 4 }}>
            {[
              "Bash(rm -rf *)", "Bash(sudo *)", "Edit(.env)", "Edit(**/secrets/**)"
            ].map(r => (
              <div key={r} style={{ display: "flex", alignItems: "center", gap: 8, padding: "5px 10px", background: "var(--err-soft)", border: "1px solid #4a262a", borderRadius: 4 }}>
                <Icon name="shield" size={12}/>
                <span className="mono" style={{ fontSize: 11.5, flex: 1, color: "var(--err)" }}>{r}</span>
                <Icon name="x" size={11}/>
              </div>
            ))}
            <button className="btn sm ghost" style={{ marginTop: 4, justifyContent: "flex-start" }}><Icon name="plus" size={11}/> Add deny rule</button>
          </div>
        </div>

        <div className="card">
          <div className="card-head"><h3>Defaults</h3><span className="meta">applies to all sessions</span></div>
          <div className="card-body" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            <div className="field"><label>Default model</label><div className="input" style={{ display: "flex", justifyContent: "space-between" }}>claude-sonnet-4-5 <Icon name="chevd" size={11}/></div></div>
            <div className="field"><label>Permission mode</label><div className="input" style={{ display: "flex", justifyContent: "space-between" }}>default · ask <Icon name="chevd" size={11}/></div></div>
            <div className="field"><label>Token budget</label><input className="input mono" defaultValue="200000"/></div>
            <div className="field"><label>Auto-compact</label><div style={{ display: "flex", alignItems: "center", gap: 8, padding: "6px 0" }}><span className="toggle on"/><span style={{ fontSize: 12 }}>at 80% context</span></div></div>
          </div>
        </div>

        <div className="card">
          <div className="card-head"><h3>Environment</h3><span className="meta">3 vars</span></div>
          <div className="card-body" style={{ padding: 0 }}>
            <table className="tbl">
              <tbody>
                {[["GITHUB_TOKEN", "ghp_•••••"], ["ANTHROPIC_API_KEY", "sk-ant-•••••"], ["EDITOR", "code --wait"]].map(([k, v]) => (
                  <tr key={k}><td className="mono" style={{ width: "40%" }}>{k}</td><td className="mono" style={{ color: "var(--ink-2)" }}>{v}</td><td style={{ width: 30 }}><Icon name="edit" size={11}/></td></tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
}

window.S09_MCP = S09_MCP;
window.S10_ClaudeSettings = S10_ClaudeSettings;