{% extends "base.html" %}
{% from "components/tool_card.html" import tool_card %}

{% block title %}Browse Tools - CmdForge Registry{% endblock %}

{% block meta_description %}Discover and install community-built AI tools. Browse by category, search by name, or explore the most popular tools.{% endblock %}

{% block content %}
<div class="bg-gray-50 min-h-screen">
    <!-- Page Header -->
    <div class="bg-white border-b border-gray-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <h1 class="text-3xl font-bold text-gray-900">Browse Tools</h1>
            <p class="mt-2 text-gray-600">
                Discover community-built AI tools for your command line.
            </p>
        </div>
    </div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div class="lg:grid lg:grid-cols-4 lg:gap-8">
            <!-- Sidebar Filters -->
            <aside class="hidden lg:block">
                <div class="sticky top-4 space-y-6">
                    <!-- Search -->
                    <div>
                        <label for="search" class="block text-sm font-medium text-gray-700 mb-2">
                            Search
                        </label>
                        <form action="{{ url_for('web.search') }}" method="GET">
                            <div class="relative">
                                <input type="text"
                                       name="q"
                                       id="search"
                                       value="{{ query or '' }}"
                                       placeholder="Search tools..."
                                       class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                                <button type="submit" class="absolute left-3 top-2.5" aria-label="Search">
                                    <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                                    </svg>
                                </button>
                            </div>
                        </form>
                    </div>

                    <!-- Categories -->
                    <div>
                        <h3 class="text-sm font-medium text-gray-700 mb-3">Categories</h3>
                        <ul class="space-y-2">
                            <li>
                                <a href="{{ url_for('web.tools') }}"
                                   class="flex items-center justify-between px-3 py-2 rounded-lg {{ 'bg-indigo-50 text-indigo-600 font-medium' if not current_category else 'text-gray-600 hover:bg-gray-100' }}">
                                    <span>All Tools</span>
                                    <span class="text-sm text-gray-600">{{ total_count }}</span>
                                </a>
                            </li>
                            {% for cat in categories %}
                            <li>
                                <a href="{{ url_for('web.category', name=cat.name) }}"
                                   class="flex items-center justify-between px-3 py-2 rounded-lg {{ 'bg-indigo-50 text-indigo-600 font-medium' if current_category == cat.name else 'text-gray-600 hover:bg-gray-100' }}">
                                    <span>{{ cat.display_name }}</span>
                                    <span class="text-sm text-gray-600">{{ cat.count }}</span>
                                </a>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>

                    <!-- Sort -->
                    <div>
                        <label for="sort-select" class="block text-sm font-medium text-gray-700 mb-3">Sort By</label>
                        <select id="sort-select"
                                onchange="updateSort(this.value)"
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white">
                            <option value="downloads" {{ 'selected' if sort == 'downloads' }}>Most Downloads</option>
                            <option value="published_at" {{ 'selected' if sort == 'published_at' }}>Recently Published</option>
                            <option value="name" {{ 'selected' if sort == 'name' }}>Name (A-Z)</option>
                        </select>
                    </div>
                </div>
            </aside>

            <!-- Mobile Filter Toggle -->
            <div class="lg:hidden mb-6">
                <button type="button"
                        onclick="toggleMobileFilters()"
                        class="w-full flex items-center justify-between px-4 py-3 bg-white border border-gray-300 rounded-lg">
                    <span class="font-medium text-gray-700">Filters & Sort</span>
                    <svg id="filter-chevron" class="w-5 h-5 text-gray-500 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>

                <!-- Mobile Filters Panel -->
                <div id="mobile-filters" class="hidden mt-4 p-4 bg-white border border-gray-200 rounded-lg space-y-4">
                    <!-- Mobile Search -->
                    <form action="{{ url_for('web.search') }}" method="GET" class="flex gap-2">
                        <input type="text"
                               name="q"
                               value="{{ query or '' }}"
                               placeholder="Search tools..."
                               aria-label="Search tools"
                               class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500">
                        <button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700" aria-label="Search">
                            Search
                        </button>
                    </form>

                    <!-- Mobile Categories -->
                    <div>
                        <label for="mobile-category-select" class="block text-sm font-medium text-gray-700 mb-2">Category</label>
                        <select id="mobile-category-select"
                                onchange="window.location.href=this.value"
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white">
                            <option value="{{ url_for('web.tools') }}" {{ 'selected' if not current_category }}>All Tools</option>
                            {% for cat in categories %}
                            <option value="{{ url_for('web.category', name=cat.name) }}" {{ 'selected' if current_category == cat.name }}>
                                {{ cat.display_name }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>

                    <!-- Mobile Sort -->
                    <div>
                        <label for="mobile-sort-select" class="block text-sm font-medium text-gray-700 mb-2">Sort By</label>
                        <select id="mobile-sort-select"
                                onchange="updateSort(this.value)"
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white">
                            <option value="downloads" {{ 'selected' if sort == 'downloads' }}>Most Downloads</option>
                            <option value="published_at" {{ 'selected' if sort == 'published_at' }}>Recently Published</option>
                            <option value="name" {{ 'selected' if sort == 'name' }}>Name (A-Z)</option>
                        </select>
                    </div>
                </div>
            </div>

            <!-- Tools Grid -->
            <main class="lg:col-span-3">
                <!-- Results Header -->
                <div class="flex items-center justify-between mb-6">
                    <p class="text-sm text-gray-600">
                        {% if query %}
                        {{ tools|length }} results for "{{ query }}"
                        {% elif current_category %}
                        {{ tools|length }} tools in {{ current_category }}
                        {% else %}
                        {{ tools|length }} tools available
                        {% endif %}
                    </p>
                </div>

                {% if tools %}
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    {% for tool in tools %}
                    {{ tool_card(
                        owner=tool.owner,
                        name=tool.name,
                        description=tool.description,
                        category=tool.category,
                        downloads=tool.downloads,
                        version=tool.version
                    ) }}
                    {% endfor %}
                </div>

                <!-- Pagination -->
                {% if pagination %}
                <nav class="mt-12 flex items-center justify-center" aria-label="Pagination">
                    <div class="flex items-center gap-2">
                        {% if pagination.has_prev %}
                        <a href="{{ url_for('web.tools', page=pagination.prev_num, sort=sort, category=current_category) }}"
                           class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
                            Previous
                        </a>
                        {% endif %}

                        <span class="px-4 py-2 text-sm text-gray-700">
                            Page {{ pagination.page }} of {{ pagination.pages }}
                        </span>

                        {% if pagination.has_next %}
                        <a href="{{ url_for('web.tools', page=pagination.next_num, sort=sort, category=current_category) }}"
                           class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
                            Next
                        </a>
                        {% endif %}
                    </div>
                </nav>
                {% endif %}

                {% else %}
                <!-- Empty State -->
                <div class="text-center py-16">
                    <svg class="mx-auto w-16 h-16 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
                    </svg>
                    <h3 class="mt-4 text-lg font-medium text-gray-900">No tools found</h3>
                    <p class="mt-2 text-gray-600">
                        {% if query %}
                        No tools match your search. Try different keywords.
                        {% else %}
                        Be the first to publish a tool in this category!
                        {% endif %}
                    </p>
                    <a href="{{ url_for('web.docs', path='publishing') }}"
                       class="mt-6 inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700">
                        Learn to Publish
                    </a>
                </div>
                {% endif %}
            </main>
        </div>
    </div>
</div>

<script>
function toggleMobileFilters() {
    const filters = document.getElementById('mobile-filters');
    const chevron = document.getElementById('filter-chevron');
    filters.classList.toggle('hidden');
    chevron.classList.toggle('rotate-180');
}

function updateSort(value) {
    const url = new URL(window.location.href);
    url.searchParams.set('sort', value);
    window.location.href = url.toString();
}
</script>
{% endblock %}