<!--
  Mudabbir Dashboard - Memory Modal
  Redesigned: 2026-02-12
  - Single-panel: facts list + collapsible config
  - Removed stats cards, sessions tab (sidebar handles sessions)
-->
<!-- Memory Modal -->
<div class="fixed inset-0 z-[100] flex items-center justify-center bg-black/40 backdrop-blur-md p-4" x-show="showMemory" x-transition.opacity @click.self="showMemory = false">
    <div class="w-full max-w-[640px] max-h-[85vh] 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" @click.stop>

        <!-- Header -->
        <div class="flex items-center justify-between px-6 py-4 border-b border-[var(--glass-border)] shrink-0">
            <div class="flex items-center gap-3">
                <h2 class="text-[17px] font-semibold">Memory</h2>
                <span class="text-[11px] text-white/40 bg-white/5 px-2 py-0.5 rounded-full" x-show="longTermMemory.length > 0" x-text="longTermMemory.length + ' facts'"></span>
            </div>
            <button class="p-2 -mr-2 text-[var(--text-secondary)] hover:text-white hover:bg-white/10 rounded-lg transition-colors" @click="showMemory = false">
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>
        </div>

        <!-- Search -->
        <div class="px-5 pt-4 pb-2 shrink-0">
            <div class="relative group">
                <i data-lucide="search" class="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-white/30 group-focus-within:text-[var(--accent-color)] transition-colors"></i>
                <input
                    type="text"
                    x-model="memorySearch"
                    placeholder="Search memories..."
                    class="w-full bg-black/30 border border-[var(--glass-border)] rounded-xl py-2.5 pl-10 pr-4 text-[13px] text-white focus:outline-none focus:border-[var(--accent-color)]/50 focus:bg-black/40 transition-all placeholder-white/30"
                >
            </div>
        </div>

        <!-- Facts List (scrollable) -->
        <div class="flex-1 overflow-y-auto px-5 pb-2 min-h-0" style="scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent;">

            <div x-show="memoryLoading" class="py-16 text-center text-white/40 flex flex-col items-center gap-3">
                <i data-lucide="loader-2" class="w-6 h-6 animate-spin"></i>
                <span class="text-[13px]">Loading memories...</span>
            </div>

            <div x-show="!memoryLoading" class="flex flex-col gap-2 py-1">
                <template x-for="memory in getFilteredMemories()" :key="memory.id">
                    <div class="group p-3.5 rounded-xl border border-[var(--glass-border)] hover:bg-white/[0.03] transition-all">
                        <div class="flex items-start gap-3">
                            <div class="flex-1 min-w-0">
                                <p class="text-[13px] leading-relaxed text-white/85 break-words" x-text="memory.content"></p>
                                <div class="flex items-center gap-2 mt-2">
                                    <span class="text-[10px] text-white/30" x-text="formatDate(memory.timestamp)"></span>
                                    <template x-for="tag in (memory.tags || [])" :key="tag">
                                        <span class="text-[10px] text-[var(--accent-color)]/70 bg-[var(--accent-color)]/8 px-1.5 py-0.5 rounded">
                                            #<span x-text="tag"></span>
                                        </span>
                                    </template>
                                </div>
                            </div>
                            <button
                                class="shrink-0 p-1.5 rounded-lg text-white/0 group-hover:text-white/20 hover:!text-[var(--danger-color)] hover:bg-white/5 transition-all"
                                @click="deleteMemory(memory.id)"
                                title="Forget"
                            >
                                <i data-lucide="trash-2" class="w-3.5 h-3.5"></i>
                            </button>
                        </div>
                    </div>
                </template>

                <!-- Empty state -->
                <div x-show="longTermMemory.length === 0 && !memoryLoading" class="py-16 text-center">
                    <i data-lucide="brain" class="w-10 h-10 mx-auto mb-3 text-white/15"></i>
                    <p class="text-[14px] text-white/40">No memories yet</p>
                    <p class="text-[12px] text-white/25 mt-1">Ask me to "remember" something to save it here</p>
                </div>

                <!-- No results -->
                <div x-show="longTermMemory.length > 0 && getFilteredMemories().length === 0 && memorySearch.trim()" class="py-12 text-center">
                    <p class="text-[13px] text-white/40">No memories match "<span class="text-white/60" x-text="memorySearch"></span>"</p>
                </div>
            </div>
        </div>

        <!-- Configuration (collapsible) -->
        <div class="shrink-0 border-t border-[var(--glass-border)]">
            <button
                class="flex items-center justify-between w-full px-5 py-3 text-[12px] text-white/40 hover:text-white/60 transition-colors"
                @click="memoryConfigOpen = !memoryConfigOpen"
            >
                <span class="flex items-center gap-2">
                    <i data-lucide="settings" class="w-3.5 h-3.5"></i>
                    <span class="font-medium">Configuration</span>
                    <span class="text-[10px] bg-white/5 px-1.5 py-0.5 rounded text-white/30" x-text="settings.memoryBackend === 'mem0' ? 'Mem0' : 'File'"></span>
                </span>
                <i :data-lucide="memoryConfigOpen ? 'chevron-down' : 'chevron-up'" class="w-3.5 h-3.5"></i>
            </button>

            <div x-show="memoryConfigOpen" x-transition class="px-5 pb-4 flex flex-col gap-3">
                <!-- Backend -->
                <div class="flex items-center justify-between gap-4">
                    <div>
                        <div class="text-[12px] font-medium text-white/70">Backend</div>
                        <div class="text-[11px] text-white/30" x-text="settings.memoryBackend === 'mem0' ? 'Semantic search + LLM extraction' : 'Simple markdown files'"></div>
                    </div>
                    <div class="relative shrink-0">
                        <select
                            x-model="settings.memoryBackend"
                            @change="saveSettings()"
                            class="appearance-none bg-black/30 border border-[var(--glass-border)] rounded-lg py-1.5 pl-3 pr-7 text-[12px] text-white focus:outline-none focus:border-[var(--accent-color)]/50 transition-all"
                        >
                            <option value="file">File</option>
                            <option value="mem0">Mem0</option>
                        </select>
                        <i data-lucide="chevron-down" class="absolute right-2 top-1/2 -translate-y-1/2 w-3 h-3 pointer-events-none text-white/30"></i>
                    </div>
                </div>

                <!-- Mem0 options -->
                <div x-show="settings.memoryBackend === 'mem0'" x-transition class="flex flex-col gap-2.5 pl-3 border-l-2 border-[var(--accent-color)]/20">
                    <!-- Auto-Learn -->
                    <label class="flex items-center justify-between gap-4 cursor-pointer group">
                        <div>
                            <div class="text-[12px] font-medium text-white/70 group-hover:text-white/90 transition-colors">Auto-Learn</div>
                            <div class="text-[11px] text-white/30">Extract facts from conversations</div>
                        </div>
                        <div class="relative w-[36px] h-[20px] shrink-0">
                            <input type="checkbox" x-model="settings.mem0AutoLearn" @change="saveSettings()" class="absolute opacity-0 w-0 h-0 peer" />
                            <span class="absolute inset-0 bg-[#787880]/30 rounded-full transition-colors duration-300 peer-checked:bg-[var(--success-color)]"></span>
                            <span class="absolute left-0.5 top-0.5 w-[16px] h-[16px] bg-white rounded-full shadow-[0_1px_3px_rgba(0,0,0,0.2)] transition-transform duration-300 peer-checked:translate-x-[16px]"></span>
                        </div>
                    </label>

                    <!-- LLM + Embedder in a compact 2-col grid -->
                    <div class="grid grid-cols-2 gap-2">
                        <div class="flex flex-col gap-1">
                            <label class="text-[10px] font-medium text-white/40 uppercase tracking-wider">LLM</label>
                            <div class="relative">
                                <select x-model="settings.mem0LlmProvider" @change="saveSettings()"
                                    class="w-full appearance-none bg-black/30 border border-[var(--glass-border)] rounded-lg py-1.5 pl-2.5 pr-6 text-[11px] text-white focus:outline-none focus:border-[var(--accent-color)]/50 transition-all">
                                    <option value="anthropic">Anthropic</option>
                                    <option value="openai">OpenAI</option>
                                    <option value="ollama">Ollama</option>
                                </select>
                                <i data-lucide="chevron-down" class="absolute right-1.5 top-1/2 -translate-y-1/2 w-3 h-3 pointer-events-none text-white/30"></i>
                            </div>
                        </div>
                        <div class="flex flex-col gap-1">
                            <label class="text-[10px] font-medium text-white/40 uppercase tracking-wider">LLM Model</label>
                            <input type="text" x-model="settings.mem0LlmModel" @change="saveSettings()" placeholder="claude-haiku-4-5-20251001"
                                class="w-full bg-black/30 border border-[var(--glass-border)] rounded-lg py-1.5 px-2.5 text-[11px] text-white focus:outline-none focus:border-[var(--accent-color)]/50 transition-all placeholder-white/20" />
                        </div>
                        <div class="flex flex-col gap-1">
                            <label class="text-[10px] font-medium text-white/40 uppercase tracking-wider">Embedder</label>
                            <div class="relative">
                                <select x-model="settings.mem0EmbedderProvider" @change="saveSettings()"
                                    class="w-full appearance-none bg-black/30 border border-[var(--glass-border)] rounded-lg py-1.5 pl-2.5 pr-6 text-[11px] text-white focus:outline-none focus:border-[var(--accent-color)]/50 transition-all">
                                    <option value="openai">OpenAI</option>
                                    <option value="ollama">Ollama</option>
                                    <option value="huggingface">HuggingFace</option>
                                </select>
                                <i data-lucide="chevron-down" class="absolute right-1.5 top-1/2 -translate-y-1/2 w-3 h-3 pointer-events-none text-white/30"></i>
                            </div>
                        </div>
                        <div class="flex flex-col gap-1">
                            <label class="text-[10px] font-medium text-white/40 uppercase tracking-wider">Embed Model</label>
                            <input type="text" x-model="settings.mem0EmbedderModel" @change="saveSettings()" placeholder="text-embedding-3-small"
                                class="w-full bg-black/30 border border-[var(--glass-border)] rounded-lg py-1.5 px-2.5 text-[11px] text-white focus:outline-none focus:border-[var(--accent-color)]/50 transition-all placeholder-white/20" />
                        </div>
                    </div>

                    <!-- Vector Store + Ollama URL -->
                    <div class="grid gap-2" :class="(settings.mem0LlmProvider === 'ollama' || settings.mem0EmbedderProvider === 'ollama') ? 'grid-cols-2' : 'grid-cols-1'">
                        <div class="flex flex-col gap-1">
                            <label class="text-[10px] font-medium text-white/40 uppercase tracking-wider">Vector Store</label>
                            <div class="relative">
                                <select x-model="settings.mem0VectorStore" @change="saveSettings()"
                                    class="w-full appearance-none bg-black/30 border border-[var(--glass-border)] rounded-lg py-1.5 pl-2.5 pr-6 text-[11px] text-white focus:outline-none focus:border-[var(--accent-color)]/50 transition-all">
                                    <option value="qdrant">Qdrant</option>
                                    <option value="chroma">ChromaDB</option>
                                </select>
                                <i data-lucide="chevron-down" class="absolute right-1.5 top-1/2 -translate-y-1/2 w-3 h-3 pointer-events-none text-white/30"></i>
                            </div>
                        </div>
                        <div class="flex flex-col gap-1" x-show="settings.mem0LlmProvider === 'ollama' || settings.mem0EmbedderProvider === 'ollama'" x-transition>
                            <label class="text-[10px] font-medium text-white/40 uppercase tracking-wider">Ollama URL</label>
                            <input type="text" x-model="settings.mem0OllamaBaseUrl" @change="saveSettings()" placeholder="http://localhost:11434"
                                class="w-full bg-black/30 border border-[var(--glass-border)] rounded-lg py-1.5 px-2.5 text-[11px] text-white focus:outline-none focus:border-[var(--accent-color)]/50 transition-all placeholder-white/20" />
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
