{# app/templates/admin/icons.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/headers.html' import page_header %}

{% block title %}Icons Browser{% endblock %}

{# ✅ CRITICAL: Link to Alpine.js component #}
{% block alpine_data %}adminIcons(){% endblock %}

{% block content %}
{{ page_header('Icons Browser', back_url='/admin/dashboard', back_label='Back to Dashboard') }}

<!-- Introduction Card -->
<div class="bg-gradient-to-r from-purple-600 to-indigo-600 rounded-lg shadow-lg p-6 mb-8">
    <div class="flex items-start">
        <div class="flex-shrink-0 text-gray-700 dark:text-gray-200">
            <span x-html="$icon('photograph', 'w-12 h-12')"></span>
        </div>
        <div class="ml-4">
            <h3 class="text-xl font-bold mb-2 text-gray-700 dark:text-gray-200">Icon Library</h3>
            <p class="text-gray-700 dark:text-gray-200 opacity-90">
                Browse all <span x-text="allIcons.length"></span> available icons. Click any icon to copy its name or
                usage code.
            </p>
            <div class="flex items-center gap-4 text-sm text-gray-700 dark:text-gray-200 opacity-90">
                <div class="flex items-center">
                    <span x-html="$icon('check-circle', 'w-4 h-4 mr-1')"></span>
                    <span>Heroicons</span>
                </div>
                <div class="flex items-center">
                    <span x-html="$icon('check-circle', 'w-4 h-4 mr-1')"></span>
                    <span>Dark Mode Support</span>
                </div>
                <div class="flex items-center">
                    <span x-html="$icon('check-circle', 'w-4 h-4 mr-1')"></span>
                    <span>Fully Accessible</span>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Search and Filter -->
<div class="mb-6 bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
    <div class="flex flex-col md:flex-row gap-4">
        <!-- Search Box -->
        <div class="flex-1">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                Search Icons
            </label>
            <div class="relative">
                    <span class="absolute inset-y-0 left-0 flex items-center pl-3">
                        <span x-html="$icon('search', 'w-5 h-5 text-gray-400')"></span>
                    </span>
                <input
                        type="text"
                        x-model="searchQuery"
                        @input="filterIcons()"
                        placeholder="Type to search... (e.g., 'user', 'arrow', 'check')"
                        class="w-full pl-10 pr-4 py-2 text-sm border border-gray-300 rounded-lg focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300"
                />
            </div>
            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                Found <span x-text="filteredIcons.length"></span> icon(s)
            </p>
        </div>

        <!-- Category Pills -->
        <div class="flex-1">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                Filter by Category
            </label>
            <div class="flex flex-wrap gap-2">
                <template x-for="category in categories.slice(0, 6)" :key="category.id">
                    <button
                            @click="setCategory(category.id)"
                            class="inline-flex items-center px-3 py-1 text-xs font-medium rounded-full transition-colors"
                            :class="activeCategory === category.id
                                ? 'bg-purple-600 text-white'
                                : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'"
                    >
                        <span x-html="$icon(category.icon, 'w-3 h-3 mr-1')"></span>
                        <span x-text="category.name"></span>
                        <span class="ml-1 opacity-75" x-text="'(' + getCategoryCount(category.id) + ')'"></span>
                    </button>
                </template>
            </div>
        </div>
    </div>

    <!-- All Categories (Expandable) -->
    <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
        <details class="group">
            <summary
                    class="cursor-pointer text-sm font-medium text-purple-600 dark:text-purple-400 hover:text-purple-700 flex items-center">
                <span x-html="$icon('chevron-right', 'w-4 h-4 mr-1 group-open:rotate-90 transition-transform')"></span>
                Show All Categories
            </summary>
            <div class="mt-3 flex flex-wrap gap-2">
                <template x-for="category in categories" :key="category.id">
                    <button
                            @click="setCategory(category.id)"
                            class="inline-flex items-center px-3 py-1.5 text-xs font-medium rounded-lg transition-colors"
                            :class="activeCategory === category.id
                                ? 'bg-purple-600 text-white'
                                : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'"
                    >
                        <span x-html="$icon(category.icon, 'w-4 h-4 mr-2')"></span>
                        <span x-text="category.name"></span>
                        <span class="ml-2 px-2 py-0.5 bg-black bg-opacity-10 rounded-full"
                              x-text="getCategoryCount(category.id)"></span>
                    </button>
                </template>
            </div>
        </details>
    </div>
</div>

<!-- Active Category Info -->
<div x-show="activeCategory !== 'all'"
     class="mb-4 flex items-center justify-between bg-purple-50 dark:bg-purple-900 dark:bg-opacity-20 border border-purple-200 dark:border-purple-700 rounded-lg px-4 py-3">
    <div class="flex items-center">
        <span x-html="$icon(getCategoryInfo(activeCategory).icon, 'w-5 h-5 text-purple-600 dark:text-purple-400 mr-2')"></span>
        <span class="text-sm font-medium text-purple-900 dark:text-purple-200">
                Showing <span x-text="getCategoryInfo(activeCategory).name"></span>
                (<span x-text="filteredIcons.length"></span> icons)
            </span>
    </div>
    <button
            @click="setCategory('all')"
            class="text-sm text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300 flex items-center"
    >
        <span x-html="$icon('close', 'w-4 h-4 mr-1')"></span>
        Clear Filter
    </button>
</div>

<!-- Icons Grid -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
    <!-- Empty State -->
    <div x-show="filteredIcons.length === 0" class="text-center py-12">
        <span x-html="$icon('exclamation', 'w-16 h-16 mx-auto text-gray-400 mb-4')"></span>
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-2">No icons found</h3>
        <p class="text-gray-500 dark:text-gray-400 mb-4">Try adjusting your search or filter</p>
        <button
                @click="searchQuery = ''; setCategory('all')"
                class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700"
        >
            Clear Filters
        </button>
    </div>

    <!-- Icons Grid -->
    <div x-show="filteredIcons.length > 0"
         class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-3">
        <template x-for="icon in filteredIcons" :key="icon.name">
            <div
                    @click="selectIcon(icon.name)"
                    class="group relative flex flex-col items-center justify-center p-4 bg-gray-50 dark:bg-gray-900 rounded-lg hover:bg-purple-50 dark:hover:bg-purple-900 dark:hover:bg-opacity-20 cursor-pointer transition-all hover:shadow-md border-2 border-transparent hover:border-purple-300 dark:hover:border-purple-700"
                    :class="{ 'border-purple-500 bg-purple-50 dark:bg-purple-900 dark:bg-opacity-30': selectedIcon === icon.name }"
            >
                <!-- Icon -->
                <div class="text-gray-600 dark:text-gray-400 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors">
                    <span x-html="$icon(icon.name, 'w-8 h-8')"></span>
                </div>

                <!-- Icon Name -->
                <p class="mt-2 text-xs text-center text-gray-600 dark:text-gray-400 font-mono truncate w-full px-1"
                   :title="icon.name" x-text="icon.name"></p>

                <!-- Hover Actions -->
                <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-white dark:bg-gray-800 bg-opacity-90 dark:bg-opacity-90 rounded-lg">
                    <div class="flex gap-1">
                        <button
                                @click.stop="copyIconName(icon.name)"
                                class="p-2 bg-purple-600 text-white rounded hover:bg-purple-700 transition-colors"
                                title="Copy name"
                        >
                            <span x-html="$icon('duplicate', 'w-4 h-4')"></span>
                        </button>
                        <button
                                @click.stop="copyIconUsage(icon.name)"
                                class="p-2 bg-indigo-600 text-white rounded hover:bg-indigo-700 transition-colors"
                                title="Copy usage"
                        >
                            <span x-html="$icon('code', 'w-4 h-4')"></span>
                        </button>
                    </div>
                </div>
            </div>
        </template>
    </div>
</div>

<!-- Selected Icon Details -->
<div x-show="selectedIcon" class="mt-6 bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">
        Selected Icon: <span class="font-mono text-purple-600 dark:text-purple-400" x-text="selectedIcon"></span>
    </h3>

    <div class="grid md:grid-cols-2 gap-6">
        <!-- Preview -->
        <div>
            <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Preview</h4>
            <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-8 flex items-center justify-center gap-6">
                <div class="text-gray-800 dark:text-gray-200">
                    <span x-html="$icon(selectedIcon, 'w-12 h-12')"></span>
                </div>
                <div class="text-gray-800 dark:text-gray-200">
                    <span x-html="$icon(selectedIcon, 'w-16 h-16')"></span>
                </div>
                <div class="text-gray-800 dark:text-gray-200">
                    <span x-html="$icon(selectedIcon, 'w-24 h-24')"></span>
                </div>
            </div>
        </div>

        <!-- Usage Code -->
        <div>
            <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Usage Code</h4>

            <!-- Alpine.js Usage -->
            <div class="mb-4">
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Alpine.js
                    (Recommended)</label>
                <div class="relative">
                    <pre class="bg-gray-900 text-gray-100 rounded-lg p-3 text-xs overflow-x-auto"><code
                            x-text="'x-html=&quot;$icon(\'' + selectedIcon + '\', \'w-5 h-5\')&quot;'"></code></pre>
                    <button
                            @click="copyIconUsage(selectedIcon)"
                            class="absolute top-2 right-2 p-1.5 bg-gray-800 text-gray-300 rounded hover:bg-gray-700 transition-colors"
                            title="Copy"
                    >
                        <span x-html="$icon('duplicate', 'w-4 h-4')"></span>
                    </button>
                </div>
            </div>

            <!-- Icon Name -->
            <div>
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Icon Name</label>
                <div class="relative">
                    <pre class="bg-gray-900 text-gray-100 rounded-lg p-3 text-xs overflow-x-auto"><code
                            x-text="selectedIcon"></code></pre>
                    <button
                            @click="copyIconName(selectedIcon)"
                            class="absolute top-2 right-2 p-1.5 bg-gray-800 text-gray-300 rounded hover:bg-gray-700 transition-colors"
                            title="Copy"
                    >
                        <span x-html="$icon('duplicate', 'w-4 h-4')"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Size Examples -->
    <div class="mt-6">
        <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Common Sizes</h4>
        <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4">
            <div class="flex items-center gap-8">
                <div class="text-center">
                    <div class="text-gray-800 dark:text-gray-200 mb-1">
                        <span x-html="$icon(selectedIcon, 'w-4 h-4')"></span>
                    </div>
                    <code class="text-xs text-gray-600 dark:text-gray-400">w-4 h-4</code>
                </div>
                <div class="text-center">
                    <div class="text-gray-800 dark:text-gray-200 mb-1">
                        <span x-html="$icon(selectedIcon, 'w-5 h-5')"></span>
                    </div>
                    <code class="text-xs text-gray-600 dark:text-gray-400">w-5 h-5</code>
                </div>
                <div class="text-center">
                    <div class="text-gray-800 dark:text-gray-200 mb-1">
                        <span x-html="$icon(selectedIcon, 'w-6 h-6')"></span>
                    </div>
                    <code class="text-xs text-gray-600 dark:text-gray-400">w-6 h-6</code>
                </div>
                <div class="text-center">
                    <div class="text-gray-800 dark:text-gray-200 mb-1">
                        <span x-html="$icon(selectedIcon, 'w-8 h-8')"></span>
                    </div>
                    <code class="text-xs text-gray-600 dark:text-gray-400">w-8 h-8</code>
                </div>
                <div class="text-center">
                    <div class="text-gray-800 dark:text-gray-200 mb-1">
                        <span x-html="$icon(selectedIcon, 'w-12 h-12')"></span>
                    </div>
                    <code class="text-xs text-gray-600 dark:text-gray-400">w-12 h-12</code>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Usage Guide -->
<div class="mb-8 mt-6 bg-blue-50 dark:bg-gray-800 border border-blue-200 dark:border-gray-700 rounded-lg p-6">
    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3 flex items-center">
        <span x-html="$icon('book-open', 'w-5 h-5 mr-2 text-blue-600')"></span>
        How to Use Icons
    </h3>
    <div class="grid md:grid-cols-2 gap-6 text-sm">
        <div>
            <h4 class="font-semibold text-gray-700 dark:text-gray-300 mb-2">In Alpine.js Templates</h4>
            <p class="text-gray-600 dark:text-gray-400 mb-2">Use the <code
                    class="px-1 py-0.5 bg-gray-200 dark:bg-gray-700 rounded">x-html</code> directive:</p>
            <pre class="bg-gray-900 text-gray-100 rounded p-2 text-xs overflow-x-auto"><code>&lt;span x-html="$icon('home', 'w-5 h-5')"&gt;&lt;/span&gt;</code></pre>
        </div>
        <div>
            <h4 class="font-semibold text-gray-700 dark:text-gray-300 mb-2">Customizing Size & Color</h4>
            <p class="text-gray-600 dark:text-gray-400 mb-2">Use Tailwind classes:</p>
            <pre class="bg-gray-900 text-gray-100 rounded p-2 text-xs overflow-x-auto"><code>&lt;span x-html="$icon('check', 'w-6 h-6 text-green-500')"&gt;&lt;/span&gt;</code></pre>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
{# ✅ CRITICAL: Load JavaScript file #}
<script src="{{ url_for('static', path='admin/js/icons-page.js') }}"></script>
{% endblock %}