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

{% block title %}Token Usage - Claude Monitor{% endblock %}

{% block main_content %}
<div class="space-y-8" x-data="{ selectedPeriod: '{{ period|default('1hour') }}', selectedModel: '{{ selected_model|default('') }}' }">
    <!-- Page Title and Filters -->
    <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">Token Usage</h1>
            <p class="mt-2 text-gray-600">Detailed breakdown of your token consumption and costs</p>
        </div>

        <div class="flex flex-col sm:flex-row gap-4">
            <!-- Model Filter -->
            <div class="flex items-center gap-2">
                <label for="model-filter" class="text-sm font-medium text-gray-700">Model:</label>
                <select
                    id="model-filter"
                    name="model"
                    @change="selectedModel = $event.target.value; htmx.ajax('GET', '/api/tokens?period=' + selectedPeriod + '&model=' + $event.target.value, {target: '#tokens-content', swap: 'innerHTML'})"
                    class="px-3 py-2 text-sm border border-gray-300 rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-[#0770E3] focus:border-[#0770E3]"
                >
                    <option value="">All Models</option>
                    {% for model in available_models|default([]) %}
                    <option value="{{ model.id }}" {% if selected_model == model.id %}selected{% endif %}>{{ model.name }}</option>
                    {% endfor %}
                </select>
            </div>

            <!-- Time Filter -->
            <div class="flex gap-1 sm:gap-2 flex-nowrap items-center" role="group">
                <button
                    @click="selectedPeriod = '15min'; htmx.ajax('GET', '/api/tokens?period=15min&model=' + selectedModel, {target: '#tokens-content', swap: 'innerHTML', indicator: $event.target})"
                    :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 flex items-center gap-1"
                >
                    <span class="htmx-indicator"><svg class="w-3 h-3 spinner" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><circle cx="12" cy="12" r="10" stroke-opacity="0.25"/><path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round"/></svg></span>
                    15m
                </button>
                <button
                    @click="selectedPeriod = '1hour'; htmx.ajax('GET', '/api/tokens?period=1hour&model=' + selectedModel, {target: '#tokens-content', swap: 'innerHTML', indicator: $event.target})"
                    :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 flex items-center gap-1"
                >
                    <span class="htmx-indicator"><svg class="w-3 h-3 spinner" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><circle cx="12" cy="12" r="10" stroke-opacity="0.25"/><path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round"/></svg></span>
                    1h
                </button>
                <button
                    @click="selectedPeriod = 'today'; htmx.ajax('GET', '/api/tokens?period=today&model=' + selectedModel, {target: '#tokens-content', swap: 'innerHTML', indicator: $event.target})"
                    :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 flex items-center gap-1"
                >
                    <span class="htmx-indicator"><svg class="w-3 h-3 spinner" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><circle cx="12" cy="12" r="10" stroke-opacity="0.25"/><path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round"/></svg></span>
                    Today
                </button>
                <button
                    @click="selectedPeriod = 'week'; htmx.ajax('GET', '/api/tokens?period=week&model=' + selectedModel, {target: '#tokens-content', swap: 'innerHTML', indicator: $event.target})"
                    :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 flex items-center gap-1"
                >
                    <span class="htmx-indicator"><svg class="w-3 h-3 spinner" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><circle cx="12" cy="12" r="10" stroke-opacity="0.25"/><path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round"/></svg></span>
                    Week
                </button>
                <button
                    @click="selectedPeriod = 'month'; htmx.ajax('GET', '/api/tokens?period=month&model=' + selectedModel, {target: '#tokens-content', swap: 'innerHTML', indicator: $event.target})"
                    :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 flex items-center gap-1"
                >
                    <span class="htmx-indicator"><svg class="w-3 h-3 spinner" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><circle cx="12" cy="12" r="10" stroke-opacity="0.25"/><path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round"/></svg></span>
                    Month
                </button>
                <button
                    @click="selectedPeriod = 'all'; htmx.ajax('GET', '/api/tokens?period=all&model=' + selectedModel, {target: '#tokens-content', swap: 'innerHTML', indicator: $event.target})"
                    :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 flex items-center gap-1"
                >
                    <span class="htmx-indicator"><svg class="w-3 h-3 spinner" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><circle cx="12" cy="12" r="10" stroke-opacity="0.25"/><path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round"/></svg></span>
                    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>
    </div>

    <!-- Tokens Content (HTMX Target) -->
    <div id="tokens-content">
        {% include "partials/tokens_content.html" %}
    </div>
</div>
{% endblock %}