{# Vendored from governor_web/templates/settings/llm.html @ 19455c57c5a9.
   Audit doesn't store the API key in DB (no organisation_settings table)
   — the key still lives in env (GEMINI_API_KEY / GOOGLE_API_KEY). The
   "Status" pill reads "Configured" iff the env var is set. #}
{% 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 rounded-lg">
      {{ 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 rounded-lg">
      Settings saved.
    </div>
  {% endif %}

  <form method="post" action="/admin/settings/llm" class="mt-6 space-y-6">
    {# Provider — read-only display + env-var 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 (env var)</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>
      <p class="mt-3 text-sm text-slate-500 dark:text-slate-400">
        The API key is read from <code class="font-mono bg-slate-100 dark:bg-slate-800 px-1.5 py-0.5 rounded">GEMINI_API_KEY</code>
        / <code class="font-mono bg-slate-100 dark:bg-slate-800 px-1.5 py-0.5 rounded">OPENAI_API_KEY</code> /
        <code class="font-mono bg-slate-100 dark:bg-slate-800 px-1.5 py-0.5 rounded">ANTHROPIC_API_KEY</code> at scan time.
        Audit doesn't persist API keys.
      </p>
    </div>

    {# Model Configuration #}
    <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>
          <input type="text" id="llm_model" name="llm_model"
                 value="{{ config.llm.model }}" placeholder="gemini-2.0-flash"
                 class="ui-control mt-1" />
          <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>
          <input type="text" id="llm_routing_model" name="llm_routing_model"
                 value="{{ config.llm.routing_model }}" placeholder="gemini-2.0-flash"
                 class="ui-control mt-1" />
          <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Used for classification + lighter calls.</p>
        </div>
      </div>
    </div>

    {# Parameters #}
    <div class="ui-pane">
      <h3 class="ui-section-title text-base mb-4">Parameters</h3>
      <div class="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>
    </div>

    {# Audit-specific scope: top N + min confidence #}
    <div class="ui-pane">
      <h3 class="ui-section-title text-base mb-4">Review Scope</h3>
      <div class="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>
    </div>

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