{# Mirrors governor_web/templates/settings/llm.html. Audit persists the
   API key to the loopback-only ~/.governor-audit/config.json (mode 0600);
   the env vars (GEMINI_API_KEY / OPENAI_API_KEY / ANTHROPIC_API_KEY)
   remain 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 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 + 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-xs">{{ 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> /
          <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> when unset.
        </p>
      </div>
    </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-3.1-pro-preview"
                 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-3.1-pro-preview"
                 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 %}