@extends('layouts.app')

@section('title', 'Consumo de IA')

@section('content')
<div class="max-w-6xl mx-auto py-8 px-4 space-y-6">

    <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
        <i class="fa-solid fa-chart-bar mr-2 text-violet-500"></i>Consumo de IA
    </h1>

    {{-- Totales globales --}}
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        @foreach([
            ['Llamadas totales',   $totals->calls     ?? 0,  'fa-bolt',    'blue'],
            ['Tokens entrada',     number_format($totals->ti ?? 0),  'fa-arrow-right-to-bracket', 'violet'],
            ['Tokens salida',      number_format($totals->to_ ?? 0), 'fa-arrow-right-from-bracket', 'purple'],
            ['Costo estimado',     '$'.number_format($totals->cost ?? 0, 4), 'fa-dollar-sign', 'amber'],
        ] as [$label, $val, $icon, $color])
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-4 flex items-center gap-3">
            <div class="w-10 h-10 rounded-full bg-{{ $color }}-100 dark:bg-{{ $color }}-900/30 flex items-center justify-center">
                <i class="fa-solid {{ $icon }} text-{{ $color }}-600 dark:text-{{ $color }}-400"></i>
            </div>
            <div>
                <p class="text-xs text-gray-500 dark:text-gray-400">{{ $label }}</p>
                <p class="text-lg font-bold text-gray-800 dark:text-white">{{ $val }}</p>
            </div>
        </div>
        @endforeach
    </div>

    {{-- Top usuarios --}}
    @if($byUser->count())
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-5">
        <h2 class="font-semibold text-gray-700 dark:text-gray-300 mb-3 text-sm">Top 10 usuarios por consumo</h2>
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="text-xs text-gray-500 dark:text-gray-400 border-b dark:border-gray-700">
                        <th class="text-left py-2 pr-4">Usuario</th>
                        <th class="text-right pr-4">Tokens totales</th>
                        <th class="text-right pr-4">Llamadas</th>
                        <th class="text-right">Costo estimado</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
                    @foreach($byUser as $row)
                    <tr>
                        <td class="py-2 pr-4 font-medium text-gray-800 dark:text-gray-200">{{ $row->user->name ?? 'Eliminado' }}</td>
                        <td class="text-right pr-4 text-gray-600 dark:text-gray-400">{{ number_format($row->total_tokens) }}</td>
                        <td class="text-right pr-4 text-gray-600 dark:text-gray-400">{{ $row->calls }}</td>
                        <td class="text-right text-gray-600 dark:text-gray-400">${{ number_format($row->total_cost, 4) }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @endif

    {{-- Filtros --}}
    <form method="GET" action="{{ route('admin.ai-usage.index') }}" class="flex flex-wrap gap-3 items-end">
        <div>
            <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Usuario</label>
            <select name="user_id" class="border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-violet-500">
                <option value="">Todos</option>
                @foreach($users as $u)
                    <option value="{{ $u->id }}" @selected(request('user_id') == $u->id)>{{ $u->name }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Tipo</label>
            <select name="type" class="border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-violet-500">
                <option value="">Todos</option>
                <option value="summary" @selected(request('type') === 'summary')>Resumen</option>
                <option value="tags" @selected(request('type') === 'tags')>Etiquetas</option>
            </select>
        </div>
        <div>
            <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Mes (YYYY-MM)</label>
            <input type="month" name="month" value="{{ request('month') }}"
                   class="border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-violet-500">
        </div>
        <button type="submit" class="px-4 py-2 bg-violet-600 hover:bg-violet-700 text-white text-sm rounded-lg">Filtrar</button>
        <a href="{{ route('admin.ai-usage.index') }}" class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm rounded-lg">Limpiar</a>
    </form>

    {{-- Tabla de logs --}}
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-gray-50 dark:bg-gray-700/50">
                    <tr class="text-xs text-gray-500 dark:text-gray-400 border-b dark:border-gray-700">
                        <th class="text-left px-4 py-3">Fecha</th>
                        <th class="text-left px-4 py-3">Usuario</th>
                        <th class="text-left px-4 py-3">Tipo</th>
                        <th class="text-left px-4 py-3">Modelo</th>
                        <th class="text-right px-4 py-3">Tokens In</th>
                        <th class="text-right px-4 py-3">Tokens Out</th>
                        <th class="text-right px-4 py-3">Costo</th>
                        <th class="text-center px-4 py-3">Estado</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
                    @forelse($logs as $log)
                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/30">
                        <td class="px-4 py-2.5 text-gray-500 dark:text-gray-400 whitespace-nowrap">{{ $log->created_at->format('d/m/y H:i') }}</td>
                        <td class="px-4 py-2.5 text-gray-700 dark:text-gray-300">{{ $log->user->name ?? '—' }}</td>
                        <td class="px-4 py-2.5">
                            <span class="text-xs px-2 py-0.5 rounded
                                @if($log->request_type === 'summary') bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300
                                @else bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-300 @endif">
                                {{ $log->request_type }}
                            </span>
                        </td>
                        <td class="px-4 py-2.5 text-gray-500 dark:text-gray-400 text-xs">{{ $log->model }}</td>
                        <td class="px-4 py-2.5 text-right text-gray-600 dark:text-gray-400">{{ number_format($log->tokens_input) }}</td>
                        <td class="px-4 py-2.5 text-right text-gray-600 dark:text-gray-400">{{ number_format($log->tokens_output) }}</td>
                        <td class="px-4 py-2.5 text-right text-gray-600 dark:text-gray-400">${{ number_format($log->cost_estimate ?? 0, 5) }}</td>
                        <td class="px-4 py-2.5 text-center">
                            <span class="text-xs px-2 py-0.5 rounded
                                @if($log->status === 'completed') bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400
                                @else bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400 @endif">
                                {{ $log->status }}
                            </span>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="px-4 py-10 text-center text-gray-400 dark:text-gray-500">
                            No hay registros de consumo todavía.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($logs->hasPages())
        <div class="px-4 py-3 border-t dark:border-gray-700">
            {{ $logs->links() }}
        </div>
        @endif
    </div>
</div>
@endsection