{% extends "base.html" %}
{% load static %}

{% block head_extra %}
<style>
    .search-container { margin-bottom: 2rem; }
    .search-results { margin-top: 2rem; }
    .result-item {
        padding: 1rem;
        border-bottom: 1px solid #dee2e6;
    }
    .result-item:last-child { border-bottom: none; }
    .result-title { font-weight: 600; margin-bottom: 0.25rem; }
    .result-meta { font-size: 0.875rem; color: #6c757d; }
    .result-turns { margin-top: 0.75rem; }
    .turn {
        padding: 0.5rem;
        border-left: 3px solid #dee2e6;
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
    }
    .turn mark { background: #ffe58f; }
    .turn-label { font-weight: 600; color: #6c757d; margin-bottom: 0.25rem; }
    .no-results { padding: 2rem; text-align: center; color: #6c757d; }
</style>
{% endblock %}

{% block content %}
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
    <div
        class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">Search Agent Sessions</h1>
        <div class="btn-toolbar mb-2 mb-md-0">
            {% if user.is_authenticated %}
            <div class="btn-group me-2">
              <a href="{% url 'agents:agent_session_list' %}" class="btn btn-sm btn-outline-secondary">Agent sessions</a>
            </div>
            <div class="btn-group me-2">
              <a href="{% url 'scrobbles:search' %}" class="btn btn-sm btn-outline-secondary">Search scrobbles</a>
            </div>
            {% endif %}
        </div>
    </div>

<div class="container" style="margin-bottom: 100px;">
    <form method="get" action="{% url 'agents:agent_session_search' %}" class="search-container">
        <div class="row">
            <div class="col-md-8">
                <input type="text"
                       name="q"
                       class="form-control form-control-lg"
                       placeholder="Search prompts and responses..."
                       value="{{ query }}">
            </div>
            <div class="col-md-4">
                <button type="submit" class="btn btn-primary btn-lg">Search</button>
            </div>
        </div>
    </form>

    {% if query %}
    <div class="search-results">
        {% if results %}
        <p class="text-muted">{{ results|length }} result{{ results|length|pluralize }}</p>
        {% for result in results %}
        <div class="result-item">
            <div class="result-title">
                <a href="{% url 'scrobbles:detail' result.scrobble.id %}">
                    {{ result.scrobble.logdata.title|default:result.scrobble }}
                </a>
            </div>
            <div class="result-meta">
                {% if result.scrobble.agent_session %}
                {{ result.scrobble.agent_session.provider }} / {{ result.scrobble.agent_session.model }}
                &middot;
                {% endif %}
                {{ result.scrobble.timestamp|date:"M d, Y" }}
                {% if result.scrobble.source %} via {{ result.scrobble.source }}{% endif %}
            </div>
            {% if result.turns %}
            <div class="result-turns">
                {% for turn in result.turns %}
                <div class="turn">
                    <div class="turn-label">Turn {{ turn.number }}</div>
                    {% if turn.prompt %}<div><strong>Prompt:</strong> {{ turn.prompt }}</div>{% endif %}
                    {% if turn.response %}<div><strong>Response:</strong> {{ turn.response }}</div>{% endif %}
                </div>
                {% endfor %}
            </div>
            {% endif %}
        </div>
        {% endfor %}
        {% else %}
        <div class="no-results">
            No agent sessions found matching your search.
        </div>
        {% endif %}
    </div>
    {% else %}
    <div class="no-results">
        <p>Enter a search term to search through agent prompts and responses.</p>
    </div>
    {% endif %}
</div>
</main>
{% endblock %}