@extends('layouts.public')

@section('title', 'Leaderboard — CashBaba Feedback Hub')

@push('styles')
<style>
    /* ── Page hero ── */
    .lb-hero {
        background: linear-gradient(135deg, #0d3d26 0%, #00a651 100%);
        padding: 4rem 1.5rem 3rem;
        text-align: center;
        position: relative;
        overflow: hidden;
    }
    .lb-hero::before {
        content: '';
        position: absolute; inset: 0;
        background: radial-gradient(ellipse at 50% 120%, rgba(255,255,255,.07) 0%, transparent 70%);
    }
    .lb-hero-inner { position: relative; max-width: 700px; margin: 0 auto; }
    .lb-hero .badge-pill { background: rgba(255,255,255,.15); color: #fff; margin-bottom: 1.2rem; }
    .lb-hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; color: #fff; margin-bottom: .75rem; }
    .lb-hero p { color: rgba(255,255,255,.8); font-size: 1rem; line-height: 1.6; }

    /* ── Cycle strip ── */
    .cycle-strip {
        background: #fff;
        border-bottom: 1px solid #e2e8f0;
        padding: .9rem 1.5rem;
    }
    .cycle-inner {
        max-width: 900px; margin: 0 auto;
        display: flex; align-items: center; justify-content: center; gap: 2rem;
        flex-wrap: wrap;
    }
    .cycle-stat { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: #475569; }
    .cycle-stat i { color: #00a651; font-size: .85rem; }
    .cycle-stat strong { color: #1e293b; }
    .cycle-badge {
        display: inline-flex; align-items: center; gap: .35rem;
        background: #dcfce7; color: #166534;
        border-radius: 20px; padding: .25rem .75rem;
        font-size: .72rem; font-weight: 700;
    }
    .cycle-dot { width: 6px; height: 6px; background: #00a651; border-radius: 50%; animation: pulse 1.5s infinite; }
    @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

    /* ── Main section ── */
    .lb-section { max-width: 900px; margin: 0 auto; padding: 2.5rem 1.5rem 5rem; }

    /* ── Podium (top 3) ── */
    .podium-row {
        display: flex; align-items: flex-end; justify-content: center;
        gap: 1rem; margin-bottom: 2.5rem;
    }
    .podium-card {
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(0,0,0,.08);
        padding: 1.5rem 1rem 1.25rem;
        text-align: center;
        flex: 1; max-width: 220px;
        border: 2px solid transparent;
        transition: transform .2s;
    }
    .podium-card:hover { transform: translateY(-3px); }
    .podium-card.rank-1 {
        border-color: #f59e0b;
        box-shadow: 0 8px 30px rgba(245,158,11,.2);
        padding-top: 2rem;
    }
    .podium-card.rank-2 { border-color: #94a3b8; }
    .podium-card.rank-3 { border-color: #b45309; }

    .podium-medal {
        font-size: 2rem; margin-bottom: .5rem; display: block;
    }
    .podium-avatar {
        width: 56px; height: 56px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.3rem; font-weight: 800; color: #fff;
        margin: 0 auto .6rem;
    }
    .rank-1 .podium-avatar { background: linear-gradient(135deg, #f59e0b, #d97706); width: 64px; height: 64px; }
    .rank-2 .podium-avatar { background: linear-gradient(135deg, #64748b, #475569); }
    .rank-3 .podium-avatar { background: linear-gradient(135deg, #b45309, #92400e); }

    .podium-name { font-size: .9rem; font-weight: 700; color: #1e293b; margin-bottom: .2rem; }
    .podium-dept { font-size: .72rem; color: #94a3b8; margin-bottom: .6rem; }
    .podium-pts {
        font-size: 1.3rem; font-weight: 800; color: #00a651;
    }
    .rank-1 .podium-pts { font-size: 1.5rem; }
    .podium-pts span { font-size: .72rem; font-weight: 600; color: #64748b; display: block; }
    .podium-sub { font-size: .72rem; color: #94a3b8; margin-top: .25rem; }

    /* ── Full table ── */
    .lb-table-wrap {
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(0,0,0,.06);
        overflow: hidden;
        border: 1px solid #e2e8f0;
    }
    .lb-table-head {
        padding: 1.1rem 1.5rem;
        display: flex; align-items: center; justify-content: space-between;
        border-bottom: 1px solid #f1f5f9;
    }
    .lb-table-head h2 { font-size: 1rem; font-weight: 700; color: #1e293b; }
    .lb-table-head span { font-size: .78rem; color: #94a3b8; }

    table.lb-table { width: 100%; border-collapse: collapse; }
    .lb-table thead th {
        background: #f8fafc;
        padding: .75rem 1.25rem;
        font-size: .72rem; font-weight: 700; color: #64748b;
        text-transform: uppercase; letter-spacing: .05em;
        text-align: left; border-bottom: 1px solid #e2e8f0;
    }
    .lb-table thead th.text-right { text-align: right; }
    .lb-table tbody tr { transition: background .15s; }
    .lb-table tbody tr:hover { background: #f8fafc; }
    .lb-table tbody tr + tr td { border-top: 1px solid #f1f5f9; }
    .lb-table td {
        padding: .85rem 1.25rem;
        font-size: .875rem; color: #334155;
        vertical-align: middle;
    }
    .lb-table td.text-right { text-align: right; }

    .rank-cell { width: 56px; }
    .rank-num {
        width: 32px; height: 32px;
        border-radius: 8px;
        background: #f1f5f9;
        display: flex; align-items: center; justify-content: center;
        font-size: .8rem; font-weight: 700; color: #475569;
    }
    .rank-num.gold   { background: #fef3c7; color: #d97706; }
    .rank-num.silver { background: #f1f5f9; color: #475569; }
    .rank-num.bronze { background: #fef3c7; color: #b45309; }

    .user-cell { display: flex; align-items: center; gap: .75rem; }
    .u-avatar {
        width: 36px; height: 36px; border-radius: 10px;
        background: linear-gradient(135deg, #00a651, #007a3d);
        display: flex; align-items: center; justify-content: center;
        font-size: .8rem; font-weight: 800; color: #fff; flex-shrink: 0;
    }
    .u-name { font-weight: 600; color: #1e293b; }
    .u-dept { font-size: .72rem; color: #94a3b8; }

    .pts-cell { font-size: 1rem; font-weight: 700; color: #00a651; text-align: right; }
    .sub-cell { text-align: right; color: #64748b; }
    .badge-rank {
        display: inline-flex; align-items: center; gap: .3rem;
        padding: .2rem .6rem; border-radius: 20px;
        font-size: .68rem; font-weight: 700;
    }
    .badge-top10 { background: #dbeafe; color: #1d4ed8; }
    .badge-active { background: #dcfce7; color: #166534; }

    /* ── Empty state ── */
    .lb-empty {
        padding: 4rem 1.5rem; text-align: center;
    }
    .lb-empty i { font-size: 3rem; color: #e2e8f0; margin-bottom: 1rem; display: block; }
    .lb-empty p { color: #94a3b8; }

    /* ── Score legend ── */
    .score-legend {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        gap: .75rem; margin-top: 2rem;
    }
    .legend-item {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: .75rem 1rem;
        display: flex; align-items: center; gap: .75rem;
    }
    .legend-dot {
        width: 32px; height: 32px; border-radius: 8px;
        display: flex; align-items: center; justify-content: center;
        font-size: .8rem; font-weight: 700; color: #fff; flex-shrink: 0;
    }
    .legend-dot.base   { background: #00a651; }
    .legend-dot.val    { background: #3b82f6; }
    .legend-dot.impl   { background: #f59e0b; }
    .legend-dot.ceo    { background: #7c3aed; }
    .legend-label { font-size: .78rem; color: #475569; line-height: 1.4; }
    .legend-label strong { display: block; color: #1e293b; }

    @media (max-width: 640px) {
        .podium-row { gap: .5rem; }
        .podium-card { padding: 1rem .75rem; }
        .u-dept { display: none; }
        .lb-table thead th:nth-child(3) { display: none; }
        .lb-table td:nth-child(3) { display: none; }
    }
</style>
@endpush

@section('content')

{{-- Hero --}}
<section class="lb-hero">
    <div class="lb-hero-inner">
        <div class="badge-pill"><i class="fas fa-trophy"></i> Leaderboard</div>
        <h1>Top Feedback Contributors</h1>
        <p>
            Recognising the CashBaba team members who are making the most impact by
            collecting and submitting quality feedback this cycle.
        </p>
    </div>
</section>

{{-- Active cycle strip --}}
@if($activeCycle)
<div class="cycle-strip">
    <div class="cycle-inner">
        <div class="cycle-stat">
            <i class="fas fa-calendar-alt"></i>
            <span>Cycle: <strong>{{ $activeCycle->name }}</strong></span>
        </div>
        <div class="cycle-stat">
            <i class="fas fa-play-circle"></i>
            <span>Started: <strong>{{ $activeCycle->start_date->format('d M Y') }}</strong></span>
        </div>
        <div class="cycle-stat">
            <i class="fas fa-flag-checkered"></i>
            <span>Ends: <strong>{{ $activeCycle->end_date->format('d M Y') }}</strong></span>
        </div>
        <span class="cycle-badge"><span class="cycle-dot"></span> Active</span>
    </div>
</div>
@endif

<div class="lb-section">

    @if($leaderboard->count())

        {{-- ── Podium (top 3) ── --}}
        @php
            $top3 = $leaderboard->take(3);
            $first  = $top3->get(0);
            $second = $top3->get(1);
            $third  = $top3->get(2);
        @endphp

        <div class="podium-row">
            {{-- 2nd place (left) --}}
            @if($second)
            <div class="podium-card rank-2">
                <span class="podium-medal">🥈</span>
                <div class="podium-avatar">{{ strtoupper(substr($second->name, 0, 1)) }}</div>
                <div class="podium-name">{{ $second->name }}</div>
                <div class="podium-dept">{{ $second->department ?? 'CashBaba' }}</div>
                <div class="podium-pts">{{ $second->total_points }}<span>points</span></div>
                <div class="podium-sub">{{ $second->survey_responses_count }} submission{{ $second->survey_responses_count !== 1 ? 's' : '' }}</div>
            </div>
            @endif

            {{-- 1st place (center, taller) --}}
            @if($first)
            <div class="podium-card rank-1">
                <span class="podium-medal">🥇</span>
                <div class="podium-avatar">{{ strtoupper(substr($first->name, 0, 1)) }}</div>
                <div class="podium-name">{{ $first->name }}</div>
                <div class="podium-dept">{{ $first->department ?? 'CashBaba' }}</div>
                <div class="podium-pts">{{ $first->total_points }}<span>points</span></div>
                <div class="podium-sub">{{ $first->survey_responses_count }} submission{{ $first->survey_responses_count !== 1 ? 's' : '' }}</div>
            </div>
            @endif

            {{-- 3rd place (right) --}}
            @if($third)
            <div class="podium-card rank-3">
                <span class="podium-medal">🥉</span>
                <div class="podium-avatar">{{ strtoupper(substr($third->name, 0, 1)) }}</div>
                <div class="podium-name">{{ $third->name }}</div>
                <div class="podium-dept">{{ $third->department ?? 'CashBaba' }}</div>
                <div class="podium-pts">{{ $third->total_points }}<span>points</span></div>
                <div class="podium-sub">{{ $third->survey_responses_count }} submission{{ $third->survey_responses_count !== 1 ? 's' : '' }}</div>
            </div>
            @endif
        </div>

        {{-- ── Full table ── --}}
        <div class="lb-table-wrap">
            <div class="lb-table-head">
                <h2>All Contributors</h2>
                <span>{{ $leaderboard->count() }} employee{{ $leaderboard->count() !== 1 ? 's' : '' }}</span>
            </div>
            <table class="lb-table">
                <thead>
                    <tr>
                        <th class="rank-cell">#</th>
                        <th>Employee</th>
                        <th>Department</th>
                        <th class="text-right">Points</th>
                        <th class="text-right">Submissions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($leaderboard as $i => $user)
                    <tr>
                        <td class="rank-cell">
                            <div class="rank-num {{ $i === 0 ? 'gold' : ($i === 1 ? 'silver' : ($i === 2 ? 'bronze' : '')) }}">
                                @if($i === 0) 🥇
                                @elseif($i === 1) 🥈
                                @elseif($i === 2) 🥉
                                @else {{ $i + 1 }}
                                @endif
                            </div>
                        </td>
                        <td>
                            <div class="user-cell">
                                <div class="u-avatar">{{ strtoupper(substr($user->name, 0, 1)) }}</div>
                                <div>
                                    <div class="u-name">
                                        {{ $user->name }}
                                        @if($i < 10)
                                            <span class="badge-rank badge-top10">Top 10</span>
                                        @endif
                                    </div>
                                    <div class="u-dept">{{ $user->employee_id ?? '—' }}</div>
                                </div>
                            </div>
                        </td>
                        <td>{{ $user->department ?? '—' }}</td>
                        <td class="pts-cell">{{ $user->total_points }}</td>
                        <td class="sub-cell">{{ $user->survey_responses_count }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

    @else
        <div class="lb-empty">
            <i class="fas fa-trophy"></i>
            <p>No submissions yet for this cycle. Be the first to contribute!</p>
            @auth
            <a href="{{ route('home') }}#projects" style="display:inline-block;margin-top:1rem;padding:.6rem 1.4rem;background:#00a651;color:#fff;border-radius:8px;font-size:.875rem;font-weight:600;">
                Start Giving Feedback
            </a>
            @endauth
        </div>
    @endif

    {{-- ── Score key ── --}}
    <div style="margin-top:2.5rem;">
        <h3 style="font-size:.8rem;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem;">
            How points are calculated
        </h3>
        <div class="score-legend">
            <div class="legend-item">
                <div class="legend-dot base">+1</div>
                <div class="legend-label"><strong>Submission</strong>Every completed survey</div>
            </div>
            <div class="legend-item">
                <div class="legend-dot val">+5</div>
                <div class="legend-label"><strong>Valuable</strong>Marked by management</div>
            </div>
            <div class="legend-item">
                <div class="legend-dot impl">+10</div>
                <div class="legend-label"><strong>Implementable</strong>Actionable insight</div>
            </div>
            <div class="legend-item">
                <div class="legend-dot ceo">+20</div>
                <div class="legend-label"><strong>CEO Choice</strong>Personally selected</div>
            </div>
        </div>
    </div>

</div>

@endsection