{% extends "base.html" %}

{% block title %}Sessions - cocomon{% endblock %}

{% block content %}
{% set total_sessions = projects|sum(attribute='session_count') %}
{% set first_search_result = global_search_results.results[0] if global_search_results and global_search_results.results else none %}
{% set selected_project = request.query_params.get('project') or (first_search_result.project_name if first_search_result else '') %}
{% set selected_session = request.query_params.get('session') or (first_search_result.session_id if first_search_result else '') %}
{% set selected_line = request.query_params.get('line') or (first_search_result.line_number if first_search_result else '') %}
{% set selected_show_tools = first_search_result and (first_search_result.has_tools or first_search_result.has_file_edits or first_search_result.is_tool_only) %}
{% set initial_project = selected_project or (recent_sessions[0].project_name if recent_sessions else '') %}
{% set initial_session = selected_session or (recent_sessions[0].id if recent_sessions else '') %}

{% if filter_projects %}
<div class="sessions-page">
<div class="global-search-shell">
    <div class="top-tools live-claude-disabled">
        <button type="button" class="sidebar-toggle-btn" id="sidebar-toggle-btn" aria-label="Toggle sessions sidebar" title="Sessions">
            <i class="bi bi-layout-sidebar-reverse"></i>
        </button>
        <form class="global-search-form" method="get" action="/" data-current-project="{{ initial_project }}">
            <label for="global-search">Search all sessions</label>
            <div class="global-search-row">
                <input
                    id="global-search"
                    name="q"
                    class="global-search-input"
                    type="search"
                    placeholder="Search messages, tools, commands, and output..."
                    value="{{ global_search or '' }}"
                >
                <button type="submit" class="search-btn" title="Search">
                    <i class="bi bi-search"></i>
                </button>
                {% if global_search %}
                    <a class="clear-global-search" href="/" title="Clear search">
                        <i class="bi bi-x-circle"></i>
                    </a>
                {% endif %}
            </div>
            <div class="global-search-filters">
                <select name="project_filter" aria-label="Project filter">
                    <option value="">All projects</option>
                    {% for project in filter_projects %}
                        <option value="{{ project.name }}" {{ 'selected' if search_filters.project == project.name else '' }}>
                            {{ project.display_name }}
                        </option>
                    {% endfor %}
                </select>
                <select name="role" aria-label="Role filter">
                    <option value="">All roles</option>
                    <option value="user" {{ 'selected' if search_filters.role == 'user' else '' }}>User only</option>
                    <option value="assistant" {{ 'selected' if search_filters.role == 'assistant' else '' }}>Claude only</option>
                </select>
                <input type="date" name="date_from" value="{{ search_filters.date_from or '' }}" aria-label="From date">
                <input type="date" name="date_to" value="{{ search_filters.date_to or '' }}" aria-label="To date">
                <label class="global-filter-check">
                    <input type="checkbox" name="has_code" value="1" {{ 'checked' if search_filters.has_code else '' }}>
                    Code
                </label>
                <label class="global-filter-check">
                    <input type="checkbox" name="has_errors" value="1" {{ 'checked' if search_filters.has_errors else '' }}>
                    Errors
                </label>
                <label class="global-filter-check">
                    <input type="checkbox" name="has_tools" value="1" {{ 'checked' if search_filters.has_tools else '' }}>
                    Tools
                </label>
                <label class="global-filter-check">
                    <input type="checkbox" name="has_file_edits" value="1" {{ 'checked' if search_filters.has_file_edits else '' }}>
                    Edits
                </label>
            </div>
        </form>

        <button
            type="button"
            class="mobile-global-filter-toggle"
            id="mobile-global-filter-toggle"
            aria-label="Search filters"
            aria-expanded="false"
            title="Search filters"
        >
            <i class="bi bi-sliders2"></i>
        </button>

        {# Live Claude streaming is hidden for now. See docs/live-claude-streaming-concept.md. #}
        <form class="live-claude-form" id="live-claude-form" hidden aria-hidden="true">
            <label for="live-claude-prompt">Live Claude</label>
            <div class="live-claude-row">
                <input
                    id="live-claude-prompt"
                    class="live-claude-input"
                    type="text"
                    autocomplete="off"
                    placeholder="Ask Claude and stream the reply..."
                >
                <button type="submit" class="live-claude-submit" title="Run Claude">
                    <i class="bi bi-play-fill"></i>
                </button>
            </div>
            <div class="live-claude-status" id="live-claude-status">idle</div>
        </form>

        <button type="button" class="theme-toggle" id="theme-toggle" data-theme-toggle aria-label="Switch to dark theme" title="Switch theme">
            <i class="bi bi-moon-stars" data-theme-icon></i>
            <span data-theme-label>Dark</span>
        </button>
    </div>

    {% if global_search %}
        <div class="global-search-results">
            <div class="global-search-summary">
                <span>{{ global_search_results.total }} result{{ 's' if global_search_results.total != 1 else '' }} for "{{ global_search }}"</span>
                <span>{{ global_search_results.indexed_messages }} indexed messages</span>
                {% if global_search_results.total > global_search_results.limit %}
                    <span>Showing first {{ global_search_results.limit }}</span>
                {% endif %}
            </div>

            {% if global_search_results.results %}
                <div class="global-result-list">
                    {% for result in global_search_results.results %}
                        <a
                            class="global-result"
                            href="/conversation/{{ result.project_name }}/{{ result.session_id }}?embedded=true&highlight={{ global_search | urlencode }}{% if result.has_tools or result.has_file_edits or result.is_tool_only %}&show_tools=true{% endif %}&line={{ result.line_number }}#message-line-{{ result.line_number }}"
                            target="conversation-frame"
                            data-project="{{ result.project_name }}"
                            data-session="{{ result.session_id }}"
                            data-line="{{ result.line_number }}"
                            data-global-result
                        >
                            <span class="global-result-meta">
                                <span class="message-role {{ result.role }}">
                                    {% if result.role == 'assistant' %}
                                        <i class="bi bi-cpu"></i>
                                        Claude
                                    {% else %}
                                        <i class="bi bi-person-circle"></i>
                                        User
                                    {% endif %}
                                </span>
                                <span>{{ result.project_display_name }}</span>
                                <span>Session {{ result.session_id[:8] }}...</span>
                                <span>Line {{ result.line_number }}</span>
                            </span>
                            <span class="global-result-snippet">{{ result.snippet | safe }}</span>
                        </a>
                    {% endfor %}
                </div>
            {% else %}
                <div class="global-no-results">No messages matched.</div>
            {% endif %}
        </div>
    {% endif %}
</div>

<div class="sidebar-overlay" id="sidebar-overlay"></div>

<div class="home-layout">
    <aside class="session-sidebar" aria-label="Projects and sessions">
        <div class="sidebar-header">
            <div>
                <h2>
                    <i class="bi bi-clock-history me-2"></i>
                    Sessions
                </h2>
                <p>
                    {{ projects|length }} project{{ 's' if projects|length != 1 else '' }} /
                    {{ total_sessions }} session{{ 's' if total_sessions != 1 else '' }}
                    {% if live_session_count %}
                        / {{ live_session_count }} live
                    {% endif %}
                </p>
            </div>
            <div class="sidebar-header-actions">
                <button type="button" class="theme-toggle sidebar-theme-toggle" data-theme-toggle aria-label="Switch to dark theme" title="Switch theme">
                    <i class="bi bi-moon-stars" data-theme-icon></i>
                    <span data-theme-label>Dark</span>
                </button>
                <button type="button" class="sidebar-close-btn" id="sidebar-close-btn" aria-label="Close sidebar">
                    <i class="bi bi-x-lg"></i>
                </button>
            </div>
        </div>

        <div class="project-session-groups">
            {% for project in projects %}
                {% set latest_day = project.sessions[0].modified[:10] if project.sessions else '' %}
                {% set is_open = project.name == initial_project %}
                <section class="project-session-group {{ '' if is_open else 'collapsed' }}" data-project-group>
                    <div class="project-session-heading">
                        <button
                            type="button"
                            class="project-toggle"
                            aria-expanded="{{ 'true' if is_open else 'false' }}"
                            data-project-toggle
                        >
                            <i class="bi bi-chevron-down project-chevron"></i>
                            <span>{{ project.display_name }}</span>
                        </button>
                        <a class="project-open-link" href="/project/{{ project.name }}" title="Open project">
                            <i class="bi bi-box-arrow-up-right"></i>
                        </a>
                        <span class="session-count">{{ project.session_count }}</span>
                    </div>

                    <div class="session-links">
                        {% for session in project.sessions %}
                            {% set is_last_active_day = session.modified[:10] == latest_day %}
                            <a
                                class="session-link {{ '' if is_last_active_day else 'session-extra d-none' }} {{ 'active' if session.id == initial_session and project.name == initial_project else '' }}"
                                href="/conversation/{{ project.name }}/{{ session.id }}?embedded=true{% if global_search and session.search_line %}&highlight={{ global_search | urlencode }}{% if session.search_show_tools %}&show_tools=true{% endif %}&line={{ session.search_line }}#message-line-{{ session.search_line }}{% endif %}"
                                target="conversation-frame"
                                data-project="{{ project.name }}"
                                data-session="{{ session.id }}"
                                {% if global_search and session.search_line %}
                                    data-line="{{ session.search_line }}"
                                    data-search-result-session
                                {% endif %}
                            >
                                <span class="session-link-title">
                                    <i class="bi bi-chat-text"></i>
                                    {% if session.live_terminal and session.live_terminal.live %}
                                        <span
                                            class="session-live-dot {{ 'is-busy' if session.live_terminal.status == 'busy' else '' }}"
                                            title="{{ session.live_terminal.transport }}{% if session.live_terminal.tty %} / {{ session.live_terminal.tty.replace('/dev/', '') }}{% endif %}{% if session.live_terminal.pid %} / pid {{ session.live_terminal.pid }}{% endif %}{% if session.live_terminal.title %} / {{ session.live_terminal.title }}{% endif %}{% if session.live_terminal.status %} / {{ session.live_terminal.status }}{% endif %}"
                                            aria-label="Live in {{ session.live_terminal.transport }}"
                                        ></span>
                                        {% if session.live_terminal.status == 'busy' %}
                                            <span class="session-processing-label">processing</span>
                                        {% endif %}
                                    {% endif %}
                                    {{ session.session_name or ('Session ' ~ session.id[:8] ~ '...') }}
                                </span>
                                {% if session.session_recap %}
                                    <span class="session-link-recap">{{ session.session_recap }}</span>
                                {% endif %}
                                <span class="session-link-meta">
                                    <span>{{ session.message_count }} messages</span>
                                    <span>
                                        <script>
                                            document.write(window.formatRelativeTime("{{ session.modified }}"));
                                        </script>
                                    </span>
                                </span>
                            </a>
                        {% endfor %}
                        {% if project.sessions|length > 0 %}
                            <button type="button" class="show-more-sessions" data-session-reveal>
                                Show 4 more
                            </button>
                        {% endif %}
                    </div>
                </section>
            {% endfor %}
        </div>
    </aside>

    <section class="home-overview">
        <div class="conversation-panel">
            {% if recent_sessions %}
                <div class="live-claude-panel d-none" id="live-claude-panel">
                    <div class="live-claude-panel-header">
                        <span id="live-claude-panel-title">Live Claude</span>
                        <span id="live-claude-session"></span>
                    </div>
                    <div class="live-claude-messages" id="live-claude-messages"></div>
                </div>
                <iframe
                    id="conversation-frame"
                    class="conversation-frame"
                    name="conversation-frame"
                    title="Conversation viewer"
                    src="/conversation/{{ initial_project }}/{{ initial_session }}?embedded=true{% if global_search and selected_project and selected_session %}&highlight={{ global_search | urlencode }}{% if selected_show_tools %}&show_tools=true{% endif %}{% if selected_line %}&line={{ selected_line }}#message-line-{{ selected_line }}{% endif %}{% endif %}"
                ></iframe>
            {% else %}
                <div class="conversation-empty-state">
                    <i class="bi bi-chat-square-text"></i>
                    <p>No sessions found yet.</p>
                </div>
            {% endif %}
        </div>
    </section>
</div>
</div>
{% else %}
<div class="text-center py-5">
    <div class="mb-4">
        <i class="bi bi-folder-x" style="font-size: 4rem; color: var(--secondary-color);"></i>
    </div>
    <h4 class="text-muted">No Projects Found</h4>
    <p class="text-muted">
        Make sure Claude Code has been used and projects exist in:<br>
        <code>~/.claude/projects/</code>
    </p>
    <a href="/health" class="btn btn-outline-primary">
        <i class="bi bi-heart-pulse me-1"></i>
        Check System Status
    </a>
</div>
{% endif %}
{% endblock %}