@extends('layouts.app')

@section('title', '风云排行榜')

@section('content')
    <div class="h-screen w-full flex flex-col bg-gray-100 overflow-hidden font-sans">

        <!-- 顶部导航条 -->
        <header class="bg-indigo-900 border-b border-indigo-800 text-white shadow-md relative z-20 shrink-0">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex items-center justify-between h-16">
                    <!-- 左侧：标题与返回大厅 -->
                    <div class="flex items-center space-x-4">
                        <a href="{{ route('rooms.index') }}"
                            class="text-indigo-200 hover:text-white transition flex items-center group">
                            <svg class="w-5 h-5 mr-1 transform group-hover:-translate-x-1 transition" fill="none"
                                stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                            </svg>
                            返回大厅
                        </a>
                        <div class="h-6 w-px bg-indigo-700"></div>
                        <div class="flex items-center space-x-2">
                            <span class="text-xl">🏆</span>
                            <h1 class="text-xl font-extrabold tracking-wider">风云排行榜</h1>
                        </div>
                    </div>

                    <!-- 右侧：当前用户状态 -->
                    <div class="flex items-center space-x-3 text-sm">
                        <img src="/images/headface/{{ Auth::user()->headface ?? '01.gif' }}"
                            class="w-8 h-8 rounded border border-indigo-500 object-cover bg-white">
                        <div class="hidden sm:block">
                            <span class="font-bold">{{ Auth::user()->username }}</span>
                            <span class="text-indigo-300 ml-2">LV.{{ Auth::user()->user_level }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!-- 说明条 -->
        <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>
                    自动刷新一次。努力提升自己，让全服铭记你的名字！</p>
            </div>
        </div>

        <!-- 滚动内容区 -->
        <main class="flex-1 overflow-y-auto 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>
        </main>
    </div>
@endsection