{% extends "themis/base.html" %}
{% load humanize %}

{% block title %}Search — Mnemosyne{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-6 max-w-6xl">
    <h1 class="text-3xl font-bold mb-6">Search Knowledge</h1>

    <!-- Search Form -->
    <form method="post" action="{% url 'library:search' %}" class="mb-8">
        {% csrf_token %}
        <div class="flex flex-col gap-4">
            <div class="join w-full">
                <input type="text" name="query" value="{{ query }}"
                       placeholder="Search your knowledge base..."
                       class="input input-bordered join-item w-full text-lg"
                       autofocus>
                <button type="submit" class="btn btn-primary join-item text-lg">
                    Search
                </button>
            </div>

            <!-- Filters -->
            <div class="flex flex-wrap gap-4 items-end">
                <div class="form-control">
                    <label class="label"><span class="label-text">Library</span></label>
                    <select name="library_uid" class="select select-bordered select-sm">
                        <option value="">All libraries</option>
                        {% for lib in libraries %}
                        <option value="{{ lib.uid }}">{{ lib.name }} ({{ lib.library_type }})</option>
                        {% endfor %}
                    </select>
                </div>

                <div class="form-control">
                    <label class="label"><span class="label-text">Type</span></label>
                    <select name="library_type" class="select select-bordered select-sm">
                        <option value="">All types</option>
                        <option value="fiction">Fiction</option>
                        <option value="nonfiction">Non-Fiction</option>
                        <option value="technical">Technical</option>
                        <option value="music">Music</option>
                        <option value="film">Film</option>
                        <option value="art">Art</option>
                        <option value="journal">Journal</option>
                    </select>
                </div>

                <div class="form-control">
                    <label class="label cursor-pointer gap-2">
                        <span class="label-text">Re-rank</span>
                        <input type="checkbox" name="rerank" checked class="checkbox checkbox-sm checkbox-primary">
                    </label>
                </div>
            </div>
        </div>
    </form>

    {% if error %}
    <div class="alert alert-error mb-6">
        <span>{{ error }}</span>
    </div>
    {% endif %}

    {% if results %}
    <!-- Search Metadata -->
    <div class="stats shadow mb-6 w-full">
        <div class="stat">
            <div class="stat-title">Results</div>
            <div class="stat-value text-lg">{{ results.candidates|length }}</div>
        </div>
        <div class="stat">
            <div class="stat-title">Total Candidates</div>
            <div class="stat-value text-lg">{{ results.total_candidates }}</div>
        </div>
        <div class="stat">
            <div class="stat-title">Search Time</div>
            <div class="stat-value text-lg">{{ results.search_time_ms|floatformat:0 }}ms</div>
        </div>
        <div class="stat">
            <div class="stat-title">Re-ranked</div>
            <div class="stat-value text-lg">
                {% if results.reranker_used %}
                    <span class="badge badge-success">Yes</span>
                {% else %}
                    <span class="badge badge-ghost">No</span>
                {% endif %}
            </div>
        </div>
        <div class="stat">
            <div class="stat-title">Search Types</div>
            <div class="stat-value text-lg">
                {% for st in results.search_types_used %}
                    <span class="badge badge-outline badge-sm">{{ st }}</span>
                {% endfor %}
            </div>
        </div>
    </div>

    <!-- Text Results -->
    {% if results.candidates %}
    <h2 class="text-xl font-semibold mb-4">Text Results</h2>
    <div class="flex flex-col gap-4 mb-8">
        {% for candidate in results.candidates %}
        <div class="card bg-base-200 shadow-sm">
            <div class="card-body py-4">
                <div class="flex justify-between items-start">
                    <div class="flex-1">
                        <h3 class="card-title text-base">
                            <a href="{% url 'library:item-detail' uid=candidate.item_uid %}"
                               class="link link-primary">
                                {{ candidate.item_title }}
                            </a>
                            <span class="badge badge-sm badge-outline ml-2">chunk #{{ candidate.chunk_index }}</span>
                        </h3>
                        <p class="text-sm opacity-80 mt-1 line-clamp-3">{{ candidate.text_preview }}</p>
                    </div>
                    <div class="flex flex-col items-end gap-1 ml-4 min-w-fit">
                        <span class="badge badge-primary badge-sm">{{ candidate.score|floatformat:4 }}</span>
                        {% for src in candidate.source|cut:" " %}
                        <span class="badge badge-ghost badge-xs">{{ src }}</span>
                        {% endfor %}
                        {% if candidate.library_type %}
                        <span class="badge badge-outline badge-xs">{{ candidate.library_type }}</span>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% endif %}

    <!-- Image Results -->
    {% if results.images %}
    <h2 class="text-xl font-semibold mb-4">Image Results</h2>
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mb-8">
        {% for image in results.images %}
        <div class="card bg-base-200 shadow-sm">
            <div class="card-body p-3">
                <div class="badge badge-sm badge-outline mb-1">{{ image.image_type }}</div>
                <p class="text-xs opacity-80 line-clamp-2">{{ image.description }}</p>
                <div class="flex justify-between items-center mt-1">
                    <a href="{% url 'library:item-detail' uid=image.item_uid %}"
                       class="text-xs link link-primary">{{ image.item_title|truncatechars:30 }}</a>
                    <span class="badge badge-primary badge-xs">{{ image.score|floatformat:3 }}</span>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% endif %}

    {% elif query %}
    <div class="alert alert-info">
        <span>No results found for "{{ query }}".</span>
    </div>
    {% endif %}
</div>
{% endblock %}