{% extends "base.html" %}
{% block title %}Config / .env — MCP Forge{% endblock %}
{% block page_title %}Configuration{% endblock %}

{% block content %}
<div x-data="configPage()" x-init="init()" class="max-w-4xl mx-auto">

  <!-- Header -->
  <div class="flex items-center justify-between mb-6">
    <div>
      <p class="text-sm text-gray-400">Edit your <code class="text-forge-400 bg-gray-800 px-1.5 py-0.5 rounded">.env</code> file directly from the dashboard. Changes take effect immediately.</p>
    </div>
    <div class="flex gap-2">
      <button @click="resetFromExample()"
              class="flex items-center gap-2 text-sm bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition-colors">
        <i class="fa-solid fa-rotate-left"></i> Reset from template
      </button>
      <button @click="saveAll()"
              :disabled="saving"
              class="flex items-center gap-2 text-sm bg-forge-600 hover:bg-forge-500 text-white font-medium px-4 py-2 rounded-lg transition-colors">
        <i class="fa-solid" :class="saving ? 'fa-spinner fa-spin' : 'fa-floppy-disk'"></i>
        <span x-text="saving ? 'Saving...' : 'Save Changes'"></span>
      </button>
    </div>
  </div>

  <!-- Sections -->
  <div class="space-y-6">

    <!-- LLM Providers -->
    <div class="bg-gray-800 rounded-xl border border-gray-700 overflow-hidden">
      <div class="flex items-center gap-3 px-5 py-4 border-b border-gray-700 bg-gray-850">
        <div class="w-8 h-8 rounded-lg bg-purple-900/60 flex items-center justify-center">
          <i class="fa-solid fa-robot text-purple-400 text-sm"></i>
        </div>
        <div>
          <h3 class="font-semibold text-white">LLM Providers</h3>
          <p class="text-xs text-gray-500">API keys for the chat agent</p>
        </div>
      </div>
      <div class="p-5 space-y-4">
        <div class="grid grid-cols-4 gap-3">
          <template x-for="opt in ['gemini', 'anthropic', 'openai', 'local']" :key="opt">
            <button @click="setVar('LLM_PROVIDER', opt)"
                    :class="getVar('LLM_PROVIDER') === opt ? 'border-forge-500 bg-forge-900/40 text-forge-300' : 'border-gray-600 text-gray-400 hover:border-gray-500'"
                    class="py-2 rounded-lg border text-sm font-medium transition-colors capitalize" x-text="opt">
            </button>
          </template>
        </div>
        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block text-xs text-gray-400 mb-1.5">Gemini API Key</label>
            <input type="password"
                   :placeholder="getVar('GEMINI_API_KEY') ? '●●●● saved — enter new value to update' : 'Enter Gemini API key'"
                   @input="setVar('GEMINI_API_KEY', $event.target.value)"
                   class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-forge-500 transition-colors">
          </div>
          <div>
            <label class="block text-xs text-gray-400 mb-1.5">Gemini Model</label>
            <input type="text" :value="getVar('GEMINI_MODEL')" @input="setVar('GEMINI_MODEL', $event.target.value)"
                   class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-forge-500 transition-colors">
          </div>
          <div>
            <label class="block text-xs text-gray-400 mb-1.5">Anthropic API Key</label>
            <input type="password"
                   :placeholder="getVar('ANTHROPIC_API_KEY') ? '●●●● saved — enter new value to update' : 'Enter Anthropic API key'"
                   @input="setVar('ANTHROPIC_API_KEY', $event.target.value)"
                   class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-forge-500 transition-colors">
          </div>
          <div>
            <label class="block text-xs text-gray-400 mb-1.5">Anthropic Model</label>
            <input type="text" :value="getVar('ANTHROPIC_MODEL')" @input="setVar('ANTHROPIC_MODEL', $event.target.value)"
                   class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-forge-500 transition-colors">
          </div>
          <div>
            <label class="block text-xs text-gray-400 mb-1.5">OpenAI API Key</label>
            <input type="password"
                   :placeholder="getVar('OPENAI_API_KEY') ? '●●●● saved — enter new value to update' : 'Enter OpenAI API key'"
                   @input="setVar('OPENAI_API_KEY', $event.target.value)"
                   class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-forge-500 transition-colors">
          </div>
          <div>
            <label class="block text-xs text-gray-400 mb-1.5">OpenAI Model</label>
            <input type="text" :value="getVar('OPENAI_MODEL')" @input="setVar('OPENAI_MODEL', $event.target.value)"
                   class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-forge-500 transition-colors">
          </div>
        </div>
        <!-- Local model settings — shown only when local is selected -->
        <div x-show="getVar('LLM_PROVIDER') === 'local'" class="border border-yellow-700/50 bg-yellow-900/10 rounded-lg p-4 space-y-4">
          <div class="flex items-center gap-2 text-yellow-400 text-xs font-medium">
            <i class="fa-solid fa-microchip"></i>
            Local HuggingFace Model — requires NVIDIA GPU + Docker GPU passthrough
          </div>

          <!-- Model fields -->
          <div class="grid grid-cols-2 gap-4">
            <div class="col-span-2">
              <label class="block text-xs text-gray-400 mb-1.5">HuggingFace Model ID</label>
              <input type="text" :value="getVar('LOCAL_MODEL')" @input="setVar('LOCAL_MODEL', $event.target.value)"
                     placeholder="Qwen/Qwen2.5-Coder-14B-Instruct"
                     class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-forge-500 transition-colors">
            </div>
            <div>
              <label class="block text-xs text-gray-400 mb-1.5">Device</label>
              <input type="text" :value="getVar('LOCAL_MODEL_DEVICE')" @input="setVar('LOCAL_MODEL_DEVICE', $event.target.value)"
                     placeholder="auto"
                     class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-forge-500 transition-colors">
            </div>
            <div>
              <label class="block text-xs text-gray-400 mb-1.5">Load in 4-bit (saves VRAM)</label>
              <input type="text" :value="getVar('LOCAL_MODEL_LOAD_IN_4BIT')" @input="setVar('LOCAL_MODEL_LOAD_IN_4BIT', $event.target.value)"
                     placeholder="true"
                     class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-forge-500 transition-colors">
            </div>
          </div>

          <!-- macOS Docker GPU warning -->
          <div x-data="localModelStatus()" x-init="init()">

          <!-- Setup guide: shown when no proxy set AND no GPU (macOS Docker) -->
          <div x-show="warning && !proxy" x-cloak
               class="mb-3 rounded-lg border border-amber-700/40 bg-amber-950/30 p-3 space-y-2 text-xs">
            <p class="font-semibold text-amber-300 flex items-center gap-1.5">
              <i class="fa-solid fa-triangle-exclamation"></i>
              Docker cannot access the Mac GPU — run the model natively in one command
            </p>
            <ol class="text-gray-300 space-y-3 list-decimal list-inside leading-relaxed">
              <li>
                Open a <strong>new terminal</strong> in the project folder and run:
                <code class="block mt-1 ml-4 bg-gray-900 text-green-300 rounded px-2 py-1 font-mono text-[11px] select-all">bash scripts/start_model_server.sh</code>
                <span class="text-gray-500 ml-4 block text-[11px] mt-0.5 leading-relaxed">
                  The script auto-installs Python if needed, creates a venv, installs torch + transformers, then starts the server.<br>
                  Model weights download once to <code>./cache/huggingface/</code> (shared with Docker — no re-download ever).
                </span>
              </li>
              <li>
                <span class="text-gray-300">Wait until the terminal shows <code class="text-green-400">Listening on 0.0.0.0:8005</code>, then:</span>
                <button @click="applyProxyHost()"
                        class="ml-2 inline-flex items-center gap-1 px-2 py-0.5 rounded bg-amber-700 hover:bg-amber-600 text-white text-[11px] font-medium transition-colors">
                  <i class="fa-solid fa-bolt text-[10px]"></i> Set LOCAL_MODEL_HOST &amp; save
                </button>
              </li>
            </ol>
          </div>

          <!-- Proxy warning: shown when proxy is set but server unreachable -->
          <div x-show="proxy && status === 'proxy_disconnected'" x-cloak
               class="mb-3 flex items-start gap-2 rounded-lg border border-orange-700/60 bg-orange-900/20 px-3 py-2 text-xs text-orange-300">
            <i class="fa-solid fa-triangle-exclamation mt-0.5 shrink-0 text-orange-400"></i>
            <span x-text="warning || 'Local model server not reachable.'"></span>
          </div>

          <!-- Status bar -->
          <div class="rounded-lg border border-gray-700 bg-gray-900/60 px-4 py-3 flex items-center justify-between gap-4">
            <div class="flex items-center gap-3">
              <!-- state icon -->
              <template x-if="status === 'loaded'">
                <span class="w-2.5 h-2.5 rounded-full bg-green-400 shrink-0"></span>
              </template>
              <template x-if="status === 'loading'">
                <i class="fa-solid fa-spinner fa-spin text-yellow-400 text-sm shrink-0"></i>
              </template>
              <template x-if="status === 'proxy_disconnected'">
                <span class="w-2.5 h-2.5 rounded-full bg-orange-400 shrink-0"></span>
              </template>
              <template x-if="status === 'not_loaded' || status === 'error'">
                <span class="w-2.5 h-2.5 rounded-full bg-gray-500 shrink-0"></span>
              </template>
              <!-- label -->
              <div>
                <p class="text-xs text-white font-medium" x-text="statusLabel"></p>
                <p x-show="vram" class="text-xs text-gray-400 font-mono" x-text="vram"></p>
                <p x-show="proxy && status !== 'proxy_disconnected'" class="text-[10px] text-gray-500">via LOCAL_MODEL_HOST</p>
              </div>
            </div>
            <button @click="loadModel()"
                    :disabled="loading || status === 'loaded'"
                    :class="status === 'loaded' ? 'bg-green-900 text-green-400 cursor-default' : 'bg-yellow-700 hover:bg-yellow-600 text-white'"
                    class="text-xs font-medium px-3 py-1.5 rounded-lg transition-colors disabled:opacity-60">
              <i class="fa-solid mr-1" :class="loading ? 'fa-spinner fa-spin' : status === 'loaded' ? 'fa-check' : (proxy ? 'fa-link' : 'fa-bolt')"></i>
              <span x-text="status === 'loaded' ? (proxy ? 'Server Connected' : 'Model Ready') : loading ? 'Connecting…' : (proxy ? 'Test Connection' : 'Load Model Now')"></span>
            </button>
          </div>

          <p class="text-xs text-gray-500">
            <i class="fa-solid fa-circle-info mr-1 text-yellow-600"></i>
            <strong class="text-gray-300">When does the model run?</strong>
            The model loads <em>lazily</em> on the first analysis/generation request, or immediately when you click <strong>Load Model Now</strong> above.
            First run downloads the model from HuggingFace (~8 GB for 14B 4-bit). Subsequent starts reuse the cache.
            Recommended for 15 GB VRAM: <code class="text-yellow-300">Qwen/Qwen2.5-Coder-14B-Instruct</code>.
          </p>
          </div><!-- end x-data localModelStatus -->
        </div>
      </div>
    </div>

    <!-- GitHub -->
    <div class="bg-gray-800 rounded-xl border border-gray-700 overflow-hidden">
      <div class="flex items-center gap-3 px-5 py-4 border-b border-gray-700">
        <div class="w-8 h-8 rounded-lg bg-gray-700 flex items-center justify-center">
          <i class="fa-brands fa-github text-white text-sm"></i>
        </div>
        <div>
          <h3 class="font-semibold text-white">GitHub</h3>
          <p class="text-xs text-gray-500">For private repos and higher rate limits</p>
        </div>
      </div>
      <div class="p-5 grid grid-cols-2 gap-4">
        <div class="col-span-2">
          <label class="block text-xs text-gray-400 mb-1.5">GitHub Token</label>
          <input type="password"
                 :placeholder="getVar('GITHUB_TOKEN') ? '●●●● saved — enter new value to update' : 'Enter GitHub personal access token'"
                 @input="setVar('GITHUB_TOKEN', $event.target.value)"
                 class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-forge-500 transition-colors">
        </div>
      </div>
    </div>

    <!-- App Settings -->
    <div class="bg-gray-800 rounded-xl border border-gray-700 overflow-hidden">
      <div class="flex items-center gap-3 px-5 py-4 border-b border-gray-700">
        <div class="w-8 h-8 rounded-lg bg-blue-900/60 flex items-center justify-center">
          <i class="fa-solid fa-sliders text-blue-400 text-sm"></i>
        </div>
        <div>
          <h3 class="font-semibold text-white">App Settings</h3>
        </div>
      </div>
      <div class="p-5 grid grid-cols-2 gap-4">
        <div>
          <label class="block text-xs text-gray-400 mb-1.5">App Environment</label>
          <input type="text" :value="getVar('APP_ENV')" @input="setVar('APP_ENV', $event.target.value)"
                 class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-forge-500 transition-colors">
        </div>
        <div>
          <label class="block text-xs text-gray-400 mb-1.5">Port</label>
          <input type="text" :value="getVar('PORT')" @input="setVar('PORT', $event.target.value)"
                 class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-forge-500 transition-colors">
        </div>
        <div>
          <label class="block text-xs text-gray-400 mb-1.5">Log Level</label>
          <input type="text" :value="getVar('LOG_LEVEL')" @input="setVar('LOG_LEVEL', $event.target.value)"
                 class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-forge-500 transition-colors">
        </div>
        <div>
          <label class="block text-xs text-gray-400 mb-1.5">Output Directory</label>
          <input type="text" :value="getVar('OUTPUT_DIR')" @input="setVar('OUTPUT_DIR', $event.target.value)"
                 class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-forge-500 transition-colors">
        </div>
        <div class="col-span-2">
          <label class="block text-xs text-gray-400 mb-1.5">Database URL</label>
          <input type="text" :value="getVar('DB_URL')" @input="setVar('DB_URL', $event.target.value)"
                 class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white font-mono focus:outline-none focus:border-forge-500 transition-colors">
        </div>
      </div>
    </div>

    <!-- MCP Server -->
    <div class="bg-gray-800 rounded-xl border border-gray-700 overflow-hidden">
      <div class="flex items-center gap-3 px-5 py-4 border-b border-gray-700">
        <div class="w-8 h-8 rounded-lg bg-green-900/60 flex items-center justify-center">
          <i class="fa-solid fa-plug text-green-400 text-sm"></i>
        </div>
        <div>
          <h3 class="font-semibold text-white">MCP Server</h3>
          <p class="text-xs text-gray-500">Settings for this app's own MCP endpoint (used by Claude)</p>
        </div>
      </div>
      <div class="p-5 grid grid-cols-2 gap-4">
        <div>
          <label class="block text-xs text-gray-400 mb-1.5">MCP Host</label>
          <input type="text" :value="getVar('MCP_SERVER_HOST')" @input="setVar('MCP_SERVER_HOST', $event.target.value)"
                 class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-forge-500 transition-colors">
        </div>
        <div>
          <label class="block text-xs text-gray-400 mb-1.5">MCP Port</label>
          <input type="text" :value="getVar('MCP_SERVER_PORT')" @input="setVar('MCP_SERVER_PORT', $event.target.value)"
                 class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-forge-500 transition-colors">
        </div>
        <div class="col-span-2">
          <label class="block text-xs text-gray-400 mb-1.5">MCP Auth Token</label>
          <input type="password"
                 :placeholder="getVar('MCP_AUTH_TOKEN') ? '●●●● saved — enter new value to update' : 'Enter MCP auth token'"
                 @input="setVar('MCP_AUTH_TOKEN', $event.target.value)"
                 class="w-full bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-forge-500 transition-colors">
        </div>
      </div>
    </div>

    <!-- Feature Flags -->
    <div class="bg-gray-800 rounded-xl border border-gray-700 overflow-hidden">
      <div class="flex items-center gap-3 px-5 py-4 border-b border-gray-700">
        <div class="w-8 h-8 rounded-lg bg-yellow-900/60 flex items-center justify-center">
          <i class="fa-solid fa-toggle-on text-yellow-400 text-sm"></i>
        </div>
        <h3 class="font-semibold text-white">Feature Flags</h3>
      </div>
      <div class="p-5 space-y-3">
        <template x-for="flag in featureFlags" :key="flag.key">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-sm text-white" x-text="flag.label"></p>
              <p class="text-xs text-gray-500" x-text="flag.description"></p>
            </div>
            <button @click="toggleFlag(flag.key)"
                    :class="getVar(flag.key) === 'true' ? 'bg-forge-600' : 'bg-gray-600'"
                    class="relative w-11 h-6 rounded-full transition-colors flex items-center">
              <span :class="getVar(flag.key) === 'true' ? 'translate-x-5' : 'translate-x-1'"
                    class="w-4 h-4 bg-white rounded-full transition-transform shadow"></span>
            </button>
          </div>
        </template>
      </div>
    </div>

    <!-- Raw .env editor -->
    <div class="bg-gray-800 rounded-xl border border-gray-700 overflow-hidden">
      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-700">
        <h3 class="font-semibold text-white">Raw .env Editor</h3>
        <button @click="showRaw = !showRaw" class="text-sm text-gray-400 hover:text-white">
          <span x-text="showRaw ? 'Hide' : 'Show'"></span>
        </button>
      </div>
      <div x-show="showRaw" class="p-5">
        <p class="text-xs text-yellow-400 mb-3"><i class="fa-solid fa-triangle-exclamation mr-1"></i>Edit with care. Invalid syntax will break the app.</p>
        <textarea x-model="rawContent" rows="20"
                  class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-3 text-xs font-mono text-green-400 focus:outline-none focus:border-forge-500"></textarea>
        <button @click="saveRaw()"
                class="mt-3 bg-yellow-700 hover:bg-yellow-600 text-white text-sm font-medium px-4 py-2 rounded-lg">
          Save Raw
        </button>
      </div>
    </div>

  </div>
</div>

<script>
function configPage() {
  return {
    vars: {},
    rawContent: '',
    showRaw: false,
    saving: false,
    dirty: [],
    featureFlags: [
      { key: 'ENABLE_LIVE_PROBING',  label: 'Live Endpoint Probing', description: 'Probe running apps to discover routes automatically' },
      { key: 'ENABLE_SECURITY_AUDIT', label: 'Security Audit', description: 'Check generated code for hardcoded secrets and dangerous patterns' },
      { key: 'ENABLE_GIT_SNAPSHOTS', label: 'Git Snapshots', description: 'Auto-commit each snapshot to a local git repository' },
    ],

    async init() {
      const resp = await fetch('/api/config/');
      const data = await resp.json();
      this.vars = data.vars || {};

      const raw = await fetch('/api/config/raw');
      const rawData = await raw.json();
      this.rawContent = rawData.content || '';
    },

    getVar(key) { return this.vars[key] || ''; },
    setVar(key, value) {
      this.vars[key] = value;
      if (!this.dirty.includes(key)) this.dirty.push(key);
      if (key === 'LLM_PROVIDER') {
        window.dispatchEvent(new CustomEvent('provider-changed', { detail: value }));
      }
    },

    toggleFlag(key) {
      const current = this.vars[key] === 'true';
      this.setVar(key, (!current).toString());
    },

    async saveAll() {
      if (this.dirty.length === 0) {
        showToast({ type: 'info', message: 'No changes to save yet' });
        return;
      }
      this.saving = true;
      try {
        const payload = this.dirty.map(key => ({ key, value: this.vars[key] }));
        const resp = await fetch('/api/config/', {
          method: 'PUT',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ vars: payload }),
        });
        if (resp.ok) {
          showToast({ type: 'success', message: '.env saved successfully' });
          this.dirty = [];
        } else {
          showToast({ type: 'error', message: 'Failed to save' });
        }
      } finally {
        this.saving = false;
      }
    },

    async saveRaw() {
      try {
        const resp = await fetch('/api/config/raw', {
          method: 'PUT',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ content: this.rawContent }),
        });
        if (resp.ok) {
          showToast({ type: 'success', message: '.env saved — changes take effect immediately' });
          // Re-sync the structured vars from the new .env content
          await this.init();
        } else {
          const e = await resp.json().catch(() => ({}));
          showToast({ type: 'error', message: e.detail || 'Failed to save raw .env' });
        }
      } catch {
        showToast({ type: 'error', message: 'Network error — could not save' });
      }
    },

    async resetFromExample() {
      if (!confirm('Reset .env to the template values? This will overwrite your current settings.')) return;
      await fetch('/api/config/reset', { method: 'POST' });
      await this.init();
      showToast({ type: 'success', message: 'Reset from .env.example' });
    },
  };
}

function localModelStatus() {
  return {
    status: 'not_loaded',   // not_loaded | loading | loaded | error | proxy_disconnected
    vram: '',
    warning: '',
    proxy: false,           // true when LOCAL_MODEL_HOST is configured
    loading: false,
    _poll: null,

    get statusLabel() {
      if (this.proxy) {
        if (this.status === 'loaded')              return 'Connected to local model server';
        if (this.status === 'proxy_disconnected') return 'Local server unreachable — script not running?';
        return 'Checking local server…';
      }
      if (this.status === 'loaded')   return 'Model loaded in memory';
      if (this.status === 'loading')  return 'Loading model… (check docker logs for progress)';
      if (this.status === 'error')    return 'Load failed — check docker logs';
      return 'Model not loaded (will load on first use)';
    },

    async init() {
      await this.refresh();
      if (this.status === 'loading') this._startPolling();
    },

    async refresh() {
      try {
        const r = await fetch('/api/config/local-model/status');
        const d = await r.json();
        this.status  = d.state;
        this.vram    = d.vram_gb || '';
        this.warning = d.warning || '';
        this.proxy   = d.proxy   || false;
        this.loading = (d.state === 'loading');
      } catch { this.status = 'error'; this.loading = false; }
    },

    _startPolling() {
      if (this._poll) return;
      this._poll = setInterval(async () => {
        await this.refresh();
        if (this.status === 'loaded' || this.status === 'error' || this.status === 'proxy_disconnected') {
          clearInterval(this._poll);
          this._poll = null;
          this.loading = false;
          if (this.status === 'loaded')
            showToast({ type: 'success', message: this.proxy ? 'Connected to local model server!' : 'Local model loaded and ready!' });
          else if (this.status !== 'proxy_disconnected')
            showToast({ type: 'error', message: 'Model load failed — see docker logs.' });
        }
      }, 4000);
    },

    async applyProxyHost() {
      await fetch('/api/config/', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ vars: [{ key: 'LOCAL_MODEL_HOST', value: 'http://host.docker.internal:8005' }] }),
      });
      showToast({ type: 'success', message: 'LOCAL_MODEL_HOST saved — reloading page…' });
      setTimeout(() => location.reload(), 1800);
    },

    async loadModel() {
      this.loading = true;
      if (!this.proxy) this.status = 'loading';
      try {
        const r = await fetch('/api/config/local-model/load', { method: 'POST' });
        if (!r.ok) {
          const e = await r.json();
          showToast({ type: 'error', message: e.detail || 'Load failed' });
          this.status  = this.proxy ? 'proxy_disconnected' : 'error';
          this.loading = false;
          return;
        }
        const d = await r.json();
        if (d.proxy) {
          await this.refresh();
          showToast({ type: 'success', message: 'Connected to local model server!' });
          this.loading = false;
        } else {
          showToast({ type: 'info', message: 'Model loading in background — this may take a while on first run…' });
          this._startPolling();
        }
      } catch {
        this.status  = 'error';
        this.loading = false;
      }
    },
  };
}
</script>
{% endblock %}