{% extends "base.html" %}

{% block title %}aide - Session {{ detail.started_at[:10] }}{% endblock %}

{% block content %}
<!-- Back link -->
<div class="mb-6">
    <a href="/sessions{% if detail.project_name %}?project={{ detail.project_name }}{% endif %}"
       class="text-sm text-blue-600 hover:text-blue-800 font-medium">
        &larr; Back to sessions
    </a>
</div>

<!-- Header -->
<div class="mb-6">
    <h1 class="text-2xl font-bold text-gray-900">
        {% if detail.custom_title %}
        {{ detail.custom_title }}
        {% else %}
        Session: {{ detail.started_at[:10] }}
        {% endif %}
        <span class="text-gray-400 font-normal">&middot;</span>
        <span class="text-gray-600">{{ detail.project_name }}</span>
    </h1>
    {% if detail.custom_title %}
    <p class="text-sm text-gray-500 mt-1">{{ detail.started_at[:10] }} {{ detail.started_at[11:16] }}</p>
    {% endif %}
</div>

<!-- Summary Stats -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
    <!-- Duration -->
    <div class="bg-white rounded-lg shadow p-4">
        <div class="text-xs font-medium uppercase tracking-wide text-gray-500 mb-1">Active Time</div>
        <div class="text-2xl font-bold text-gray-900">
            {% set active = detail.active_duration_seconds or detail.duration_seconds or 0 %}
            {% if active %}
            {% set a_hours = active // 3600 %}
            {% set a_minutes = (active % 3600) // 60 %}
            {% if a_hours > 0 %}{{ a_hours }}h {{ a_minutes }}m{% else %}{{ a_minutes if a_minutes > 0 else 1 }}m{% endif %}
            {% else %}&mdash;{% endif %}
        </div>
        <div class="text-xs text-gray-400 mt-1">
            {% if detail.duration_seconds and detail.active_duration_seconds and detail.duration_seconds != detail.active_duration_seconds %}
            {% set w_hours = detail.duration_seconds // 3600 %}{% set w_minutes = (detail.duration_seconds % 3600) // 60 %}wall: {% if w_hours > 0 %}{{ w_hours }}h {{ w_minutes }}m{% else %}{{ w_minutes }}m{% endif %}
            {% endif %}
            {% if detail.work_blocks and detail.work_blocks|length > 1 %}
            <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-700">{{ detail.work_blocks|length }} blocks</span>
            {% endif %}
        </div>
    </div>

    <!-- Messages -->
    <div class="bg-white rounded-lg shadow p-4">
        <div class="text-xs font-medium uppercase tracking-wide text-gray-500 mb-1">Messages</div>
        <div class="text-2xl font-bold text-gray-900">{{ detail.message_count }}</div>
        <div class="text-xs text-gray-400 mt-1">{{ detail.user_message_count }} user, {{ detail.assistant_message_count }} assistant</div>
    </div>

    <!-- Cost (API only) or Files -->
    {% if not subscription_user %}
    <div class="bg-white rounded-lg shadow p-4">
        <div class="text-xs font-medium uppercase tracking-wide text-gray-500 mb-1">Cost</div>
        <div class="text-2xl font-bold text-gray-900">{{ "${:,.2f}".format(detail.estimated_cost_usd) }}</div>
        {% if detail.unique_files and detail.unique_files > 0 %}
        <div class="text-xs text-gray-400 mt-1">{{ detail.unique_files }} files touched</div>
        {% endif %}
    </div>
    {% else %}
    <div class="bg-white rounded-lg shadow p-4">
        <div class="text-xs font-medium uppercase tracking-wide text-gray-500 mb-1">Files</div>
        <div class="text-2xl font-bold text-gray-900">{{ detail.unique_files or 0 }}</div>
        <div class="text-xs text-gray-400 mt-1">unique files touched</div>
    </div>
    {% endif %}

    <!-- Errors -->
    <div class="bg-white rounded-lg shadow p-4">
        <div class="text-xs font-medium uppercase tracking-wide text-gray-500 mb-1">Errors</div>
        <div class="text-2xl font-bold {% if detail.tool_error_count and detail.tool_error_count > 0 %}text-red-600{% else %}text-gray-900{% endif %}">
            {{ detail.tool_error_count or 0 }}
        </div>
        {% if detail.error_breakdown %}
        <div class="text-xs text-gray-400 mt-1">
            {% for e in detail.error_breakdown[:3] %}{{ e.category }}: {{ e.count }}{% if not loop.last %}, {% endif %}{% endfor %}
        </div>
        {% endif %}
    </div>
</div>

<!-- Session Metadata -->
<div class="bg-white rounded-lg shadow p-4 mb-6">
    <div class="flex flex-wrap items-center gap-x-5 gap-y-2 text-xs text-gray-500">
        {% if detail.git_branch %}
        <div>
            <span class="font-medium text-gray-600">Branch:</span>
            <code class="bg-gray-100 px-1.5 py-0.5 rounded">{{ detail.git_branch }}</code>
        </div>
        {% endif %}
        {% if detail.permission_mode %}
        <div>
            <span class="font-medium text-gray-600">Mode:</span>
            <code class="bg-gray-100 px-1.5 py-0.5 rounded">{{ detail.permission_mode }}</code>
        </div>
        {% endif %}
        {% if detail.first_prompt_len and detail.first_prompt_len > 0 %}
        <div>
            <span class="font-medium text-gray-600">First prompt:</span>
            {{ "{:,}".format(detail.first_prompt_len) }} chars
        </div>
        {% endif %}
        {% if detail.total_thinking_chars and detail.total_thinking_chars > 0 %}
        <div>
            <span class="font-medium text-gray-600">Thinking:</span>
            {{ "{:,}".format(detail.total_thinking_chars) }} chars
            ({{ "{:.0%}".format(detail.thinking_ratio) }} of turns)
        </div>
        {% endif %}
        {% if detail.source_file %}
        <div>
            <span class="font-medium text-gray-600">Log:</span>
            <code class="bg-gray-100 px-1.5 py-0.5 rounded select-all cursor-pointer" title="Click to select, then copy">{{ detail.source_file }}</code>
        </div>
        {% endif %}
    </div>
</div>

<!-- Token Breakdown -->
<div class="bg-white rounded-lg shadow p-6 mb-6">
    <h2 class="text-lg font-semibold text-gray-900 mb-4">Tokens</h2>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        {% macro format_tokens(value) -%}
            {%- if value >= 1000000000 -%}{{ "%.1f"|format(value / 1000000000) }}B
            {%- elif value >= 1000000 -%}{{ "%.1f"|format(value / 1000000) }}M
            {%- elif value >= 1000 -%}{{ (value / 1000)|round|int }}K
            {%- else -%}{{ value }}
            {%- endif -%}
        {%- endmacro %}
        <div>
            <div class="text-xs font-medium uppercase tracking-wide text-gray-500 mb-1">Input</div>
            <div class="text-2xl font-bold text-gray-900">{{ format_tokens(detail.total_input_tokens) }}</div>
        </div>
        <div>
            <div class="text-xs font-medium uppercase tracking-wide text-gray-500 mb-1">Output</div>
            <div class="text-2xl font-bold text-gray-900">{{ format_tokens(detail.total_output_tokens) }}</div>
        </div>
        <div>
            <div class="text-xs font-medium uppercase tracking-wide text-gray-500 mb-1">Cache Read</div>
            <div class="text-2xl font-bold text-gray-900">{{ format_tokens(detail.total_cache_read_tokens) }}</div>
        </div>
        <div>
            <div class="text-xs font-medium uppercase tracking-wide text-gray-500 mb-1">Cache Creation</div>
            <div class="text-2xl font-bold text-gray-900">{{ format_tokens(detail.total_cache_creation_tokens) }}</div>
        </div>
    </div>
</div>

<!-- Turn Metrics -->
{% if detail.turn_count and detail.turn_count > 0 %}
<div class="bg-white rounded-lg shadow p-6 mb-6">
    <h2 class="text-lg font-semibold text-gray-900 mb-4">Turns</h2>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div>
            <div class="text-xs font-medium uppercase tracking-wide text-gray-500 mb-1">Turn Count</div>
            <div class="text-2xl font-bold text-gray-900">{{ detail.turn_count }}</div>
        </div>
        <div>
            <div class="text-xs font-medium uppercase tracking-wide text-gray-500 mb-1">Total Wait</div>
            <div class="text-2xl font-bold text-gray-900">
                {% set total_s = detail.total_turn_duration_ms // 1000 %}
                {% set t_min = total_s // 60 %}
                {% set t_sec = total_s % 60 %}
                {% if t_min > 0 %}{{ t_min }}m {{ t_sec }}s{% else %}{{ t_sec }}s{% endif %}
            </div>
        </div>
        <div>
            <div class="text-xs font-medium uppercase tracking-wide text-gray-500 mb-1">Avg Turn</div>
            <div class="text-2xl font-bold text-gray-900">
                {% set avg_s = (detail.total_turn_duration_ms // detail.turn_count) // 1000 %}
                {{ avg_s }}s
            </div>
        </div>
        <div>
            <div class="text-xs font-medium uppercase tracking-wide text-gray-500 mb-1">Max Turn</div>
            <div class="text-2xl font-bold text-gray-900">
                {% set max_s = detail.max_turn_duration_ms // 1000 %}
                {% if max_s >= 60 %}{{ max_s // 60 }}m {{ max_s % 60 }}s{% else %}{{ max_s }}s{% endif %}
            </div>
        </div>
    </div>
</div>
{% endif %}

<!-- Work Blocks Timeline (only for multi-block sessions) -->
{% if detail.work_blocks and detail.work_blocks|length > 1 %}
<div class="bg-white rounded-lg shadow p-6 mb-6">
    <h2 class="text-lg font-semibold text-gray-900 mb-4">Work Blocks</h2>
    <div class="space-y-2">
        {% for wb in detail.work_blocks %}
        <div class="flex items-center gap-4 text-sm">
            <span class="text-gray-500 font-mono text-xs w-6 text-right">{{ wb.block_index + 1 }}</span>
            <span class="text-gray-700">{{ wb.started_at[11:16] }}{% if wb.started_at[:10] != detail.started_at[:10] %} <span class="text-gray-400 text-xs">{{ wb.started_at[:10] }}</span>{% endif %}</span>
            <span class="text-gray-400">&rarr;</span>
            <span class="text-gray-700">{{ wb.ended_at[11:16] }}{% if wb.ended_at[:10] != wb.started_at[:10] %} <span class="text-gray-400 text-xs">{{ wb.ended_at[:10] }}</span>{% endif %}</span>
            <span class="text-gray-500">
                {% set wb_h = wb.duration_seconds // 3600 %}
                {% set wb_m = (wb.duration_seconds % 3600) // 60 %}
                {% if wb_h > 0 %}{{ wb_h }}h {{ wb_m }}m{% else %}{{ wb_m if wb_m > 0 else "<1" }}m{% endif %}
            </span>
            <span class="text-gray-400 text-xs">{{ wb.message_count }} msgs</span>
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

<!-- Tool Usage -->
<div class="bg-white rounded-lg shadow p-6 mb-6">
    <h2 class="text-lg font-semibold text-gray-900 mb-4">Tool Usage</h2>
    {% if detail.tool_usage %}
    <div class="flex flex-wrap gap-2">
        {% for tool in detail.tool_usage %}
        <span class="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium bg-blue-50 text-blue-700 border border-blue-200">
            {{ tool.tool_name }}
            <span class="ml-1.5 text-blue-500">({{ tool.count }})</span>
        </span>
        {% endfor %}
    </div>
    {% else %}
    <p class="text-sm text-gray-500">No tool calls recorded.</p>
    {% endif %}
</div>

<!-- Error Breakdown -->
{% if detail.error_breakdown %}
<div class="bg-white rounded-lg shadow p-6 mb-6">
    <h2 class="text-lg font-semibold text-gray-900 mb-4">Error Breakdown</h2>
    <div class="flex flex-wrap gap-2">
        {% set category_colors = {
            "Test": "bg-blue-50 text-blue-700 border-blue-200",
            "Lint": "bg-emerald-50 text-emerald-700 border-emerald-200",
            "Build": "bg-amber-50 text-amber-700 border-amber-200",
            "Git": "bg-purple-50 text-purple-700 border-purple-200",
            "Edit Mismatch": "bg-red-50 text-red-700 border-red-200",
            "File Access": "bg-orange-50 text-orange-700 border-orange-200",
            "Other": "bg-gray-50 text-gray-700 border-gray-200"
        } %}
        {% for e in detail.error_breakdown %}
        <span class="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium border {{ category_colors.get(e.category, 'bg-gray-50 text-gray-700 border-gray-200') }}">
            {{ e.category }}
            <span class="ml-1.5 opacity-70">({{ e.count }})</span>
        </span>
        {% endfor %}
    </div>
</div>
{% endif %}

<!-- Files Touched -->
{% if detail.files_touched %}
<div class="bg-white rounded-lg shadow overflow-hidden">
    <div class="p-6 pb-0">
        <h2 class="text-lg font-semibold text-gray-900 mb-4">Files Touched</h2>
    </div>
    <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
            <tr>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">File</th>
                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Reads</th>
                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Edits</th>
                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Writes</th>
                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Total</th>
            </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
            {% for f in detail.files_touched %}
            <tr class="hover:bg-gray-50 transition-colors">
                <td class="px-6 py-3 text-sm font-mono text-gray-800">{{ f.file_path }}</td>
                <td class="px-6 py-3 text-sm text-gray-700 text-right">{{ f.read_count }}</td>
                <td class="px-6 py-3 text-sm text-gray-700 text-right">{{ f.edit_count }}</td>
                <td class="px-6 py-3 text-sm text-gray-700 text-right">{{ f.write_count }}</td>
                <td class="px-6 py-3 text-sm font-semibold text-gray-900 text-right">{{ f.total }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}
{% endblock %}