<x-app-layout>
    <div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
        <div class="flex flex-wrap items-center justify-between gap-3">
            <div>
                <p class="text-sm font-black uppercase tracking-wide text-blue-600 dark:text-blue-300">Admin Community</p>
                <h1 class="mt-2 text-3xl font-black text-slate-950 dark:text-white">Community Management</h1>
            </div>
            <form method="POST" action="{{ route('admin.community.rankings.refresh') }}">@csrf <button class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-black text-white">Refresh Rankings</button></form>
        </div>
        <div class="mt-6 grid gap-4 md:grid-cols-5">
            @foreach ([['Posts',$totalPosts],['Pending',$pendingPosts],['Open Reports',$reportedPosts],['Messages',$messagesCount],['Banned',$bannedUsers]] as [$label,$value])
                <div class="rounded-lg border border-blue-100 bg-white p-5 dark:border-blue-900/50 dark:bg-slate-900">
                    <p class="text-sm text-slate-500 dark:text-slate-400">{{ $label }}</p>
                    <p class="mt-2 text-3xl font-black text-slate-950 dark:text-white">{{ $value }}</p>
                </div>
            @endforeach
        </div>
        <div class="mt-6 grid gap-4 md:grid-cols-3">
            <a href="{{ route('admin.community.posts') }}" class="rounded-lg border border-blue-100 bg-white p-5 font-black text-blue-700 dark:border-blue-900/50 dark:bg-slate-900 dark:text-blue-300">Moderate Posts</a>
            <a href="{{ route('admin.community.reports') }}" class="rounded-lg border border-blue-100 bg-white p-5 font-black text-blue-700 dark:border-blue-900/50 dark:bg-slate-900 dark:text-blue-300">Reported Posts</a>
            <a href="{{ route('admin.community.settings') }}" class="rounded-lg border border-blue-100 bg-white p-5 font-black text-blue-700 dark:border-blue-900/50 dark:bg-slate-900 dark:text-blue-300">Community Settings</a>
            <a href="{{ route('admin.community.categories') }}" class="rounded-lg border border-blue-100 bg-white p-5 font-black text-blue-700 dark:border-blue-900/50 dark:bg-slate-900 dark:text-blue-300">Categories</a>
            <a href="{{ route('admin.community.messages') }}" class="rounded-lg border border-blue-100 bg-white p-5 font-black text-blue-700 dark:border-blue-900/50 dark:bg-slate-900 dark:text-blue-300">Chat Messages</a>
        </div>
        <div class="mt-8 rounded-lg border border-blue-100 bg-white p-6 dark:border-blue-900/50 dark:bg-slate-900">
            <h2 class="text-xl font-black text-slate-950 dark:text-white">Best Traders This Week</h2>
            <div class="mt-4 space-y-3">
                @forelse ($topTraders as $ranking)
                    <div class="flex items-center justify-between rounded-lg bg-blue-50 p-4 dark:bg-blue-950/30">
                        <span class="font-bold text-slate-900 dark:text-white">#{{ $ranking->rank }} {{ $ranking->user->name }}</span>
                        <span class="font-black text-blue-700 dark:text-blue-200">{{ $ranking->score }} pts</span>
                    </div>
                @empty
                    <p class="text-sm text-slate-500 dark:text-slate-400">No ranked traders yet.</p>
                @endforelse
            </div>
        </div>
    </div>
</x-app-layout>
