@extends('layouts.admin')
@section('title', 'AI Usage')

@section('admin')
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    @include('admin._nav')
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-2xl font-bold text-white">AI usage — {{ $periodStart->format('F Y') }}</h1>
        <div class="text-3xl text-green-300 font-bold">${{ number_format($totalUsd, 4) }}</div>
    </div>

    <div class="bg-gray-900 border border-gray-800 rounded-xl overflow-hidden mb-6">
        <table class="w-full text-sm">
            <thead class="bg-gray-950 text-gray-400 uppercase text-xs">
                <tr><th class="text-left p-3">Provider</th><th class="text-left p-3">Operation</th><th class="text-right p-3">Calls</th><th class="text-right p-3">Tokens (in/out)</th><th class="text-right p-3">Images</th><th class="text-right p-3">Cost USD</th></tr>
            </thead>
            <tbody class="divide-y divide-gray-800">
                @forelse($rows as $r)
                    <tr>
                        <td class="p-3 text-gray-300">{{ $r->provider }}</td>
                        <td class="p-3 text-gray-300">{{ $r->operation }}</td>
                        <td class="p-3 text-right text-white">{{ number_format($r->calls) }}</td>
                        <td class="p-3 text-right text-gray-300">{{ number_format($r->in_tok) }} / {{ number_format($r->out_tok) }}</td>
                        <td class="p-3 text-right text-gray-300">{{ number_format($r->imgs) }}</td>
                        <td class="p-3 text-right text-green-300 font-mono">${{ number_format($r->cost_micro / 1_000_000, 4) }}</td>
                    </tr>
                @empty
                    <tr><td colspan="6" class="p-6 text-center text-gray-500">No AI calls this month yet.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <h2 class="text-lg text-white font-semibold mb-3">Recent calls</h2>
    <div class="bg-gray-900 border border-gray-800 rounded-xl overflow-hidden">
        <table class="w-full text-xs">
            <thead class="bg-gray-950 text-gray-400 uppercase">
                <tr><th class="text-left p-2">When</th><th class="text-left p-2">User</th><th class="text-left p-2">Provider</th><th class="text-left p-2">Op</th><th class="text-left p-2">Status</th><th class="text-right p-2">Cost</th></tr>
            </thead>
            <tbody class="divide-y divide-gray-800">
                @foreach($recent as $u)
                    <tr>
                        <td class="p-2 text-gray-400">{{ $u->created_at?->diffForHumans() }}</td>
                        <td class="p-2 text-gray-300">{{ optional($u->user)->email ?? '—' }}</td>
                        <td class="p-2 text-gray-300">{{ $u->provider }}</td>
                        <td class="p-2 text-gray-300">{{ $u->operation }}</td>
                        <td class="p-2"><span class="{{ $u->status==='ok' ? 'text-green-400' : 'text-red-400' }}">{{ $u->status }}</span></td>
                        <td class="p-2 text-right font-mono text-gray-300">${{ number_format($u->cost_usd_micro / 1_000_000, 5) }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection