@extends('layouts.app')
@section('title', 'Leaderboard & Badge')
@section('page-title', '🏆 Leaderboard & Badge')

@section('content')

{{-- Header --}}
<div style="margin-bottom:24px">
    <h2 style="font-size:1.1rem;font-weight:700;margin-bottom:4px">RPLy Awards</h2>
    <p class="text-muted" style="font-size:.83rem">Kontributor terbaik komunitas RPL — poin didapat dari diskusi, jawaban, dan upload materi.</p>
</div>

{{-- Top 3 Bulan Ini --}}
@if($monthlyTop->count() > 0)
<div class="dashboard-card" style="margin-bottom:20px">
    <div class="card-header">
        <h3>🌟 Top Kontributor Bulan Ini</h3>
        <span style="font-size:.72rem;color:var(--text-muted);font-family:var(--font-mono)">{{ now()->format('F Y') }}</span>
    </div>
    <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border)">
        @foreach($monthlyTop as $i => $u)
        <div style="background:var(--bg-card);padding:20px;text-align:center;position:relative">
            {{-- Rank badge --}}
            <div style="font-size:1.8rem;margin-bottom:8px">
                @if($i===0) 🥇 @elseif($i===1) 🥈 @else 🥉 @endif
            </div>
            <div style="width:48px;height:48px;border-radius:50%;background:var(--accent-dim);border:2px solid var(--border-light);display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:700;color:var(--accent);margin:0 auto 8px">
                {{ strtoupper(substr($u->name,0,1)) }}
            </div>
            <a href="{{ route('profile',$u) }}" style="font-size:.88rem;font-weight:700;color:var(--text-primary);display:block;margin-bottom:3px">
                {{ $u->name }}
            </a>
            <span class="badge-role-{{ $u->role }}">{{ $u->role }}</span>
            <div style="font-family:var(--font-mono);font-size:.85rem;color:var(--accent);margin-top:8px;font-weight:700">
                {{ number_format($u->monthly_points ?? 0) }} pts
            </div>
            <div style="font-size:.68rem;color:var(--text-muted);margin-top:2px">bulan ini</div>
        </div>
        @endforeach
    </div>
</div>
@endif

<div style="display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:flex-start">

    {{-- Leaderboard Utama --}}
    <div class="dashboard-card">
        <div class="card-header">
            <h3>📊 All-Time Leaderboard</h3>
            <span style="font-size:.72rem;color:var(--text-muted)">Top 20</span>
        </div>
        <table class="leaderboard-full">
            <thead>
                <tr>
                    <th style="width:40px">#</th>
                    <th>Pengguna</th>
                    <th>Role</th>
                    <th style="text-align:right">✅ Verified</th>
                    <th style="text-align:right">⚡ Poin</th>
                </tr>
            </thead>
            <tbody>
                @foreach($leaderboard as $i => $u)
                <tr style="{{ auth()->id()===$u->id ? 'background:var(--accent-dim)' : '' }}">
                    <td style="font-family:var(--font-mono);font-size:.78rem;color:var(--text-muted);text-align:center">
                        @if($i===0) 🥇
                        @elseif($i===1) 🥈
                        @elseif($i===2) 🥉
                        @else <span style="color:var(--text-muted)">{{ $i+1 }}</span>
                        @endif
                    </td>
                    <td>
                        <div style="display:flex;align-items:center;gap:8px">
                            <div class="author-avatar" style="width:28px;height:28px;font-size:.65rem">
                                {{ strtoupper(substr($u->name,0,1)) }}
                            </div>
                            <a href="{{ route('profile',$u) }}" style="font-weight:600;color:var(--text-primary);font-size:.83rem">
                                {{ $u->name }}
                                @if(auth()->id()===$u->id)
                                <span style="font-size:.65rem;color:var(--accent);font-family:var(--font-mono)">(kamu)</span>
                                @endif
                            </a>
                        </div>
                    </td>
                    <td><span class="badge-role-{{ $u->role }}">{{ $u->role }}</span></td>
                    <td style="text-align:right;font-family:var(--font-mono);font-size:.78rem;color:var(--success)">
                        {{ $u->verified_count ?? 0 }}
                    </td>
                    <td style="text-align:right;font-family:var(--font-mono);font-size:.85rem;font-weight:700;color:var(--accent)">
                        {{ number_format($u->total_points) }}
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    {{-- Panel Kanan: Badge milik user + sistem poin --}}
    <div style="display:flex;flex-direction:column;gap:14px">

        {{-- Badge saya --}}
        <div class="dashboard-card">
            <div class="card-header">
                <h3>🎖️ Badge Saya</h3>
                <span style="font-size:.72rem;color:var(--text-muted)">{{ $myBadges->count() }} / {{ $badges->count() }}</span>
            </div>

            @if($myBadges->isEmpty())
            <div class="empty-state" style="padding:16px">
                <div style="font-size:1.5rem;margin-bottom:6px">🌱</div>
                <p style="font-size:.78rem">Belum punya badge. Mulai berkontribusi!</p>
            </div>
            @else
            <div style="padding:10px;display:flex;flex-direction:column;gap:6px">
                @foreach($myBadges as $ub)
                <div style="display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--warning-bg);border:1px solid #f59e0b30;border-radius:var(--r)">
                    <span style="font-size:1.3rem">{{ $ub->badge->icon }}</span>
                    <div>
                        <div style="font-size:.82rem;font-weight:700;color:var(--text-primary)">{{ $ub->badge->name }}</div>
                        <div style="font-size:.68rem;color:var(--text-muted)">{{ $ub->awarded_at?->format('d M Y') }}</div>
                    </div>
                </div>
                @endforeach
            </div>
            @endif
        </div>

        {{-- Cara dapat poin --}}
        <div class="dashboard-card">
            <div class="card-header"><h3>⚡ Cara Dapat Poin</h3></div>
            <div style="padding:10px 14px;display:flex;flex-direction:column;gap:6px">
                @php
                $pointRules = [
                    ['icon'=>'🔥','label'=>'Daily Check-in','pts'=>'+5 – 20'],
                    ['icon'=>'📝','label'=>'Buat diskusi forum','pts'=>'+5'],
                    ['icon'=>'💬','label'=>'Jawab diskusi','pts'=>'+3'],
                    ['icon'=>'✅','label'=>'Verified Solution','pts'=>'+20'],
                    ['icon'=>'📚','label'=>'Upload materi','pts'=>'+10'],
                    ['icon'=>'💡','label'=>'Komentar materi','pts'=>'+2'],
                ];
                @endphp
                @foreach($pointRules as $rule)
                <div style="display:flex;align-items:center;justify-content:space-between;padding:6px 8px;border-radius:var(--r);background:var(--bg-input)">
                    <div style="display:flex;align-items:center;gap:8px">
                        <span>{{ $rule['icon'] }}</span>
                        <span style="font-size:.78rem;color:var(--text-secondary)">{{ $rule['label'] }}</span>
                    </div>
                    <span style="font-family:var(--font-mono);font-size:.75rem;font-weight:700;color:var(--accent)">{{ $rule['pts'] }}</span>
                </div>
                @endforeach
            </div>
        </div>

    </div>
</div>

{{-- Semua Badge yang tersedia --}}
<div class="dashboard-card" style="margin-top:20px">
    <div class="card-header">
        <h3>🏅 Semua Badge</h3>
        <span style="font-size:.72rem;color:var(--text-muted)">{{ $badges->count() }} badge tersedia</span>
    </div>
    <div class="badge-grid">
        @php $earnedIds = $myBadges->pluck('badge_id')->toArray(); @endphp
        @foreach($badges as $badge)
        <div class="badge-item {{ in_array($badge->id,$earnedIds) ? 'earned' : '' }}">
            <div class="badge-icon">{{ $badge->icon }}</div>
            <div class="badge-name">{{ $badge->name }}</div>
            <div class="badge-desc">{{ $badge->description }}</div>
            <div style="margin-top:8px;font-size:.68rem;font-family:var(--font-mono)">
                @if(in_array($badge->id,$earnedIds))
                    <span style="color:var(--warning)">✅ Sudah diraih</span>
                @else
                    @if($badge->condition_type==='points')
                        <span style="color:var(--text-muted)">⚡ {{ number_format($badge->condition_value) }} poin</span>
                    @elseif($badge->condition_type==='verified_answers')
                        <span style="color:var(--text-muted)">✅ {{ $badge->condition_value }}x verified</span>
                    @elseif($badge->condition_type==='uploads')
                        <span style="color:var(--text-muted)">📚 {{ $badge->condition_value }}x upload</span>
                    @elseif($badge->condition_type==='checkins')
                        <span style="color:var(--text-muted)">🔥 {{ $badge->condition_value }}x check-in</span>
                    @endif
                @endif
            </div>
        </div>
        @endforeach
    </div>
</div>

@endsection