/* global React, Icon */
const { ScopeToggle, UnknownFields, JsonPreview } = window;

// ─── S17 Plugin & Marketplace Manager ─────────────────
function S17_Plugins() {
  const markets = [
    { name: "official", repo: "anthropic/claude-plugins", plugins: 24, active: true },
    { name: "community-curated", repo: "ccm-org/curated", plugins: 18, active: false },
    { name: "internal-acme", repo: "acme/cc-plugins", plugins: 6, active: false },
  ];
  const plugins = [
    { name: "typescript-lsp", market: "official", type: "LSP", on: true, ver: "0.4.2", desc: "TS/JS language server with project-aware completions." },
    { name: "rust-analyzer", market: "official", type: "LSP", on: true, ver: "0.2.1", desc: "Rust LSP integration via rust-analyzer." },
    { name: "review-bot", market: "community-curated", type: "Agent", on: true, ver: "1.1.0", desc: "Reviews diffs against team guidelines." },
    { name: "k8s-skills", market: "official", type: "Skills", on: false, ver: "0.3.0", desc: "kubectl, helm, manifest generation skills." },
    { name: "auto-test", market: "internal-acme", type: "Hooks", on: true, ver: "2.0.1", desc: "Run tests on every Edit; surface failures inline." },
    { name: "pgsql-helper", market: "community-curated", type: "Skills", on: false, ver: "0.1.4", desc: "Postgres query builder + EXPLAIN annotator." },
  ];
  const typeColor = { LSP: "var(--c-edit)", Agent: "var(--c-task)", Skills: "var(--c-glob)", Hooks: "var(--c-bash)" };
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="crumbs">manager / <span>plugins</span></div>
          <h1>Plugin &amp; marketplace</h1>
          <p>3 marketplaces · 6 plugins installed · 4 enabled</p>
        </div>
        <div className="actions">
          <button className="btn"><Icon name="refresh" size={12}/> Refresh</button>
          <button className="btn primary"><Icon name="plus" size={12}/> Install plugin</button>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "320px 1fr", gap: 14 }}>
        <div className="card">
          <div className="card-head"><h3>Marketplaces</h3><span className="meta">3</span></div>
          <div className="card-body" style={{ padding: 0 }}>
            {markets.map((m, i) => (
              <div key={m.name} style={{
                padding: "11px 12px",
                borderTop: i ? "1px solid var(--border-soft)" : "none",
                background: m.active ? "var(--bg-3)" : "transparent",
                borderLeft: m.active ? "2px solid var(--accent)" : "2px solid transparent",
                cursor: "pointer"
              }}>
                <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
                  <Icon name="book" size={12}/>
                  <span style={{ fontWeight: 600, fontSize: 12.5 }}>{m.name}</span>
                  <span className="pill" style={{ marginLeft: "auto" }}>{m.plugins}</span>
                </div>
                <div className="mono" style={{ fontSize: 10.5, color: "var(--ink-3)" }}>github.com/{m.repo}</div>
              </div>
            ))}
            <div style={{ padding: 10, borderTop: "1px solid var(--border-soft)" }}>
              <div style={{ fontSize: 10, textTransform: "uppercase", letterSpacing: ".06em", color: "var(--ink-3)", marginBottom: 6 }}>Add marketplace</div>
              <input className="input" placeholder="name" style={{ marginBottom: 4 }}/>
              <div style={{ display: "flex", gap: 4 }}>
                <input className="input mono" placeholder="owner/repo" style={{ flex: 1 }}/>
                <button className="btn icon"><Icon name="plus" size={11}/></button>
              </div>
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <h3>Plugins · official <span className="meta">24 available · 4 installed</span></h3>
            <div style={{ display: "flex", gap: 6 }}>
              <input className="input mono" placeholder="plugin@marketplace" style={{ width: 220, fontSize: 11 }}/>
              <button className="btn sm primary">Install</button>
            </div>
          </div>
          <div className="card-body" style={{ padding: 0 }}>
            {plugins.map((p, i) => (
              <div key={p.name} style={{
                display: "grid", gridTemplateColumns: "auto 1fr auto auto auto", gap: 12,
                padding: "11px 14px",
                borderTop: i ? "1px solid var(--border-soft)" : "none",
                alignItems: "center"
              }}>
                <span className={`toggle ${p.on ? "on" : ""}`}/>
                <div>
                  <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 3 }}>
                    <span style={{ fontWeight: 600, fontSize: 12.5 }}>{p.name}</span>
                    <span className="pill" style={{ background: typeColor[p.type] + "33", borderColor: typeColor[p.type] + "66", color: typeColor[p.type] }}>
                      <span className="swatch" style={{ background: typeColor[p.type] }}/>{p.type}
                    </span>
                    <span className="mono" style={{ fontSize: 10.5, color: "var(--ink-3)" }}>v{p.ver}</span>
                  </div>
                  <div style={{ fontSize: 11.5, color: "var(--ink-2)", lineHeight: 1.4 }}>{p.desc}</div>
                  <div className="mono" style={{ fontSize: 10.5, color: "var(--ink-3)", marginTop: 3 }}>{p.name}@{p.market}</div>
                </div>
                <button className="btn sm ghost"><Icon name="ext" size={11}/></button>
                <button className="btn sm ghost"><Icon name="edit" size={11}/></button>
                <button className="btn sm ghost"><Icon name="trash" size={11}/></button>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── S18 Status Line Config ───────────────────────────
function S18_StatusLine() {
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="crumbs">manager / claude settings / <span>status line</span></div>
          <h1>Status line</h1>
          <p>Custom command rendered below each turn · output capped at 1 line</p>
        </div>
        <div className="actions">
          <ScopeToggle value="global"/>
          <button className="btn primary">Save</button>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
        <div className="card">
          <div className="card-head"><h3>Type</h3></div>
          <div className="card-body" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <div style={{ display: "flex", gap: 4, background: "var(--bg-1)", border: "1px solid var(--border-strong)", borderRadius: "var(--r-2)", padding: 2 }}>
              <button className="btn sm primary" style={{ flex: 1, justifyContent: "center" }}>command</button>
              <button className="btn sm ghost" style={{ flex: 1, justifyContent: "center" }}>none</button>
            </div>

            <div className="field">
              <label>Command</label>
              <input className="input mono" defaultValue='echo "$(git branch --show-current) · $(date +%H:%M)"'/>
            </div>

            <div>
              <div style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: ".06em", color: "var(--ink-3)", marginBottom: 6 }}>Presets</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                {[
                  { label: "Branch + time", cmd: 'git branch --show-current; date +%H:%M' },
                  { label: "Last commit", cmd: 'git log -1 --pretty=%s' },
                  { label: "Dirty status", cmd: 'git status -s | wc -l | xargs -I{} echo "{} dirty"' },
                  { label: "Container", cmd: 'kubectl config current-context' },
                ].map(p => (
                  <div key={p.label} style={{ display: "flex", alignItems: "center", gap: 8, padding: "5px 8px", background: "var(--bg-1)", border: "1px solid var(--border)", borderRadius: 4, cursor: "pointer" }}>
                    <span style={{ fontSize: 12, fontWeight: 500, width: 100 }}>{p.label}</span>
                    <span className="mono" style={{ fontSize: 10.5, color: "var(--ink-3)", flex: 1 }}>{p.cmd}</span>
                    <Icon name="copy" size={11}/>
                  </div>
                ))}
              </div>
            </div>

            <div className="field">
              <label>Padding (px)</label>
              <input className="input mono" defaultValue="2" style={{ width: 80 }}/>
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-head"><h3>Live preview</h3><button className="btn sm"><Icon name="bolt" size={11}/> Test</button></div>
          <div className="card-body">
            <div style={{
              background: "var(--bg-0)", border: "1px solid var(--border)",
              borderRadius: "var(--r-2)", padding: 12, fontFamily: "var(--font-mono)",
              fontSize: 11.5, color: "var(--ink-1)", lineHeight: 1.6
            }}>
              <div style={{ color: "var(--ink-3)" }}>{`> implement timeline replay scrubber`}</div>
              <div style={{ color: "var(--ink-2)", margin: "8px 0" }}>I'll start by extracting the scrubber primitive…</div>
              <div style={{ marginTop: 8, paddingTop: 6, borderTop: "1px dashed var(--border)", color: "var(--accent)" }}>
                <span className="mono">feat/timeline-replay · 14:24</span>
              </div>
            </div>

            <div style={{ marginTop: 16 }}>
              <div style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: ".06em", color: "var(--ink-3)", marginBottom: 6 }}>Last test output</div>
              <div className="code">
{`$ git branch --show-current
feat/timeline-replay
$ date +%H:%M
14:24`}
              </div>
              <div style={{ display: "flex", gap: 12, marginTop: 8, fontSize: 11, color: "var(--ink-3)", fontFamily: "var(--font-mono)" }}>
                <span><span className="pill ok"><span className="swatch"/>0</span> exit</span>
                <span>42ms</span>
                <span>18 chars</span>
              </div>
            </div>
          </div>
        </div>
      </div>

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

// ─── S19 Model Provider Config (multi-step) ───────────
function S19_ProviderConfig() {
  const profiles = [
    { name: "anthropic-direct", type: "Anthropic", scope: "global", active: true, model: "sonnet-4-5" },
    { name: "bedrock-prod", type: "Bedrock", scope: "project", active: false, model: "sonnet-4-5" },
    { name: "vertex-staging", type: "Vertex", scope: "global", active: false, model: "opus-4-1" },
    { name: "local-proxy", type: "Custom", scope: "local", active: false, model: "custom" },
  ];
  const steps = ["Provider type", "Connection", "Model mapping", "Extra env", "Name & scope"];
  const stepIdx = 2;
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="crumbs">manager / claude settings / <span>provider profiles</span></div>
          <h1>Model provider config</h1>
          <p>Switch between API endpoints without editing JSON · 4 profiles · 1 active</p>
        </div>
        <div className="actions">
          <button className="btn"><Icon name="download" size={12}/> Import from settings.json</button>
          <button className="btn primary"><Icon name="plus" size={12}/> New profile</button>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "300px 1fr 320px", gap: 14 }}>
        <div className="card">
          <div className="card-head"><h3>Profiles</h3><span className="meta">4</span></div>
          <div className="card-body" style={{ padding: 0 }}>
            {profiles.map((p, i) => (
              <div key={p.name} style={{
                padding: "11px 12px",
                borderTop: i ? "1px solid var(--border-soft)" : "none",
                background: i === 1 ? "var(--bg-3)" : "transparent",
                borderLeft: i === 1 ? "2px solid var(--accent)" : "2px solid transparent",
                cursor: "pointer"
              }}>
                <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 4 }}>
                  <span style={{ fontWeight: 600, fontSize: 12.5 }}>{p.name}</span>
                  {p.active && <span className="pill ok" style={{ marginLeft: "auto" }}><span className="swatch"/>active</span>}
                </div>
                <div style={{ display: "flex", gap: 4, marginTop: 4 }}>
                  <span className="pill mono">{p.type}</span>
                  <span className="pill mono">{p.scope}</span>
                  <span className="pill" style={{ marginLeft: "auto" }}>{p.model}</span>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <h3><Icon name="edit" size={12}/> Edit · bedrock-prod</h3>
            <span className="meta">step {stepIdx + 1} of 5</span>
          </div>

          <div style={{ padding: "12px 16px", borderBottom: "1px solid var(--border-soft)" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              {steps.map((s, i) => (
                <React.Fragment key={s}>
                  <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                    <span style={{
                      width: 18, height: 18, borderRadius: 9, fontSize: 10, fontWeight: 600,
                      display: "grid", placeItems: "center", fontFamily: "var(--font-mono)",
                      background: i < stepIdx ? "var(--ok)" : i === stepIdx ? "var(--accent)" : "var(--bg-4)",
                      color: i <= stepIdx ? "#1a0d07" : "var(--ink-3)"
                    }}>
                      {i < stepIdx ? "✓" : i + 1}
                    </span>
                    <span style={{ fontSize: 11, color: i === stepIdx ? "var(--ink-0)" : "var(--ink-3)", fontWeight: i === stepIdx ? 600 : 400 }}>{s}</span>
                  </div>
                  {i < steps.length - 1 && <span style={{ flex: 1, height: 1, background: i < stepIdx ? "var(--ok)" : "var(--border)" }}/>}
                </React.Fragment>
              ))}
            </div>
          </div>

          <div className="card-body" style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            <h3 style={{ margin: 0, fontSize: 13, fontWeight: 600 }}>Model mapping <button className="btn sm ghost" style={{ float: "right" }}><Icon name="copy" size={11}/> Map all to default</button></h3>
            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              {[
                { k: "default", v: "anthropic.claude-sonnet-4-5-v1:0" },
                { k: "sonnet", v: "anthropic.claude-sonnet-4-5-v1:0" },
                { k: "opus", v: "anthropic.claude-opus-4-1-v1:0" },
                { k: "haiku", v: "anthropic.claude-haiku-4-5-v1:0" },
              ].map(m => (
                <div key={m.k} style={{ display: "grid", gridTemplateColumns: "100px 1fr", gap: 10, alignItems: "center" }}>
                  <span className="mono" style={{ fontSize: 12, color: "var(--ink-2)" }}>{m.k}</span>
                  <input className="input mono" defaultValue={m.v}/>
                </div>
              ))}
            </div>
            <div className="field">
              <label>Inference profile <span style={{ color: "var(--ink-3)" }}>optional</span></label>
              <input className="input mono" placeholder="us.anthropic.claude-sonnet-4-5-v1:0"/>
              <span className="hint">Bedrock cross-region inference profile id</span>
            </div>
            <div style={{ display: "flex", gap: 6, paddingTop: 6, borderTop: "1px dashed var(--border)" }}>
              <button className="btn"><Icon name="chev" size={11} className=""/> Back</button>
              <div style={{ flex: 1 }}/>
              <button className="btn ghost">Skip</button>
              <button className="btn primary">Continue <Icon name="chev" size={11}/></button>
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-head"><h3>Live JSON preview</h3><span className="meta">env that will write</span></div>
          <div className="card-body" style={{ padding: 12 }}>
            <JsonPreview label="settings.json[env]">
{`{
  `}<span className="k">"ANTHROPIC_BEDROCK_BASE_URL"</span>{`:
    `}<span className="s">"https://bedrock-runtime…"</span>{`,
  `}<span className="k">"AWS_REGION"</span>{`: `}<span className="s">"us-east-1"</span>{`,
  `}<span className="k">"AWS_PROFILE"</span>{`: `}<span className="s">"prod"</span>{`,
  `}<span className="k">"ANTHROPIC_MODEL"</span>{`:
    `}<span className="s">"anthropic.claude-sonnet-4-5-v1:0"</span>{`,
  `}<span className="k">"ANTHROPIC_SMALL_FAST_MODEL"</span>{`:
    `}<span className="s">"anthropic.claude-haiku-4-5-v1:0"</span>
{`
}`}
            </JsonPreview>

            <div style={{
              marginTop: 12, padding: "8px 10px",
              background: "var(--warn-soft)", border: "1px solid #4a3a1f",
              borderRadius: 4, fontSize: 11, color: "var(--ink-1)", lineHeight: 1.5,
              display: "flex", gap: 8, alignItems: "flex-start"
            }}>
              <Icon name="warn" size={11}/>
              <span>Activating <b>bedrock-prod</b> will replace the active profile (<b>anthropic-direct</b>) on next session.</span>
            </div>

            <div style={{ marginTop: 12 }}>
              <div style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: ".06em", color: "var(--ink-3)", marginBottom: 6 }}>Auth fields</div>
              <div style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 11, color: "var(--ink-2)" }}>
                <Icon name="shield" size={11}/>
                <span>3 fields encrypted at rest</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.S17_Plugins = S17_Plugins;
window.S18_StatusLine = S18_StatusLine;
window.S19_ProviderConfig = S19_ProviderConfig;