{% 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">
    <!-- Session Header with Favorite Button -->
    <div class="flex items-center justify-between bg-gradient-to-r from-primary-50 to-transparent dark:from-gray-800 dark:to-transparent border-l-4 border-primary-500 px-6 py-4 rounded-lg">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white flex items-center">
                <i class="bi bi-chat-dots-fill text-primary-600 dark:text-primary-400 mr-3"></i>
                Session: {{ session_id[:12] }}...
            </h1>
            <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                {{ display_name }}
            </p>
        </div>
        <button id="session-favorite-toggle"
                class="p-3 rounded-lg text-gray-400 hover:text-amber-500 dark:text-gray-500 dark:hover:text-amber-400 hover:bg-amber-50 dark:hover:bg-amber-900/20 transition-all duration-200"
                data-view="{{ current_view or 'qwen' }}"
                data-project="{{ project_name }}"
                data-session="{{ session_id }}"
                title="{{ t('favorite_session_tooltip') }}">
            <i class="bi bi-star text-2xl"></i>
        </button>
    </div>

    <!-- 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>
                        {{ t('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="{{ t('search_content_placeholder') }}">
                </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>
                        {{ t('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="">{{ t('all_messages') }}</option>
                        <option value="user" {{ 'selected' if message_type == 'user' else '' }}>{{ t('user_messages') }}</option>
                        <option value="assistant" {{ 'selected' if message_type == 'assistant' else '' }}>{{ t('assistant_messages') }}</option>
                        <option value="summary" {{ 'selected' if message_type == 'summary' else '' }}>{{ t('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>
                        {{ t('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>
                    {{ t('search_button') }}
                </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>
                    {{ t('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>
                {{ t('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">
            {{ t('showing') }} <span class="font-semibold text-gray-900 dark:text-white">{{ conversation.messages|length }}</span> {{ t('of') }}
            <span class="font-semibold text-gray-900 dark:text-white">{{ conversation.total }}</span> {{ t('messages') }}
        </div>
    </div>

    <!-- Messages -->
    {% if conversation.messages %}
        <div class="space-y-4">
            {% for message in conversation.messages %}
                <div id="message-{{ loop.index }}" 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>{{ t('user') }}</span>
                                    {% elif message.role == 'assistant' or message.display_type == 'Assistant' %}
                                        <i class="bi bi-robot text-xl"></i>
                                        <span>{% if current_view == 'claude' %}{{ t('claude') if t('claude') else 'Claude' }}{% elif current_view == 'cursor' %}{{ t('cursor') if t('cursor') else 'Cursor' }}{% elif current_view == 'trae' %}{{ t('trae') if t('trae') else 'Trae' }}{% elif current_view == 'kiro' %}{{ t('kiro') if t('kiro') else 'Kiro' }}{% else %}{{ t('qwen') if t('qwen') else 'Qwen' }}{% endif %}</span>
                                    {% elif message.type == 'summary' %}
                                        <i class="bi bi-journal-text text-xl"></i>
                                        <span>{{ t('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>
                                        {{ t('code') }}
                                    </span>
                                {% endif %}
                            </div>

                            <!-- Message Meta & Actions -->
                            <div class="flex items-center space-x-3">
                                <div class="text-xs text-gray-500 dark:text-gray-500">
                                    {{ t('line') }} {{ message.line_number }}
                                    {% if message.timestamp %}
                                        <span class="mx-1">•</span>
                                        {{ message.timestamp }}
                                    {% endif %}
                                </div>

                                <!-- Favorite Button -->
                                <button class="favorite-toggle p-1.5 rounded-lg text-gray-400 hover:text-amber-500 dark:text-gray-500 dark:hover:text-amber-400 hover:bg-amber-50 dark:hover:bg-amber-900/20 transition-all duration-200"
                                        data-view="{{ current_view or 'qwen' }}"
                                        data-project="{{ project_name }}"
                                        data-session="{{ session_id }}"
                                        data-line="{{ message.line_number }}"
                                        data-content="{{ message.content[:200] }}"
                                        title="{{ t('add_to_favorites_tooltip') }}">
                                    <i class="bi bi-star text-lg"></i>
                                </button>
                            </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">{{ t('no_messages_found') }}</h3>
                <p class="text-gray-600 dark:text-gray-400">
                    {% if search or message_type %}
                        {{ t('adjust_filters') }}
                    {% else %}
                        {{ t('conversation_empty') }}
                    {% 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>
                        {{ t('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">
                    {{ t('page') }} <span class="font-semibold text-gray-900 dark:text-white">{{ conversation.page }}</span> {{ t('of') }}
                    <span class="font-semibold text-gray-900 dark:text-white">{{ conversation.total_pages }}</span>
                    <span class="hidden sm:inline">({{ conversation.total }} {{ t('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 %}

{% block extra_scripts %}
<script>
    // Auto-scroll to first message or highlighted message
    document.addEventListener('DOMContentLoaded', function() {
        const urlParams = new URLSearchParams(window.location.search);
        const searchQuery = urlParams.get('search');
        const highlightLine = urlParams.get('highlight');

        // Highlight specific message if line number provided
        if (highlightLine) {
            setTimeout(function() {
                const targetMessage = document.querySelector(`#message-${highlightLine}`);
                if (targetMessage) {
                    targetMessage.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    targetMessage.classList.add('ring-4', 'ring-amber-500', 'ring-offset-4', 'dark:ring-offset-gray-900');
                    setTimeout(() => targetMessage.classList.remove('ring-4', 'ring-amber-500', 'ring-offset-4', 'dark:ring-offset-gray-900'), 3000);
                }
            }, 300);
        }
        // Or scroll to first message when coming from search results
        else if (searchQuery && document.querySelector('#message-1')) {
            setTimeout(function() {
                const firstMessage = document.querySelector('#message-1');
                if (firstMessage) {
                    // Scroll to the first message with smooth behavior
                    firstMessage.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });

                    // Add a temporary highlight effect
                    firstMessage.classList.add('ring-2', 'ring-primary-500', 'ring-offset-2', 'dark:ring-offset-gray-900');

                    // Remove highlight after 2 seconds
                    setTimeout(function() {
                        firstMessage.classList.remove('ring-2', 'ring-primary-500', 'ring-offset-2', 'dark:ring-offset-gray-900');
                    }, 2000);
                }
            }, 300); // Small delay to ensure page is fully rendered
        }
    });

    // Clear filters functionality
    document.querySelectorAll('#clear-filters').forEach(function(btn) {
        btn.addEventListener('click', function() {
            const urlParams = new URLSearchParams(window.location.search);
            const view = urlParams.get('view') || 'qwen';
            window.location.href = window.location.pathname + '?view=' + view;
        });
    });

    // Auto-submit on filter change
    document.querySelectorAll('.auto-filter').forEach(function(element) {
        element.addEventListener('change', function() {
            document.getElementById('search-form').submit();
        });
    });
</script>
{% endblock %}