{% extends "admin/base.html" %}
{% from "partials/_macros.html" import pill, empty_state, notice %}

{% block page %}
<div class="page-header">
  <div>
    <div class="page-header__eyebrow">Configuration</div>
    <h1 class="page-header__title">Config</h1>
    <p class="page-header__subtitle">Edits write to the runtime overlay and reload settings immediately. Each section saves independently — there's no global save bar to commit to.</p>
  </div>
  <div class="row">
    <a class="btn is-ghost is-sm" href="/admin/test">{{ icon('plug-zap') }}<span>Test connection</span></a>
    <a class="btn is-ghost is-sm" href="/admin/secrets">{{ icon('lock') }}<span>Env vars</span></a>
  </div>
</div>

{% if saved %}{{ notice('Saved. Settings reloaded.', tone='success') }}{% endif %}
{% if error %}{{ notice(error, tone='danger') }}{% endif %}

<div class="config-layout">
  <aside class="config-rail">
    <nav aria-label="Config sections">
      <a href="#providers" class="config-rail__item">{{ icon('plug-zap') }}<span>Providers</span></a>
      <a href="#router" class="config-rail__item">{{ icon('sliders') }}<span>Router</span></a>
      <a href="#tiers" class="config-rail__item">{{ icon('layers') }}<span>Model tiers</span></a>
      <a href="#routes" class="config-rail__item">{{ icon('network') }}<span>Routes</span></a>
      <a href="#limits" class="config-rail__item">{{ icon('zap') }}<span>Global limits</span></a>
      <a href="#advanced" class="config-rail__item">{{ icon('sliders') }}<span>Advanced</span></a>
    </nav>
    <div class="config-rail__meta">
      <div class="muted" style="font-size: var(--fs-xs); margin-top: var(--space-4); padding: 0 var(--space-3);">
        Registered providers
      </div>
      <div class="pill-row" style="padding: var(--space-2) var(--space-3); flex-wrap: wrap; gap: var(--space-1);">
        {% set _stubs = stub_providers|default([]) %}
        {% for p in providers %}
          {% if p in _stubs %}{{ pill(p ~ ' (stub)', tone='neutral') }}{% else %}{{ pill(p, tone='accent') }}{% endif %}
        {% endfor %}
      </div>
    </div>
  </aside>

  <div class="config-content">
    <section class="panel" id="providers">
      <div class="panel__header">
        <div>
          <h2 class="panel__title">{{ icon('plug-zap') }} Providers</h2>
          <p class="panel__subtitle">Configure each upstream first — base URL, API key, timeouts. Connection badges below reflect whether each provider has enough config to attempt a request (no network probe). Use <strong>Test connection</strong> on each card for a live check. Secret values use <code>${ENV:NAME}</code> references — the raw value is never stored in YAML.</p>
        </div>
      </div>
      <div id="provider-panes"></div>
    </section>

    <section class="panel" id="router">
      <div class="panel__header">
        <div>
          <h2 class="panel__title">{{ icon('sliders') }} Router</h2>
          <p class="panel__subtitle">The classifier always runs (so traces stay intact). When the router is <strong>on</strong>, the requested model is overridden with the tier chosen for that classification. When <strong>off</strong>, the request's <code>model</code> field is honoured verbatim against the <code>default</code> tier's provider — useful for A/B comparison and for clients that need a specific model.</p>
        </div>
        <div class="panel__actions">
          <span class="muted" id="router-status" style="font-size: var(--fs-xs);"></span>
        </div>
      </div>
      <div class="form-grid">
        <div class="form-row">
          <label class="form-label" style="display: flex; align-items: center; gap: var(--space-2); cursor: pointer;">
            <input type="checkbox" id="router-enabled-input" {% if config.router and config.router.enabled %}checked{% endif %} />
            <span>Router enabled (override requested model based on classification)</span>
          </label>
        </div>
        <div class="form-actions">
          <button type="button" class="btn is-primary is-sm" id="save-router">{{ icon('save') }}<span>Save router</span></button>
        </div>
      </div>
    </section>

    <section class="panel" id="tiers">
      <div class="panel__header">
        <div>
          <h2 class="panel__title">{{ icon('layers') }} Model tiers</h2>
          <p class="panel__subtitle">Each tier (<code>cheap</code>, <code>default</code>, <code>strong</code>, <code>deep</code>) maps to one configured provider + model. Routes below point at a tier by name. Pick the provider first; the model dropdown then shows what that provider exposes, with per-1M-token prices inline so you can see the trade-off before you save. Pick <em>Custom model id…</em> at the bottom of the dropdown to type an unlisted model id.</p>
        </div>
        <div class="panel__actions">
          <span class="muted" id="tiers-status" style="font-size: var(--fs-xs);"></span>
          <button type="button" class="btn is-ghost is-sm" id="add-tier">{{ icon('arrow-up-right') }}<span>Add tier</span></button>
          <button type="button" class="btn is-primary is-sm" id="save-tiers">{{ icon('save') }}<span>Save tiers</span></button>
        </div>
      </div>
      <div id="tiers-editor"></div>
    </section>

    <section class="panel" id="routes">
      <div class="panel__header">
        <div>
          <h2 class="panel__title">{{ icon('network') }} Routes</h2>
          <p class="panel__subtitle">Maps a logical route (e.g. <code>brain.plan</code>, <code>brain.execute</code>) to a tier defined above. Unknown tier names are rejected on save.</p>
        </div>
        <div class="panel__actions">
          <span class="muted" id="routes-status" style="font-size: var(--fs-xs);"></span>
          <button type="button" class="btn is-ghost is-sm" id="add-route">{{ icon('arrow-up-right') }}<span>Add route</span></button>
          <button type="button" class="btn is-primary is-sm" id="save-routes">{{ icon('save') }}<span>Save routes</span></button>
        </div>
      </div>
      <div id="routes-editor"></div>
    </section>

    <section class="panel" id="limits">
      <div class="panel__header">
        <div>
          <h2 class="panel__title">{{ icon('zap') }} Global limits</h2>
          <p class="panel__subtitle">Process-wide throttles applied per API key. 0 disables.</p>
        </div>
      </div>
      <div class="form-grid">
        <div class="form-row">
          <label class="form-label" for="rate-limit-input">Rate limit (req/min)</label>
          <input type="number" id="rate-limit-input" min="0" class="form-control" value="{{ config.rate_limit_per_minute or 0 }}" />
        </div>
        <div class="form-actions">
          <button type="button" class="btn is-primary is-sm" id="save-rate-limit">{{ icon('save') }}<span>Save</span></button>
          <span class="muted" id="rate-limit-status" style="font-size: var(--fs-xs);"></span>
        </div>
      </div>
    </section>

    <details class="panel" id="advanced">
      <summary style="cursor: pointer; padding: var(--space-4) var(--space-5); font-weight: 600; color: var(--color-accent);">
        Advanced — raw overlay editor
      </summary>
      <div style="padding: 0 var(--space-5) var(--space-5);">
        <p class="muted">Fallback for debugging or scripting changes the structured editors don't cover. Saves to the same overlay file via the legacy form endpoint.</p>
        <form method="post" action="/admin/config">
          <div class="split-2" style="margin-top: var(--space-3);">
            <div class="form-row">
              <label class="form-label" for="models_json">Model tiers (JSON)</label>
              <textarea id="models_json" name="models_json" spellcheck="false">{{ models_json_default }}</textarea>
            </div>
            <div class="form-row">
              <label class="form-label" for="routes_json">Routes (JSON)</label>
              <textarea id="routes_json" name="routes_json" spellcheck="false">{{ routes_json_default }}</textarea>
            </div>
          </div>
          <input type="hidden" name="rate_limit_per_minute" value="{{ config.rate_limit_per_minute or 0 }}" />
          <div class="form-actions">
            <button type="submit" class="btn is-primary is-sm">{{ icon('save') }}<span>Save raw JSON</span></button>
          </div>
        </form>
        <h3 style="margin-top: var(--space-5); font-size: var(--fs-lg);">Current overlay file</h3>
        <pre>{{ overlay_json }}</pre>
      </div>
    </details>
  </div>
</div>

<script>
window.__BRAINS_CONFIG_BOOTSTRAP__ = {{ bootstrap_json | safe }};
</script>
<script src="{{ static_url('admin-config.js') }}" defer></script>
<script src="{{ static_url('config-rail.js') }}" defer></script>
{% endblock %}