{% from "components/card.html" import stat_card %}

<!-- Summary Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-5 gap-6">
    {{ stat_card(
        label="Total Conversations",
        value=(summary.total_conversations|default(0)|int)|string,
        icon='<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>'
    ) }}

    {{ stat_card(
        label="Total Cost",
        value="$" + (summary.total_cost|default(0.0)|float|round(2)|string),
        icon='<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>'
    ) }}

    {{ stat_card(
        label="Avg Cost / Conv.",
        value="$" + (summary.avg_cost|default(0.0)|float|round(4)|string),
        icon='<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"></path></svg>'
    ) }}

    {{ stat_card(
        label="Most Expensive",
        value="$" + (summary.most_expensive_cost|default(0.0)|float|round(2)|string),
        subtitle=summary.most_expensive_session|default('') + '...' if summary.most_expensive_session else '',
        icon='<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path></svg>'
    ) }}

    {{ stat_card(
        label="Avg Turns / Conv.",
        value=(summary.avg_messages|default(0.0)|float|round(1)|string),
        icon='<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path></svg>'
    ) }}
</div>

<!-- Conversations Table -->
{% if conversations %}
<div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden mt-8">
    <div class="px-6 py-4 border-b border-gray-200">
        <h3 class="text-lg font-semibold text-gray-900">Conversations</h3>
        <p class="text-sm text-gray-500 mt-1">Sorted by cost — click a row to see context growth chart</p>
    </div>
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Project</th>
                    <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Started</th>
                    <th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Duration</th>
                    <th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Turns</th>
                    <th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Total Tokens</th>
                    <th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Peak Context</th>
                    <th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Cache %</th>
                    <th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Cost</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                {% for conv in conversations %}
                {% set peak_pct = (conv.peak_context_tokens / 200000 * 100) | round(0) | int %}
                {% set bar_filled = [((peak_pct / 100 * 8) | round(0) | int), 8] | min %}
                {% set bar_empty = 8 - bar_filled %}
                <tr class="hover:bg-gray-50 transition-colors cursor-pointer"
                    hx-get="/api/conversation/{{ conv.session_id }}?period={{ period }}"
                    hx-target="#conversation-detail-panel"
                    hx-swap="innerHTML">
                    <td class="px-4 py-3 text-sm text-gray-900 max-w-[140px]">
                        <div class="truncate font-medium" title="{{ conv.project }}">{{ conv.project_name }}</div>
                        {% if conv.model_badges %}
                        <div class="flex flex-wrap gap-1 mt-1">
                            {% for badge in conv.model_badges[:2] %}
                            <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs bg-gray-100 text-gray-600">{{ badge }}</span>
                            {% endfor %}
                        </div>
                        {% endif %}
                    </td>
                    <td class="px-4 py-3 text-sm text-gray-500 whitespace-nowrap">
                        <div>{{ conv.start_date }}</div>
                        <div class="text-xs text-gray-400">{{ conv.start_time_str }}</div>
                    </td>
                    <td class="px-4 py-3 text-sm text-right text-gray-600 whitespace-nowrap">
                        {{ conv.duration_str }}
                    </td>
                    <td class="px-4 py-3 text-sm text-right text-gray-600">
                        {{ conv.turn_count }}
                    </td>
                    <td class="px-4 py-3 text-sm text-right font-medium text-gray-900 whitespace-nowrap">
                        {{ conv.total_tokens|format_compact }}
                    </td>
                    <td class="px-4 py-3 text-sm text-right whitespace-nowrap">
                        {% if conv.peak_context_tokens > 0 %}
                        <span class="font-mono {% if peak_pct > 75 %}text-red-600{% elif peak_pct > 50 %}text-yellow-600{% else %}text-green-600{% endif %}">
                            {{ conv.peak_context_tokens|format_compact }}
                        </span>
                        <span class="ml-1 font-mono text-xs text-gray-400" title="{{ peak_pct }}% of 200K limit">
                            {% for _ in range(bar_filled) %}▓{% endfor %}{% for _ in range(bar_empty) %}░{% endfor %}
                        </span>
                        {% else %}
                        <span class="text-gray-400">—</span>
                        {% endif %}
                    </td>
                    <td class="px-4 py-3 text-sm text-right text-gray-600 whitespace-nowrap">
                        {{ conv.cache_efficiency }}%
                    </td>
                    <td class="px-4 py-3 text-sm text-right font-medium whitespace-nowrap
                        {% if conv.total_cost >= 5 %}text-red-600
                        {% elif conv.total_cost >= 1 %}text-orange-600
                        {% elif conv.total_cost >= 0.10 %}text-yellow-600
                        {% else %}text-[#0770E3]{% endif %}">
                        ${{ "%.4f"|format(conv.total_cost) }}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% else %}
<div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden mt-8">
    <div class="px-6 py-12 text-center">
        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
        </svg>
        <p class="mt-2 text-gray-500">No conversations found in this time period</p>
        <p class="text-sm text-gray-400 mt-1">Try a wider time range or start a new Claude Code session</p>
    </div>
</div>
{% endif %}