<!--
  Mudabbir Dashboard - Skills Modal

  Two-view design: "My Skills" (installed) + "Library" (browse/install from skills.sh)
-->
<!-- Skills Modal -->
<div
class="fixed inset-0 z-[100] flex items-center justify-center bg-black/40 backdrop-blur-md p-4"
x-show="showSkills"
x-transition.opacity
@click.self="showSkills = false"
>
<div class="w-full max-w-[680px] 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="wand-2" class="w-5 h-5 text-[var(--warning-color)]"></i>
            <h2 class="text-[17px] font-semibold">Skills</h2>
        </div>
        <button class="p-2 -mr-2 text-[var(--text-secondary)] hover:text-white hover:bg-white/10 rounded-lg transition-colors" @click="showSkills = 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="skillsView === 'installed' ? 'bg-[var(--accent-color)] text-white' : 'text-white/50 hover:text-white/80 hover:bg-white/5'"
            @click="skillsView = 'installed'"
        >My Skills</button>
        <button
            class="px-3 py-1.5 text-[12px] font-medium rounded-lg transition-colors"
            :class="skillsView === 'library' ? 'bg-[var(--accent-color)] text-white' : 'text-white/50 hover:text-white/80 hover:bg-white/5'"
            @click="skillsView = 'library'; if (libraryFeatured.length === 0 && !libraryLoading) loadFeatured()"
        >Library</button>
    </div>

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

        <!-- ==================== My Skills View ==================== -->
        <div x-show="skillsView === 'installed'">
            <!-- Filter Input -->
            <div class="relative mb-4">
                <i data-lucide="search" class="w-4 h-4 text-white/30 absolute left-3 top-1/2 -translate-y-1/2"></i>
                <input
                    type="text"
                    x-model="skillSearchQuery"
                    placeholder="Filter installed skills..."
                    class="w-full pl-10 pr-4 py-2.5 bg-black/30 border border-white/10 rounded-xl text-[13px] text-white placeholder-white/40 focus:border-[var(--accent-color)] focus:outline-none transition-colors"
                />
            </div>

            <!-- Loading State -->
            <template x-if="skillsLoading && skills.length === 0">
                <div class="p-8 text-center text-white/60 flex flex-col items-center gap-3">
                    <i data-lucide="loader-2" class="w-8 h-8 animate-spin"></i>
                    <span>Loading skills...</span>
                </div>
            </template>

            <!-- Skills List -->
            <template x-if="!skillsLoading || skills.length > 0">
                <div>
                    <div class="flex flex-col border border-[var(--glass-border)] rounded-xl bg-black/20 overflow-hidden" x-show="filteredSkills().length > 0">
                        <template x-for="skill in filteredSkills()" :key="skill.name">
                            <div class="flex items-start gap-4 p-4 border-b border-[var(--glass-border)] transition-colors last:border-b-0 hover:bg-white/5">
                                <div class="p-2 bg-[var(--warning-color)]/20 rounded-lg shrink-0">
                                    <i data-lucide="wand-2" class="w-5 h-5 text-[var(--warning-color)]"></i>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <p class="font-medium text-[15px] flex items-center gap-1.5 text-white">
                                        <span class="font-mono text-[var(--accent-color)]">/</span><span x-text="skill.name"></span>
                                        <span x-show="skill.argument_hint" class="text-white/30 text-xs font-normal border border-white/10 px-1.5 py-0.5 rounded font-mono" x-text="skill.argument_hint"></span>
                                    </p>
                                    <p class="text-[13px] text-white/50 mt-1 line-clamp-2" x-text="skill.description"></p>
                                </div>
                                <button
                                    class="bg-white/10 hover:bg-white/20 text-white px-3 py-1.5 rounded-[8px] text-[12px] font-medium transition-all active:scale-95 shrink-0"
                                    @click="runSkill(skill.name); showSkills = false;"
                                >
                                Run
                                </button>
                            </div>
                        </template>
                    </div>

                    <!-- Empty State (no skills at all) -->
                    <div x-show="skills.length === 0" class="p-12 text-center text-white/40 flex flex-col items-center gap-3">
                        <i data-lucide="wand-2" class="w-10 h-10 opacity-50"></i>
                        <span class="font-medium">No skills installed</span>
                        <span class="text-xs">Browse the Library tab or install with: <code class="text-[var(--accent-color)]">npx skills add owner/repo</code></span>
                        <button
                            class="mt-2 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="skillsView = 'library'; if (libraryFeatured.length === 0 && !libraryLoading) loadFeatured()"
                        >Browse Library</button>
                    </div>

                    <!-- No filter matches -->
                    <div x-show="skills.length > 0 && filteredSkills().length === 0" class="p-8 text-center text-white/40 flex flex-col items-center gap-3">
                        <i data-lucide="search-x" class="w-8 h-8 opacity-50"></i>
                        <span class="text-sm">No skills match your filter</span>
                    </div>
                </div>
            </template>
        </div>

        <!-- ==================== Library View ==================== -->
        <div x-show="skillsView === 'library'">
            <!-- Search Input -->
            <div class="relative mb-4">
                <i data-lucide="search" class="w-4 h-4 text-white/30 absolute left-3 top-1/2 -translate-y-1/2"></i>
                <input
                    type="text"
                    x-model="libraryQuery"
                    @input.debounce.400ms="searchLibrary()"
                    placeholder="Search skills.sh..."
                    class="w-full pl-10 pr-4 py-2.5 bg-black/30 border border-white/10 rounded-xl text-[13px] text-white placeholder-white/40 focus:border-[var(--accent-color)] focus:outline-none transition-colors"
                />
            </div>

            <!-- Loading State -->
            <div x-show="libraryLoading" class="p-8 text-center text-white/60 flex flex-col items-center gap-3">
                <i data-lucide="loader-2" class="w-8 h-8 animate-spin"></i>
                <span>Searching skills.sh...</span>
            </div>

            <!-- Results -->
            <div x-show="!libraryLoading">
                <!-- Section Title -->
                <div x-show="!libraryQuery && libraryDisplayResults().length > 0" class="text-[11px] font-semibold text-white/40 uppercase tracking-wider mb-3">Popular Skills</div>
                <div x-show="libraryQuery && libraryDisplayResults().length > 0" class="text-[11px] font-semibold text-white/40 uppercase tracking-wider mb-3">
                    Search Results <span class="text-white/20" x-text="'(' + libraryDisplayResults().length + ')'"></span>
                </div>

                <div class="flex flex-col gap-2">
                    <template x-for="skill in libraryDisplayResults()" :key="skill.id">
                        <div class="bg-white/5 rounded-xl border border-white/5 overflow-hidden">
                            <div class="flex items-center gap-3 p-3">
                                <div class="w-8 h-8 rounded-lg bg-[var(--warning-color)]/10 flex items-center justify-center shrink-0">
                                    <i data-lucide="wand-2" class="w-4 h-4 text-[var(--warning-color)]/60"></i>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <div class="font-medium text-[13px] truncate" x-text="skill.name || skill.skillId"></div>
                                    <div class="text-[11px] text-white/40 truncate" x-text="skill.source || ''"></div>
                                </div>
                                <div class="flex items-center gap-2 shrink-0">
                                    <span x-show="skill.installs" class="text-[10px] text-white/30 tabular-nums" x-text="formatInstalls(skill.installs)"></span>
                                    <template x-if="isSkillInstalled(skill)">
                                        <span class="px-2 py-0.5 text-[10px] font-medium bg-[var(--success-color)]/20 text-white rounded-full">Installed</span>
                                    </template>
                                    <template x-if="!isSkillInstalled(skill)">
                                        <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 disabled:opacity-50"
                                            :disabled="skillInstalling === skill.id"
                                            @click="installSkill(skill.id)"
                                        >
                                            <span x-show="skillInstalling !== skill.id">Install</span>
                                            <span x-show="skillInstalling === skill.id" class="flex items-center gap-1.5">
                                                <i data-lucide="loader-2" class="w-3 h-3 animate-spin"></i> Installing
                                            </span>
                                        </button>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>

                <!-- Empty State -->
                <div x-show="libraryDisplayResults().length === 0 && !libraryLoading" class="p-8 text-center text-white/40 flex flex-col items-center gap-3">
                    <i data-lucide="package-search" class="w-10 h-10 opacity-50"></i>
                    <template x-if="libraryQuery">
                        <span class="text-sm">No skills found for "<span x-text="libraryQuery" class="text-white/60"></span>"</span>
                    </template>
                    <template x-if="!libraryQuery">
                        <span class="text-sm">Type to search the skills.sh registry</span>
                    </template>
                </div>
            </div>

            <!-- Info -->
            <div class="mt-4 bg-blue-500/10 border border-blue-500/20 p-3 rounded-xl flex gap-3 text-[12px] text-blue-200/80">
                <i data-lucide="info" class="w-4 h-4 shrink-0 mt-0.5"></i>
                <p>
                    Skills extend Mudabbir with new <code class="text-white font-mono bg-white/10 px-1 py-0.5 rounded">/commands</code>.
                    Browse more at <a href="https://skills.sh" target="_blank" class="text-white underline decoration-white/30 underline-offset-2 hover:decoration-white transition-all">skills.sh</a>
                </p>
            </div>
        </div>

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