{{--
    文件功能：风云排行榜页面
    展示等级榜、经验榜、财富榜、魅力榜四大排行

    @extends layouts.app
--}}
@extends('layouts.app')

@section('title', '风云排行榜 - 飘落流星')

@section('nav-icon', '🏆')
@section('nav-title', '风云排行榜')





@section('content')
    {{-- 说明条 --}}
    <div class="bg-indigo-50 border-b border-indigo-100 py-3 shrink-0">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center text-sm">
            <p class="text-indigo-800 font-medium">✨ 累计榜每 <span class="font-bold text-red-500">15分钟</span>
                刷新，今日榜每 <span class="font-bold text-green-600">5分钟</span> 刷新。努力提升自己，让全服铭记你的名字！</p>
            <a href="{{ route('currency.my-logs') }}" class="text-indigo-600 font-semibold hover:underline text-xs">📊
                查看我的积分日志 →</a>
        </div>
    </div>

    {{-- 滚动内容区 --}}
    <main class="p-4 sm:p-6 lg:p-8">
        <div class="max-w-7xl mx-auto">

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">

                {{-- 1. 境界榜 (user_level) --}}
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden flex flex-col">
                    <div
                        class="bg-gradient-to-r from-red-600 to-red-500 px-4 py-3 flex justify-between items-center text-white">
                        <h2 class="font-bold text-lg flex items-center"><span class="mr-2 text-xl">👑</span> 无上境界榜
                        </h2>
                        <span class="text-xs bg-red-800/40 px-2 py-0.5 rounded">Level</span>
                    </div>
                    <div class="p-0 overflow-y-auto max-h-[600px] flex-1">
                        @include('leaderboard.partials.list', [
                            'users' => $topLevels,
                            'valueField' => 'user_level',
                            'unit' => '级',
                            'color' => 'text-red-600',
                        ])
                    </div>
                </div>

                {{-- 2. 修为榜 (exp_num) --}}
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden flex flex-col">
                    <div
                        class="bg-gradient-to-r from-amber-600 to-amber-500 px-4 py-3 flex justify-between items-center text-white">
                        <h2 class="font-bold text-lg flex items-center"><span class="mr-2 text-xl">🔥</span> 苦修经验榜
                        </h2>
                        <span class="text-xs bg-amber-800/40 px-2 py-0.5 rounded">Exp</span>
                    </div>
                    <div class="p-0 overflow-y-auto max-h-[600px] flex-1">
                        @include('leaderboard.partials.list', [
                            'users' => $topExp,
                            'valueField' => 'exp_num',
                            'unit' => '点',
                            'color' => 'text-amber-600',
                        ])
                    </div>
                </div>

                {{-- 3. 财富榜 (jjb) --}}
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden flex flex-col">
                    <div
                        class="bg-gradient-to-r from-yellow-500 to-yellow-400 px-4 py-3 flex justify-between items-center text-white">
                        <h2 class="font-bold text-lg flex items-center text-yellow-900"><span class="mr-2 text-xl">💰</span>
                            盖世神豪榜</h2>
                        <span class="text-xs bg-yellow-800/20 text-yellow-900 px-2 py-0.5 rounded">Coin</span>
                    </div>
                    <div class="p-0 overflow-y-auto max-h-[600px] flex-1">
                        @include('leaderboard.partials.list', [
                            'users' => $topWealth,
                            'valueField' => 'jjb',
                            'unit' => '枚',
                            'color' => 'text-yellow-600',
                        ])
                    </div>
                </div>

                {{-- 4. 魅力榜 (meili) --}}
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden flex flex-col">
                    <div
                        class="bg-gradient-to-r from-pink-600 to-pink-500 px-4 py-3 flex justify-between items-center text-white">
                        <h2 class="font-bold text-lg flex items-center"><span class="mr-2 text-xl">🌸</span> 绝世名伶榜
                        </h2>
                        <span class="text-xs bg-pink-800/40 px-2 py-0.5 rounded">Charm</span>
                    </div>
                    <div class="p-0 overflow-y-auto max-h-[600px] flex-1">
                        @include('leaderboard.partials.list', [
                            'users' => $topCharm,
                            'valueField' => 'meili',
                            'unit' => '点',
                            'color' => 'text-pink-600',
                        ])
                    </div>
                </div>

            </div>

        </div>

        {{-- ═══ 今日榜（每5分钟更新，来自流水记录表）═══ --}}
        <h2 class="text-lg font-bold text-gray-700 mt-10 mb-4 flex items-center gap-2">
            <span>📅</span> 今日排行榜
            <span class="text-xs text-gray-400 font-normal">（今日获得量排名，5分钟更新）</span>
        </h2>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">

            {{-- 今日经验榜 --}}
            <div class="bg-white rounded-xl shadow-sm border border-amber-200 overflow-hidden">
                <div
                    class="bg-gradient-to-r from-amber-500 to-orange-400 px-4 py-3 flex justify-between items-center text-white">
                    <h2 class="font-bold text-lg">⚡ 今日修为榜</h2>
                    <span class="text-xs bg-amber-800/30 px-2 py-0.5 rounded">今日Exp</span>
                </div>
                <div class="p-0 overflow-y-auto max-h-64">
                    @if ($todayExp->isEmpty())
                        <p class="text-center text-gray-400 py-8 text-sm">今日暂无记录</p>
                    @else
                        @foreach ($todayExp as $i => $row)
                            <div class="flex items-center gap-3 px-4 py-2 border-b border-gray-50 hover:bg-amber-50">
                                <span class="w-6 text-center font-bold text-gray-400">{{ $i + 1 }}</span>
                                <span class="flex-1 text-sm font-medium truncate">{{ $row->username }}</span>
                                <span class="text-amber-600 font-semibold text-sm">+{{ number_format($row->total) }}</span>
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>

            {{-- 今日金币榜 --}}
            <div class="bg-white rounded-xl shadow-sm border border-yellow-200 overflow-hidden">
                <div
                    class="bg-gradient-to-r from-yellow-500 to-yellow-400 px-4 py-3 flex justify-between items-center text-yellow-900">
                    <h2 class="font-bold text-lg">💰 今日财富榜</h2>
                    <span class="text-xs bg-yellow-800/20 px-2 py-0.5 rounded">今日Coin</span>
                </div>
                <div class="p-0 overflow-y-auto max-h-64">
                    @if ($todayGold->isEmpty())
                        <p class="text-center text-gray-400 py-8 text-sm">今日暂无记录</p>
                    @else
                        @foreach ($todayGold as $i => $row)
                            <div class="flex items-center gap-3 px-4 py-2 border-b border-gray-50 hover:bg-yellow-50">
                                <span class="w-6 text-center font-bold text-gray-400">{{ $i + 1 }}</span>
                                <span class="flex-1 text-sm font-medium truncate">{{ $row->username }}</span>
                                <span class="text-yellow-600 font-semibold text-sm">+{{ number_format($row->total) }}</span>
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>

            {{-- 今日魅力榜 --}}
            <div class="bg-white rounded-xl shadow-sm border border-pink-200 overflow-hidden">
                <div
                    class="bg-gradient-to-r from-pink-500 to-rose-400 px-4 py-3 flex justify-between items-center text-white">
                    <h2 class="font-bold text-lg">🌸 今日魅力榜</h2>
                    <span class="text-xs bg-pink-800/30 px-2 py-0.5 rounded">今日Charm</span>
                </div>
                <div class="p-0 overflow-y-auto max-h-64">
                    @if ($todayCharm->isEmpty())
                        <p class="text-center text-gray-400 py-8 text-sm">今日暂无记录</p>
                    @else
                        @foreach ($todayCharm as $i => $row)
                            <div class="flex items-center gap-3 px-4 py-2 border-b border-gray-50 hover:bg-pink-50">
                                <span class="w-6 text-center font-bold text-gray-400">{{ $i + 1 }}</span>
                                <span class="flex-1 text-sm font-medium truncate">{{ $row->username }}</span>
                                <span class="text-pink-600 font-semibold text-sm">+{{ number_format($row->total) }}</span>
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>

        </div>

        </div>
    </main>
@endsection