<script lang="ts">
  import { onMount } from 'svelte';
  import { appRpc } from '../rpc.ts';
  import { PROVIDER_CAPABILITIES, type ProviderId } from '../provider-capabilities';

  type PermMode = 'bypassPermissions' | 'default' | 'plan';

  const PROVIDERS: { id: ProviderId; label: string; desc: string }[] = [
    { id: 'claude', label: 'Claude', desc: 'Anthropic — claude-opus/sonnet/haiku' },
    { id: 'codex',  label: 'Codex',  desc: 'OpenAI — gpt-5.4' },
    { id: 'ollama', label: 'Ollama', desc: 'Local — qwen3, llama3, etc.' },
  ];

  let defaultShell    = $state('/bin/bash');
  let defaultCwd      = $state('~');
  let permissionMode  = $state<PermMode>('bypassPermissions');
  let systemPrompt    = $state('');

  interface ProviderState { enabled: boolean; model: string; }
  let providerState = $state<Record<string, ProviderState>>({
    claude: { enabled: true,  model: 'claude-opus-4-5' },
    codex:  { enabled: false, model: 'gpt-5.4' },
    ollama: { enabled: false, model: 'qwen3:8b' },
  });

  let expandedProvider = $state<string | null>(null);

  // ── Persistence helpers ──────────────────────────────────────────────────

  function persist(key: string, value: string) {
    appRpc?.request['settings.set']({ key, value }).catch(console.error);
  }

  function persistProviders() {
    persist('provider_settings', JSON.stringify(providerState));
  }

  // ── Actions ──────────────────────────────────────────────────────────────

  function setShell(v: string) { defaultShell = v; persist('default_shell', v); }
  function setCwd(v: string)   { defaultCwd = v;   persist('default_cwd', v); }
  function setPermMode(v: PermMode) { permissionMode = v; persist('permission_mode', v); }
  function setPrompt(v: string)     { systemPrompt = v;   persist('system_prompt_template', v); }

  function toggleProvider(id: string) {
    providerState[id] = { ...providerState[id], enabled: !providerState[id].enabled };
    providerState = { ...providerState };
    persistProviders();
  }

  function setModel(id: string, model: string) {
    providerState[id] = { ...providerState[id], model };
    providerState = { ...providerState };
    persistProviders();
  }

  // ── Restore on mount ─────────────────────────────────────────────────────

  onMount(async () => {
    if (!appRpc) return;
    const { settings } = await appRpc.request['settings.getAll']({}).catch(() => ({ settings: {} }));
    if (settings['default_shell'])          defaultShell   = settings['default_shell'];
    if (settings['default_cwd'])            defaultCwd     = settings['default_cwd'];
    if (settings['permission_mode'])        permissionMode = settings['permission_mode'] as PermMode;
    if (settings['system_prompt_template']) systemPrompt   = settings['system_prompt_template'];
    if (settings['provider_settings']) {
      try { providerState = JSON.parse(settings['provider_settings']); } catch { /* ignore */ }
    }
  });
</script>

<div class="section">
  <h3 class="sh">Defaults</h3>

  <div class="field">
    <label class="lbl" for="ag-shell">Shell</label>
    <input id="ag-shell" class="text-in" value={defaultShell} placeholder="/bin/bash"
      onchange={e => setShell((e.target as HTMLInputElement).value)} />
  </div>

  <div class="field">
    <label class="lbl" for="ag-cwd">Working directory</label>
    <input id="ag-cwd" class="text-in" value={defaultCwd} placeholder="~"
      onchange={e => setCwd((e.target as HTMLInputElement).value)} />
  </div>

  <h3 class="sh" style="margin-top: 0.75rem;">Permission mode</h3>
  <div class="seg">
    <button class:active={permissionMode === 'bypassPermissions'} onclick={() => setPermMode('bypassPermissions')}>Bypass</button>
    <button class:active={permissionMode === 'default'}           onclick={() => setPermMode('default')}>Default</button>
    <button class:active={permissionMode === 'plan'}              onclick={() => setPermMode('plan')}>Plan</button>
  </div>

  <h3 class="sh" style="margin-top: 0.75rem;">System prompt template</h3>
  <textarea class="prompt" value={systemPrompt} rows="3"
    placeholder="Optional prompt prepended to all agent sessions..."
    onchange={e => setPrompt((e.target as HTMLTextAreaElement).value)}></textarea>

  <h3 class="sh" style="margin-top: 0.75rem;">Providers</h3>
  <div class="prov-list">
    {#each PROVIDERS as prov}
      {@const state = providerState[prov.id]}
      <div class="prov-panel" class:disabled={!state.enabled}>
        <button class="prov-hdr" onclick={() => expandedProvider = expandedProvider === prov.id ? null : prov.id}>
          <span class="prov-name">{prov.label}</span>
          <span class="prov-desc">{prov.desc}</span>
          <span class="prov-chev">{expandedProvider === prov.id ? '▴' : '▾'}</span>
        </button>
        {#if expandedProvider === prov.id}
          <div class="prov-body">
            <label class="toggle-row">
              <span class="lbl">Enabled</span>
              <button class="toggle" class:on={state.enabled} role="switch"
                aria-checked={state.enabled} aria-label="Toggle {prov.label} provider"
                onclick={() => toggleProvider(prov.id)}><span class="thumb"></span></button>
            </label>
            <div class="field">
              <label class="lbl" for="model-{prov.id}">Default model</label>
              <input id="model-{prov.id}" class="text-in" value={state.model}
                placeholder={PROVIDER_CAPABILITIES[prov.id].defaultModel}
                onchange={e => setModel(prov.id, (e.target as HTMLInputElement).value)} />
            </div>
            <div class="caps">
              {#if PROVIDER_CAPABILITIES[prov.id].images}<span class="cap">Images</span>{/if}
              {#if PROVIDER_CAPABILITIES[prov.id].web}<span class="cap">Web</span>{/if}
              {#if PROVIDER_CAPABILITIES[prov.id].upload}<span class="cap">Upload</span>{/if}
            </div>
          </div>
        {/if}
      </div>
    {/each}
  </div>
</div>

<style>
  .section { display: flex; flex-direction: column; gap: 0.5rem; }
  .sh { margin: 0.125rem 0; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ctp-overlay0); }
  .field { display: flex; flex-direction: column; gap: 0.2rem; }
  .lbl { font-size: 0.75rem; color: var(--ctp-subtext0); }

  .text-in {
    padding: 0.3rem 0.5rem; background: var(--ctp-surface0); border: 1px solid var(--ctp-surface1);
    border-radius: 0.25rem; color: var(--ctp-text); font-size: 0.8125rem; font-family: var(--ui-font-family);
  }
  .text-in:focus { outline: none; border-color: var(--ctp-blue); }

  .prompt {
    padding: 0.375rem 0.5rem; background: var(--ctp-surface0); border: 1px solid var(--ctp-surface1);
    border-radius: 0.25rem; color: var(--ctp-text); font-size: 0.8rem;
    font-family: var(--term-font-family, monospace); resize: vertical; min-height: 3rem; line-height: 1.4;
  }
  .prompt:focus { outline: none; border-color: var(--ctp-blue); }
  .prompt::placeholder { color: var(--ctp-overlay0); }

  .seg { display: flex; border-radius: 0.25rem; overflow: hidden; border: 1px solid var(--ctp-surface1); }
  .seg button { flex: 1; padding: 0.25rem 0.5rem; background: var(--ctp-surface0); border: none; color: var(--ctp-overlay1); font-size: 0.75rem; cursor: pointer; font-family: var(--ui-font-family); }
  .seg button:not(:last-child) { border-right: 1px solid var(--ctp-surface1); }
  .seg button:hover { background: var(--ctp-surface1); color: var(--ctp-subtext1); }
  .seg button.active { background: color-mix(in srgb, var(--ctp-blue) 20%, var(--ctp-surface0)); color: var(--ctp-blue); font-weight: 600; }

  .prov-list { display: flex; flex-direction: column; gap: 0.3rem; }
  .prov-panel { background: var(--ctp-surface0); border: 1px solid var(--ctp-surface1); border-radius: 0.3rem; overflow: hidden; transition: opacity 0.15s; }
  .prov-panel.disabled { opacity: 0.5; }
  .prov-hdr { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.45rem 0.625rem; background: transparent; border: none; color: var(--ctp-text); cursor: pointer; text-align: left; font-size: 0.8rem; font-family: var(--ui-font-family); }
  .prov-hdr:hover { background: var(--ctp-base); }
  .prov-name { font-weight: 600; white-space: nowrap; }
  .prov-desc { flex: 1; color: var(--ctp-overlay0); font-size: 0.7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .prov-chev { color: var(--ctp-overlay0); font-size: 0.7rem; flex-shrink: 0; }
  .prov-body { padding: 0.5rem 0.625rem; border-top: 1px solid var(--ctp-surface1); display: flex; flex-direction: column; gap: 0.5rem; }

  .toggle-row { display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
  .toggle { position: relative; width: 2rem; height: 1.125rem; border: none; border-radius: 0.5625rem; background: var(--ctp-surface1); cursor: pointer; transition: background 0.2s; padding: 0; flex-shrink: 0; }
  .toggle.on { background: var(--ctp-blue); }
  .thumb { position: absolute; top: 0.125rem; left: 0.125rem; width: 0.875rem; height: 0.875rem; border-radius: 50%; background: var(--ctp-text); transition: transform 0.2s; }
  .toggle.on .thumb { transform: translateX(0.875rem); }

  .caps { display: flex; flex-wrap: wrap; gap: 0.25rem; }
  .cap { padding: 0.125rem 0.5rem; background: color-mix(in srgb, var(--ctp-blue) 10%, transparent); color: var(--ctp-blue); border-radius: 0.75rem; font-size: 0.65rem; font-weight: 500; }
</style>
