{# Step 3 — optional LLM review setup. Skippable: a "Skip for now"
   button writes the default LLMConfig (enabled=False) and continues
   to /setup/complete. The audit is fully usable without LLM. #}
{% extends "setup/layout.html" %}

{% block content %}
<div class="ui-pane">
  <h2 class="ui-section-title">Step 3 · AI / LLM review (optional)</h2>
  <p class="ui-section-subtitle">
    Audit can run an LLM over the top-N most expensive jobs to flag
    BigQuery anti-patterns the rules engine doesn't cover. Reviewer
    code lands in v0.0.2 &mdash; saving here just primes the settings.
  </p>

  {% if errors and errors.get('_general') %}
    <div class="mt-4 border border-red-300 dark:border-red-500/30 bg-red-50 dark:bg-red-950/40 px-4 py-3 text-sm text-red-600 dark:text-red-300 whitespace-pre-line">
      {{ errors['_general'] }}
    </div>
  {% endif %}

  <form method="post" action="/setup/llm" class="ui-form-scope mt-6 space-y-5">
    <div class="grid gap-4 sm:grid-cols-2">
      <div>
        <label for="llm_provider" class="block text-sm font-medium text-slate-600 dark:text-slate-300">Provider</label>
        <select name="llm_provider" id="llm_provider"
                class="mt-1 w-full border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm font-mono text-slate-900 dark:text-slate-100 focus:border-brand-500 focus:outline-hidden">
          {% for value, label in llm_providers %}
            <option value="{{ value }}" {% if config_llm and config_llm.provider == value %}selected{% endif %}>
              {{ label }}{% if llm_status.get(value) %} · key set{% else %} · key missing{% endif %}
            </option>
          {% endfor %}
        </select>
      </div>
      <div>
        <label for="llm_model" class="block text-sm font-medium text-slate-600 dark:text-slate-300">Model</label>
        <input type="text" id="llm_model" name="llm_model"
               value="{{ config_llm.model if config_llm else 'gemini-3.1-pro-preview' }}"
               placeholder="gemini-3.1-pro-preview"
               class="mt-1 w-full border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm font-mono text-slate-900 dark:text-slate-100 focus:border-brand-500 focus:outline-hidden" />
        <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Provider-specific model id. Default = Gemini 3.1 Pro.</p>
      </div>
    </div>

    <div>
      <label for="llm_api_key" class="block text-sm font-medium text-slate-600 dark:text-slate-300">API Key</label>
      {% if config_llm and config_llm.api_key %}
        <p class="mt-1 mb-2 text-sm text-slate-500 dark:text-slate-400">
          Current key on file:
          <code class="font-mono bg-slate-100 dark:bg-slate-800 px-1.5 py-0.5 rounded">••••••••{{ config_llm.api_key[-4:] if config_llm.api_key|length > 4 else '••••' }}</code>
        </p>
      {% endif %}
      <input type="password" id="llm_api_key" name="llm_api_key"
             autocomplete="off"
             placeholder="{{ 'Leave blank to keep current key' if config_llm and config_llm.api_key else 'Paste your provider API key' }}"
             class="mt-1 w-full border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm font-mono text-slate-900 dark:text-slate-100 focus:border-brand-500 focus:outline-hidden" />
      <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">
        Stored in <code class="font-mono">~/.governor-audit/config.json</code> (file mode 0600). Falls back to <code class="font-mono">GEMINI_API_KEY</code> if blank.
      </p>
    </div>

    <div class="grid gap-4 sm:grid-cols-2">
      <div>
        <label for="llm_top_n" class="block text-sm font-medium text-slate-600 dark:text-slate-300">Top N jobs to review</label>
        <input type="number" id="llm_top_n" name="llm_top_n"
               value="{{ config_llm.top_n if config_llm else 20 }}"
               min="1" max="200"
               class="mt-1 w-full border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm font-mono text-slate-900 dark:text-slate-100 focus:border-brand-500 focus:outline-hidden" />
      </div>
      <div>
        <label for="llm_min_confidence" class="block text-sm font-medium text-slate-600 dark:text-slate-300">Min confidence</label>
        <input type="number" id="llm_min_confidence" name="llm_min_confidence"
               value="{{ config_llm.min_confidence if config_llm else 0.7 }}"
               min="0" max="1" step="0.05"
               class="mt-1 w-full border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm font-mono text-slate-900 dark:text-slate-100 focus:border-brand-500 focus:outline-hidden" />
      </div>
    </div>

    <div class="flex items-start gap-2">
      <input type="checkbox" name="llm_enabled" id="llm_enabled"
             {% if config_llm and config_llm.enabled %}checked{% endif %}
             class="mt-0.5" />
      <label for="llm_enabled" class="text-sm text-slate-700 dark:text-slate-300">
        Enable LLM review on the next scan
        <span class="block text-sm text-slate-500 dark:text-slate-400 mt-1">
          ~$0.005 / scan with Gemini Flash on a 20-job review. Disabled by default.
        </span>
      </label>
    </div>

    <div class="flex flex-wrap items-center gap-3 pt-2">
      <a href="/setup/target" class="ui-btn-secondary">Back</a>
      <button type="submit" name="action" value="save" class="ui-btn-primary transition-colors">
        <span class="btn-label">Save and finish</span>
        <svg class="btn-spinner h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
        </svg>
      </button>
      <button type="submit" name="action" value="skip" class="text-sm text-slate-500 dark:text-slate-400 hover:underline">
        Skip — set up later from Settings
      </button>
    </div>
  </form>
</div>
{% endblock %}