{{--
    文件功能：邀请排行达人榜
    展示全站前 50 名邀请人数最多的用户
--}}
@extends('layouts.app')

@section('title', '新星邀请达人榜 - 飘落流星')

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

@section('content')
    <div class="max-w-7xl mx-auto py-10 px-4 sm:px-6 lg:px-8">

        {{-- 顶部说明区域 --}}
        <div
            class="mb-8 bg-gradient-to-r from-rose-50 to-indigo-50 rounded-2xl p-6 md:p-10 shadow-sm border border-rose-100 flex flex-col md:flex-row items-center justify-between gap-6">
            <div>
                <h2
                    class="text-3xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-rose-600 to-indigo-600 mb-2">
                    新星崛起·邀请达人榜
                </h2>
                <p class="text-rose-900/80 text-sm md:text-base max-w-2xl">
                    欢迎来到漂落流星星光榜单！在房间里打开您的个人名片，复制专属推广链接去邀请新朋友吧！
                    每成功邀请一位并完成注册，即可积累一次战绩，赶快向着全站 Top 50 进发！
                </p>
            </div>
            <div class="hidden md:flex shrink-0">
                <span class="text-7xl">🌟</span>
            </div>
        </div>

        {{-- 榜单主体区域 --}}
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden relative min-h-[400px]">
            @if ($topInviters->isNotEmpty())
                {{-- 表头 --}}
                <div
                    class="grid grid-cols-12 gap-4 bg-gray-50/80 px-6 py-4 border-b border-gray-100 text-xs font-bold text-gray-500 uppercase tracking-wider sticky top-0 z-10">
                    <div class="col-span-2 text-center">排行</div>
                    <div class="col-span-1 text-center">头像</div>
                    <div class="col-span-5 md:col-span-4 pl-4">用户昵称</div>
                    <div class="col-span-4 md:col-span-3 text-left">在职职务</div>
                    <div class="col-span-12 md:col-span-2 text-right font-black text-rose-500 mt-2 md:mt-0 max-md:hidden">
                        邀请记录</div>
                </div>

                {{-- 列表项 --}}
                <div class="divide-y divide-gray-50">
                    @foreach ($topInviters as $index => $inviter)
                        <div
                            class="grid grid-cols-12 gap-4 items-center px-6 py-4 hover:bg-rose-50/30 transition duration-150 relative group">

                            {{-- 移动端显示的收徒数 (紧凑模式) --}}
                            <div class="absolute right-4 top-1/2 -translate-y-1/2 md:hidden">
                                <span class="font-bold text-rose-500 text-lg">{{ $inviter->invitees_count }}</span>
                                <span class="text-[10px] text-rose-300">人</span>
                            </div>

                            {{-- 1. 排名徽标 --}}
                            <div class="col-span-2 flex justify-center">
                                @if ($index === 0)
                                    <div
                                        class="w-10 h-10 flex items-center justify-center rounded-full bg-gradient-to-br from-yellow-300 to-yellow-500 text-white font-black text-lg shadow-md shadow-yellow-200 ring-2 ring-yellow-100">
                                        1</div>
                                @elseif ($index === 1)
                                    <div
                                        class="w-9 h-9 flex items-center justify-center rounded-full bg-gradient-to-br from-gray-300 to-gray-400 text-white font-black text-base shadow-sm ring-2 ring-gray-100">
                                        2</div>
                                @elseif ($index === 2)
                                    <div
                                        class="w-8 h-8 flex items-center justify-center rounded-full bg-gradient-to-br from-amber-600 to-amber-700 text-white font-bold text-sm shadow-sm ring-2 ring-amber-50">
                                        3</div>
                                @elseif ($index < 10)
                                    <div
                                        class="w-7 h-7 flex items-center justify-center rounded-full bg-indigo-50 text-indigo-600 font-bold text-sm">
                                        {{ $index + 1 }}</div>
                                @else
                                    <div class="w-7 h-7 flex items-center justify-center text-gray-400 font-medium text-sm">
                                        {{ $index + 1 }}</div>
                                @endif
                            </div>

                            {{-- 2. 头像 --}}
                            <div class="col-span-1 flex justify-center">
                                <div
                                    class="w-10 h-10 rounded-md overflow-hidden bg-white border border-gray-200 shadow-sm shrink-0">
                                    <img src="{{ $inviter->headface_url ?? '/images/headface/1.gif' }}"
                                        onerror="this.style.display='none'" class="w-full h-full object-cover">
                                </div>
                            </div>

                            {{-- 3. 用户名 --}}
                            <div class="col-span-5 md:col-span-4 pl-4 truncate">
                                <span class="font-bold text-gray-800 {{ $index < 3 ? 'text-lg' : 'text-base' }}"
                                    title="{{ $inviter->username }}">
                                    {{ $inviter->username }}
                                </span>
                            </div>

                            {{-- 4. 职务徽章 --}}
                            <div class="col-span-4 md:col-span-3 flex items-center text-left">
                                @if ($inviter->activePosition)
                                    <div class="inline-flex items-center gap-1.5 px-3 py-1 bg-gradient-to-r from-purple-50 to-indigo-50 rounded-full text-xs text-purple-700 border border-purple-100 shadow-sm max-w-full truncate"
                                        title="{{ $inviter->activePosition->position->name }}">
                                        <span>{{ $inviter->activePosition->position->icon }}</span>
                                        <span
                                            class="font-medium truncate">{{ $inviter->activePosition->position->name }}</span>
                                    </div>
                                @else
                                    <span class="text-xs text-gray-300">—</span>
                                @endif
                            </div>

                            {{-- 5. 收徒数 (PC 端) --}}
                            <div class="col-span-12 md:col-span-2 text-right hidden md:block">
                                <div class="inline-flex items-baseline gap-1">
                                    <span
                                        class="text-2xl font-black text-rose-500 tracking-tight">{{ $inviter->invitees_count }}</span>
                                    <span class="text-xs font-semibold text-rose-300">人</span>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                {{-- 空白提示区 --}}
                <div class="absolute inset-0 flex flex-col items-center justify-center">
                    <div class="text-6xl mb-4 grayscale opacity-50">🚀</div>
                    <h3 class="text-xl font-bold text-gray-800 mb-2">全站排行榜暂无数据</h3>
                    <p class="text-gray-500 text-sm max-w-md text-center bg-gray-50 p-4 rounded-lg">
                        目前还没有达人拉取到足够的新用户入驻。成为第一个霸榜的人吧！
                        <br><br>
                        <span class="font-semibold text-rose-500">提示：</span> 在聊天室左上角或右侧的在线列表中点击您自己的名字，即可获取并复制专属推广链接。
                    </p>
                </div>
            @endif
        </div>
    </div>
@endsection