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

{% block title %}Conversations - ClaudeSavvy{% endblock %}

{% block main_content %}
<div class="space-y-8" x-data="{ detailOpen: false }" @open-conv-detail.window="detailOpen = true" @keydown.escape.window="detailOpen = false">
    <!-- Page Title and Time Filter -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Conversations</h1>
            <p class="mt-2 text-gray-600">Per-conversation token spend, context growth, and cost analytics</p>
        </div>

        {% set _conv_period = 'today' if period in ('week', 'month', '1hour') else period|default('today') %}
        {% with current_url='/api/conversations', target_id='conversations-content', show_realtime=true, storage_key='cs_period_conversations', default_period=_conv_period %}
            {% include 'partials/time_filter.html' %}
        {% endwith %}
    </div>

    <!-- Conversations Content (HTMX Target) -->
    <div id="conversations-content">
        {% include 'partials/conversations_content.html' %}
    </div>

    <!-- Conversation Detail Modal -->
    <div x-show="detailOpen"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         class="fixed inset-0 z-50 overflow-y-auto"
         style="display:none">
        <!-- Backdrop -->
        <div class="fixed inset-0 bg-gray-900 bg-opacity-50" @click="detailOpen = false"></div>
        <!-- Panel -->
        <div class="relative flex items-start justify-center min-h-screen p-4 pt-16">
            <div x-show="detailOpen"
                 x-transition:enter="transition ease-out duration-200"
                 x-transition:enter-start="opacity-0 translate-y-4"
                 x-transition:enter-end="opacity-100 translate-y-0"
                 x-transition:leave="transition ease-in duration-150"
                 x-transition:leave-start="opacity-100 translate-y-0"
                 x-transition:leave-end="opacity-0 translate-y-4"
                 class="relative w-full max-w-3xl bg-white rounded-xl shadow-2xl max-h-[80vh] overflow-y-auto"
                 @click.stop>
                <!-- Close button -->
                <button @click="detailOpen = false"
                        class="absolute top-4 right-4 z-10 p-1.5 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-colors">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
                <!-- HTMX target — lives here, outside #conversations-content -->
                <div id="conversation-detail-panel" class="p-6">
                    <!-- Loading state shown while HTMX fetches -->
                    <div class="animate-pulse space-y-4">
                        <div class="h-4 bg-gray-200 rounded w-3/4"></div>
                        <div class="h-4 bg-gray-200 rounded w-1/2"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('htmx:afterSwap', function(evt) {
        if (evt.detail.target && evt.detail.target.id === 'conversation-detail-panel') {
            window.dispatchEvent(new CustomEvent('open-conv-detail'));
        }
    });
</script>
{% endblock %}