{% extends "base.html" %}
{% block title %}Setup — Verifii{% endblock %}
{% block content %}

<div style="max-width:560px;margin:0 auto;">

  <div style="margin-bottom:2rem;">
    <h1 style="margin-bottom:0.35rem;">Set up Verifiably</h1>
    {% if cfg %}
    <p class="muted" style="margin:0;">
      Update your configuration below. Leave an API key field blank to keep its current value.
    </p>
    {% else %}
    <p class="muted" style="margin:0;">
      A few details to get started. This is saved to <code>~/.verifiably/config.json</code> on
      this machine and is never sent to Verifii — your LLM API key is used only to call your
      chosen provider directly (BYOK).
    </p>
    {% endif %}
  </div>

  {% if cfg_error %}
  <p class="error">Your existing configuration could not be loaded ({{ cfg_error }}). Fill in the form below to write a fresh one.</p>
  {% endif %}

  {% if error %}
  <p class="error">{{ error }}</p>
  {% endif %}

  <form method="post" action="/setup">

    <div style="margin-bottom:0.75rem;">
      <label class="field-label" for="license_key">License key</label>
      <input type="text" id="license_key" name="license_key"
             placeholder="vf-xxxxxxxxxxxxxxxxxxxxxxxx"
             value="{{ cfg.license_key if cfg else '' }}" required>
      <p class="muted" style="font-size:0.78rem;margin:0.3rem 0 0;">
        Don't have one? <a href="https://www.verifiablyai.com/register" target="_blank" rel="noopener">Request a free trial key</a>.
      </p>
    </div>

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;margin-bottom:0.75rem;">
      <div>
        <label class="field-label" for="provider">LLM provider</label>
        <select id="provider" name="provider">
          <option value="deepseek" {% if not cfg or cfg.llm.provider == 'deepseek' %}selected{% endif %}>DeepSeek</option>
          <option value="openai" {% if cfg and cfg.llm.provider == 'openai' %}selected{% endif %}>OpenAI</option>
          <option value="anthropic" {% if cfg and cfg.llm.provider == 'anthropic' %}selected{% endif %}>Anthropic</option>
        </select>
      </div>
      <div>
        <label class="field-label" for="model">Model <span class="muted">(optional)</span></label>
        <input type="text" id="model" name="model"
               placeholder="{{ cfg.llm.model if cfg and cfg.llm.model else 'deepseek-chat' }}"
               value="{{ cfg.llm.model if cfg and cfg.llm.model else '' }}">
      </div>
    </div>

    <div style="margin-bottom:0.75rem;">
      <label class="field-label" for="llm_api_key">
        <span id="provider-key-label">{{ 'DeepSeek' if not cfg or cfg.llm.provider == 'deepseek' else (cfg.llm.provider | capitalize) }} API key</span>
      </label>
      <input type="password" id="llm_api_key" name="llm_api_key" autocomplete="off"
             placeholder="{% if cfg %}(unchanged — leave blank to keep current key){% else %}sk-...{% endif %}"
             {% if not cfg %}required{% endif %}>
      <p class="muted" style="font-size:0.78rem;margin:0.3rem 0 0;">
        Bring your own key (BYOK) — sent only to your chosen LLM provider, never to Verifii.
      </p>
    </div>

    <details class="field-advanced" style="margin-bottom:1.25rem;">
      <summary>Advanced — semantic search (optional)</summary>
      <label class="field-label" for="embeddings_api_key">Embeddings API key</label>
      <input type="password" id="embeddings_api_key" name="embeddings_api_key" autocomplete="off"
             placeholder="{% if cfg and cfg.embeddings %}(unchanged — leave blank to keep current key){% else %}sk-... (OpenAI-compatible endpoint){% endif %}">
      <p class="muted" style="font-size:0.78rem;margin:0.5rem 0 0;">
        Enables semantic search in "Query your findings". Optional — keyword search is used if omitted.
      </p>
    </details>

    <div style="margin-bottom:1.25rem;">
      <label class="field-label" for="source_url">Code to analyse <span class="muted">(optional)</span></label>
      <input type="text" id="source_url" name="source_url"
             placeholder="https://github.com/your-org/your-repo  or  C:\path\to\project">
      <p class="muted" style="font-size:0.78rem;margin:0.3rem 0 0;">
        A public GitHub URL or a local folder path. Leave blank to just save these settings —
        you can add a project from the project list afterwards.
      </p>
    </div>

    <button type="submit" style="width:100%;padding:0.75rem;">Save &amp; continue</button>

  </form>

</div>

<script>
(function () {
  // Keep in sync with verifiably.cli._MODEL_DEFAULTS
  var modelDefaults = {
    deepseek: "deepseek-chat",
    openai: "gpt-4o-mini",
    anthropic: "claude-3-5-sonnet-latest"
  };
  var providerLabels = {
    deepseek: "DeepSeek",
    openai: "OpenAI",
    anthropic: "Anthropic"
  };
  var providerSel = document.getElementById("provider");
  var modelInput  = document.getElementById("model");
  var keyLabel    = document.getElementById("provider-key-label");

  providerSel.addEventListener("change", function () {
    var p = providerSel.value;
    modelInput.placeholder = modelDefaults[p] || "";
    keyLabel.textContent = (providerLabels[p] || p) + " API key";
  });
})();
</script>

{% endblock %}