{# Mirrors governor_web/templates/settings/llm.html. Audit persists the
   API key to the loopback-only ~/.governor-audit/config.json (mode 0600);
   the GEMINI_API_KEY env var remains a fallback for headless / CI use. #}
{% extends "settings/layout.html" %}

{% block settings_content %}
<div>
  <h2 class="ui-section-title">AI / LLM</h2>
  <p class="ui-section-subtitle">Configure the language model used for the best-practices review on the top-N most expensive jobs.</p>

  {% if errors and errors.get('_general') %}
    <div class="mt-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 text-sm">
      {{ errors['_general'] }}
    </div>
  {% endif %}
  {% if saved %}
    <div class="mt-4 p-3 bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 dark:border-emerald-800 text-emerald-700 dark:text-emerald-300 text-sm">
      Settings saved.
    </div>
  {% endif %}

  <form method="post" action="/admin/settings/llm" class="mt-6 space-y-6">
    {# Provider - read-only display + persisted-or-env status #}
    <div class="ui-pane">
      <h3 class="ui-section-title text-base mb-4">Provider</h3>
      <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <div>
          <label class="ui-form-label mb-1">Provider</label>
          <select name="llm_provider" class="ui-control mt-1">
            {% for value, label in llm_providers %}
              <option value="{{ value }}" {% if config.llm.provider == value %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>
        <div>
          <label class="ui-form-label mb-1">API Key Status</label>
          {% if api_key_set %}
            <p class="text-sm text-emerald-600 dark:text-emerald-400 mt-2">Configured</p>
          {% else %}
            <p class="text-sm text-amber-600 dark:text-amber-400 mt-2">Not configured</p>
          {% endif %}
        </div>
        <div class="flex items-start gap-2 mt-1">
          <input type="checkbox" name="llm_enabled" id="llm_enabled"
                 {% if config.llm.enabled %}checked{% endif %}
                 class="mt-1" />
          <label for="llm_enabled" class="text-sm text-slate-700 dark:text-slate-300">
            Enable LLM review on the next scan
          </label>
        </div>
      </div>
    </div>

    {# API Key - persisted to config.json (0600). Env var still works as fallback. #}
    <div class="ui-pane">
      <h3 class="ui-section-title text-base mb-4">API Key</h3>
      {% if api_key_masked %}
        <p class="text-sm text-slate-600 dark:text-slate-300 mb-3">
          Current key: <code class="bg-slate-100 dark:bg-slate-800 px-1.5 py-0.5 rounded text-sm">{{ api_key_masked }}</code>
        </p>
      {% endif %}
      <div>
        <label for="llm_api_key" class="ui-form-label mb-1">{{ "New API Key" if api_key_masked else "API Key" }}</label>
        <input type="password"
          id="llm_api_key"
          name="llm_api_key"
          autocomplete="off"
          placeholder="{{ 'Leave blank to keep current key' if api_key_masked else 'Paste your provider API key' }}"
          class="ui-control mt-1" />
        <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">
          Stored in <code class="font-mono bg-slate-100 dark:bg-slate-800 px-1.5 py-0.5 rounded">~/.governor-audit/config.json</code> (file mode 0600). Falls back to
          <code class="font-mono bg-slate-100 dark:bg-slate-800 px-1.5 py-0.5 rounded">GEMINI_API_KEY</code> when unset.
        </p>
      </div>
    </div>

    {# Model Configuration. Dropdowns are driven by ``llm_models`` (a
       provider → [model_ids] map served from chat/pricing.KNOWN_RATES).
       The inline script below filters options whenever the provider
       changes, and preserves any saved value that isn't in the current
       catalogue (e.g. a legacy pinned model) as a one-off option so
       the user's existing selection still renders. #}
    <div class="ui-pane">
      <h3 class="ui-section-title text-base mb-4">Model Configuration</h3>
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div>
          <label for="llm_model" class="ui-form-label mb-1">Solution Model</label>
          <select id="llm_model" name="llm_model" class="ui-control mt-1"
                  data-current="{{ config.llm.model }}"></select>
          <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Used for generating best-practices findings.</p>
        </div>
        <div>
          <label for="llm_routing_model" class="ui-form-label mb-1">Routing Model</label>
          <select id="llm_routing_model" name="llm_routing_model" class="ui-control mt-1"
                  data-current="{{ config.llm.routing_model }}"></select>
          <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Used for classification + lighter calls.</p>
        </div>
      </div>
    </div>

    {# Provider → model catalogue. Rendered as JSON in a script tag so
       Jinja escaping is unambiguous; the filter script reads it via
       textContent + JSON.parse rather than embedding raw JS literals. #}
    <script id="llm-models-map" type="application/json">{{ llm_models | tojson }}</script>
    <script>
      (function () {
        var data = JSON.parse(document.getElementById('llm-models-map').textContent || '{}');
        var providerSel = document.querySelector('select[name="llm_provider"]');
        var modelSel = document.getElementById('llm_model');
        var routingSel = document.getElementById('llm_routing_model');
        if (!providerSel || !modelSel || !routingSel) return;

        function setOptions(selectEl, models, selected) {
          selectEl.innerHTML = '';
          for (var i = 0; i < models.length; i++) {
            var m = models[i];
            var opt = document.createElement('option');
            opt.value = m;
            opt.textContent = m;
            if (m === selected) opt.selected = true;
            selectEl.appendChild(opt);
          }
        }

        function withSaved(models, savedValue) {
          // Append the saved value as a one-off if the catalogue
          // doesn't include it — keeps legacy / hand-pinned values
          // visible instead of silently switching them on render.
          if (savedValue && models.indexOf(savedValue) === -1) {
            return [savedValue].concat(models);
          }
          return models.slice();
        }

        function initialRender() {
          var provider = providerSel.value;
          var models = data[provider] || [];
          var savedModel = modelSel.dataset.current;
          var savedRouting = routingSel.dataset.current;
          setOptions(modelSel, withSaved(models, savedModel), savedModel);
          setOptions(routingSel, withSaved(models, savedRouting), savedRouting);
        }

        function onProviderChange() {
          // After a provider switch the previously-selected model is
          // no longer valid for the new provider — default to the
          // first available, or leave the select empty if the
          // catalogue is empty for that provider.
          var provider = providerSel.value;
          var models = data[provider] || [];
          var firstOrEmpty = models[0] || '';
          setOptions(modelSel, models, firstOrEmpty);
          setOptions(routingSel, models, firstOrEmpty);
          modelSel.dataset.current = firstOrEmpty;
          routingSel.dataset.current = firstOrEmpty;
        }

        initialRender();
        providerSel.addEventListener('change', onProviderChange);
        modelSel.addEventListener('change', function () { modelSel.dataset.current = modelSel.value; });
        routingSel.addEventListener('change', function () { routingSel.dataset.current = routingSel.value; });
      })();
    </script>

    {# Advanced settings — collapsed by default. Parameters and Review
       Scope are seldom changed after the first run, so they sit behind
       a click; the most-edited fields above stay above the fold. Native
       <details>/<summary> means no JS surface for the toggle. #}
    <style>
      /* Hide the browser-default disclosure marker and use our own
         chevron icon so the header layout is predictable. ``::-webkit``
         and ``::marker`` cover Safari + Chromium/Firefox respectively. */
      .ui-collapsible-summary { list-style: none; }
      .ui-collapsible-summary::-webkit-details-marker { display: none; }
      .ui-collapsible-summary::marker { display: none; }
      /* Chevron flips when the <details> is open. ``rotate-180``
         isn't in the pre-compiled Tailwind bundle, so spelled out
         here. */
      details[open] > .ui-collapsible-summary .ui-collapsible-chevron {
        transform: rotate(180deg);
      }
    </style>

    {# Parameters #}
    <details class="ui-pane">
      <summary class="ui-collapsible-summary cursor-pointer flex items-center justify-between">
        <h3 class="ui-section-title text-base m-0">Parameters</h3>
        <svg class="ui-collapsible-chevron w-5 h-5 transition-transform text-slate-500 dark:text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6"/>
        </svg>
      </summary>
      <div class="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-4">
        <div>
          <label for="llm_temperature" class="ui-form-label mb-1">Temperature</label>
          <input type="number" id="llm_temperature" name="llm_temperature"
                 value="{{ config.llm.temperature }}" min="0" max="2" step="0.1"
                 class="ui-control mt-1" />
        </div>
        <div>
          <label for="llm_max_tokens" class="ui-form-label mb-1">Max Tokens</label>
          <input type="number" id="llm_max_tokens" name="llm_max_tokens"
                 value="{{ config.llm.max_tokens }}" min="256" max="65536" step="256"
                 class="ui-control mt-1" />
        </div>
        <div>
          <label for="llm_timeout_ms" class="ui-form-label mb-1">Timeout (ms)</label>
          <input type="number" id="llm_timeout_ms" name="llm_timeout_ms"
                 value="{{ config.llm.timeout_ms }}" min="5000" max="600000" step="1000"
                 class="ui-control mt-1" />
        </div>
      </div>
    </details>

    {# Audit-specific scope: top N + min confidence #}
    <details class="ui-pane">
      <summary class="ui-collapsible-summary cursor-pointer flex items-center justify-between">
        <h3 class="ui-section-title text-base m-0">Review Scope</h3>
        <svg class="ui-collapsible-chevron w-5 h-5 transition-transform text-slate-500 dark:text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6"/>
        </svg>
      </summary>
      <div class="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div>
          <label for="llm_top_n" class="ui-form-label mb-1">Top N jobs to review</label>
          <input type="number" id="llm_top_n" name="llm_top_n"
                 value="{{ config.llm.top_n }}" min="1" max="200"
                 class="ui-control mt-1" />
          <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Bounds LLM cost per scan.</p>
        </div>
        <div>
          <label for="llm_min_confidence" class="ui-form-label mb-1">Min Confidence</label>
          <input type="number" id="llm_min_confidence" name="llm_min_confidence"
                 value="{{ config.llm.min_confidence }}" min="0" max="1" step="0.05"
                 class="ui-control mt-1" />
          <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Findings below this score are dropped.</p>
        </div>
      </div>
    </details>

    <div class="flex items-center gap-3">
      <button type="submit" class="ui-btn-primary">Save</button>
    </div>
  </form>
</div>
{% endblock %}