<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-100 leading-tight">
            {{ __('Utilisation & quotas') }}
        </h2>
    </x-slot>

    <div class="max-w-7xl mx-auto py-8 px-4">
        <div class="bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg p-6">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                    <thead>
                        <tr class="text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                            <th class="px-4 py-3">{{ __('Nom') }}</th>
                            <th class="px-4 py-3">{{ __('Email') }}</th>
                            <th class="px-4 py-3">{{ __('Rôle') }}</th>
                            <th class="px-4 py-3">{{ __('Tokens (mois)') }}</th>
                            <th class="px-4 py-3">{{ __('Quota') }}</th>
                            <th class="px-4 py-3 w-64">{{ __('% utilisé') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200 dark:divide-gray-700 text-sm text-gray-800 dark:text-gray-100">
                        @foreach ($users as $user)
                            @php
                                $tokens = $user->tokensUsedThisMonth();
                                $quota = $user->monthlyTokenQuota();
                                $percent = $quota === null ? null : min(100, round($tokens / max(1, $quota) * 100));
                            @endphp
                            <tr>
                                <td class="px-4 py-3 whitespace-nowrap">{{ $user->name }}</td>
                                <td class="px-4 py-3 whitespace-nowrap">{{ $user->email }}</td>
                                <td class="px-4 py-3 whitespace-nowrap">{{ $user->role }}</td>
                                <td class="px-4 py-3 whitespace-nowrap">{{ number_format($tokens, 0, ',', ' ') }}</td>
                                <td class="px-4 py-3 whitespace-nowrap">
                                    @if ($quota === null)
                                        {{ __('Illimité') }}
                                    @else
                                        {{ number_format($quota, 0, ',', ' ') }}
                                    @endif
                                </td>
                                <td class="px-4 py-3">
                                    @if ($quota === null)
                                        <span class="text-gray-500 dark:text-gray-400">&mdash;</span>
                                    @else
                                        <div class="flex items-center gap-2">
                                            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded h-2">
                                                <div class="{{ $percent >= 90 ? 'bg-red-600' : 'bg-indigo-600' }} h-2 rounded" style="width: {{ $percent }}%"></div>
                                            </div>
                                            <span class="text-xs text-gray-600 dark:text-gray-400 whitespace-nowrap">{{ $percent }}%</span>
                                        </div>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</x-app-layout>
