/* global React, Icon */

// ─── Reusable components ──────────────────────────────
const ScopeToggle = ({ value = "global" }) => (
  <div style={{ display: "flex", gap: 4, background: "var(--bg-1)", border: "1px solid var(--border-strong)", borderRadius: "var(--r-2)", padding: 2 }}>
    {["global", "project", "local"].map(s => (
      <button key={s} className={`btn sm ${value === s ? "primary" : "ghost"}`} style={{ justifyContent: "center", textTransform: "capitalize", minWidth: 64 }}>{s}</button>
    ))}
  </div>
);

const UnknownFields = ({ keys = ["customExperiment", "internalDebugFlag"] }) => {
  const [open, setOpen] = React.useState(false);
  return (
    <div className="card" style={{ marginTop: 14 }}>
      <div className="card-head" style={{ cursor: "pointer" }} onClick={() => setOpen(!open)}>
        <h3>
          <Icon name={open ? "chevd" : "chev"} size={11}/>
          Unknown fields <span className="pill warn"><span className="swatch"/>{keys.length}</span>
        </h3>
        <span className="meta">keys not recognized by this UI · edit raw</span>
      </div>
      {open && (
        <div className="card-body">
          <div className="code">
{`{
  `}<span className="k">"customExperiment"</span>{`: `}<span className="s">"alpha"</span>{`,
  `}<span className="k">"internalDebugFlag"</span>{`: `}<span className="n">true</span>
{`
}`}
          </div>
          <div style={{ display: "flex", gap: 6, marginTop: 10 }}>
            <button className="btn sm">Format</button>
            <div style={{ flex: 1 }}/>
            <button className="btn sm primary">Save raw</button>
          </div>
        </div>
      )}
    </div>
  );
};

const JsonPreview = ({ children, label = "Resolved output" }) => (
  <div>
    <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, textTransform: "uppercase", letterSpacing: ".06em", color: "var(--ink-3)", marginBottom: 6 }}>
      <span>{label}</span>
      <span className="link" style={{ textTransform: "none" }}><Icon name="copy" size={10}/> copy</span>
    </div>
    <div className="code">{children}</div>
  </div>
);

const ProviderBadge = ({ name = "anthropic-direct", model = "sonnet-4-5" }) => (
  <span className="pill" style={{ borderColor: "var(--accent-line)", background: "var(--accent-soft)", color: "var(--accent)" }}>
    <Icon name="globe" size={9}/> {name}
    <span style={{ color: "var(--ink-3)", marginLeft: 4 }}>· {model}</span>
  </span>
);

// ─── S15 (was S13) API & Authentication ───────────────
function S15_ApiAuth() {
  const [provider, setProvider] = React.useState("anthropic");
  const providers = [
    { id: "anthropic", label: "Anthropic Direct" },
    { id: "bedrock", label: "Amazon Bedrock" },
    { id: "vertex", label: "Google Vertex" },
    { id: "foundry", label: "MS Foundry" },
    { id: "custom", label: "Custom Proxy" },
  ];
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="crumbs">manager / claude settings / <span>api &amp; auth</span></div>
          <h1>API &amp; authentication</h1>
          <p>Connection, credentials, and headers · API keys never logged to CCM</p>
        </div>
        <div className="actions">
          <ScopeToggle value="global"/>
          <button className="btn primary">Save</button>
        </div>
      </div>

      <div style={{
        display: "flex", gap: 12, alignItems: "flex-start",
        background: "var(--warn-soft)", border: "1px solid #4a3a1f",
        borderRadius: "var(--r-3)", padding: "10px 14px", marginBottom: 14
      }}>
        <Icon name="warn" size={14}/>
        <div style={{ fontSize: 12, lineHeight: 1.5 }}>
          <b style={{ color: "var(--warn)" }}>API key overrides subscription.</b>
          <span style={{ color: "var(--ink-1)" }}> Setting <span className="mono">ANTHROPIC_API_KEY</span> bills via API in every session. Leave blank to keep subscription auth.</span>
        </div>
      </div>

      <div className="card" style={{ marginBottom: 14 }}>
        <div className="card-head"><h3><Icon name="globe" size={12}/> Provider</h3></div>
        <div className="card-body">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 8 }}>
            {providers.map(p => (
              <div key={p.id} onClick={() => setProvider(p.id)} style={{
                padding: "10px 12px",
                borderRadius: "var(--r-2)",
                border: provider === p.id ? "1px solid var(--accent)" : "1px solid var(--border)",
                background: provider === p.id ? "var(--accent-soft)" : "var(--bg-1)",
                cursor: "pointer",
                textAlign: "center"
              }}>
                <span style={{ fontSize: 12, fontWeight: 600 }}>{p.label}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
        <div className="card">
          <div className="card-head"><h3><Icon name="shield" size={12}/> Authentication</h3><span className="pill warn"><span className="swatch"/>secrets</span></div>
          <div className="card-body" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <div className="field">
              <label>ANTHROPIC_API_KEY <span className="pill" style={{ marginLeft: "auto" }}><span className="swatch"/>encrypted</span></label>
              <div style={{ display: "flex", gap: 4 }}>
                <input className="input mono" type="password" defaultValue="sk-ant-api03-xKj2vN8mPQrLs9wY3hTb" style={{ flex: 1 }}/>
                <button className="btn icon"><Icon name="eye" size={12}/></button>
                <button className="btn icon"><Icon name="copy" size={12}/></button>
              </div>
            </div>
            <div className="field">
              <label>ANTHROPIC_AUTH_TOKEN</label>
              <input className="input mono" type="password" placeholder="bearer token (alt to API key)"/>
            </div>
            <div className="field">
              <label>apiKeyHelper</label>
              <input className="input mono" placeholder="~/.claude/keyhelper.sh"/>
              <span className="hint">script that prints key to stdout</span>
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-head"><h3><Icon name="server" size={12}/> Endpoint · {providers.find(p => p.id === provider).label}</h3></div>
          <div className="card-body" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {provider === "anthropic" && <div className="field"><label>ANTHROPIC_BASE_URL</label><input className="input mono" defaultValue="https://api.anthropic.com"/></div>}
            {provider === "bedrock" && <>
              <div className="field"><label>ANTHROPIC_BEDROCK_BASE_URL</label><input className="input mono" defaultValue="https://bedrock-runtime.us-east-1.amazonaws.com"/></div>
              <div className="field"><label>AWS_REGION</label><input className="input mono" defaultValue="us-east-1"/></div>
            </>}
            {provider === "vertex" && <>
              <div className="field"><label>ANTHROPIC_VERTEX_PROJECT_ID</label><input className="input mono" placeholder="my-gcp-project"/></div>
              <div className="field"><label>ANTHROPIC_VERTEX_BASE_URL</label><input className="input mono" defaultValue="https://us-central1-aiplatform.googleapis.com"/></div>
            </>}
            {provider === "foundry" && <div className="field"><label>ANTHROPIC_FOUNDRY_BASE_URL</label><input className="input mono"/></div>}
            {provider === "custom" && <div className="field"><label>ANTHROPIC_BASE_URL</label><input className="input mono" placeholder="https://your-proxy.com"/></div>}

            <div className="field">
              <label>ANTHROPIC_BETAS <span style={{ color: "var(--ink-3)" }}>tags</span></label>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 4, padding: 6, background: "var(--bg-1)", border: "1px solid var(--border-strong)", borderRadius: "var(--r-2)", minHeight: 32 }}>
                {["prompt-caching-2024-07-31", "computer-use-2024-10-22"].map(t => (
                  <span key={t} className="pill mono" style={{ fontSize: 10.5 }}>
                    {t} <Icon name="x" size={9}/>
                  </span>
                ))}
                <input style={{ flex: 1, minWidth: 120, background: "transparent", border: "none", outline: "none", color: "var(--ink-2)", fontFamily: "var(--font-mono)", fontSize: 11 }} placeholder="add tag…"/>
              </div>
            </div>
          </div>
        </div>

        <div className="card" style={{ gridColumn: "span 2" }}>
          <div className="card-head"><h3>Custom headers</h3><span className="meta">sent on every API call</span></div>
          <div className="card-body" style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            {[["X-Org-ID", "acme-engineering"], ["X-Trace-Id", "${session_id}"]].map(([k, v], i) => (
              <div key={i} style={{ display: "flex", gap: 6 }}>
                <input className="input mono" defaultValue={k} placeholder="header" style={{ flex: 1 }}/>
                <input className="input mono" defaultValue={v} placeholder="value" style={{ flex: 1.5 }}/>
                <button className="btn icon"><Icon name="x" size={11}/></button>
              </div>
            ))}
            <button className="btn sm ghost" style={{ justifyContent: "flex-start", marginTop: 4 }}><Icon name="plus" size={11}/> Add header</button>
          </div>
        </div>
      </div>

      <div className="card" style={{ marginTop: 14 }}>
        <div className="card-head"><h3>Test &amp; preview</h3><span className="pill ok"><span className="swatch"/>last test ok · 142ms</span></div>
        <div className="card-body" style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 16, alignItems: "flex-start" }}>
          <button className="btn primary"><Icon name="bolt" size={11}/> Test connection</button>
          <JsonPreview label="settings.json[env]">
{`{
  `}<span className="k">"ANTHROPIC_API_KEY"</span>{`: `}<span className="s">"sk-ant-api03-•••••"</span>{`,
  `}<span className="k">"ANTHROPIC_BASE_URL"</span>{`: `}<span className="s">"https://api.anthropic.com"</span>{`,
  `}<span className="k">"ANTHROPIC_BETAS"</span>{`: `}<span className="s">"prompt-caching-2024-07-31,computer-use-2024-10-22"</span>
{`
}`}
          </JsonPreview>
        </div>
      </div>

      <UnknownFields keys={["customExperiment"]}/>
    </div>
  );
}

// ─── S16 Model Configuration ──────────────────────────
function S16_ModelConfig() {
  const efforts = [
    { id: "low", desc: "fast" },
    { id: "medium", desc: "balanced" },
    { id: "high", desc: "thorough" },
    { id: "xhigh", desc: "deep" },
    { id: "max", desc: "extreme" },
  ];
  const aliases = [
    { k: "sonnet", v: "claude-sonnet-4-5" },
    { k: "opus", v: "claude-opus-4-1" },
    { k: "haiku", v: "claude-haiku-4-5" },
    { k: "advisor", v: "claude-opus-4-1" },
  ];
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="crumbs">manager / claude settings / <span>model</span></div>
          <h1>Model configuration</h1>
          <p>Default model, effort level, aliases · active provider determines available models</p>
        </div>
        <div className="actions">
          <ScopeToggle value="global"/>
          <button className="btn primary">Save</button>
        </div>
      </div>

      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 14, padding: "8px 12px", background: "var(--bg-2)", border: "1px solid var(--border)", borderRadius: "var(--r-3)" }}>
        <span style={{ fontSize: 11, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: ".06em" }}>Active provider</span>
        <ProviderBadge name="anthropic-direct" model="sonnet-4-5"/>
        <span className="link" style={{ marginLeft: "auto", fontSize: 11.5 }}>Change provider →</span>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
        <div className="card">
          <div className="card-head"><h3><Icon name="spark" size={12}/> Effort level</h3><span className="meta">controls reasoning depth</span></div>
          <div className="card-body">
            <div style={{ display: "flex", gap: 4, background: "var(--bg-1)", border: "1px solid var(--border-strong)", borderRadius: "var(--r-2)", padding: 2, marginBottom: 12 }}>
              {efforts.map((e, i) => (
                <button key={e.id} className={`btn sm ${i === 1 ? "primary" : "ghost"}`} style={{ flex: 1, justifyContent: "center", flexDirection: "column", padding: "6px 4px" }}>
                  <span style={{ textTransform: "capitalize", fontSize: 11.5 }}>{e.id}</span>
                  <span style={{ fontSize: 9.5, opacity: 0.7, marginTop: 2 }}>{e.desc}</span>
                </button>
              ))}
            </div>
            <div style={{ fontSize: 11.5, color: "var(--ink-2)", lineHeight: 1.5 }}>
              <b style={{ color: "var(--ink-0)" }}>Medium</b> — balanced reasoning. ~4–8s avg latency, default thinking budget.
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-head"><h3>Default model</h3></div>
          <div className="card-body" style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            <div className="field">
              <label>ANTHROPIC_MODEL</label>
              <div style={{ display: "flex", gap: 4 }}>
                <div className="input" style={{ display: "flex", justifyContent: "space-between", flex: 1 }}>claude-sonnet-4-5 <Icon name="chevd" size={11}/></div>
                <input className="input mono" placeholder="or custom…" style={{ flex: 1 }}/>
              </div>
            </div>
            <div className="field">
              <label>ANTHROPIC_SMALL_FAST_MODEL</label>
              <input className="input mono" defaultValue="claude-haiku-4-5"/>
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <h3>Model aliases</h3>
            <button className="btn sm ghost"><Icon name="copy" size={11}/> Map all to default</button>
          </div>
          <div className="card-body" style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {aliases.map(a => (
              <div key={a.k} style={{ display: "grid", gridTemplateColumns: "100px 1fr", gap: 10, alignItems: "center" }}>
                <span className="mono" style={{ fontSize: 12, color: "var(--ink-2)" }}>{a.k}</span>
                <input className="input mono" defaultValue={a.v}/>
              </div>
            ))}
          </div>
        </div>

        <div className="card">
          <div className="card-head"><h3>Available models</h3><span className="meta">surfaced in /model picker</span></div>
          <div className="card-body" style={{ display: "flex", flexDirection: "column", gap: 4, fontSize: 12 }}>
            {[
              ["claude-sonnet-4-5", true],
              ["claude-opus-4-1", true],
              ["claude-haiku-4-5", true],
              ["claude-opus-4-5", true],
              ["claude-3-5-sonnet-20241022", false],
            ].map(([m, on]) => (
              <label key={m} style={{ display: "flex", alignItems: "center", gap: 8, padding: "4px 0" }}>
                <span className={`toggle ${on ? "on" : ""}`}/>
                <span className="mono" style={{ fontSize: 11.5, color: on ? "var(--ink-0)" : "var(--ink-3)" }}>{m}</span>
              </label>
            ))}
            <div style={{ display: "flex", gap: 6, marginTop: 6 }}>
              <input className="input mono" placeholder="add custom model id…"/>
              <button className="btn icon"><Icon name="plus" size={11}/></button>
            </div>
          </div>
        </div>

        <div className="card" style={{ gridColumn: "span 2" }}>
          <div className="card-head"><h3>Model overrides</h3><span className="meta">per-tool / per-agent override map</span></div>
          <div className="card-body" style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            {[["agent:code-reviewer", "claude-opus-4-1"], ["tool:WebFetch", "claude-haiku-4-5"]].map(([k, v], i) => (
              <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 1fr auto", gap: 6 }}>
                <input className="input mono" defaultValue={k}/>
                <input className="input mono" defaultValue={v}/>
                <button className="btn icon"><Icon name="x" size={11}/></button>
              </div>
            ))}
            <button className="btn sm ghost" style={{ justifyContent: "flex-start", marginTop: 2 }}><Icon name="plus" size={11}/> Add override</button>
          </div>
        </div>
      </div>

      <UnknownFields keys={["customModelExperiment"]}/>
    </div>
  );
}

window.S15_ApiAuth = S15_ApiAuth;
window.S16_ModelConfig = S16_ModelConfig;
window.ScopeToggle = ScopeToggle;
window.UnknownFields = UnknownFields;
window.JsonPreview = JsonPreview;
window.ProviderBadge = ProviderBadge;