<x-app-layout>
    <x-slot name="header">
        <div>
            <p class="text-sm font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-400">Growth</p>
            <h2 class="mt-1 text-2xl font-bold text-slate-950 dark:text-white">Referrals</h2>
        </div>
    </x-slot>

    <div class="space-y-8">
        <section class="grid gap-4 md:grid-cols-2">
            <div class="rounded-lg border border-blue-100 bg-white p-5 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
                <p class="text-sm font-medium text-slate-500 dark:text-slate-400">Total Referrals</p>
                <p class="mt-3 text-3xl font-black text-slate-950 dark:text-white">{{ number_format($totalReferrals) }}</p>
            </div>
            <div class="rounded-lg border border-blue-100 bg-white p-5 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
                <p class="text-sm font-medium text-slate-500 dark:text-slate-400">Top Referrers</p>
                <p class="mt-3 text-3xl font-black text-blue-600 dark:text-blue-400">{{ $topReferrers->count() }}</p>
            </div>
        </section>

        <section class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
            <h3 class="text-lg font-bold text-slate-950 dark:text-white">Top Referrers</h3>
            <div class="mt-4 grid gap-3 md:grid-cols-2 xl:grid-cols-3">
                @forelse ($topReferrers as $user)
                    <div class="rounded-lg border border-blue-100 p-4 dark:border-blue-900/50">
                        <p class="font-bold text-slate-950 dark:text-white">{{ $user->name }}</p>
                        <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">{{ $user->email }}</p>
                        <p class="mt-3 text-sm font-black text-blue-600 dark:text-blue-300">{{ $user->referrals_count }} referrals</p>
                    </div>
                @empty
                    <p class="text-sm text-slate-500 dark:text-slate-400">No referrals yet.</p>
                @endforelse
            </div>
        </section>

        <section class="overflow-hidden rounded-lg border border-blue-100 bg-white shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
            <div class="border-b border-blue-100 p-6 dark:border-blue-900/50">
                <h3 class="text-lg font-bold text-slate-950 dark:text-white">Referral Records</h3>
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-blue-100 dark:divide-blue-900/50">
                    <thead class="bg-blue-50 dark:bg-blue-950/40">
                        <tr>
                            <th class="px-4 py-3 text-left text-xs font-bold uppercase tracking-wide text-blue-700 dark:text-blue-300">New User</th>
                            <th class="px-4 py-3 text-left text-xs font-bold uppercase tracking-wide text-blue-700 dark:text-blue-300">Referred By</th>
                            <th class="px-4 py-3 text-left text-xs font-bold uppercase tracking-wide text-blue-700 dark:text-blue-300">Date</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-blue-50 bg-white dark:divide-blue-900/40 dark:bg-slate-900">
                        @forelse ($referrals as $referral)
                            <tr>
                                <td class="px-4 py-4 text-sm font-semibold text-slate-950 dark:text-white">{{ $referral->name }}</td>
                                <td class="px-4 py-4 text-sm text-slate-600 dark:text-slate-300">{{ $referral->referredBy?->name ?? 'Unknown' }}</td>
                                <td class="px-4 py-4 text-sm text-slate-600 dark:text-slate-300">{{ $referral->created_at->format('M d, Y') }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="3" class="px-4 py-10 text-center text-sm text-slate-500 dark:text-slate-400">No referral records yet.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="border-t border-blue-100 px-4 py-3 dark:border-blue-900/50">{{ $referrals->links() }}</div>
        </section>
    </div>
</x-app-layout>
