{% extends "base.html" %}
{% set active = "config" %}
{% block head %}
<style>
html { scroll-behavior: smooth; }
.hero-glow {
  position: absolute; inset: 0;
  opacity: 0.20;
  background: radial-gradient(circle at top right, #a855f7, transparent 40%);
  pointer-events: none;
}
#config-result { animation: fadeUp .4s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
</style>
{% endblock %}
{% block content %}
<div class="relative overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-br from-zinc-950 via-zinc-900 to-zinc-950 p-8 mb-8">
  <div class="hero-glow"></div>
  <div class="relative">
    <div class="inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs bg-violet-500/10 text-violet-300 mb-4">
      ⚙️ Configuration
    </div>
    <h1 class="text-3xl font-bold text-white mb-2">Settings</h1>
    <p class="text-zinc-400 mb-6 max-w-xl">
      Configure the LLM provider, workspace paths, database connection, and sandbox rules.
    </p>
  </div>
</div>

{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="mb-4 px-5 py-3 rounded-xl text-sm font-medium {% if category == 'success' %}bg-green-500/10 text-green-400 border border-green-500/30{% else %}bg-blue-500/10 text-blue-400 border border-blue-500/30{% endif %}">{{ message }}</div>
{% endfor %}
{% endif %}
{% endwith %}

<form method="post" id="config-form">
  <div class="space-y-4 mb-8">
    <div class="bg-white/[0.03] border border-white/10 rounded-2xl p-6">
      <h3 class="text-sm font-semibold text-zinc-400 uppercase tracking-wider mb-4">LLM Provider</h3>
      <div class="space-y-4">
        <div>
          <label for="llm_base_url" class="block text-sm font-medium text-zinc-300 mb-1">Ollama Base URL</label>
          <input type="url" id="llm_base_url" name="llm_base_url" value="{{ llm_base_url }}"
                 class="w-full bg-white/5 border border-white/10 rounded-xl px-5 py-3 text-white text-sm placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-violet-500/50 focus:border-violet-500/50 transition-all">
        </div>
        <div>
          <label for="model" class="block text-sm font-medium text-zinc-300 mb-1">Model</label>
          <select id="model" name="model"
                  class="w-full bg-white/5 border border-white/10 rounded-xl px-5 py-3 text-white text-sm focus:outline-none focus:ring-2 focus:ring-violet-500/50 focus:border-violet-500/50 transition-all">
            {% for m in models %}
            <option value="{{ m.name }}" {% if m.name == model %}selected{% endif %} class="bg-zinc-900">{{ m.name }} ({{ (m.size / 1e9)|round(1) }} GB)</option>
            {% endfor %}
          </select>
        </div>
      </div>
    </div>

    <div class="bg-white/[0.03] border border-white/10 rounded-2xl p-6">
      <h3 class="text-sm font-semibold text-zinc-400 uppercase tracking-wider mb-4">Workspace</h3>
      <div class="space-y-4">
        <div>
          <label for="output_dir" class="block text-sm font-medium text-zinc-300 mb-1">Output Directory</label>
          <input type="text" id="output_dir" name="output_dir" value="{{ output_dir }}"
                 class="w-full bg-white/5 border border-white/10 rounded-xl px-5 py-3 text-white text-sm placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-violet-500/50 focus:border-violet-500/50 transition-all">
          <p class="mt-1.5 text-xs text-zinc-500">Where generated tool files are saved.</p>
        </div>
        <div>
          <label for="extra_whitelist" class="block text-sm font-medium text-zinc-300 mb-1">Extra Sandbox Whitelist</label>
          <input type="text" id="extra_whitelist" name="extra_whitelist" value="{{ extra_whitelist }}"
                 class="w-full bg-white/5 border border-white/10 rounded-xl px-5 py-3 text-white text-sm placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-violet-500/50 focus:border-violet-500/50 transition-all">
          <p class="mt-1.5 text-xs text-zinc-500">Comma-separated module names allowed in the sandbox.</p>
        </div>
      </div>
    </div>

    <div class="bg-white/[0.03] border border-white/10 rounded-2xl p-6">
      <h3 class="text-sm font-semibold text-zinc-400 uppercase tracking-wider mb-4">Database</h3>
      <div>
        <label for="db_dsn" class="block text-sm font-medium text-zinc-300 mb-1">Database DSN</label>
        <input type="text" id="db_dsn" name="db_dsn" value="{{ db_dsn }}"
               class="w-full bg-white/5 border border-white/10 rounded-xl px-5 py-3 text-white text-sm placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-violet-500/50 focus:border-violet-500/50 transition-all">
        <p class="mt-1.5 text-xs text-zinc-500">PostgreSQL connection string for the tool-maker store.</p>
      </div>
    </div>

    <button type="submit" class="bg-violet-600 hover:bg-violet-500 text-white rounded-xl px-7 py-3.5 text-sm font-semibold transition-all">
      Save Settings
    </button>
  </div>
</form>

<div class="bg-white/[0.03] border border-white/10 rounded-2xl p-6 mb-8">
  <h3 class="text-sm font-semibold text-zinc-400 uppercase tracking-wider mb-4">Current Config</h3>
  <pre class="text-xs text-zinc-500 overflow-x-auto"><code>{{ config | tojson(indent=2) }}</code></pre>
</div>

<div class="bg-white/[0.03] border border-white/10 rounded-2xl p-6" id="migration-status">
  <h3 class="text-sm font-semibold text-zinc-400 uppercase tracking-wider mb-4">Database Migrations</h3>
  <p class="text-sm text-zinc-500">Loading...</p>
</div>

<script>
async function loadStatus() {
  try {
    const r = await fetch('/api/db/migrations');
    const data = await r.json();
    let html = '<div class="overflow-x-auto"><table class="w-full text-sm"><thead><tr class="border-b border-white/5"><th class="text-left py-2.5 pr-4 text-zinc-500 font-medium">#</th><th class="text-left py-2.5 pr-4 text-zinc-500 font-medium">Migration</th><th class="text-left py-2.5 text-zinc-500 font-medium">Status</th></tr></thead><tbody class="divide-y divide-white/5">';
    data.migrations.forEach((m, i) => {
      const badge = m.applied
        ? '<span class="inline-flex items-center rounded-full bg-green-500/10 text-green-400 px-2.5 py-0.5 text-xs font-medium">applied</span>'
        : '<span class="inline-flex items-center rounded-full bg-violet-500/10 text-violet-300 px-2.5 py-0.5 text-xs font-medium">pending</span>';
      html += `<tr class="hover:bg-white/[0.02]"><td class="py-2.5 pr-4 text-zinc-400">${i+1}</td><td class="py-2.5 pr-4 text-white">${m.name}</td><td class="py-2.5">${badge}</td></tr>`;
    });
    html += '</tbody></table></div>';
    if (data.pending > 0) {
      html += `<div class="mt-4"><button onclick="runMigrations()" class="bg-violet-600 hover:bg-violet-500 text-white rounded-xl px-5 py-2.5 text-sm font-semibold transition-all">Apply ${data.pending} pending</button></div>`;
    }
    document.getElementById('migration-status').innerHTML = html;
  } catch(e) {
    document.getElementById('migration-status').innerHTML = '<div class="text-center py-6"><p class="text-sm text-zinc-500">Database not available</p></div>';
  }
}

async function runMigrations() {
  const btn = document.querySelector('#migration-status button');
  btn.disabled = true;
  btn.textContent = 'Running...';
  try {
    const r = await fetch('/api/db/migrate', { method: 'POST' });
    const data = await r.json();
    if (data.applied && data.applied.length) {
      showFlash('success', 'Applied: ' + data.applied.join(', '));
    } else {
      showFlash('info', 'No pending migrations');
    }
  } catch(e) {
    showFlash('error', 'Migration failed: ' + e.message);
  }
  loadStatus();
}

function showFlash(category, message) {
  const div = document.createElement('div');
  div.className = 'mb-4 px-5 py-3 rounded-xl text-sm font-medium ' + (category === 'success' ? 'bg-green-500/10 text-green-400 border border-green-500/30' : 'bg-blue-500/10 text-blue-400 border border-blue-500/30');
  div.textContent = message;
  const target = document.querySelector('.hero-glow')?.parentElement?.parentElement;
  if (target) target.insertAdjacentElement('afterend', div);
  setTimeout(() => div.remove(), 4000);
}

loadStatus();
</script>
{% endblock %}