{% extends 'base.html' %}
{% load i18n %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Header Section -->
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900">{% trans "Advanced Search" %}</h1>
        <p class="mt-2 text-sm text-gray-600">{% trans "Search through all the Links and Pages" %}</p>
    </div>

    <!-- Search Form Section -->
    <div class="bg-white shadow-sm rounded-lg overflow-hidden mb-8">
        <div class="px-4 py-5 sm:p-6">
            <form action="{% url 'search' %}" method="get" class="space-y-6">
                <!-- Search Input -->
                <div class="max-w-7xl">
                    <label for="search-input" class="block text-sm font-medium text-gray-700 mb-1">
                        {% trans "Search Query" %}
                    </label>
                    <div class="mt-1 flex rounded-md shadow-sm">
                        <div class="relative flex-grow">
                            <input type="text"
                                   name="q"
                                   id="search-input"
                                   value="{{ query }}"
                                   class="block w-full rounded-l-md border-gray-300 focus:border-blue-500 focus:ring-blue-500 sm:text-base py-3"
                                   placeholder="{% trans 'Enter keywords to search...' %}">
                            <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                                <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
                                </svg>
                            </div>
                        </div>
                        <button type="submit"
                                class="relative -ml-px inline-flex items-center space-x-2 rounded-r-md border border-gray-300 bg-blue-600 px-6 py-3 text-base font-medium text-white hover:bg-blue-700 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 transition-colors duration-200">
                            {% trans "Search" %}
                        </button>
                    </div>
                </div>

                <!-- Filter and Sort Options -->
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <!-- Type Filter -->
                    <div>
                        <label for="type-filter" class="block text-sm font-medium text-gray-700 mb-1">
                            {% trans "Filter by Type" %}
                        </label>
                        <select name="type" id="type-filter"
                                class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
                            <option value="">{% trans "All Types" %}</option>
                            <option value="link" {% if selected_type == 'link' %}selected{% endif %}>{% trans "Links" %}</option>
                            <option value="page" {% if selected_type == 'page' %}selected{% endif %}>{% trans "Pages" %}</option>
                            <option value="newsletter" {% if selected_type == 'newsletter' %}selected{% endif %}>{% trans "Newsletters" %}</option>
                        </select>
                    </div>

                    <!-- Sort Order -->
                    <div>
                        <label for="sort-order" class="block text-sm font-medium text-gray-700 mb-1">
                            {% trans "Sort By" %}
                        </label>
                        <select name="sort" id="sort-order"
                                class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
                            <option value="newest" {% if sort_order == 'newest' %}selected{% endif %}>{% trans "Newest First" %}</option>
                            <option value="oldest" {% if sort_order == 'oldest' %}selected{% endif %}>{% trans "Oldest First" %}</option>
                            <option value="type" {% if sort_order == 'type' %}selected{% endif %}>{% trans "By Type" %}</option>
                        </select>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Results Section -->
    {% if query %}
        <div class="bg-white shadow-sm rounded-lg overflow-hidden">
            <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
                <h2 class="text-lg font-medium text-gray-900">
                    {% trans "Search results for" %}: <span class="font-semibold">{{ query }}</span>
                </h2>
            </div>

            {% if results %}
                <ul class="divide-y divide-gray-200">
                    {% for result in results %}
                        <li class="hover:bg-gray-50 transition-colors duration-150">
                            <div class="px-4 py-4 sm:px-6">
                                <div class="flex items-center justify-between">
                                    <div class="flex-1 min-w-0">
                                        <!-- Show different content based on model type -->
                                        {% if result.model_type == 'link' %}
                                            <div class="flex items-center space-x-2">
                                                <h3 class="text-lg font-medium text-blue-600 truncate">
                                                    <a href="/{{ result.alias }}" target="_blank" class="hover:text-blue-800">
                                                        {{ result.alias }}
                                                    </a>
                                                </h3>
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                                    {% trans "Link" %}
                                                </span>
                                            </div>
                                            <p class="mt-1 text-sm text-gray-600 truncate">{{ result.original_url }}</p>
                                        {% elif result.model_type == 'newsletter' %}
                                            <div class="flex items-center space-x-2">
                                                <h3 class="text-lg font-medium text-blue-600 truncate">
                                                    <a href="{% url 'newsletter-detail' result.id %}" class="hover:text-blue-800">
                                                        {{ result.title }}
                                                    </a>
                                                </h3>
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
                                                    {% trans "Newsletter" %}
                                                </span>
                                            </div>
                                            <div class="mt-2 sm:flex sm:justify-between">
                                                <div class="flex items-center text-sm text-gray-500">
                                                    <svg class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                                    </svg>
                                                    {{ result.created_at|date:"Y-m-d" }}
                                                </div>
                                            </div>
                                        {% else %}
                                            <div class="flex items-center space-x-2">
                                                <h3 class="text-lg font-medium text-blue-600 truncate">
                                                    <a href="{% url 'page-detail' result.id %}" class="hover:text-blue-800">
                                                        {{ result.title|default:"Untitled" }}
                                                    </a>
                                                </h3>
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
                                                    {% trans "Page" %}
                                                </span>
                                            </div>
                                            <a href="{{ result.url }}" target="_blank" rel="noopener noreferrer"
                                               class="mt-1 text-sm text-gray-600 truncate block hover:text-gray-900">
                                                {{ result.url }}
                                            </a>
                                            {% if result.summary %}
                                                <p class="mt-2 text-sm text-gray-600 line-clamp-2">{{ result.summary }}</p>
                                            {% endif %}
                                        {% endif %}
                                    </div>
                                    <div class="ml-4 flex-shrink-0 flex space-x-2">
                                        {% if result.model_type == 'link' %}
                                            <a href="{% url 'link_detail' result.id %}"
                                               class="p-1 text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded"
                                               title="{% trans 'View Details' %}">
                                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                          d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                          d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                                </svg>
                                            </a>
                                            <a href="{% url 'link_update' result.id %}"
                                               class="p-1 text-green-600 hover:text-green-800 hover:bg-green-50 rounded"
                                               title="{% trans 'Edit' %}">
                                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                          d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                                                </svg>
                                            </a>
                                        {% else %}
                                            <a href="{% url 'page-detail' result.id %}"
                                               class="p-1 text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded"
                                               title="{% trans 'View Details' %}">
                                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                          d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                          d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                                </svg>
                                            </a>
                                            <a href="{% url 'page-update' result.id %}"
                                               class="p-1 text-green-600 hover:text-green-800 hover:bg-green-50 rounded"
                                               title="{% trans 'Edit' %}">
                                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                          d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                                                </svg>
                                            </a>
                                        {% endif %}
                                    </div>
                                </div>
                                {% if result.model_type == 'link' %}
                                    <div class="mt-2 sm:flex sm:justify-between">
                                        <div class="flex items-center text-sm text-gray-500">
                                            <svg class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                            </svg>
                                            {{ result.click_count }} {% trans "clicks" %}
                                        </div>
                                    </div>
                                {% endif %}
                            </div>
                        </li>
                    {% endfor %}
                </ul>

                {% if is_paginated %}
                    <nav class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6" aria-label="Pagination">
                        <div class="hidden sm:block">
                            <p class="text-sm text-gray-700">
                                {% trans "Showing" %}
                                <span class="font-medium">{{ page_obj.start_index }}</span>
                                {% trans "to" %}
                                <span class="font-medium">{{ page_obj.end_index }}</span>
                                {% trans "of" %}
                                <span class="font-medium">{{ paginator.count }}</span>
                                {% trans "results" %}
                            </p>
                        </div>
                        <div class="flex-1 flex justify-between sm:justify-end space-x-3">
                            {% if page_obj.has_previous %}
                                <a href="?q={{ query }}&page={{ page_obj.previous_page_number }}"
                                   class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                                    {% trans "Previous" %}
                                </a>
                            {% endif %}
                            {% if page_obj.has_next %}
                                <a href="?q={{ query }}&page={{ page_obj.next_page_number }}"
                                   class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                                    {% trans "Next" %}
                                </a>
                            {% endif %}
                        </div>
                    </nav>
                {% endif %}
            {% else %}
                <div class="px-4 py-5 sm:p-6 text-center">
                    <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <h3 class="mt-2 text-sm font-medium text-gray-900">{% trans "No results found" %}</h3>
                    <p class="mt-1 text-sm text-gray-500">{% trans "Try adjusting your search terms." %}</p>
                </div>
            {% endif %}
        </div>
    {% else %}
        <div class="bg-white shadow-sm rounded-lg overflow-hidden">
            <div class="px-4 py-12 sm:p-12 text-center">
                <svg class="mx-auto h-16 w-16 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>
                <h3 class="mt-4 text-lg font-medium text-gray-900">{% trans "Start searching" %}</h3>
                <p class="mt-2 text-base text-gray-500 max-w-md mx-auto">{% trans "Enter a search query to find links. You can search by alias, URL, or any related keywords." %}</p>
            </div>
        </div>
    {% endif %}
</div>
{% endblock %}