<x-app-layout title="{{ $label }}">
    <div class="flex flex-wrap items-center justify-between gap-4">
        <div>
            <h1 class="text-xl font-semibold text-slate-900">{{ $label }}</h1>
            <p class="mt-1 text-sm text-slate-500">{{ $from }} — {{ $to }}</p>
        </div>
        @if ($canExport)
            <a href="{{ route('meet.reports.export', ['type' => $type, 'from' => $from, 'to' => $to, 'branch_id' => $branchId]) }}" class="btn-primary">Export CSV</a>
        @endif
    </div>

    <form method="GET" class="mt-4 flex flex-wrap gap-3 rounded-2xl border border-slate-200 bg-white p-4">
        <input type="date" name="from" value="{{ $from }}" class="rounded-lg border-slate-300 text-sm">
        <input type="date" name="to" value="{{ $to }}" class="rounded-lg border-slate-300 text-sm">
        @if ($branches->isNotEmpty())
            <select name="branch_id" class="rounded-lg border-slate-300 text-sm">
                <option value="">All branches</option>
                @foreach ($branches as $branch)
                    <option value="{{ $branch->id }}" @selected($branchId == $branch->id)>{{ $branch->name }}</option>
                @endforeach
            </select>
        @endif
        <button type="submit" class="rounded-lg border border-slate-300 px-4 py-2 text-sm hover:bg-slate-50">Apply</button>
    </form>

    <div class="mt-6 rounded-2xl border border-slate-200 bg-white p-6">
        @if ($type === 'meetings')
            <dl class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                <div><dt class="text-xs uppercase text-slate-500">Total</dt><dd class="text-2xl font-semibold">{{ $data['total'] }}</dd></div>
            </dl>
            <div class="mt-6 overflow-x-auto">
                <table class="min-w-full text-sm">
                    <thead><tr class="border-b text-left text-slate-500"><th class="py-2">Title</th><th>Status</th><th>Peak</th><th>RSVP</th></tr></thead>
                    <tbody>
                        @foreach ($data['rows'] as $row)
                            <tr class="border-b border-slate-100">
                                <td class="py-2 font-medium">{{ $row['title'] }}</td>
                                <td>{{ $row['status'] }}</td>
                                <td>{{ $row['peak_participants'] }}</td>
                                <td>{{ $row['accepted'] }}/{{ $row['invitations'] }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @elseif ($type === 'users')
            <dl class="grid gap-4 sm:grid-cols-3">
                <div><dt class="text-xs uppercase text-slate-500">Unique participants</dt><dd class="text-2xl font-semibold">{{ $data['unique_participants'] }}</dd></div>
                <div><dt class="text-xs uppercase text-slate-500">Unique hosts</dt><dd class="text-2xl font-semibold">{{ $data['unique_hosts'] }}</dd></div>
            </dl>
            <ul class="mt-6 divide-y divide-slate-100 text-sm">
                @foreach ($data['top_users'] as $user)
                    <li class="flex justify-between py-2"><span>{{ $user['display_name'] }}</span><span class="text-slate-500">{{ $user['minutes'] }} min · {{ $user['meetings_joined'] }} meetings</span></li>
                @endforeach
            </ul>
        @elseif ($type === 'invitations')
            <dl class="grid gap-4 sm:grid-cols-4">
                <div><dt class="text-xs uppercase text-slate-500">Sent</dt><dd class="text-2xl font-semibold">{{ $data['total'] }}</dd></div>
                <div><dt class="text-xs uppercase text-slate-500">Accepted</dt><dd class="text-2xl font-semibold text-emerald-600">{{ $data['accepted'] }}</dd></div>
                <div><dt class="text-xs uppercase text-slate-500">Declined</dt><dd class="text-2xl font-semibold">{{ $data['declined'] }}</dd></div>
                <div><dt class="text-xs uppercase text-slate-500">Accept rate</dt><dd class="text-2xl font-semibold">{{ $data['acceptance_rate'] }}%</dd></div>
            </dl>
        @elseif ($type === 'branches')
            <div class="overflow-x-auto">
                <table class="min-w-full text-sm">
                    <thead><tr class="border-b text-left text-slate-500"><th class="py-2">Branch</th><th>Scheduled</th><th>Sessions</th><th>Minutes</th><th>Recordings</th></tr></thead>
                    <tbody>
                        @foreach ($data as $row)
                            <tr class="border-b border-slate-100">
                                <td class="py-2 font-medium">{{ $row['branch_name'] }}</td>
                                <td>{{ $row['meetings_scheduled'] }}</td>
                                <td>{{ $row['sessions_held'] }}</td>
                                <td>{{ $row['total_minutes'] }}</td>
                                <td>{{ $row['recordings_count'] }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <dl class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                @foreach ($data as $key => $value)
                    @if (! is_array($value))
                        <div><dt class="text-xs uppercase text-slate-500">{{ str_replace('_', ' ', $key) }}</dt><dd class="text-2xl font-semibold">{{ is_numeric($value) && $key === 'recording_storage_bytes' ? number_format($value / 1024 / 1024, 1).' MB' : $value }}</dd></div>
                    @endif
                @endforeach
            </dl>
        @endif
    </div>
</x-app-layout>
