{% extends "settings/layout.html" %}

{% block settings_content %}
<div>
  <h2 class="ui-section-title text-xl">AI / LLM</h2>
  <p class="ui-section-subtitle">Configure the language model used for solution generation.</p>

  {% if error %}
  <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">
    {{ error }}
  </div>
  {% endif %}
  {% if flash and flash.message %}
  <div class="mt-4 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 text-blue-700 dark:text-blue-300 text-sm rounded-lg">
    {{ flash.message }}
  </div>
  {% endif %}

  <form method="POST" action="/settings/llm" class="mt-6 space-y-6">
    {# Provider — read-only #}
    <div class="ui-pane p-6">
      <h3 class="ui-section-title text-[16px] mb-4">Provider</h3>
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div>
          <label class="ui-form-label mb-1">Provider</label>
          <p class="text-sm text-slate-900 dark:text-slate-100">{{ provider | title }}</p>
        </div>
        <div>
          <label class="ui-form-label mb-1">Status</label>
          {% if api_key_set %}
            <p class="text-sm text-emerald-600 dark:text-emerald-400">Configured</p>
          {% else %}
            <p class="text-sm text-amber-600 dark:text-amber-400">Not configured</p>
          {% endif %}
        </div>
      </div>
    </div>

    {# API Key #}
    <div class="ui-pane p-6">
      <h3 class="ui-section-title text-[16px] 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"
          placeholder="{{ 'Leave blank to keep current key' if api_key_masked else 'Enter your Gemini API key' }}"
          class="ui-control" />
      </div>
    </div>

    {# Model Configuration #}
    <div class="ui-pane p-6">
      <h3 class="ui-section-title text-[16px] 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="{{ model }}"
            placeholder="gemini-3.1-pro-preview"
            class="ui-control" />
          <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">Used for generating SQL solutions.</p>
        </div>
        <div>
          <label for="gemini_routing_model" class="ui-form-label mb-1">Routing Model</label>
          <input type="text"
            id="gemini_routing_model"
            name="gemini_routing_model"
            value="{{ routing_model }}"
            placeholder="gemini-3-flash-preview"
            class="ui-control" />
          <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">Used for agent routing and classification.</p>
        </div>
      </div>
    </div>

    {# Parameters #}
    <div class="ui-pane p-6">
      <h3 class="ui-section-title text-[16px] 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="{{ temperature }}"
            min="0" max="2" step="0.1"
            class="ui-control" />
        </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="{{ max_tokens }}"
            min="256" max="65536" step="256"
            class="ui-control" />
        </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="{{ timeout_ms }}"
            min="5000" max="600000" step="1000"
            class="ui-control" />
        </div>
      </div>
    </div>

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