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

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

{% block meta_description %}Search results for "{{ query }}" in the SmartTools 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-4xl 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..."
                           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-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {% if query %}
        <!-- Results Count -->
        <div class="mb-6">
            <h1 class="text-2xl font-bold text-gray-900">
                {% if results|length == 1 %}
                1 result for "{{ query }}"
                {% else %}
                {{ results|length }} results for "{{ query }}"
                {% endif %}
            </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
            ) }}
            {% 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) }}"
                   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) }}"
                   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">
            <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 }}".
            </p>

            <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>Use fewer keywords</li>
                </ul>
            </div>

            <div class="mt-8">
                <a href="{{ url_for('web.tools') }}"
                   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">
                    Browse All Tools
                </a>
            </div>
        </div>
        {% endif %}

        {% 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>
{% endblock %}