{% extends "base.html" %}

{% block title %}Conversation {{ session_id[:8] }} - {{ display_name }}{% endblock %}

{% block breadcrumb %}
{% if not embedded %}
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="/">
                <i class="bi bi-house me-1"></i>
                Projects
            </a>
        </li>
        <li class="breadcrumb-item">
            <a href="/project/{{ project_name }}">
                {{ display_name }}
            </a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
            Session {{ session_id[:8] }}...
        </li>
    </ol>
</nav>
{% endif %}
{% endblock %}

{% block content %}
<div
    class="conversation-view"
    data-project="{{ project_name }}"
    data-session="{{ session_id }}"
    data-file-revision="{{ conversation.file_revision or '' }}"
    data-target-line="{{ target_line or '' }}"
>
{% if share_url %}
<a
    class="session-share-qr"
    href="{{ share_url }}"
    target="_blank"
    rel="noopener"
    title="Open on LAN: {{ share_url }}"
    data-session-share
    data-session="{{ session_id }}"
>
    <img src="/api/qr.svg?data={{ share_url | urlencode }}" alt="QR for {{ share_url }}">
    <span>{{ share_url.replace('http://', '') }}</span>
</a>
{% endif %}
<div class="search-filters">
    <form id="search-form" method="get">
        {% if embedded %}
            <input type="hidden" name="embedded" value="true">
        {% endif %}
        <div class="filter-section">
            {% if not embedded %}
            <a href="/" class="conv-home-btn" title="Back to sessions" aria-label="Back to sessions">
                <i class="bi bi-layout-sidebar-reverse"></i>
            </a>
            {% endif %}
            <div class="filter-group">
                <label for="search">Search Messages</label>
                <input
                    type="text"
                    id="search"
                    name="search"
                    class="search-input"
                    placeholder="Search in conversation content..."
                    value="{{ search or '' }}"
                >
            </div>

            <div class="filter-group">
                <label for="per_page">Messages per Page</label>
                <select id="per_page" name="per_page" class="filter-select 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 class="filter-actions">
                <button type="submit" class="search-btn" title="Search">
                    <i class="bi bi-search me-1"></i>
                    <span class="btn-label">Search</span>
                </button>
                <button type="button" id="clear-filters" class="clear-btn" title="Clear">
                    <i class="bi bi-x-circle me-1"></i>
                    <span class="btn-label">Clear</span>
                </button>
            </div>
        </div>
    </form>

    <div class="conversation-summary">
        <span>
            {% if conversation.metadata.session_name %}
                <strong>{{ conversation.metadata.session_name }}</strong>
                <span class="summary-divider">/</span>
            {% endif %}
            Showing {{ conversation.messages|length }} of {{ conversation.total }} user/claude messages
        </span>
        {% if search %}
            <span>
                <i class="bi bi-search me-1"></i>
                "{{ search }}"
            </span>
        {% endif %}
    </div>
    {% if conversation.metadata.session_recap %}
        <div class="conversation-recap">
            {{ conversation.metadata.session_recap }}
        </div>
    {% endif %}
</div>

<form
    class="session-send-form"
    data-session-send-form
    data-project="{{ project_name }}"
    data-session="{{ session_id }}"
    data-live="{{ 'true' if live_terminal and live_terminal.live and live_terminal.transport in ['cmux', 'iterm2', 'terminal'] else 'false' }}"
>
    <div class="session-send-target">
        {% if live_terminal and live_terminal.live and live_terminal.transport in ['cmux', 'iterm2', 'terminal'] %}
            <span class="live-dot {{ 'is-busy' if live_terminal.status == 'busy' else '' }}" aria-hidden="true"></span>
            <span>
                {{ live_terminal.transport }}{% if live_terminal.tty %} / {{ live_terminal.tty.replace('/dev/', '') }}{% endif %}
                {% if live_terminal.status == 'busy' %}
                    / processing
                {% elif live_terminal.status %}
                    / {{ live_terminal.status }}
                {% endif %}
            </span>
        {% elif live_terminal and live_terminal.live %}
            <span>Live, unsupported terminal</span>
        {% else %}
            <span>No live terminal</span>
        {% endif %}
    </div>
    <input
        type="text"
        name="message"
        class="session-send-input"
        placeholder="{{ 'Send to live Claude...' if live_terminal and live_terminal.live and live_terminal.transport in ['cmux', 'iterm2', 'terminal'] else 'Open this Claude session in a supported terminal to send' }}"
        autocomplete="off"
        {% if not (live_terminal and live_terminal.live and live_terminal.transport in ['cmux', 'iterm2', 'terminal']) %}disabled{% endif %}
    >
    <button
        type="submit"
        class="session-send-button"
        title="Send"
        {% if not (live_terminal and live_terminal.live and live_terminal.transport in ['cmux', 'iterm2', 'terminal']) %}disabled{% endif %}
    >
        <i class="bi bi-send"></i>
    </button>
    <span class="session-send-status" data-session-send-status></span>
</form>

<!-- Messages -->
{% if conversation.messages %}
    <div class="messages-container terminal-transcript">
        {% for message in conversation.messages %}
            <section
                class="terminal-turn {{ message.role or message.type }} {{ 'search-target' if target_line and message.line_number == target_line else '' }}"
                id="message-line-{{ message.line_number }}"
                title="{{ message.timestamp or '' }}"
            >
                <div class="terminal-prompt">
                    {% if message.role == 'user' or message.display_type == 'User' %}
                        <span class="terminal-marker">&gt;</span>
                    {% elif message.role == 'assistant' or message.display_type == 'Assistant' %}
                        <span class="terminal-marker">⏺</span>
                    {% else %}
                        <span class="terminal-marker">{{ message.display_type|lower }}</span>
                    {% endif %}
                </div>
                <div class="terminal-content">{{ message.rendered_content | safe }}</div>
            </section>
        {% endfor %}
    </div>
{% else %}
    <div class="text-center py-5">
        <div class="mb-4">
            <i class="bi bi-chat-square-x" style="font-size: 4rem; color: var(--secondary-color);"></i>
        </div>
        <h4 class="text-muted">No Messages Found</h4>
        <p class="text-muted">
            {% if search %}
                Try adjusting your search or clear it to see the conversation.
            {% else %}
                This conversation appears to be empty or couldn't be loaded.
            {% endif %}
        </p>
        {% if search %}
            <button type="button" id="clear-filters" class="btn btn-outline-primary">
                <i class="bi bi-x-circle me-1"></i>
                Clear Filters
            </button>
        {% endif %}
    </div>
{% endif %}

<!-- Pagination -->
{% if conversation.total_pages > 1 %}
    <div class="pagination-container">
        <div class="pagination-info">
            Page {{ conversation.page }} of {{ conversation.total_pages }}
            ({{ conversation.total }} total messages)
        </div>

        <nav aria-label="Conversation pagination">
            <ul class="pagination mb-0">
                <!-- Previous page -->
                {% if conversation.page > 1 %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ conversation.page - 1 }}{% if embedded %}&embedded=true{% endif %}{% if search %}&search={{ search }}{% endif %}{% if highlight %}&highlight={{ highlight }}{% endif %}{% if show_tools %}&show_tools=true{% endif %}{% if conversation.per_page != 50 %}&per_page={{ conversation.per_page }}{% endif %}">
                            <i class="bi bi-chevron-left"></i>
                        </a>
                    </li>
                {% else %}
                    <li class="page-item disabled">
                        <span class="page-link">
                            <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 class="page-item">
                        <a class="page-link" href="?page=1{% if embedded %}&embedded=true{% endif %}{% if search %}&search={{ search }}{% endif %}{% if highlight %}&highlight={{ highlight }}{% endif %}{% if show_tools %}&show_tools=true{% endif %}{% if conversation.per_page != 50 %}&per_page={{ conversation.per_page }}{% endif %}">1</a>
                    </li>
                    {% if start_page > 2 %}
                        <li class="page-item disabled">
                            <span class="page-link">...</span>
                        </li>
                    {% endif %}
                {% endif %}

                {% for page_num in range(start_page, end_page + 1) %}
                    {% if page_num == conversation.page %}
                        <li class="page-item active">
                            <span class="page-link">{{ page_num }}</span>
                        </li>
                    {% else %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_num }}{% if embedded %}&embedded=true{% endif %}{% if search %}&search={{ search }}{% endif %}{% if highlight %}&highlight={{ highlight }}{% endif %}{% if show_tools %}&show_tools=true{% endif %}{% if conversation.per_page != 50 %}&per_page={{ conversation.per_page }}{% endif %}">{{ page_num }}</a>
                        </li>
                    {% endif %}
                {% endfor %}

                {% if end_page < conversation.total_pages %}
                    {% if end_page < conversation.total_pages - 1 %}
                        <li class="page-item disabled">
                            <span class="page-link">...</span>
                        </li>
                    {% endif %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ conversation.total_pages }}{% if embedded %}&embedded=true{% endif %}{% if search %}&search={{ search }}{% endif %}{% if highlight %}&highlight={{ highlight }}{% endif %}{% if show_tools %}&show_tools=true{% endif %}{% if conversation.per_page != 50 %}&per_page={{ conversation.per_page }}{% endif %}">{{ conversation.total_pages }}</a>
                    </li>
                {% endif %}

                <!-- Next page -->
                {% if conversation.page < conversation.total_pages %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ conversation.page + 1 }}{% if embedded %}&embedded=true{% endif %}{% if search %}&search={{ search }}{% endif %}{% if highlight %}&highlight={{ highlight }}{% endif %}{% if show_tools %}&show_tools=true{% endif %}{% if conversation.per_page != 50 %}&per_page={{ conversation.per_page }}{% endif %}">
                            <i class="bi bi-chevron-right"></i>
                        </a>
                    </li>
                {% else %}
                    <li class="page-item disabled">
                        <span class="page-link">
                            <i class="bi bi-chevron-right"></i>
                        </span>
                    </li>
                {% endif %}
            </ul>
        </nav>
    </div>
{% endif %}
</div>
{% endblock %}