{% extends "base.html" %}

{% block title %}Settings — Pengy{% endblock %}

{% block sidebar_chats %}
{% for c in chats %}
<a href="{{ url_for('chat_view', chat_id=c.id) }}"
   class="chat-list-item"
   data-chat-id="{{ c.id }}">
  <i class="bi bi-chat-left-text small text-muted flex-shrink-0"></i>
  <span class="chat-title">{{ c.title }}</span>
</a>
{% endfor %}
{% endblock %}

{% block main %}
<div class="overflow-y-auto flex-grow-1 p-4">
  <div class="mx-auto" style="max-width:640px">

    {% if saved %}
    <div class="alert alert-success alert-dismissible fade show py-2" role="alert">
      <i class="bi bi-check-circle me-2"></i>Settings saved.
      <button type="button" class="btn-close btn-close-sm" data-bs-dismiss="alert"></button>
    </div>
    {% endif %}

    <h5 class="fw-bold mb-4">Settings</h5>

    <form method="post">

      <div class="mb-3">
        <label class="form-label fw-semibold">Base URL</label>
        <input type="url" name="base_url" class="form-control"
               value="{{ config.base_url }}"
               placeholder="https://api.openai.com/v1">
        <div class="form-text">OpenAI-compatible API endpoint</div>
      </div>

      <div class="mb-3">
        <label class="form-label fw-semibold">API Key</label>
        <input type="password" name="api_key" class="form-control"
               placeholder="Leave blank to keep current key"
               autocomplete="new-password">
        <div class="form-text">
          Current: {{ "set" if config.api_key else "not set" }}
        </div>
      </div>

      <div class="mb-3">
        <label class="form-label fw-semibold">Model</label>
        <div class="input-group">
          <input type="text" name="model" id="modelInput" class="form-control"
                 value="{{ config.model }}"
                 placeholder="gpt-4o">
          <button type="button" id="fetchModelsBtn" class="btn btn-outline-secondary"
                  onclick="fetchModels()">
            <i class="bi bi-cloud-download me-1"></i>Fetch
          </button>
        </div>
        <div id="modelsList" class="mt-2 d-none"></div>
      </div>

      <div class="mb-3">
        <label class="form-label fw-semibold">Tool Confirmation</label>
        <select name="tool_confirmation" class="form-select">
          <option value="none"
            {% if config.tool_confirmation == 'none' %}selected{% endif %}>
            Confirm every tool call
          </option>
          <option value="safe"
            {% if config.tool_confirmation == 'safe' %}selected{% endif %}>
            Auto-approve read-only tools (Safe)
          </option>
          <option value="all"
            {% if config.tool_confirmation == 'all' %}selected{% endif %}>
            YOLO — approve everything automatically
          </option>
        </select>
      </div>

      <div class="mb-3">
        <label class="form-label fw-semibold">Tool Timeout (seconds)</label>
        <input type="number" name="tool_timeout" class="form-control"
               value="{{ config.tool_timeout }}" min="1" max="3600">
      </div>


      <div class="mb-3">
        <label class="form-label fw-semibold">Reasoning Effort</label>
        <select name="reasoning_effort" class="form-select">
          <option value="" {% if not config.reasoning_effort %}selected{% endif %}>Provider default (do not send)</option>
          {% for value,label in [('none','Off / none'),('minimal','Minimal'),('low','Low'),('medium','Medium'),('high','High'),('xhigh','Extra high'),('max','Max')] %}
          <option value="{{ value }}" {% if config.reasoning_effort == value %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
        <div class="form-text">Optional best-effort parameter; unsupported proxies/providers may reject non-default values.</div>
      </div>

      <div class="form-check mb-3">
        <input type="checkbox" name="preserve_reasoning" value="1" class="form-check-input" id="preserve_reasoning"
               {% if config.preserve_reasoning %}checked{% endif %}>
        <label class="form-check-label" for="preserve_reasoning">Preserve returned reasoning fields</label>
        <div class="form-text">Keeps reasoning_content/reasoning/reasoning_details in message history when providers return them.</div>
      </div>

      <div class="mb-3">
        <label class="form-label fw-semibold">Context Keep Turns</label>
        <input type="number" name="context_keep_turns" class="form-control"
               value="{{ config.context_keep_turns }}" min="0">
        <div class="form-text">
          Elide tool results older than N turns (0 = keep all)
        </div>
      </div>

      <div class="mb-3">
        <label class="form-label fw-semibold">User Agent</label>
        <input type="text" name="user_agent" class="form-control"
               value="{{ config.user_agent }}">
      </div>

      <div class="mb-4">
        <label class="form-label fw-semibold">System Message Template</label>
        <textarea name="system_message" class="form-control" rows="4"
                  placeholder="You are a helpful assistant…">{{ config.system_message }}</textarea>
        <div class="form-text">
          Placeholders: <code>{date}</code>, <code>{username}</code>,
          <code>{hostname}</code>, <code>{osinfo}</code>
        </div>
      </div>

      <button type="submit" class="btn btn-primary">
        <i class="bi bi-floppy me-1"></i>Save Settings
      </button>
      <a href="{{ url_for('index') }}" class="btn btn-outline-secondary ms-2">Cancel</a>
    </form>
  </div>
</div>

<script>
async function fetchModels() {
  const btn = document.getElementById('fetchModelsBtn');
  const list = document.getElementById('modelsList');
  btn.disabled = true;
  btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Fetching…';
  list.classList.add('d-none');

  try {
    const resp = await fetch('/models');
    const data = await resp.json();
    if (data.error) {
      list.innerHTML = `<div class="text-danger small">Error: ${data.error}</div>`;
    } else if (data.models && data.models.length > 0) {
      let html = '<div class="small fw-semibold mb-1">Available models (click to select):</div>';
      const current = document.getElementById('modelInput').value;
      for (const m of data.models) {
        const active = m === current ? ' active fw-bold' : '';
        html += `<span class="badge bg-light text-dark me-1 mb-1${active}" style="cursor:pointer;font-size:0.8rem"
                 onclick="document.getElementById('modelInput').value='${m.replace(/'/g, "&#39;")}';
                         document.querySelectorAll('#modelsList .badge').forEach(b=>b.classList.remove('active','fw-bold'));
                         this.classList.add('active','fw-bold')">${m}</span>`;
      }
      list.innerHTML = html;
    } else {
      list.innerHTML = '<div class="text-muted small">No models returned.</div>';
    }
    list.classList.remove('d-none');
  } catch (e) {
    list.innerHTML = `<div class="text-danger small">Failed: ${e}</div>`;
    list.classList.remove('d-none');
  } finally {
    btn.disabled = false;
    btn.innerHTML = '<i class="bi bi-cloud-download me-1"></i>Fetch';
  }
}
</script>
{% endblock %}