<x-app-layout title="Usage & billing">
    <div class="mx-auto max-w-2xl">
        <h1 class="text-xl font-semibold text-slate-900">Usage & billing</h1>
        <p class="mt-1 text-sm text-slate-600">{{ $organization->name }} · {{ ucfirst($tier) }} plan</p>

        <div class="mt-6 rounded-2xl border border-slate-200 bg-white p-6">
            <h2 class="font-medium text-slate-900">Pay-as-you-go rates</h2>
            <ul class="mt-3 space-y-2 text-sm text-slate-600">
                <li>Meetings & webinars: <span class="font-medium text-slate-900">GHS {{ number_format($billing->pricePerParticipantGhs(), 2) }} / participant</span> (peak attendance when a session ends)</li>
                <li>Recordings & shared files: <span class="font-medium text-slate-900">GHS {{ number_format($billing->pricePerGbMonthGhs(), 2) }} / GB / month</span> (same as Ladill Transfer)</li>
            </ul>
            <p class="mt-3 text-xs text-slate-500">Charges debit your Ladill wallet. Storage renews monthly; unpaid items enter a {{ $billing->gracePeriodDays() }}-day grace period before deletion.</p>
        </div>

        <div class="mt-6 space-y-4">
            @php
                $rows = [
                    'participant_count' => ['label' => 'Session participants', 'used' => number_format($summary['participant_count'] ?? 0), 'cost' => $costs['participants'] ?? 0],
                    'recording_storage_bytes' => ['label' => 'Recording storage', 'used' => number_format(($summary['recording_storage_bytes'] ?? 0) / 1073741824, 2).' GB', 'cost' => $costs['recording_storage'] ?? 0],
                    'file_storage_bytes' => ['label' => 'Shared file storage', 'used' => number_format(($summary['file_storage_bytes'] ?? 0) / 1073741824, 2).' GB', 'cost' => $costs['file_storage'] ?? 0],
                    'ai_minutes' => ['label' => 'AI minutes', 'used' => number_format($summary['ai_minutes'] ?? 0), 'cost' => null],
                ];
            @endphp

            @foreach ($rows as $metric => $row)
                @php
                    $limit = (int) ($quotas[$metric] ?? 0);
                    $pct = ($metric === 'participant_count' && $limit > 0)
                        ? min(100, round(((int) ($summary['participant_count'] ?? 0) / $limit) * 100))
                        : (($metric !== 'participant_count' && $limit > 0)
                            ? min(100, round(((int) ($summary[$metric] ?? 0) / $limit) * 100))
                            : 0);
                @endphp
                <div class="rounded-2xl border border-slate-200 bg-white p-6">
                    <div class="flex items-center justify-between gap-4">
                        <div>
                            <h2 class="font-medium text-slate-900">{{ $row['label'] }}</h2>
                            <p class="mt-1 text-sm text-slate-500">Last 30 days: {{ $row['used'] }}</p>
                        </div>
                        @if ($row['cost'] !== null)
                            <span class="text-sm font-medium text-slate-900">GHS {{ number_format($row['cost'], 2) }}</span>
                        @endif
                    </div>
                    @if ($limit > 0)
                        <div class="mt-3 flex items-center justify-between text-xs text-slate-500">
                            <span>Plan allowance</span>
                            <span>{{ $metric === 'participant_count' ? number_format($limit) : number_format($limit / 1073741824, 0).' GB' }}</span>
                        </div>
                        <div class="mt-2 h-2 overflow-hidden rounded-full bg-slate-100">
                            <div class="h-full rounded-full bg-indigo-500" style="width: {{ $pct }}%"></div>
                        </div>
                    @endif
                </div>
            @endforeach
        </div>
    </div>
</x-app-layout>
