<!--
  Mudabbir Dashboard - MCP Servers Modal

  Created: 2026-02-07
  Updated: 2026-02-17 — Removed Registry tab, added paste-command input.
  Manage MCP (Model Context Protocol) server connections + preset catalog.
-->
<!-- MCP Modal -->
<div
  class="fixed inset-0 z-[100] flex items-center justify-center bg-black/40 backdrop-blur-md p-4"
  x-show="showMCP"
  x-transition.opacity
  @click.self="cancelInstall(); showMCP = false"
>
<div class="w-full max-w-[720px] flex flex-col bg-[#1c1c1e]/95 backdrop-blur-xl border border-[var(--glass-border)] rounded-[20px] shadow-2xl animate-[modalPop_0.25s_ease-out] overflow-hidden max-h-[90vh]" @click.stop>
    <!-- Header -->
    <div class="flex items-center justify-between px-6 py-5 border-b border-[var(--glass-border)] shrink-0">
        <div class="flex items-center gap-3">
            <i data-lucide="plug" class="w-5 h-5 text-accent"></i>
            <h2 class="text-[17px] font-semibold">MCP Servers</h2>
            <span class="px-1.5 py-0.5 text-[9px] font-bold uppercase tracking-wider bg-amber-500/20 text-amber-400 border border-amber-500/30 rounded-full">Beta</span>
        </div>
        <button class="p-2 -mr-2 text-[var(--text-secondary)] hover:text-white hover:bg-white/10 rounded-lg transition-colors" @click="cancelInstall(); showMCP = false">
            <i data-lucide="x" class="w-5 h-5"></i>
        </button>
    </div>

    <!-- View Toggle -->
    <div class="flex items-center gap-1 px-6 pt-4 pb-2 shrink-0">
        <button
            class="px-3 py-1.5 text-[12px] font-medium rounded-lg transition-colors"
            :class="mcpView === 'servers' ? 'bg-[var(--accent-color)] text-white' : 'text-white/50 hover:text-white/80 hover:bg-white/5'"
            @click="mcpView = 'servers'; $nextTick(() => { if (window.refreshIcons) window.refreshIcons(); })"
        >My Servers</button>
        <button
            class="px-3 py-1.5 text-[12px] font-medium rounded-lg transition-colors"
            :class="mcpView === 'catalog' ? 'bg-[var(--accent-color)] text-white' : 'text-white/50 hover:text-white/80 hover:bg-white/5'"
            @click="mcpView = 'catalog'; $nextTick(() => { if (window.refreshIcons) window.refreshIcons(); })"
        >Catalog</button>
    </div>

    <div class="p-6 overflow-y-auto flex flex-col gap-5">

        <!-- ==================== My Servers View ==================== -->
        <div x-show="mcpView === 'servers'">
            <!-- Server List -->
            <template x-if="Object.keys(mcpServers).length > 0">
                <div class="flex flex-col gap-3">
                    <template x-for="(info, name) in mcpServers" :key="name">
                        <div class="flex items-center gap-3 p-3 bg-white/5 rounded-xl border border-white/5">
                            <span
                                class="w-2.5 h-2.5 rounded-full shrink-0"
                                :class="info.connected ? 'bg-[var(--success-color)]' : 'bg-white/20'"
                            ></span>
                            <div class="flex-1 min-w-0">
                                <div class="font-medium text-[13px] truncate" x-text="name"></div>
                                <div class="text-[11px] text-white/50" x-text="info.connected ? info.tool_count + ' tools' : (info.error || 'disconnected')"></div>
                            </div>
                            <div class="flex items-center gap-1.5">
                                <button
                                    class="p-1.5 text-white/40 hover:text-white hover:bg-white/10 rounded-lg transition-colors"
                                    @click="toggleMCPServer(name)"
                                    :title="info.connected ? 'Stop' : 'Start'"
                                >
                                    <i :data-lucide="info.connected ? 'pause' : 'play'" class="w-4 h-4"></i>
                                </button>
                                <button
                                    class="p-1.5 text-white/40 hover:text-[var(--danger-color)] hover:bg-[var(--danger-color)]/10 rounded-lg transition-colors"
                                    @click="removeMCPServer(name)"
                                    title="Remove"
                                >
                                    <i data-lucide="trash-2" class="w-4 h-4"></i>
                                </button>
                            </div>
                        </div>
                    </template>
                </div>
            </template>

            <template x-if="Object.keys(mcpServers).length === 0">
                <div class="text-center py-8">
                    <div class="w-12 h-12 rounded-2xl bg-white/5 flex items-center justify-center mx-auto mb-4">
                        <i data-lucide="puzzle" class="w-6 h-6 text-white/50"></i>
                    </div>
                    <h3 class="text-[14px] font-semibold text-white/70 mb-2">What is MCP?</h3>
                    <p class="text-[12px] text-white/50 max-w-[360px] mx-auto leading-relaxed mb-4">
                        Model Context Protocol lets your agent connect to external tools and data sources — databases, file systems, APIs, and more — through a standard interface.
                    </p>
                    <div class="flex items-center justify-center gap-3">
                        <button class="px-3 py-1.5 text-[12px] font-medium bg-[var(--accent-color)] text-white rounded-lg hover:bg-[var(--accent-hover)] transition-colors" @click="mcpShowAddForm = true">Add Server</button>
                        <button class="px-3 py-1.5 text-[12px] font-medium bg-white/5 text-white/60 rounded-lg hover:bg-white/10 transition-colors" @click="mcpView = 'catalog'">Browse Catalog</button>
                    </div>
                </div>
            </template>

            <!-- Add Server Form -->
            <div class="border-t border-[var(--glass-border)] pt-5 mt-5">
                <button
                    class="flex items-center gap-2 text-[13px] font-semibold text-white/70 hover:text-white transition-colors w-full"
                    @click="mcpShowAddForm = !mcpShowAddForm"
                >
                    <i :data-lucide="mcpShowAddForm ? 'chevron-down' : 'chevron-right'" class="w-3.5 h-3.5"></i>
                    Add Server
                </button>
                <div x-show="mcpShowAddForm" x-transition class="flex flex-col gap-3 mt-3">
                    <div class="flex gap-3">
                        <input
                            type="text"
                            x-model="mcpForm.name"
                            placeholder="Server name (e.g. filesystem)"
                            class="flex-1 px-3 py-2 bg-black/30 border border-white/10 rounded-lg text-[13px] text-white placeholder-white/40 focus:border-accent focus:outline-none"
                        />
                        <select
                            x-model="mcpForm.transport"
                            class="px-3 py-2 bg-black/30 border border-white/10 rounded-lg text-[13px] text-white placeholder-white/40 focus:border-accent focus:outline-none"
                        >
                            <option value="stdio">stdio</option>
                            <option value="http">http</option>
                        </select>
                    </div>
                    <template x-if="mcpForm.transport === 'stdio'">
                        <div class="flex flex-col gap-3">
                            <!-- Paste command input -->
                            <div>
                                <label class="text-[11px] text-white/50 mb-1 block">Paste command</label>
                                <input
                                    type="text"
                                    x-model="mcpForm.fullCommand"
                                    @input="parseFullCommand()"
                                    placeholder="e.g. npx -y @some/mcp-server"
                                    class="w-full px-3 py-2 bg-black/30 border border-white/10 rounded-lg text-[13px] text-white placeholder-white/40 focus:border-accent focus:outline-none font-mono"
                                />
                            </div>
                            <div class="flex items-center gap-3">
                                <div class="flex-1 h-px bg-white/10"></div>
                                <span class="text-[10px] text-white/30 uppercase tracking-wider shrink-0">Or fill in manually</span>
                                <div class="flex-1 h-px bg-white/10"></div>
                            </div>
                            <input
                                type="text"
                                x-model="mcpForm.command"
                                placeholder="Command (e.g. npx)"
                                class="px-3 py-2 bg-black/30 border border-white/10 rounded-lg text-[13px] text-white placeholder-white/40 focus:border-accent focus:outline-none"
                            />
                            <input
                                type="text"
                                x-model="mcpForm.args"
                                placeholder="Args (comma-separated, e.g. -y,@mcp/server-fs,/home)"
                                class="px-3 py-2 bg-black/30 border border-white/10 rounded-lg text-[13px] text-white placeholder-white/40 focus:border-accent focus:outline-none"
                            />
                        </div>
                    </template>
                    <template x-if="mcpForm.transport === 'http'">
                        <input
                            type="text"
                            x-model="mcpForm.url"
                            placeholder="Server URL (e.g. http://localhost:9000)"
                            class="px-3 py-2 bg-black/30 border border-white/10 rounded-lg text-[13px] text-white placeholder-white/40 focus:border-accent focus:outline-none"
                        />
                    </template>
                    <button
                        @click="addMCPServer()"
                        :disabled="mcpLoading || !mcpForm.name"
                        class="px-4 py-2.5 bg-[var(--accent-color)] text-white font-medium rounded-xl hover:bg-[var(--accent-hover)] transition-colors disabled:opacity-50 text-[13px]"
                    >
                        <span x-show="!mcpLoading">Add Server</span>
                        <span x-show="mcpLoading">Adding...</span>
                    </button>
                </div>
            </div>
        </div>

        <!-- ==================== Catalog View ==================== -->
        <div x-show="mcpView === 'catalog'">
            <!-- Category Filters -->
            <div class="flex items-center gap-1.5 flex-wrap mb-4">
                <template x-for="cat in mcpCategories()" :key="cat">
                    <button
                        class="px-2.5 py-1 text-[11px] font-medium rounded-full transition-colors capitalize"
                        :class="mcpCategoryFilter === cat ? 'bg-[var(--accent-color)] text-white' : 'bg-white/5 text-white/50 hover:text-white/80 hover:bg-white/10'"
                        @click="mcpCategoryFilter = cat; $nextTick(() => { if (window.refreshIcons) window.refreshIcons(); })"
                        x-text="cat"
                    ></button>
                </template>
            </div>

            <!-- Preset Cards -->
            <div class="flex flex-col gap-2">
                <template x-for="preset in filteredPresets()" :key="preset.id">
                    <div class="bg-white/5 rounded-xl border border-white/5 overflow-hidden">
                        <!-- Card row -->
                        <div class="flex items-center gap-3 p-3">
                            <div class="w-8 h-8 rounded-lg bg-white/5 flex items-center justify-center shrink-0">
                                <i :data-lucide="preset.icon" class="w-4 h-4 text-white/60"></i>
                            </div>
                            <div class="flex-1 min-w-0">
                                <div class="font-medium text-[13px] truncate" x-text="preset.name"></div>
                                <div class="text-[11px] text-white/50 truncate" x-text="preset.description"></div>
                            </div>
                            <template x-if="preset.installed">
                                <span class="px-2 py-0.5 text-[10px] font-medium bg-[var(--success-color)]/20 text-white rounded-full shrink-0">Installed</span>
                            </template>
                            <template x-if="!preset.installed">
                                <button
                                    class="px-3 py-1.5 text-[12px] font-medium bg-[var(--accent-color)] text-white rounded-lg hover:bg-[var(--accent-hover)] transition-colors shrink-0"
                                    @click="showInstallForm(preset.id)"
                                    x-text="presetButtonText(preset.id)"
                                ></button>
                            </template>
                        </div>

                        <!-- Inline install form -->
                        <div
                            x-show="mcpInstallId === preset.id && !preset.installed"
                            x-transition
                            class="px-3 pb-3 flex flex-col gap-2.5 border-t border-white/5 pt-3"
                        >
                            <!-- OAuth hint -->
                            <template x-if="preset.oauth">
                                <div class="flex items-center gap-2 text-[11px] text-amber-400/80">
                                    <i data-lucide="external-link" class="w-3 h-3"></i>
                                    <span>Opens browser for authentication</span>
                                </div>
                            </template>

                            <!-- Env key inputs (non-OAuth presets only) -->
                            <template x-for="ek in preset.env_keys" :key="ek.key">
                                <div>
                                    <label class="text-[11px] text-white/50 mb-1 block" x-text="ek.label + (ek.required ? ' *' : '')"></label>
                                    <input
                                        :type="ek.secret ? 'password' : 'text'"
                                        :placeholder="ek.placeholder"
                                        x-model="mcpInstallEnv[ek.key]"
                                        class="w-full px-3 py-2 bg-black/30 border border-white/10 rounded-lg text-[13px] text-white placeholder-white/40 focus:border-accent focus:outline-none font-mono"
                                    />
                                </div>
                            </template>

                            <!-- Extra args for presets that need them -->
                            <template x-if="presetNeedsArgs(preset.id)">
                                <div>
                                    <label class="text-[11px] text-white/50 mb-1 block">Extra arguments (e.g. path or connection URL)</label>
                                    <input
                                        type="text"
                                        x-model="mcpInstallArgs"
                                        :placeholder="preset.id === 'filesystem' ? '/home/user/allowed-dir' : preset.id === 'postgres' ? 'postgresql://user:pass@localhost/db' : '/path/to/database.db'"
                                        class="w-full px-3 py-2 bg-black/30 border border-white/10 rounded-lg text-[13px] text-white placeholder-white/40 focus:border-accent focus:outline-none font-mono"
                                    />
                                </div>
                            </template>

                            <div class="flex items-center gap-3 mt-1">
                                <button
                                    @click="installPreset()"
                                    :disabled="mcpInstalling"
                                    class="px-4 py-2 text-[12px] font-medium bg-[var(--accent-color)] text-white rounded-lg hover:bg-[var(--accent-hover)] transition-colors disabled:opacity-50"
                                >
                                    <span x-show="!mcpInstalling" x-text="preset.oauth ? 'Authenticate & Connect' : 'Install & Connect'"></span>
                                    <span x-show="mcpInstalling" x-text="preset.oauth ? 'Authenticating...' : 'Installing...'"></span>
                                </button>
                                <button
                                    class="text-[12px] text-white/40 hover:text-white/70 transition-colors"
                                    @click="cancelInstall()"
                                >Cancel</button>
                                <template x-if="preset.docs_url">
                                    <a
                                        :href="preset.docs_url"
                                        target="_blank"
                                        class="text-[11px] text-white/50 hover:text-accent transition-colors ml-auto"
                                    >Docs</a>
                                </template>
                            </div>
                        </div>
                    </div>
                </template>

                <template x-if="filteredPresets().length === 0">
                    <div class="text-center py-6 text-white/50 text-[13px]">
                        No presets in this category.
                    </div>
                </template>
            </div>
        </div>

    </div>
</div>
</div>
