{% extends "base.html" %}

{% block title %}Search: {{ query }} - Guts{% endblock %}

{% block content %}
<div class="flex flex-col lg:flex-row gap-8">
    <!-- Sidebar with filters -->
    <aside class="lg:w-64 flex-shrink-0">
        <div class="bg-gray-800 rounded-lg p-4 border border-gray-700">
            <h3 class="text-lg font-semibold mb-4">Filter by</h3>

            <nav class="space-y-1">
                <a href="/search?q={{ query }}&type=all"
                   class="flex items-center justify-between px-3 py-2 rounded-md text-sm {% if result_type == "all" %}bg-gray-700 text-white{% else %}text-gray-300 hover:bg-gray-700{% endif %}">
                    <span>All</span>
                    <span class="text-gray-400">{{ total_count }}</span>
                </a>
                <a href="/search?q={{ query }}&type=repositories"
                   class="flex items-center justify-between px-3 py-2 rounded-md text-sm {% if result_type == "repositories" %}bg-gray-700 text-white{% else %}text-gray-300 hover:bg-gray-700{% endif %}">
                    <span class="flex items-center">
                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
                        </svg>
                        Repositories
                    </span>
                    <span class="text-gray-400">{{ repo_count }}</span>
                </a>
                <a href="/search?q={{ query }}&type=code"
                   class="flex items-center justify-between px-3 py-2 rounded-md text-sm {% if result_type == "code" %}bg-gray-700 text-white{% else %}text-gray-300 hover:bg-gray-700{% endif %}">
                    <span class="flex items-center">
                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
                        </svg>
                        Code
                    </span>
                    <span class="text-gray-400">{{ code_count }}</span>
                </a>
                <a href="/search?q={{ query }}&type=issues"
                   class="flex items-center justify-between px-3 py-2 rounded-md text-sm {% if result_type == "issues" %}bg-gray-700 text-white{% else %}text-gray-300 hover:bg-gray-700{% endif %}">
                    <span class="flex items-center">
                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        Issues
                    </span>
                    <span class="text-gray-400">{{ issue_count }}</span>
                </a>
                <a href="/search?q={{ query }}&type=pullrequests"
                   class="flex items-center justify-between px-3 py-2 rounded-md text-sm {% if result_type == "pullrequests" %}bg-gray-700 text-white{% else %}text-gray-300 hover:bg-gray-700{% endif %}">
                    <span class="flex items-center">
                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"/>
                        </svg>
                        Pull Requests
                    </span>
                    <span class="text-gray-400">{{ pr_count }}</span>
                </a>
            </nav>
        </div>
    </aside>

    <!-- Main content -->
    <div class="flex-1">
        <!-- Search header -->
        <div class="mb-6">
            <h1 class="text-2xl font-bold mb-2">
                {% if total_count > 0 %}
                    {{ total_count }} results for "{{ query }}"
                {% else %}
                    No results for "{{ query }}"
                {% endif %}
            </h1>
            {% if !query.is_empty() %}
            <p class="text-gray-400">Showing {{ result_type }} results</p>
            {% endif %}
        </div>

        {% if query.is_empty() %}
        <!-- Empty search state -->
        <div class="bg-gray-800 rounded-lg p-8 text-center border border-gray-700">
            <svg class="w-16 h-16 mx-auto text-gray-600 mb-4" 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>
            <h2 class="text-xl font-semibold mb-2">Search Guts</h2>
            <p class="text-gray-400 mb-4">Find repositories, code, issues, and pull requests</p>
            <form action="/search" method="get" class="max-w-md mx-auto">
                <input type="text" name="q" placeholder="Search..."
                       class="w-full bg-gray-700 text-gray-100 rounded-md px-4 py-3 text-lg focus:outline-none focus:ring-2 focus:ring-green-500">
            </form>
        </div>
        {% else %}

        {% if total_count == 0 %}
        <!-- No results state -->
        <div class="bg-gray-800 rounded-lg p-8 text-center border border-gray-700">
            <svg class="w-16 h-16 mx-auto text-gray-600 mb-4" 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>
            <h2 class="text-xl font-semibold mb-2">No results found</h2>
            <p class="text-gray-400">Try different keywords or check the spelling</p>
        </div>
        {% else %}

        <!-- Results -->
        <div class="space-y-4">
            <!-- Repository results -->
            {% if result_type == "all" || result_type == "repositories" %}
            {% for repo in repo_results %}
            <div class="bg-gray-800 rounded-lg p-4 border border-gray-700 hover:border-gray-600 transition-colors">
                <div class="flex items-start justify-between">
                    <div class="flex-1">
                        <a href="/{{ repo.owner }}/{{ repo.name }}" class="text-blue-400 hover:underline text-lg font-semibold">
                            {{ repo.owner }}/{{ repo.name }}
                        </a>
                        <span class="ml-2 px-2 py-0.5 text-xs rounded-full bg-gray-700 text-gray-300">Repository</span>
                        {% if !repo.description.is_empty() %}
                        <p class="text-gray-300 mt-1">{{ repo.description }}</p>
                        {% endif %}
                    </div>
                </div>
            </div>
            {% endfor %}
            {% endif %}

            <!-- Code results -->
            {% if result_type == "all" || result_type == "code" %}
            {% for code in code_results %}
            <div class="bg-gray-800 rounded-lg border border-gray-700 hover:border-gray-600 transition-colors overflow-hidden">
                <div class="px-4 py-2 bg-gray-750 border-b border-gray-700 flex items-center justify-between">
                    <a href="/{{ code.repo_owner }}/{{ code.repo_name }}/blob/main/{{ code.file_path }}" class="text-blue-400 hover:underline">
                        {{ code.repo_owner }}/{{ code.repo_name }} / {{ code.file_path }}
                    </a>
                    <span class="px-2 py-0.5 text-xs rounded-full bg-gray-700 text-gray-300">{{ code.language }}</span>
                </div>
                <div class="p-0 overflow-x-auto">
                    <pre class="text-sm"><code class="language-{{ code.language }}">{% for line in code.context_before %}
<span class="text-gray-500">{{ line }}</span>
{% endfor %}<span class="bg-yellow-900/30 block">{{ code.line_content }}</span>{% for line in code.context_after %}
<span class="text-gray-500">{{ line }}</span>
{% endfor %}</code></pre>
                </div>
                <div class="px-4 py-2 text-sm text-gray-400 border-t border-gray-700">
                    Line {{ code.line_number }}
                </div>
            </div>
            {% endfor %}
            {% endif %}

            <!-- Issue and PR results -->
            {% if result_type == "all" || result_type == "issues" || result_type == "pullrequests" %}
            {% for issue in issue_results %}
            <div class="bg-gray-800 rounded-lg p-4 border border-gray-700 hover:border-gray-600 transition-colors">
                <div class="flex items-start">
                    {% if issue.is_pull_request %}
                    <svg class="w-5 h-5 mr-3 mt-1 {% if issue.state == "Open" %}text-green-500{% else %}text-purple-500{% endif %}" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M18 21a2 2 0 100-4 2 2 0 000 4zM6 7a2 2 0 100-4 2 2 0 000 4zm0 14a2 2 0 100-4 2 2 0 000 4zM6 12a2 2 0 100-4 2 2 0 000 4zm12-5a2 2 0 100-4 2 2 0 000 4z"/>
                        <path d="M6 8v11M18 16V8"/>
                    </svg>
                    {% else %}
                    <svg class="w-5 h-5 mr-3 mt-1 {% if issue.state == "Open" %}text-green-500{% else %}text-red-500{% endif %}" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
                    </svg>
                    {% endif %}
                    <div class="flex-1">
                        <div class="flex items-center flex-wrap gap-2">
                            <a href="/{{ issue.repo_owner }}/{{ issue.repo_name }}/{% if issue.is_pull_request %}pull{% else %}issues{% endif %}/{{ issue.number }}"
                               class="text-blue-400 hover:underline font-semibold">
                                {{ issue.title }}
                            </a>
                            <span class="px-2 py-0.5 text-xs rounded-full {% if issue.state == "Open" %}bg-green-900 text-green-300{% else %}bg-gray-700 text-gray-300{% endif %}">
                                {{ issue.state }}
                            </span>
                            {% for label in issue.labels %}
                            <span class="px-2 py-0.5 text-xs rounded-full bg-blue-900 text-blue-300">{{ label }}</span>
                            {% endfor %}
                        </div>
                        <p class="text-gray-400 text-sm mt-1">
                            {{ issue.repo_owner }}/{{ issue.repo_name }} #{{ issue.number }}
                            opened by {{ issue.author }}
                        </p>
                    </div>
                </div>
            </div>
            {% endfor %}
            {% endif %}
        </div>
        {% endif %}
        {% endif %}
    </div>
</div>
{% endblock %}