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

{% block title %}Search: {{ query }} - CmdForge Registry{% endblock %}

{% block meta_description %}Search results for "{{ query }}" in the CmdForge Registry.{% endblock %}

{% block content %}
<div class="bg-gray-50 min-h-screen">
    <!-- Search Header -->
    <div class="bg-white border-b border-gray-200">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <form action="{{ url_for('web.search') }}" method="GET" class="max-w-2xl mx-auto">
                <div class="relative">
                    <input type="text"
                           name="q"
                           value="{{ query or '' }}"
                           placeholder="Search for tools..."
                           aria-label="Search for tools"
                           autofocus
                           class="w-full pl-12 pr-4 py-4 text-lg border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                    <svg class="absolute left-4 top-4.5 w-6 h-6 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 type="submit"
                            class="absolute right-2 top-2 px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700">
                        Search
                    </button>
                </div>
            </form>
        </div>
    </div>

    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {% if query %}
        <div class="lg:grid lg:grid-cols-4 lg:gap-8">
            <!-- Filter Sidebar -->
            <aside class="hidden lg:block">
                <div class="sticky top-4 space-y-6">
                    <!-- Active Filters -->
                    {% if active_categories or active_tags or active_owner %}
                    <div class="bg-white rounded-lg border border-gray-200 p-4">
                        <div class="flex items-center justify-between mb-3">
                            <h3 class="text-sm font-semibold text-gray-900">Active Filters</h3>
                            <a href="{{ url_for('web.search', q=query) }}" class="text-xs text-indigo-600 hover:underline">Clear all</a>
                        </div>
                        <div class="flex flex-wrap gap-2">
                            {% for cat in active_categories %}
                            <span class="inline-flex items-center px-2 py-1 text-xs bg-indigo-100 text-indigo-700 rounded-full">
                                {{ cat }}
                                <button onclick="removeFilter('categories', '{{ cat }}')" class="ml-1 hover:text-indigo-900">&times;</button>
                            </span>
                            {% endfor %}
                            {% for tag in active_tags %}
                            <span class="inline-flex items-center px-2 py-1 text-xs bg-green-100 text-green-700 rounded-full">
                                {{ tag }}
                                <button onclick="removeFilter('tags', '{{ tag }}')" class="ml-1 hover:text-green-900">&times;</button>
                            </span>
                            {% endfor %}
                            {% if active_owner %}
                            <span class="inline-flex items-center px-2 py-1 text-xs bg-purple-100 text-purple-700 rounded-full">
                                by: {{ active_owner }}
                                <button onclick="removeFilter('owner', '')" class="ml-1 hover:text-purple-900">&times;</button>
                            </span>
                            {% endif %}
                        </div>
                    </div>
                    {% endif %}

                    <!-- Category Facets -->
                    {% if facets.categories %}
                    <div class="bg-white rounded-lg border border-gray-200 p-4">
                        <h3 class="text-sm font-semibold text-gray-900 mb-3">Categories</h3>
                        <div class="space-y-2">
                            {% for cat in facets.categories[:10] %}
                            <label class="flex items-center">
                                <input type="checkbox"
                                       onchange="toggleFilter('categories', '{{ cat.name }}', this.checked)"
                                       {% if cat.name in active_categories %}checked{% endif %}
                                       class="h-4 w-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500">
                                <span class="ml-2 text-sm text-gray-600">{{ cat.name }}</span>
                                <span class="ml-auto text-xs text-gray-400">({{ cat.count }})</span>
                            </label>
                            {% endfor %}
                        </div>
                    </div>
                    {% endif %}

                    <!-- Tag Facets -->
                    {% if facets.tags %}
                    <div class="bg-white rounded-lg border border-gray-200 p-4">
                        <h3 class="text-sm font-semibold text-gray-900 mb-3">Tags</h3>
                        <div class="space-y-2">
                            {% for tag in facets.tags[:10] %}
                            <label class="flex items-center">
                                <input type="checkbox"
                                       onchange="toggleFilter('tags', '{{ tag.name }}', this.checked)"
                                       {% if tag.name in active_tags %}checked{% endif %}
                                       class="h-4 w-4 text-green-600 border-gray-300 rounded focus:ring-green-500">
                                <span class="ml-2 text-sm text-gray-600">{{ tag.name }}</span>
                                <span class="ml-auto text-xs text-gray-400">({{ tag.count }})</span>
                            </label>
                            {% endfor %}
                        </div>
                    </div>
                    {% endif %}

                    <!-- Owner Facets -->
                    {% if facets.owners %}
                    <div class="bg-white rounded-lg border border-gray-200 p-4">
                        <h3 class="text-sm font-semibold text-gray-900 mb-3">Publisher</h3>
                        <select onchange="setFilter('owner', this.value)" class="w-full text-sm border-gray-300 rounded-md">
                            <option value="">All publishers</option>
                            {% for owner in facets.owners[:15] %}
                            <option value="{{ owner.name }}" {% if owner.name == active_owner %}selected{% endif %}>
                                {{ owner.name }} ({{ owner.count }})
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    {% endif %}

                    <!-- Sort -->
                    <div class="bg-white rounded-lg border border-gray-200 p-4">
                        <h3 class="text-sm font-semibold text-gray-900 mb-3">Sort By</h3>
                        <select onchange="setFilter('sort', this.value)" class="w-full text-sm border-gray-300 rounded-md">
                            <option value="relevance" {% if active_sort == 'relevance' %}selected{% endif %}>Relevance</option>
                            <option value="downloads" {% if active_sort == 'downloads' %}selected{% endif %}>Downloads</option>
                            <option value="published_at" {% if active_sort == 'published_at' %}selected{% endif %}>Recently Published</option>
                            <option value="name" {% if active_sort == 'name' %}selected{% endif %}>Name</option>
                        </select>
                    </div>
                </div>
            </aside>

            <!-- Mobile Filters Button -->
            <div class="lg:hidden mb-4">
                <button onclick="toggleMobileFilters()" class="w-full flex items-center justify-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/>
                    </svg>
                    Filters
                    {% if active_categories or active_tags or active_owner %}
                    <span class="ml-2 px-2 py-0.5 text-xs bg-indigo-100 text-indigo-700 rounded-full">
                        {{ (active_categories|length) + (active_tags|length) + (1 if active_owner else 0) }}
                    </span>
                    {% endif %}
                </button>
            </div>

            <!-- Mobile Filters Panel (hidden by default) -->
            <div id="mobile-filters" class="hidden lg:hidden mb-6 bg-white rounded-lg border border-gray-200 p-4">
                <!-- Active filter chips -->
                {% if active_categories or active_tags or active_owner %}
                <div class="flex flex-wrap gap-2 mb-4 pb-4 border-b border-gray-200">
                    {% for cat in active_categories %}
                    <span class="inline-flex items-center px-2 py-1 text-xs bg-indigo-100 text-indigo-700 rounded-full">
                        {{ cat }}
                        <button onclick="removeFilter('categories', '{{ cat }}')" class="ml-1">&times;</button>
                    </span>
                    {% endfor %}
                    {% for tag in active_tags %}
                    <span class="inline-flex items-center px-2 py-1 text-xs bg-green-100 text-green-700 rounded-full">
                        {{ tag }}
                        <button onclick="removeFilter('tags', '{{ tag }}')" class="ml-1">&times;</button>
                    </span>
                    {% endfor %}
                    <a href="{{ url_for('web.search', q=query) }}" class="text-xs text-indigo-600 hover:underline self-center ml-2">Clear all</a>
                </div>
                {% endif %}

                <div class="grid grid-cols-2 gap-4">
                    <!-- Sort -->
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">Sort</label>
                        <select onchange="setFilter('sort', this.value)" class="w-full text-sm border-gray-300 rounded-md">
                            <option value="relevance" {% if active_sort == 'relevance' %}selected{% endif %}>Relevance</option>
                            <option value="downloads" {% if active_sort == 'downloads' %}selected{% endif %}>Downloads</option>
                            <option value="published_at" {% if active_sort == 'published_at' %}selected{% endif %}>Recent</option>
                        </select>
                    </div>
                    <!-- Publisher -->
                    {% if facets.owners %}
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">Publisher</label>
                        <select onchange="setFilter('owner', this.value)" class="w-full text-sm border-gray-300 rounded-md">
                            <option value="">All</option>
                            {% for owner in facets.owners[:10] %}
                            <option value="{{ owner.name }}" {% if owner.name == active_owner %}selected{% endif %}>{{ owner.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    {% endif %}
                </div>

                <!-- Category chips -->
                {% if facets.categories %}
                <div class="mt-4">
                    <label class="block text-xs font-medium text-gray-700 mb-2">Categories</label>
                    <div class="flex flex-wrap gap-2">
                        {% for cat in facets.categories[:8] %}
                        <button onclick="toggleFilter('categories', '{{ cat.name }}', {{ 'false' if cat.name in active_categories else 'true' }})"
                                class="px-2 py-1 text-xs rounded-full border {{ 'bg-indigo-100 border-indigo-300 text-indigo-700' if cat.name in active_categories else 'bg-white border-gray-300 text-gray-600 hover:border-indigo-300' }}">
                            {{ cat.name }} ({{ cat.count }})
                        </button>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}
            </div>

            <!-- Results -->
            <div class="lg:col-span-3">
                <!-- Results Header -->
                <div class="flex items-center justify-between mb-6">
                    <h1 class="text-2xl font-bold text-gray-900">
                        {{ pagination.total if pagination else results|length }} results for "{{ query }}"
                    </h1>
                </div>

                {% if results %}
                <!-- Search Results -->
                <div class="space-y-4">
                    {% for tool in results %}
                    {{ tool_card(
                        owner=tool.owner,
                        name=tool.name,
                        description=tool.description,
                        category=tool.category,
                        downloads=tool.downloads,
                        version=tool.version,
                        tags=tool.tags
                    ) }}
                    {% endfor %}
                </div>

                <!-- Pagination -->
                {% if pagination and pagination.pages > 1 %}
                <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.search', q=query, page=pagination.prev_num, categories=active_categories|join(',') if active_categories else none, tags=active_tags|join(',') if active_tags else none, owner=active_owner, sort=active_sort) }}"
                           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.search', q=query, page=pagination.next_num, categories=active_categories|join(',') if active_categories else none, tags=active_tags|join(',') if active_tags else none, owner=active_owner, sort=active_sort) }}"
                           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 %}
                <!-- No Results -->
                <div class="text-center py-16 bg-white rounded-lg border border-gray-200">
                    <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                    </svg>
                    <h2 class="mt-4 text-lg font-medium text-gray-900">No results found</h2>
                    <p class="mt-2 text-gray-600">
                        We couldn't find any tools matching "{{ query }}"{% if active_categories or active_tags %} with the current filters{% endif %}.
                    </p>

                    {% if active_categories or active_tags or active_owner %}
                    <div class="mt-6">
                        <a href="{{ url_for('web.search', q=query) }}"
                           class="inline-flex items-center px-4 py-2 text-sm font-medium text-indigo-600 border border-indigo-600 rounded-md hover:bg-indigo-50">
                            Clear Filters
                        </a>
                    </div>
                    {% endif %}

                    <div class="mt-8">
                        <h3 class="text-sm font-medium text-gray-700 mb-4">Suggestions:</h3>
                        <ul class="text-sm text-gray-600 space-y-2">
                            <li>Check your spelling</li>
                            <li>Try more general keywords</li>
                            <li>Remove some filters</li>
                        </ul>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>

        {% else %}
        <!-- Initial Search 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
            </svg>
            <h2 class="mt-4 text-lg font-medium text-gray-900">Search the Registry</h2>
            <p class="mt-2 text-gray-600">
                Find tools by name, description, category, or tags.
            </p>

            <!-- Popular Categories -->
            <div class="mt-8">
                <h3 class="text-sm font-medium text-gray-700 mb-4">Popular Categories:</h3>
                <div class="flex flex-wrap justify-center gap-2">
                    {% for cat in popular_categories %}
                    <a href="{{ url_for('web.category', name=cat.name) }}"
                       class="px-3 py-1.5 text-sm text-gray-600 bg-white border border-gray-200 rounded-full hover:border-indigo-500 hover:text-indigo-600 transition-colors">
                        {{ cat.display_name }}
                    </a>
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>

<script>
function toggleFilter(filterType, value, checked) {
    const url = new URL(window.location.href);
    const params = url.searchParams;

    // Get current values
    let values = (params.get(filterType) || '').split(',').filter(Boolean);

    if (checked) {
        if (!values.includes(value)) {
            values.push(value);
        }
    } else {
        values = values.filter(v => v !== value);
    }

    // Update or remove param
    if (values.length > 0) {
        params.set(filterType, values.join(','));
    } else {
        params.delete(filterType);
    }

    // Reset to page 1 when filters change
    params.delete('page');

    window.location.href = url.toString();
}

function setFilter(filterType, value) {
    const url = new URL(window.location.href);
    const params = url.searchParams;

    if (value) {
        params.set(filterType, value);
    } else {
        params.delete(filterType);
    }

    params.delete('page');
    window.location.href = url.toString();
}

function removeFilter(filterType, value) {
    if (filterType === 'owner') {
        setFilter('owner', '');
    } else {
        toggleFilter(filterType, value, false);
    }
}

function toggleMobileFilters() {
    const panel = document.getElementById('mobile-filters');
    panel.classList.toggle('hidden');
}
</script>
{% endblock %}