{{--
    文件功能：今日风云榜页面（独立页）
    展示今日经验成长榜、今日金币获得榜、今日魅力增长榜
    数据来自 user_currency_logs 流水表，5分钟缓存刷新
    风格与累计风云榜一致

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

@section('title', '今日风云榜 - 飘落流星')

@section('nav-icon', '📅')
@section('nav-title', '今日风云榜')

@section('content')
    {{-- 说明条 --}}
    <div class="bg-green-50 border-b border-green-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-green-800 font-medium">🌅 今日榜每 <span class="font-bold text-red-500">5分钟</span>
                自动刷新，统计今日所有正向积分获得量，凌晨清零重启。</p>
            <div class="flex items-center gap-4">
                <a href="{{ route('leaderboard.index') }}" class="text-indigo-600 font-semibold hover:underline text-xs">🏆
                    查看累计风云榜 →</a>
                <a href="{{ route('currency.my-logs') }}" class="text-green-600 font-semibold hover:underline text-xs">📊
                    我的积分日志 →</a>
            </div>
        </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-3 gap-6">

                {{-- 今日经验榜 --}}
                <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">
                        @if ($todayExp->isEmpty())
                            <div class="flex flex-col items-center justify-center py-16 text-gray-400">
                                <span class="text-4xl mb-2">😴</span>
                                <p class="text-sm">今日暂无记录</p>
                            </div>
                        @else
                            @foreach ($todayExp as $i => $row)
                                <div
                                    class="flex items-center gap-3 px-4 py-2.5 border-b border-gray-50 hover:bg-amber-50 transition">
                                    @if ($i === 0)
                                        <span class="w-6 text-center text-lg">🥇</span>
                                    @elseif ($i === 1)
                                        <span class="w-6 text-center text-lg">🥈</span>
                                    @elseif ($i === 2)
                                        <span class="w-6 text-center text-lg">🥉</span>
                                    @else
                                        <span
                                            class="w-6 text-center text-sm font-bold text-gray-400">{{ $i + 1 }}</span>
                                    @endif
                                    <span class="flex-1 text-sm font-medium truncate">{{ $row->username }}</span>
                                    <span class="text-amber-600 font-bold text-sm">+{{ number_format($row->total) }}</span>
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>

                {{-- 今日金币榜 --}}
                <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-yellow-900">
                        <h2 class="font-bold text-lg flex items-center"><span class="mr-2 text-xl">💰</span> 今日财富榜</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-[600px] flex-1">
                        @if ($todayGold->isEmpty())
                            <div class="flex flex-col items-center justify-center py-16 text-gray-400">
                                <span class="text-4xl mb-2">😴</span>
                                <p class="text-sm">今日暂无记录</p>
                            </div>
                        @else
                            @foreach ($todayGold as $i => $row)
                                <div
                                    class="flex items-center gap-3 px-4 py-2.5 border-b border-gray-50 hover:bg-yellow-50 transition">
                                    @if ($i === 0)
                                        <span class="w-6 text-center text-lg">🥇</span>
                                    @elseif ($i === 1)
                                        <span class="w-6 text-center text-lg">🥈</span>
                                    @elseif ($i === 2)
                                        <span class="w-6 text-center text-lg">🥉</span>
                                    @else
                                        <span
                                            class="w-6 text-center text-sm font-bold text-gray-400">{{ $i + 1 }}</span>
                                    @endif
                                    <span class="flex-1 text-sm font-medium truncate">{{ $row->username }}</span>
                                    <span class="text-yellow-600 font-bold text-sm">+{{ number_format($row->total) }}</span>
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>

                {{-- 今日魅力榜 --}}
                <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">
                        @if ($todayCharm->isEmpty())
                            <div class="flex flex-col items-center justify-center py-16 text-gray-400">
                                <span class="text-4xl mb-2">😴</span>
                                <p class="text-sm">今日暂无记录</p>
                            </div>
                        @else
                            @foreach ($todayCharm as $i => $row)
                                <div
                                    class="flex items-center gap-3 px-4 py-2.5 border-b border-gray-50 hover:bg-pink-50 transition">
                                    @if ($i === 0)
                                        <span class="w-6 text-center text-lg">🥇</span>
                                    @elseif ($i === 1)
                                        <span class="w-6 text-center text-lg">🥈</span>
                                    @elseif ($i === 2)
                                        <span class="w-6 text-center text-lg">🥉</span>
                                    @else
                                        <span
                                            class="w-6 text-center text-sm font-bold text-gray-400">{{ $i + 1 }}</span>
                                    @endif
                                    <span class="flex-1 text-sm font-medium truncate">{{ $row->username }}</span>
                                    <span class="text-pink-600 font-bold text-sm">+{{ number_format($row->total) }}</span>
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>

            </div>

            <p class="text-center text-xs text-gray-400 mt-6">凌晨 00:00 自动重置 · 数据每 5 分钟刷新</p>
        </div>
    </main>
@endsection