{% extends "base.html" %}

{% block title %}Session {{ session_id[:8] }} - AI Conversation Viewer{% endblock %}

{% block breadcrumb %}
<nav class="mb-6" aria-label="breadcrumb">
    <ol class="flex items-center space-x-2 text-sm flex-wrap">
        <li>
            <a href="/?view={{ current_view or 'qwen' }}"
               class="flex items-center text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 transition">
                <i class="bi bi-house mr-1"></i>
                Projects
            </a>
        </li>
        <li class="text-gray-400 dark:text-gray-600">
            <i class="bi bi-chevron-right"></i>
        </li>
        <li>
            <a href="/project/{{ project_name }}?view={{ current_view or 'qwen' }}"
               class="text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 transition truncate max-w-xs"
               title="{{ display_name }}">
                {{ display_name }}
            </a>
        </li>
        <li class="text-gray-400 dark:text-gray-600">
            <i class="bi bi-chevron-right"></i>
        </li>
        <li class="text-gray-700 dark:text-gray-300 font-medium font-mono">
            {{ session_id[:8] }}...
        </li>
    </ol>
</nav>
{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Search and Filters -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
        <form id="search-form" method="get" class="space-y-4">
            <input type="hidden" name="view" value="{{ current_view or 'qwen' }}" />

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <!-- Search Input -->
                <div class="lg:col-span-2">
                    <label for="search" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        <i class="bi bi-search mr-1"></i>
                        Search Messages
                    </label>
                    <input type="text"
                           id="search"
                           name="search"
                           value="{{ search or '' }}"
                           class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition"
                           placeholder="Search in conversation content...">
                </div>

                <!-- Message Type Filter -->
                <div>
                    <label for="message_type" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        <i class="bi bi-funnel mr-1"></i>
                        Message Type
                    </label>
                    <select id="message_type"
                            name="message_type"
                            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500 focus:border-transparent transition auto-filter">
                        <option value="">All Messages</option>
                        <option value="user" {{ 'selected' if message_type == 'user' else '' }}>User Messages</option>
                        <option value="assistant" {{ 'selected' if message_type == 'assistant' else '' }}>Assistant Messages</option>
                        <option value="summary" {{ 'selected' if message_type == 'summary' else '' }}>Summaries</option>
                    </select>
                </div>

                <!-- Per Page Filter -->
                <div>
                    <label for="per_page" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        <i class="bi bi-card-list mr-1"></i>
                        Per Page
                    </label>
                    <select id="per_page"
                            name="per_page"
                            class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500 focus:border-transparent transition auto-filter">
                        <option value="25">25</option>
                        <option value="50" {{ 'selected' if conversation.per_page == 50 else '' }}>50</option>
                        <option value="100" {{ 'selected' if conversation.per_page == 100 else '' }}>100</option>
                    </select>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="flex flex-wrap gap-2">
                <button type="submit"
                        class="inline-flex items-center px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white font-medium rounded-lg transition-colors">
                    <i class="bi bi-search mr-2"></i>
                    Search
                </button>
                <button type="button"
                        id="clear-filters"
                        class="inline-flex items-center px-4 py-2 bg-gray-500 hover:bg-gray-600 text-white font-medium rounded-lg transition-colors">
                    <i class="bi bi-x-circle mr-2"></i>
                    Clear Filters
                </button>
            </div>
        </form>
    </div>

    <!-- Results Info -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 bg-gradient-to-r from-primary-50 to-transparent dark:from-gray-800 dark:to-transparent border-l-4 border-primary-500 px-4 py-3 rounded">
        <div>
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
                <i class="bi bi-chat-text mr-2 text-primary-600 dark:text-primary-400"></i>
                Conversation Messages
            </h2>
            {% if search %}
                <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                    <i class="bi bi-search mr-1"></i>
                    Results for: <span class="font-semibold">"{{ search }}"</span>
                </p>
            {% endif %}
        </div>
        <div class="text-sm text-gray-600 dark:text-gray-400 bg-white dark:bg-gray-800 px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700">
            Showing <span class="font-semibold text-gray-900 dark:text-white">{{ conversation.messages|length }}</span> of
            <span class="font-semibold text-gray-900 dark:text-white">{{ conversation.total }}</span> messages
        </div>
    </div>

    <!-- Messages -->
    {% if conversation.messages %}
        <div class="space-y-4">
            {% for message in conversation.messages %}
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden hover:shadow-md transition-shadow">
                    <!-- Message Header -->
                    <div class="px-6 py-3 border-b border-gray-200 dark:border-gray-700
                        {% if message.role == 'user' or message.display_type == 'User' %}
                            bg-blue-50 dark:bg-blue-900/20
                        {% elif message.role == 'assistant' or message.display_type == 'Assistant' %}
                            bg-green-50 dark:bg-green-900/20
                        {% elif message.type == 'summary' %}
                            bg-amber-50 dark:bg-amber-900/20
                        {% else %}
                            bg-gray-50 dark:bg-gray-900
                        {% endif %}">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center space-x-3">
                                <!-- Role Icon & Name -->
                                <div class="flex items-center space-x-2 font-semibold
                                    {% if message.role == 'user' or message.display_type == 'User' %}
                                        text-blue-700 dark:text-blue-400
                                    {% elif message.role == 'assistant' or message.display_type == 'Assistant' %}
                                        text-green-700 dark:text-green-400
                                    {% elif message.type == 'summary' %}
                                        text-amber-700 dark:text-amber-400
                                    {% else %}
                                        text-gray-700 dark:text-gray-400
                                    {% endif %}">
                                    {% if message.role == 'user' or message.display_type == 'User' %}
                                        <i class="bi bi-person-circle text-xl"></i>
                                        <span>User</span>
                                    {% elif message.role == 'assistant' or message.display_type == 'Assistant' %}
                                        <i class="bi bi-robot text-xl"></i>
                                        <span>{% if current_view == 'claude' %}Claude{% else %}Qwen{% endif %}</span>
                                    {% elif message.type == 'summary' %}
                                        <i class="bi bi-journal-text text-xl"></i>
                                        <span>Summary</span>
                                    {% else %}
                                        <i class="bi bi-gear text-xl"></i>
                                        <span>{{ message.display_type }}</span>
                                    {% endif %}
                                </div>

                                <!-- Code Badge -->
                                {% if message.has_code %}
                                    <span class="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-purple-100 dark:bg-purple-900 text-purple-700 dark:text-purple-300">
                                        <i class="bi bi-code-slash mr-1"></i>
                                        Code
                                    </span>
                                {% endif %}
                            </div>

                            <!-- Message Meta -->
                            <div class="text-xs text-gray-500 dark:text-gray-500">
                                Line {{ message.line_number }}
                                {% if message.timestamp %}
                                    <span class="mx-1">•</span>
                                    {{ message.timestamp }}
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <!-- Message Content -->
                    <div class="px-6 py-4 prose prose-sm dark:prose-invert max-w-none">
                        {% if message.rendered_content %}
                            {{ message.rendered_content | safe }}
                        {% else %}
                            <pre class="text-sm bg-gray-50 dark:bg-gray-900 p-4 rounded-lg overflow-x-auto">{{ message.content }}</pre>
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <!-- Empty State -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-12 text-center">
            <div class="max-w-md mx-auto space-y-4">
                <div class="flex justify-center">
                    <div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-full">
                        <i class="bi bi-chat-square-x text-6xl text-gray-400 dark:text-gray-600"></i>
                    </div>
                </div>
                <h3 class="text-2xl font-bold text-gray-900 dark:text-white">No Messages Found</h3>
                <p class="text-gray-600 dark:text-gray-400">
                    {% if search or message_type %}
                        Try adjusting your search filters or clear them to see all messages.
                    {% else %}
                        This conversation appears to be empty or couldn't be loaded.
                    {% endif %}
                </p>
                {% if search or message_type %}
                    <button type="button"
                            id="clear-filters"
                            class="inline-flex items-center px-6 py-3 bg-primary-600 hover:bg-primary-700 text-white font-medium rounded-lg transition-colors mt-4">
                        <i class="bi bi-x-circle mr-2"></i>
                        Clear Filters
                    </button>
                {% endif %}
            </div>
        </div>
    {% endif %}

    <!-- Pagination -->
    {% if conversation.total_pages > 1 %}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 px-6 py-4">
            <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
                <!-- Page Info -->
                <div class="text-sm text-gray-600 dark:text-gray-400">
                    Page <span class="font-semibold text-gray-900 dark:text-white">{{ conversation.page }}</span> of
                    <span class="font-semibold text-gray-900 dark:text-white">{{ conversation.total_pages }}</span>
                    <span class="hidden sm:inline">({{ conversation.total }} total messages)</span>
                </div>

                <!-- Pagination Controls -->
                <nav aria-label="Conversation pagination">
                    <ul class="flex items-center space-x-1">
                        <!-- Previous Button -->
                        {% if conversation.page > 1 %}
                            <li>
                                <a href="?view={{ current_view or 'qwen' }}&page={{ conversation.page - 1 }}{% if search %}&search={{ search }}{% endif %}{% if message_type %}&message_type={{ message_type }}{% endif %}{% if conversation.per_page != 50 %}&per_page={{ conversation.per_page }}{% endif %}"
                                   class="inline-flex items-center justify-center w-10 h-10 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition">
                                    <i class="bi bi-chevron-left"></i>
                                </a>
                            </li>
                        {% else %}
                            <li>
                                <span class="inline-flex items-center justify-center w-10 h-10 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 text-gray-400 dark:text-gray-600 cursor-not-allowed">
                                    <i class="bi bi-chevron-left"></i>
                                </span>
                            </li>
                        {% endif %}

                        <!-- Page Numbers -->
                        {% set start_page = [1, conversation.page - 2]|max %}
                        {% set end_page = [conversation.total_pages, conversation.page + 2]|min %}

                        {% if start_page > 1 %}
                            <li>
                                <a href="?view={{ current_view or 'qwen' }}&page=1{% if search %}&search={{ search }}{% endif %}{% if message_type %}&message_type={{ message_type }}{% endif %}{% if conversation.per_page != 50 %}&per_page={{ conversation.per_page }}{% endif %}"
                                   class="inline-flex items-center justify-center w-10 h-10 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition">1</a>
                            </li>
                            {% if start_page > 2 %}
                                <li>
                                    <span class="inline-flex items-center justify-center w-10 h-10 text-gray-400 dark:text-gray-600">...</span>
                                </li>
                            {% endif %}
                        {% endif %}

                        {% for page_num in range(start_page, end_page + 1) %}
                            <li>
                                {% if page_num == conversation.page %}
                                    <span class="inline-flex items-center justify-center w-10 h-10 rounded-lg border-2 border-primary-600 dark:border-primary-500 bg-primary-600 dark:bg-primary-500 text-white font-semibold">{{ page_num }}</span>
                                {% else %}
                                    <a href="?view={{ current_view or 'qwen' }}&page={{ page_num }}{% if search %}&search={{ search }}{% endif %}{% if message_type %}&message_type={{ message_type }}{% endif %}{% if conversation.per_page != 50 %}&per_page={{ conversation.per_page }}{% endif %}"
                                       class="inline-flex items-center justify-center w-10 h-10 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition">{{ page_num }}</a>
                                {% endif %}
                            </li>
                        {% endfor %}

                        {% if end_page < conversation.total_pages %}
                            {% if end_page < conversation.total_pages - 1 %}
                                <li>
                                    <span class="inline-flex items-center justify-center w-10 h-10 text-gray-400 dark:text-gray-600">...</span>
                                </li>
                            {% endif %}
                            <li>
                                <a href="?view={{ current_view or 'qwen' }}&page={{ conversation.total_pages }}{% if search %}&search={{ search }}{% endif %}{% if message_type %}&message_type={{ message_type }}{% endif %}{% if conversation.per_page != 50 %}&per_page={{ conversation.per_page }}{% endif %}"
                                   class="inline-flex items-center justify-center w-10 h-10 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition">{{ conversation.total_pages }}</a>
                            </li>
                        {% endif %}

                        <!-- Next Button -->
                        {% if conversation.page < conversation.total_pages %}
                            <li>
                                <a href="?view={{ current_view or 'qwen' }}&page={{ conversation.page + 1 }}{% if search %}&search={{ search }}{% endif %}{% if message_type %}&message_type={{ message_type }}{% endif %}{% if conversation.per_page != 50 %}&per_page={{ conversation.per_page }}{% endif %}"
                                   class="inline-flex items-center justify-center w-10 h-10 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition">
                                    <i class="bi bi-chevron-right"></i>
                                </a>
                            </li>
                        {% else %}
                            <li>
                                <span class="inline-flex items-center justify-center w-10 h-10 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 text-gray-400 dark:text-gray-600 cursor-not-allowed">
                                    <i class="bi bi-chevron-right"></i>
                                </span>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
            </div>
        </div>
    {% endif %}
</div>
{% endblock %}