{% 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="{ selectedPeriod: '{{ period|default('week') }}', 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>

        <!-- Time Filter -->
        <div class="flex gap-1 sm:gap-2 flex-nowrap items-center" role="group">
            <button
                hx-get="/api/conversations?period=15min"
                hx-target="#conversations-content"
                hx-swap="innerHTML"
                @click="selectedPeriod = '15min'"
                :class="selectedPeriod === '15min' ? 'bg-[#0770E3] text-white border-[#0770E3]' : 'bg-white text-gray-700 border-gray-300'"
                class="px-2 sm:px-3 py-2 text-sm font-medium rounded-lg border transition-colors hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-[#0770E3] focus:ring-offset-2 whitespace-nowrap"
            >
                15m
            </button>
            <button
                hx-get="/api/conversations?period=1hour"
                hx-target="#conversations-content"
                hx-swap="innerHTML"
                @click="selectedPeriod = '1hour'"
                :class="selectedPeriod === '1hour' ? 'bg-[#0770E3] text-white border-[#0770E3]' : 'bg-white text-gray-700 border-gray-300'"
                class="px-2 sm:px-3 py-2 text-sm font-medium rounded-lg border transition-colors hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-[#0770E3] focus:ring-offset-2 whitespace-nowrap"
            >
                1h
            </button>
            <button
                hx-get="/api/conversations?period=today"
                hx-target="#conversations-content"
                hx-swap="innerHTML"
                @click="selectedPeriod = 'today'"
                :class="selectedPeriod === 'today' ? 'bg-[#0770E3] text-white border-[#0770E3]' : 'bg-white text-gray-700 border-gray-300'"
                class="px-2 sm:px-3 py-2 text-sm font-medium rounded-lg border transition-colors hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-[#0770E3] focus:ring-offset-2 whitespace-nowrap"
            >
                Today
            </button>
            <button
                hx-get="/api/conversations?period=week"
                hx-target="#conversations-content"
                hx-swap="innerHTML"
                @click="selectedPeriod = 'week'"
                :class="selectedPeriod === 'week' ? 'bg-[#0770E3] text-white border-[#0770E3]' : 'bg-white text-gray-700 border-gray-300'"
                class="px-2 sm:px-3 py-2 text-sm font-medium rounded-lg border transition-colors hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-[#0770E3] focus:ring-offset-2 whitespace-nowrap"
            >
                Week
            </button>
            <button
                hx-get="/api/conversations?period=month"
                hx-target="#conversations-content"
                hx-swap="innerHTML"
                @click="selectedPeriod = 'month'"
                :class="selectedPeriod === 'month' ? 'bg-[#0770E3] text-white border-[#0770E3]' : 'bg-white text-gray-700 border-gray-300'"
                class="px-2 sm:px-3 py-2 text-sm font-medium rounded-lg border transition-colors hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-[#0770E3] focus:ring-offset-2 whitespace-nowrap"
            >
                Month
            </button>
            <button
                hx-get="/api/conversations?period=all"
                hx-target="#conversations-content"
                hx-swap="innerHTML"
                @click="selectedPeriod = 'all'"
                :class="selectedPeriod === 'all' ? 'bg-[#0770E3] text-white border-[#0770E3]' : 'bg-white text-gray-700 border-gray-300'"
                class="px-2 sm:px-3 py-2 text-sm font-medium rounded-lg border transition-colors hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-[#0770E3] focus:ring-offset-2 whitespace-nowrap"
            >
                All
            </button>

            <!-- Loading Spinner -->
            <div class="htmx-indicator ml-2">
                <svg class="animate-spin h-5 w-5 text-[#0770E3]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
            </div>
        </div>
    </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 %}