<!--
  PocketPaw Dashboard - Settings Modal

  Changes (2026-02-03):
  - Extracted from monolithic index.html
  - Contains: Agent Backend, LLM Provider, Anthropic Model selection
  - Permission bypass toggle, API key inputs
-->
<!-- Settings Modal -->
<div
class="fixed inset-0 z-[100] flex items-center justify-center bg-black/40 backdrop-blur-md p-4"
x-show="showSettings"
x-transition.opacity
@click.self="showSettings = false"
>
<div class="w-full max-w-[600px] bg-[#1c1c1e]/95 backdrop-blur-xl border border-[var(--glass-border)] rounded-[20px] shadow-2xl animate-[modalPop_0.25s_ease-out] overflow-hidden" @click.stop>
    <div class="flex items-center justify-between px-6 py-5 border-b border-[var(--glass-border)]">
    <h2 class="text-[17px] font-semibold">Settings</h2>
    <button class="p-2 -mr-2 text-[var(--text-secondary)] hover:text-white hover:bg-white/10 rounded-lg transition-colors" @click="showSettings = false">
        <i data-lucide="x" class="w-5 h-5"></i>
    </button>
    </div>
    
    <div class="p-6 space-y-5">
    <!-- Form Group: Agent Backend -->
    <div class="flex flex-col gap-2">
        <label class="text-[13px] font-medium text-[var(--text-secondary)]">Agent Backend</label>
        <div class="relative">
        <select 
            x-model="settings.agentBackend" 
            @change="saveSettings()"
            class="w-full appearance-none bg-black/30 border border-[var(--glass-border)] rounded-[10px] py-3 px-3.5 text-[14px] text-white focus:outline-none focus:border-[var(--accent-color)] focus:bg-black/40 transition-all"
        >
        <option value="claude_agent_sdk">Claude Agent SDK (Recommended)</option>
        <option value="pocketpaw_native">PocketPaw Native</option>
        <option value="open_interpreter">Open Interpreter</option>
        </select>
        <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none opacity-50">
            <i data-lucide="chevron-down" class="w-4 h-4"></i>
        </div>
        </div>
        <small class="text-white/40 text-xs" x-text="getBackendDescription(settings.agentBackend)"></small>
    </div>

    <!-- Form Group: LLM Provider -->
    <div class="flex flex-col gap-2">
        <label class="text-[13px] font-medium text-[var(--text-secondary)]">LLM Provider</label>
        <div class="relative">
        <select 
            x-model="settings.llmProvider" 
            @change="saveSettings()"
            class="w-full appearance-none bg-black/30 border border-[var(--glass-border)] rounded-[10px] py-3 px-3.5 text-[14px] text-white focus:outline-none focus:border-[var(--accent-color)] focus:bg-black/40 transition-all"
        >
        <option value="auto">Auto</option>
        <option value="anthropic">Anthropic</option>
        <option value="openai">OpenAI</option>
        <option value="ollama">Ollama</option>
        </select>
        <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none opacity-50">
            <i data-lucide="chevron-down" class="w-4 h-4"></i>
        </div>
        </div>
    </div>

    <!-- Form Group: Anthropic Model -->
    <div class="flex flex-col gap-2" x-show="settings.llmProvider === 'anthropic' || settings.llmProvider === 'auto'">
        <label class="text-[13px] font-medium text-[var(--text-secondary)]">Anthropic Model</label>
        <div class="relative">
        <select 
            x-model="settings.anthropicModel" 
            @change="saveSettings()"
            class="w-full appearance-none bg-black/30 border border-[var(--glass-border)] rounded-[10px] py-3 px-3.5 text-[14px] text-white focus:outline-none focus:border-[var(--accent-color)] focus:bg-black/40 transition-all"
        >
        <optgroup label="Claude 4.5 (Latest)">
            <option value="claude-sonnet-4-5-20250929">Claude Sonnet 4.5 (Recommended)</option>
            <option value="claude-opus-4-5-20250929">Claude Opus 4.5</option>
            <option value="claude-haiku-4-5-20250929">Claude Haiku 4.5</option>
        </optgroup>
        <optgroup label="Claude 4">
            <option value="claude-sonnet-4-20250514">Claude Sonnet 4</option>
            <option value="claude-opus-4-20250514">Claude Opus 4</option>
        </optgroup>
        </select>
        <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none opacity-50">
            <i data-lucide="chevron-down" class="w-4 h-4"></i>
        </div>
        </div>
    </div>

    <!-- Form Group: Permission Bypass -->
    <div class="flex flex-col gap-2">
        <label class="flex items-start gap-3 cursor-pointer group">
        <input type="checkbox" x-model="settings.bypassPermissions" @change="saveSettings()" class="mt-0.5 accent-[var(--accent-color)] w-4 h-4">
        <div class="flex flex-col">
            <span class="text-[14px] font-medium group-hover:text-white transition-colors">Bypass Permission Prompts</span>
            <span class="text-xs text-[var(--warning-color)] mt-0.5">⚠️ Agent will execute actions without asking for approval. Use with caution.</span>
        </div>
        </label>
    </div>

    <hr class="border-t border-[var(--glass-border)] opacity-50" />

    <h3 class="text-[14px] font-semibold text-[var(--text-secondary)]">API Keys</h3>
    
    <!-- API Key Input -->
    <div class="flex flex-col gap-2">
        <div class="flex justify-between items-center">
            <label class="text-[13px] font-medium text-[var(--text-secondary)]">Anthropic API Key</label>
            <span x-show="hasAnthropicKey" class="text-xs font-medium text-[var(--success-color)] flex items-center gap-1">
                <i data-lucide="check" class="w-3 h-3"></i> Saved
            </span>
        </div>
        <div class="flex gap-2">
        <input
            type="password"
            x-model="apiKeys.anthropic"
            :placeholder="hasAnthropicKey ? '••••••••••••••••' : 'sk-ant-...'"
            class="flex-1 bg-black/30 border border-[var(--glass-border)] rounded-[10px] py-2.5 px-3.5 text-[14px] text-white focus:outline-none focus:border-[var(--accent-color)] focus:bg-black/40 transition-all placeholder-white/20"
        />
        <button 
            class="bg-[var(--accent-color)] hover:bg-[var(--accent-hover)] text-white px-4 py-2 rounded-[8px] text-[13px] font-semibold transition-all active:scale-95" 
            @click="saveApiKey('anthropic')"
        >
            Save
        </button>
        </div>
    </div>

    <!-- OpenAI API Key Input -->
    <div class="flex flex-col gap-2">
        <div class="flex justify-between items-center">
            <label class="text-[13px] font-medium text-[var(--text-secondary)]">OpenAI API Key</label>
            <span x-show="hasOpenaiKey" class="text-xs font-medium text-[var(--success-color)] flex items-center gap-1">
                <i data-lucide="check" class="w-3 h-3"></i> Saved
            </span>
        </div>
        <div class="flex gap-2">
        <input
            type="password"
            x-model="apiKeys.openai"
            :placeholder="hasOpenaiKey ? '••••••••••••••••' : 'sk-...'"
            class="flex-1 bg-black/30 border border-[var(--glass-border)] rounded-[10px] py-2.5 px-3.5 text-[14px] text-white focus:outline-none focus:border-[var(--accent-color)] focus:bg-black/40 transition-all placeholder-white/20"
        />
        <button 
            class="bg-[var(--accent-color)] hover:bg-[var(--accent-hover)] text-white px-4 py-2 rounded-[8px] text-[13px] font-semibold transition-all active:scale-95" 
            @click="saveApiKey('openai')"
        >
        Save
        </button>
        </div>
    </div>
    </div>
</div>
</div>
