{# Audit settings — modeled on governor_web/templates/settings/index.html.
   Three panes:
     1. Account & ADC status (gcloud principal, ADC probe result)
     2. LLM best-practices review settings (provider, model, top-N, threshold)
     3. Status snapshot (audit binary version, config dir) #}
{% extends "layout.html" %}

{% block content %}
<section class="ui-shell">
  <p class="ui-eyebrow">Setup</p>
  <h1 class="ui-page-title">Settings</h1>
  <p class="ui-page-subtitle">Per-machine configuration: account, LLM, status.</p>

  {% if saved %}
    <div class="mt-4 border border-emerald-300 dark:border-emerald-500/30 bg-emerald-50 dark:bg-emerald-950/40 px-4 py-3 text-sm text-emerald-700 dark:text-emerald-300">
      Settings saved.
    </div>
  {% endif %}
  {% 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 %}

  {# ── 1. Account & ADC status ── #}
  <div class="mt-8 ui-pane">
    <div class="flex items-baseline justify-between mb-4">
      <h2 class="ui-section-title">Account &amp; ADC status</h2>
      <span class="ui-pill {% if adc.ok %}ui-pill-success{% else %}ui-pill-danger{% endif %}">
        {{ "ADC ok" if adc.ok else (adc.status | replace("_", " ") | lower) }}
      </span>
    </div>
    <dl class="grid grid-cols-[max-content_1fr] gap-x-4 gap-y-2 text-sm">
      <dt class="text-slate-500 dark:text-slate-400">Active gcloud principal</dt>
      <dd class="font-mono text-slate-700 dark:text-slate-200 break-all">
        {{ principal or "—" }}
      </dd>
      <dt class="text-slate-500 dark:text-slate-400">GCP project</dt>
      <dd class="font-mono text-slate-700 dark:text-slate-200">{{ config.gcp_project_id }}</dd>
      <dt class="text-slate-500 dark:text-slate-400">BigQuery region</dt>
      <dd class="font-mono text-slate-700 dark:text-slate-200">{{ config.bigquery_region }}</dd>
      {% if adc.message %}
        <dt class="text-slate-500 dark:text-slate-400">Last probe</dt>
        <dd class="text-slate-700 dark:text-slate-200">{{ adc.message }}</dd>
      {% endif %}
    </dl>
    <p class="mt-4 ui-card-meta">
      Project + region live on <a href="/admin/configurations" class="text-brand-500 dark:text-brand-300 hover:underline">/admin/configurations</a>.
      Re-authenticate gcloud with <code class="font-mono">gcloud auth application-default login</code>.
    </p>
  </div>

  {# ── 2. LLM best-practices review ── #}
  <div class="mt-8 ui-pane">
    <div class="flex items-baseline justify-between mb-4">
      <div>
        <h2 class="ui-section-title">LLM best-practices review</h2>
        <p class="ui-card-meta mt-1">
          Run an LLM over the top {{ config.llm.top_n }} most expensive jobs to flag
          BigQuery anti-patterns the rules-engine doesn't cover.
        </p>
      </div>
      <span class="ui-pill {% if config.llm.enabled %}ui-pill-success{% else %}ui-pill-neutral{% endif %}">
        {{ "enabled" if config.llm.enabled else "disabled" }}
      </span>
    </div>

    <form method="post" action="/admin/settings" class="ui-form-scope grid gap-4 sm:grid-cols-2">
      <div class="sm:col-span-2 flex items-start gap-2">
        <input type="checkbox" name="llm_enabled" id="llm_enabled"
               {% if 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 (~$0.005/scan with Gemini Flash)
        </label>
      </div>

      <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.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" name="llm_model" id="llm_model"
               value="{{ config.llm.model }}"
               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_top_n" class="block text-sm font-medium text-slate-600 dark:text-slate-300">
          Top N jobs to review
        </label>
        <input type="number" name="llm_top_n" id="llm_top_n" min="1" max="200"
               value="{{ config.llm.top_n }}"
               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 (0.0 – 1.0)
        </label>
        <input type="number" name="llm_min_confidence" id="llm_min_confidence"
               step="0.05" min="0" max="1"
               value="{{ config.llm.min_confidence }}"
               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 class="sm:col-span-2 flex items-center gap-3 pt-1">
        <button type="submit" class="ui-btn-primary transition-colors">Save settings</button>
        <p class="ui-card-meta mt-0">
          Reviewer code lands in v0.0.2; settings saved here will be picked up automatically.
        </p>
      </div>
    </form>
  </div>

  {# ── 3. Status snapshot ── #}
  <div class="mt-8 ui-pane">
    <h2 class="ui-section-title">Status</h2>
    <dl class="mt-4 grid grid-cols-[max-content_1fr] gap-x-4 gap-y-2 text-sm">
      <dt class="text-slate-500 dark:text-slate-400">Audit binary</dt>
      <dd class="font-mono text-slate-700 dark:text-slate-200">v{{ app_version }}</dd>
      <dt class="text-slate-500 dark:text-slate-400">Config file</dt>
      <dd class="font-mono text-slate-700 dark:text-slate-200">~/.governor-audit/config.json</dd>
      <dt class="text-slate-500 dark:text-slate-400">Cache DB</dt>
      <dd class="font-mono text-slate-700 dark:text-slate-200">~/.governor-audit/state.db</dd>
      <dt class="text-slate-500 dark:text-slate-400">Web UI port</dt>
      <dd class="font-mono text-slate-700 dark:text-slate-200">{{ config.web_ui.port }} (loopback only)</dd>
    </dl>
  </div>
</section>
{% endblock %}