<x-app-layout>
    <x-slot name="title">Leaderboard</x-slot>

    <!-- Hero -->
    <div class="pes-hero mb-4">
        <div style="position:relative;z-index:1">
            <div class="pes-hero-title"><i class="ti ti-trophy" style="font-size:24px"></i> Global Leaderboard</div>
            <div class="pes-hero-sub">Season 1 · Diperbarui real-time</div>
        </div>
    </div>

    <!-- Top 3 Podium -->
    @if(isset($players) && $players->count() >= 3)
    @php $pod = $players->take(3)->values(); @endphp
    <div class="d-flex justify-content-center align-items-end gap-2 mb-4" style="max-width:400px;margin-left:auto;margin-right:auto">
        <!-- 2nd place -->
        <div class="pes-card text-center p-2 p-sm-3 flex-fill" style="margin-bottom:0;min-width:0">
            <div style="position:relative;display:inline-block;margin-bottom:6px">
                <img src="{{ $pod[1]->avatar ?? 'https://ui-avatars.com/api/?name='.urlencode($pod[1]->username).'&background=64748b&color=fff&size=128' }}"
                     style="width:44px;height:44px;border-radius:12px;border:3px solid #e2e8f0" alt="">
                <span style="position:absolute;top:-8px;right:-8px;font-size:16px">🥈</span>
            </div>
            <div style="font-size:11px;font-weight:700;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ $pod[1]->username }}</div>
            <div style="font-size:12px;font-weight:800;color:#64748b">{{ number_format($pod[1]->elo) }}</div>
        </div>
        <!-- 1st place — taller -->
        <div class="pes-card text-center p-2 p-sm-3 flex-fill" style="border:2px solid #bfdbfe;box-shadow:0 4px 20px rgba(29,78,216,.15);position:relative;margin-top:-16px;min-width:0">
            <div style="font-size:20px;position:absolute;top:-12px;left:50%;transform:translateX(-50%)">👑</div>
            <div style="margin-top:10px;margin-bottom:6px;position:relative;display:inline-block">
                <img src="{{ $pod[0]->avatar ?? 'https://ui-avatars.com/api/?name='.urlencode($pod[0]->username).'&background=1d4ed8&color=fff&size=128' }}"
                     style="width:52px;height:52px;border-radius:14px;border:3px solid #1d4ed8" alt="">
            </div>
            <div style="font-size:12px;font-weight:800;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ $pod[0]->username }}</div>
            <div style="font-size:13px;font-weight:800;color:#1d4ed8">{{ number_format($pod[0]->elo) }}</div>
        </div>
        <!-- 3rd place -->
        <div class="pes-card text-center p-2 p-sm-3 flex-fill" style="margin-bottom:0;min-width:0">
            <div style="position:relative;display:inline-block;margin-bottom:6px">
                <img src="{{ $pod[2]->avatar ?? 'https://ui-avatars.com/api/?name='.urlencode($pod[2]->username).'&background=92400e&color=fff&size=128' }}"
                     style="width:44px;height:44px;border-radius:12px;border:3px solid #fde68a" alt="">
                <span style="position:absolute;top:-8px;right:-8px;font-size:16px">🥉</span>
            </div>
            <div style="font-size:11px;font-weight:700;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ $pod[2]->username }}</div>
            <div style="font-size:12px;font-weight:800;color:#92400e">{{ number_format($pod[2]->elo) }}</div>
        </div>
    </div>
    @endif

    <!-- Filter + Table -->
    <div class="pes-card">
        <div class="pes-card-header">
            <div class="pes-card-header-left">
                <div class="pes-card-icon" style="background:#eff6ff;color:#1d4ed8"><i class="ti ti-list-numbers"></i></div>
                <span class="pes-card-title">Ranking Pemain</span>
            </div>
            <form method="GET">
                <select name="division" onchange="this.form.submit()" class="pes-input" style="width:auto;padding:7px 12px;max-width:150px">
                    <option value="">Semua Divisi</option>
                    @foreach(['Bronze','Silver','Gold','Platinum','Diamond','Master','Legend'] as $d)
                        <option value="{{ $d }}" {{ request('division') == $d ? 'selected' : '' }}>{{ $d }}</option>
                    @endforeach
                </select>
            </form>
        </div>
        <div style="overflow-x:auto">
            <table class="pes-table">
                <thead>
                    <tr>
                        <th style="width:50px">#</th>
                        <th>Pemain</th>
                        <th class="d-none d-sm-table-cell">Divisi</th>
                        <th>ELO</th>
                        <th class="d-none d-md-table-cell">W / L / D</th>
                        <th class="d-none d-md-table-cell">Win Rate</th>
                        <th class="d-none d-lg-table-cell">Streak</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($players ?? [] as $i => $player)
                        @php
                            $rank  = $players->firstItem() + $i;
                            $div   = getDivision($player->elo);
                            $total = ($player->wins + $player->losses + $player->draws) ?: 1;
                            $wr    = round($player->wins / $total * 100, 1);
                            $isMe  = auth()->check() && auth()->id() === $player->id;
                        @endphp
                        <tr style="{{ $isMe ? 'background:#eff6ff' : '' }}">
                            <td style="text-align:center;font-weight:700">
                                @if($rank <= 3) {{ ['🥇','🥈','🥉'][$rank-1] }}
                                @else <span style="font-size:12px;color:#94a3b8">{{ $rank }}</span>
                                @endif
                            </td>
                            <td>
                                <a href="{{ route('player.show', $player->id) }}" style="text-decoration:none;display:flex;align-items:center;gap:10px">
                                    <img src="{{ $player->avatar ?? 'https://ui-avatars.com/api/?name='.urlencode($player->username).'&background=1d4ed8&color=fff' }}"
                                         style="width:36px;height:36px;border-radius:10px;object-fit:cover" alt="">
                                    <div>
                                        <div style="font-size:13px;font-weight:600;color:#0f172a">
                                            {{ $player->username }}
                                            @if($isMe) <span style="font-size:11px;color:#1d4ed8">(kamu)</span> @endif
                                        </div>
                                    </div>
                                </a>
                            </td>
                            <td class="d-none d-sm-table-cell"><span class="div-badge {{ $div['cls'] }}">{{ $div['icon'] }} {{ $div['name'] }}</span></td>
                            <td><span style="font-size:14px;font-weight:800;color:#1d4ed8;font-family:'Plus Jakarta Sans',sans-serif">{{ number_format($player->elo) }}</span></td>
                            <td class="d-none d-md-table-cell">
                                <span style="color:#16a34a;font-weight:600">{{ $player->wins }}</span>
                                <span style="color:#cbd5e1;margin:0 3px">/</span>
                                <span style="color:#dc2626;font-weight:600">{{ $player->losses }}</span>
                                <span style="color:#cbd5e1;margin:0 3px">/</span>
                                <span style="color:#64748b">{{ $player->draws }}</span>
                            </td>
                            <td class="d-none d-md-table-cell">
                                <div class="d-flex align-items-center gap-2">
                                    <div style="width:60px;height:6px;background:#e2e8f0;border-radius:6px;overflow:hidden">
                                        <div style="width:{{ $wr }}%;height:100%;background:#16a34a;border-radius:6px"></div>
                                    </div>
                                    <span style="font-size:12px;color:#64748b">{{ $wr }}%</span>
                                </div>
                            </td>
                            <td class="d-none d-lg-table-cell" style="font-size:12px;font-weight:700">
                                @if(($player->current_streak ?? 0) > 0)
                                    <span style="color:#16a34a">🔥 {{ $player->current_streak }}W</span>
                                @elseif(($player->current_streak ?? 0) < 0)
                                    <span style="color:#dc2626">{{ abs($player->current_streak) }}L</span>
                                @else —
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="7" style="text-align:center;padding:48px;color:#94a3b8">
                            <div style="font-size:32px;margin-bottom:10px">🏆</div>
                            Belum ada pemain yang terdaftar
                        </td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if(isset($players) && $players->hasPages())
        <div style="padding:14px 20px;border-top:1px solid #f1f5f9">{{ $players->links() }}</div>
        @endif
    </div>
</x-app-layout>
