<!--
  Familiar - Self-hosted AI Agent
  Copyright (c) 2026 George Scott Foley
  
  Licensed under the MIT License
  For commercial licensing, contact: licensing@familiar.ai
-->
{% extends "base.html" %}

{% block title %}Analytics - Familiar Admin{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Usage Analytics</h1>
            <p class="text-gray-500">Last {{ days }} days</p>
        </div>
        <div class="flex items-center space-x-4">
            <!-- Time Range Selector -->
            <select 
                onchange="window.location.href='?days=' + this.value"
                class="px-3 py-2 border border-gray-300 rounded-lg bg-white text-sm"
            >
                <option value="7" {% if days == 7 %}selected{% endif %}>Last 7 days</option>
                <option value="30" {% if days == 30 %}selected{% endif %}>Last 30 days</option>
                <option value="90" {% if days == 90 %}selected{% endif %}>Last 90 days</option>
            </select>
            
            <!-- Export Button -->
            <a 
                href="{{ url_for('admin.analytics_export', days=days) }}"
                class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 flex items-center"
            >
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                          d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
                Export CSV
            </a>
        </div>
    </div>

    <!-- Summary Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
        <!-- Total Cost -->
        <div class="bg-white rounded-xl border p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500">Total Cost</p>
                    <p class="text-2xl font-bold text-gray-900">${{ "%.2f"|format(summary.total_cost_usd) }}</p>
                </div>
                <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                    <svg class="w-6 h-6 text-green-600" 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"/>
                    </svg>
                </div>
            </div>
        </div>

        <!-- Messages -->
        <div class="bg-white rounded-xl border p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500">Messages</p>
                    <p class="text-2xl font-bold text-gray-900">{{ summary.total_messages }}</p>
                </div>
                <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                    <svg class="w-6 h-6 text-blue-600" 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"/>
                    </svg>
                </div>
            </div>
        </div>

        <!-- Tool Calls -->
        <div class="bg-white rounded-xl border p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500">Tool Calls</p>
                    <p class="text-2xl font-bold text-gray-900">{{ summary.total_tool_calls }}</p>
                </div>
                <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                    <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                              d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                    </svg>
                </div>
            </div>
        </div>

        <!-- Tokens -->
        <div class="bg-white rounded-xl border p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500">Total Tokens</p>
                    <p class="text-2xl font-bold text-gray-900">{{ "{:,}".format(summary.total_tokens) }}</p>
                </div>
                <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center">
                    <svg class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                              d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/>
                    </svg>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Row -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Daily Cost Chart -->
        <div class="bg-white rounded-xl border p-6">
            <h2 class="text-lg font-semibold mb-4">Cost by Day</h2>
            <canvas id="costChart" height="200"></canvas>
        </div>

        <!-- User Distribution -->
        <div class="bg-white rounded-xl border p-6">
            <h2 class="text-lg font-semibold mb-4">Cost by User</h2>
            <canvas id="userChart" height="200"></canvas>
        </div>
    </div>

    <!-- Tables Row -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Top Users -->
        <div class="bg-white rounded-xl border">
            <div class="px-6 py-4 border-b">
                <h2 class="text-lg font-semibold">Top Users</h2>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">User</th>
                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Messages</th>
                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Cost</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        {% for user in top_users %}
                        <tr>
                            <td class="px-6 py-3 text-sm text-gray-900">{{ user.user_id[:20] }}...</td>
                            <td class="px-6 py-3 text-sm text-gray-600 text-right">{{ user.messages }}</td>
                            <td class="px-6 py-3 text-sm text-gray-900 text-right font-medium">${{ "%.2f"|format(user.cost) }}</td>
                        </tr>
                        {% else %}
                        <tr>
                            <td colspan="3" class="px-6 py-8 text-center text-gray-500">No usage data yet</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Top Skills -->
        <div class="bg-white rounded-xl border">
            <div class="px-6 py-4 border-b">
                <h2 class="text-lg font-semibold">Top Skills</h2>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Skill</th>
                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Calls</th>
                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Cost</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        {% for skill, data in summary.by_skill.items() %}
                        <tr>
                            <td class="px-6 py-3 text-sm text-gray-900">{{ skill }}</td>
                            <td class="px-6 py-3 text-sm text-gray-600 text-right">{{ data.calls }}</td>
                            <td class="px-6 py-3 text-sm text-gray-900 text-right font-medium">${{ "%.2f"|format(data.cost) }}</td>
                        </tr>
                        {% else %}
                        <tr>
                            <td colspan="3" class="px-6 py-8 text-center text-gray-500">No skill usage yet</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Daily cost chart
const costCtx = document.getElementById('costChart').getContext('2d');
new Chart(costCtx, {
    type: 'line',
    data: {
        labels: {{ [d[0] for d in daily_costs] | tojson }},
        datasets: [{
            label: 'Cost ($)',
            data: {{ [d[1] for d in daily_costs] | tojson }},
            borderColor: 'rgb(34, 197, 94)',
            backgroundColor: 'rgba(34, 197, 94, 0.1)',
            fill: true,
            tension: 0.3
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: { display: false }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    callback: function(value) {
                        return '$' + value.toFixed(2);
                    }
                }
            }
        }
    }
});

// User distribution chart
const userCtx = document.getElementById('userChart').getContext('2d');
const userData = {{ summary.by_user | tojson }};
const userLabels = Object.keys(userData).slice(0, 5).map(u => u.substring(0, 10) + '...');
const userCosts = Object.values(userData).slice(0, 5).map(d => d.cost);

new Chart(userCtx, {
    type: 'doughnut',
    data: {
        labels: userLabels,
        datasets: [{
            data: userCosts,
            backgroundColor: [
                'rgb(59, 130, 246)',
                'rgb(34, 197, 94)',
                'rgb(168, 85, 247)',
                'rgb(249, 115, 22)',
                'rgb(236, 72, 153)'
            ]
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: { position: 'right' }
        }
    }
});
</script>
{% endblock %}
