{% 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="#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="#providers" class="config-rail__item">{{ icon('plug-zap') }}<span>Providers</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);">
        {% for p in providers %}{{ pill(p, tone='accent') }}{% endfor %}
      </div>
    </div>
  </aside>

  <div class="config-content">
    <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 maps to one provider + model. Routes below point at a tier by name. Model dropdowns auto-discover what the selected provider exposes — you can also type a model id by hand.</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="providers">
      <div class="panel__header">
        <div>
          <h2 class="panel__title">{{ icon('plug-zap') }} Provider configuration</h2>
          <p class="panel__subtitle">Per-provider knobs. Each card saves independently. 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="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 %}