{% extends "base.html" %}

{% block title %}Conversation View - Workshop{% endblock %}

{% block content %}
<div class="space-y-4">
    <!-- Header with Controls -->
    <div class="bg-white shadow rounded-lg p-4">
        <div class="flex items-center justify-between mb-4">
            <div>
                <a href="/messages" class="text-blue-600 hover:text-blue-800 text-sm font-medium">
                    ← Back to Messages
                </a>
                <h1 class="text-2xl font-bold text-gray-900 mt-2">Conversation View</h1>
                <p class="text-sm text-gray-600 mt-1">
                    Session: <code class="bg-gray-100 px-2 py-1 rounded text-xs">{{ session_id }}</code>
                </p>
            </div>

            <!-- Message Count Selector -->
            <div class="flex items-center gap-3">
                <label for="limit" class="text-sm font-medium text-gray-700">Messages per page:</label>
                <select
                    id="limit"
                    onchange="window.location.href='?limit=' + this.value + '{{ '&exclude_types=' + ','.join(exclude_types) if exclude_types else '' }}'"
                    class="px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 text-sm"
                >
                    <option value="10" {% if limit == 10 %}selected{% endif %}>10</option>
                    <option value="25" {% if limit == 25 %}selected{% endif %}>25</option>
                    <option value="50" {% if limit == 50 %}selected{% endif %}>50</option>
                    <option value="100" {% if limit == 100 %}selected{% endif %}>100</option>
                </select>
            </div>
        </div>

        <!-- Message Type Filter -->
        <div class="border-t pt-4 mb-4" id="message-filter">
            <div class="mb-2">
                <span class="text-sm font-medium text-gray-700">Show message types:</span>
            </div>
            <div class="flex flex-wrap gap-3 mb-3">
                <label class="inline-flex items-center cursor-pointer">
                    <input
                        type="checkbox"
                        data-type="user"
                        {% if 'user' not in exclude_types %}checked{% endif %}
                        class="filter-checkbox w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
                    >
                    <span class="ml-2 text-sm">
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-bold bg-blue-600 text-white">USER</span>
                    </span>
                </label>

                <label class="inline-flex items-center cursor-pointer">
                    <input
                        type="checkbox"
                        data-type="assistant"
                        {% if 'assistant' not in exclude_types %}checked{% endif %}
                        class="filter-checkbox w-4 h-4 text-green-600 bg-gray-100 border-gray-300 rounded focus:ring-green-500"
                    >
                    <span class="ml-2 text-sm">
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-bold bg-green-600 text-white">ASSISTANT</span>
                    </span>
                </label>

                <label class="inline-flex items-center cursor-pointer">
                    <input
                        type="checkbox"
                        data-type="tool_result"
                        {% if 'tool_result' not in exclude_types %}checked{% endif %}
                        class="filter-checkbox w-4 h-4 text-purple-600 bg-gray-100 border-gray-300 rounded focus:ring-purple-500"
                    >
                    <span class="ml-2 text-sm">
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-bold bg-purple-600 text-white">TOOL_RESULT</span>
                    </span>
                </label>

                <label class="inline-flex items-center cursor-pointer">
                    <input
                        type="checkbox"
                        data-type="tool_use"
                        {% if 'tool_use' not in exclude_types %}checked{% endif %}
                        class="filter-checkbox w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
                    >
                    <span class="ml-2 text-sm">
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-bold bg-blue-500 text-white">TOOL_USE</span>
                    </span>
                </label>

                <label class="inline-flex items-center cursor-pointer">
                    <input
                        type="checkbox"
                        data-type="thinking"
                        {% if 'thinking' not in exclude_types %}checked{% endif %}
                        class="filter-checkbox w-4 h-4 text-yellow-600 bg-gray-100 border-gray-300 rounded focus:ring-yellow-500"
                    >
                    <span class="ml-2 text-sm">
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-bold bg-yellow-600 text-black">THINKING</span>
                    </span>
                </label>

                <label class="inline-flex items-center cursor-pointer">
                    <input
                        type="checkbox"
                        data-type="system"
                        {% if 'system' not in exclude_types %}checked{% endif %}
                        class="filter-checkbox w-4 h-4 text-gray-600 bg-gray-100 border-gray-300 rounded focus:ring-gray-500"
                    >
                    <span class="ml-2 text-sm">
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-bold bg-gray-600 text-white">SYSTEM</span>
                    </span>
                </label>
            </div>
            <button
                id="apply-filter-btn"
                class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-sm font-medium"
            >
                Apply Filter
            </button>
        </div>

        <!-- Pagination Controls -->
        <div class="flex items-center justify-between border-t pt-4">
            <div class="text-sm text-gray-600">
                Showing messages {{ offset + 1 }}-{{ [offset + limit, total_messages]|min }} of {{ total_messages }}
                (Page {{ current_page }} of {{ total_pages }})
            </div>

            <div class="flex gap-2">
                {% set exclude_param = '&exclude_types=' + ','.join(exclude_types) if exclude_types else '' %}
                {% if has_earlier %}
                    <a
                        href="?offset={{ [0, offset - limit]|max }}&limit={{ limit }}{{ exclude_param }}"
                        class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-sm font-medium"
                    >
                        ← Earlier
                    </a>
                {% else %}
                    <button
                        disabled
                        class="px-4 py-2 bg-gray-300 text-gray-500 rounded-md cursor-not-allowed text-sm font-medium"
                    >
                        ← Earlier
                    </button>
                {% endif %}

                {% if has_later %}
                    <a
                        href="?offset={{ offset + limit }}&limit={{ limit }}{{ exclude_param }}"
                        class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-sm font-medium"
                    >
                        Later →
                    </a>
                {% else %}
                    <button
                        disabled
                        class="px-4 py-2 bg-gray-300 text-gray-500 rounded-md cursor-not-allowed text-sm font-medium"
                    >
                        Later →
                    </button>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Conversation Messages (Claude Code TUI Style) -->
    <div class="space-y-0 bg-gray-900 rounded-lg overflow-hidden shadow-lg">
        {% for message in messages %}
            <div
                id="msg-{{ message.message_uuid }}"
                class="border-b border-gray-700 last:border-b-0 {% if message.is_anchor %}bg-yellow-900 bg-opacity-20{% endif %}"
            >
                <!-- Message Header -->
                <div class="px-4 py-3 {% if message.message_type == 'user' %}bg-blue-900 bg-opacity-30{% elif message.message_type == 'assistant' %}bg-green-900 bg-opacity-30{% elif message.message_type == 'tool_use' %}bg-blue-900 bg-opacity-20{% elif message.message_type == 'tool_result' %}bg-purple-900 bg-opacity-20{% elif message.message_type == 'thinking' %}bg-yellow-900 bg-opacity-10{% else %}bg-gray-800{% endif %}">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-3">
                            <!-- Role Badge -->
                            <span class="inline-flex items-center px-3 py-1 rounded text-xs font-bold uppercase tracking-wider
                                {% if message.message_type == 'user' %}bg-blue-600 text-white
                                {% elif message.message_type == 'assistant' %}bg-green-600 text-white
                                {% elif message.message_type == 'tool_use' %}bg-blue-500 text-white
                                {% elif message.message_type == 'tool_result' %}bg-purple-600 text-white
                                {% elif message.message_type == 'thinking' %}bg-yellow-600 text-black
                                {% elif message.message_type == 'system' %}bg-gray-600 text-white
                                {% else %}bg-orange-600 text-white{% endif %}">
                                {{ message.message_type }}
                            </span>

                            <!-- Timestamp -->
                            <span class="text-xs text-gray-400 font-mono">
                                {{ message.timestamp | timeago }}
                            </span>

                            <!-- Anchor Indicator -->
                            {% if message.is_anchor %}
                                <span class="text-xs font-bold text-yellow-400 bg-yellow-900 px-2 py-1 rounded">
                                    ⭐ ANCHOR
                                </span>
                            {% endif %}
                        </div>

                        <!-- Message UUID -->
                        <a
                            href="/messages/{{ message.message_uuid }}"
                            class="text-xs text-blue-400 hover:text-blue-300 font-mono"
                            title="View message details"
                        >
                            {{ message.message_uuid[:8] }}...
                        </a>
                    </div>
                </div>

                <!-- Message Content -->
                <div class="px-4 py-4">
                    {% if message.content %}
                        {% set line_count = message.content.count('\n') + 1 %}
                        {% if line_count > 20 %}
                            <div x-data="{ expanded: false }">
                                <div x-show="!expanded">
                                    <pre class="whitespace-pre-wrap text-sm text-gray-100 font-mono leading-relaxed">{{ message.content.split('\n')[:20] | join('\n') }}</pre>
                                    <button
                                        @click="expanded = true"
                                        class="mt-2 text-xs text-blue-400 hover:text-blue-300 font-semibold"
                                    >
                                        ▼ Show {{ line_count - 20 }} more lines
                                    </button>
                                </div>
                                <div x-show="expanded" x-cloak>
                                    <pre class="whitespace-pre-wrap text-sm text-gray-100 font-mono leading-relaxed">{{ message.content }}</pre>
                                    <button
                                        @click="expanded = false"
                                        class="mt-2 text-xs text-blue-400 hover:text-blue-300 font-semibold"
                                    >
                                        ▲ Show less
                                    </button>
                                </div>
                            </div>
                        {% else %}
                            <pre class="whitespace-pre-wrap text-sm text-gray-100 font-mono leading-relaxed">{{ message.content }}</pre>
                        {% endif %}
                    {% else %}
                        {% set tool_content = message.raw_json | extract_tool_content %}
                        {% if tool_content %}
                            <div class="space-y-3">
                                {% for tool in tool_content %}
                                    {% if tool.type == 'tool_result' %}
                                        {% set tool_line_count = tool.content.count('\n') + 1 %}
                                        <div class="border-l-4 border-purple-500 pl-4 py-2 bg-purple-900 bg-opacity-20 rounded-r">
                                            <div class="flex items-center gap-2 mb-2">
                                                <span class="text-xs font-bold text-purple-400 bg-purple-900 px-2 py-1 rounded uppercase tracking-wider">
                                                    Tool Result
                                                </span>
                                                {% if tool.is_error %}
                                                <span class="text-xs font-bold text-red-400 bg-red-900 px-2 py-1 rounded uppercase tracking-wider">
                                                    Error
                                                </span>
                                                {% endif %}
                                                <span class="text-xs text-gray-400 font-mono">
                                                    ID: {{ tool.tool_use_id[:8] }}...
                                                </span>
                                            </div>
                                            {% if tool_line_count > 20 %}
                                                <div x-data="{ expanded: false }">
                                                    <div x-show="!expanded">
                                                        <pre class="whitespace-pre-wrap text-sm text-gray-100 font-mono leading-relaxed">{{ tool.content.split('\n')[:20] | join('\n') }}</pre>
                                                        <button
                                                            @click="expanded = true"
                                                            class="mt-2 text-xs text-purple-400 hover:text-purple-300 font-semibold"
                                                        >
                                                            ▼ Show {{ tool_line_count - 20 }} more lines
                                                        </button>
                                                    </div>
                                                    <div x-show="expanded" x-cloak>
                                                        <pre class="whitespace-pre-wrap text-sm text-gray-100 font-mono leading-relaxed">{{ tool.content }}</pre>
                                                        <button
                                                            @click="expanded = false"
                                                            class="mt-2 text-xs text-purple-400 hover:text-purple-300 font-semibold"
                                                        >
                                                            ▲ Show less
                                                        </button>
                                                    </div>
                                                </div>
                                            {% else %}
                                                <pre class="whitespace-pre-wrap text-sm text-gray-100 font-mono leading-relaxed">{{ tool.content }}</pre>
                                            {% endif %}
                                        </div>
                                    {% elif tool.type == 'tool_use' %}
                                        <div class="border-l-4 border-blue-500 pl-4 py-2 bg-blue-900 bg-opacity-20 rounded-r">
                                            <div class="flex items-center gap-2 mb-2">
                                                <span class="text-xs font-bold text-blue-400 bg-blue-900 px-2 py-1 rounded uppercase tracking-wider">
                                                    Tool Use
                                                </span>
                                                <span class="text-sm text-blue-300 font-semibold">
                                                    {{ tool.name }}
                                                </span>
                                            </div>
                                            <pre class="whitespace-pre-wrap text-xs text-gray-300 font-mono leading-relaxed">{{ tool.input | tojson(indent=2) }}</pre>
                                        </div>
                                    {% endif %}
                                {% endfor %}
                            </div>
                        {% else %}
                            <p class="text-gray-500 italic text-sm">(No content)</p>
                        {% endif %}
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    </div>

    <!-- Bottom Pagination Controls -->
    <div class="bg-white shadow rounded-lg p-4">
        <div class="flex items-center justify-between">
            <div class="text-sm text-gray-600">
                Showing messages {{ offset + 1 }}-{{ [offset + limit, total_messages]|min }} of {{ total_messages }}
            </div>

            <div class="flex gap-2">
                {% set exclude_param = '&exclude_types=' + ','.join(exclude_types) if exclude_types else '' %}
                {% if has_earlier %}
                    <a
                        href="?offset={{ [0, offset - limit]|max }}&limit={{ limit }}{{ exclude_param }}"
                        class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-sm font-medium"
                    >
                        ← Earlier
                    </a>
                {% endif %}

                {% if has_later %}
                    <a
                        href="?offset={{ offset + limit }}&limit={{ limit }}{{ exclude_param }}"
                        class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-sm font-medium"
                    >
                        Later →
                    </a>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<script>
// Auto-scroll to anchor message if present
document.addEventListener('DOMContentLoaded', function() {
    const anchorMsg = document.querySelector('[id^="msg-{{ anchor_uuid }}"]');
    if (anchorMsg) {
        anchorMsg.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }

    // Message type filter
    const applyFilterBtn = document.getElementById('apply-filter-btn');
    if (applyFilterBtn) {
        applyFilterBtn.addEventListener('click', function() {
            // Get all unchecked checkboxes (these are the types to exclude)
            const checkboxes = document.querySelectorAll('.filter-checkbox');
            const excludedTypes = [];

            checkboxes.forEach(function(checkbox) {
                if (!checkbox.checked) {
                    excludedTypes.push(checkbox.getAttribute('data-type'));
                }
            });

            // Update URL with excluded types
            const params = new URLSearchParams(window.location.search);
            if (excludedTypes.length > 0) {
                params.set('exclude_types', excludedTypes.join(','));
            } else {
                params.delete('exclude_types');
            }
            params.delete('offset'); // Reset to first page
            window.location.search = params.toString();
        });
    }
});
</script>
{% endblock %}