@extends('layouts.app')
@section('title', 'Performance Arena')

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/dashboard-final.css') }}">
<style>
    .leaderboard-hero {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
        margin-bottom: 32px;
    }
    .winner-card {
        background: linear-gradient(135deg, rgba(181, 255, 59, 0.1) 0%, rgba(255,255,255,0.02) 100%);
        border: 2px solid var(--accent-soft);
        position: relative;
        overflow: hidden;
    }
    .winner-card::before {
        content: 'CHAMPION';
        position: absolute;
        right: -20px;
        bottom: -20px;
        font-size: 100px;
        font-weight: 900;
        color: var(--accent-color);
        opacity: 0.03;
        pointer-events: none;
    }
    .rank-indicator {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 900;
        font-size: 14px;
    }
    .rank-1 { background: var(--accent-color); color: black; box-shadow: 0 0 15px var(--accent-soft); }
    .rank-2 { background: #e5e7eb; color: black; }
    .rank-3 { background: #d97706; color: white; }
    .rank-other { background: rgba(255,255,255,0.05); color: var(--text-secondary); }
</style>
@endpush

@section('content')

@php
    $actionsHtml = '
        <form class="d-flex gap-2" method="GET">
            <input class="final-select" style="width: 100px;" type="number" name="year" value="'.$year.'" min="2020" max="2100">
            <input class="final-select" style="width: 80px;" type="number" name="month" value="'.$month.'" min="1" max="12">
            <button class="final-btn final-btn-primary">Sync Arena</button>
        </form>
    ';
@endphp

@include('components.page-header', [
    'title' => 'Workforce Performance Arena',
    'description' => 'Celebrating excellence and high-performance engineering through audited gamification metrics.',
    'breadcrumbs' => ['Home' => route('admin.dashboard'), 'Leaderboard' => '#'],
    'actions' => $actionsHtml
])

<div class="leaderboard-hero">
    @if($employeeOfMonth)
    <div class="final-card winner-card">
        <div style="display: flex; align-items: center; gap: 32px; position: relative; z-index: 1;">
            <div style="position: relative;">
                <div class="final-avatar" style="width: 120px; height: 120px; font-size: 48px; border: 4px solid var(--accent-color); box-shadow: 0 0 40px rgba(181, 255, 59, 0.2);">
                    {{ substr($employeeOfMonth->user?->name ?? 'U', 0, 1) }}
                </div>
                <div style="position: absolute; bottom: -10px; right: -10px; background: var(--accent-color); color: black; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; border: 4px solid var(--bg-card);">
                    <i class="bi bi-trophy-fill"></i>
                </div>
            </div>
            
            <div style="flex-grow: 1;">
                <div class="final-secondary-text" style="font-size: 12px; font-weight: 800; letter-spacing: 0.2em; color: var(--accent-color); margin-bottom: 8px;">ENGINEER OF THE MONTH</div>
                <h2 style="font-size: 32px; font-weight: 900; color: var(--text-primary); margin-bottom: 16px;">{{ $employeeOfMonth->user?->name }}</h2>
                
                <div style="display: flex; gap: 24px;">
                    <div>
                        <div class="final-stat-label" style="font-size: 10px;">TOTAL POINTS</div>
                        <div style="font-size: 24px; font-weight: 900; color: var(--text-primary);">{{ number_format($employeeOfMonth->total_points) }}</div>
                    </div>
                    <div style="width: 2px; background: var(--border-color);"></div>
                    <div>
                        <div class="final-stat-label" style="font-size: 10px;">PERFORMANCE SCORE</div>
                        <div style="font-size: 24px; font-weight: 900; color: var(--accent-color);">{{ $employeeOfMonth->performance_score }}%</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @else
    <div class="final-card" style="text-align: center; padding: 40px;">
        <div class="final-empty-state">
            <i class="bi bi-award" style="font-size: 48px; opacity: 0.2;"></i>
            <p>The Champion\'s Podium is currently vacant for this period</p>
        </div>
    </div>
    @endif
</div>

<div class="final-card">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
        <h3 class="final-card-title" style="margin-bottom: 0;"><i class="bi bi-bar-chart-line"></i> Global Workforce Rankings</h3>
        <span class="final-secondary-text" style="font-size: 10px; font-weight: 800; letter-spacing: 0.1em;">AUDITED STANDINGS</span>
    </div>

    <div class="final-table-container">
        <table class="final-table">
            <thead>
                <tr>
                    <th style="width: 80px;">Rank</th>
                    <th>Engineer Identity</th>
                    <th>Intelligence Points</th>
                    <th>Performance Rating</th>
                    <th style="text-align: right;">Audited Status</th>
                </tr>
            </thead>
            <tbody>
                @forelse($rows as $row)
                @php
                    $rankClass = match($row->rank_position) {
                        1 => 'rank-1',
                        2 => 'rank-2',
                        3 => 'rank-3',
                        default => 'rank-other'
                    };
                @endphp
                <tr class="group" style="{{ $row->rank_position == 1 ? 'background: rgba(181, 255, 59, 0.02);' : '' }}">
                    <td>
                        <div class="rank-indicator {{ $rankClass }}">
                            {{ $row->rank_position }}
                        </div>
                    </td>
                    <td>
                        <div style="display: flex; align-items: center; gap: 12px;">
                            <div class="final-avatar" style="width: 32px; height: 32px; font-size: 12px;">{{ substr($row->user?->name ?? 'U', 0, 1) }}</div>
                            <span style="font-weight: 800; font-size: 14px; color: var(--text-primary);">{{ $row->user?->name }}</span>
                        </div>
                    </td>
                    <td>
                        <div style="font-weight: 900; color: var(--text-primary);">{{ number_format($row->total_points) }} <span style="font-size: 9px; color: var(--text-secondary); font-weight: 700;">PTS</span></div>
                    </td>
                    <td>
                        <div style="display: flex; align-items: center; gap: 12px;">
                            <div class="final-progress-bg" style="width: 100px; height: 6px;">
                                <div class="final-progress-fill" style="width: {{ $row->performance_score }}%"></div>
                            </div>
                            <span style="font-weight: 800; font-size: 12px; color: {{ $row->performance_score >= 80 ? 'var(--accent-color)' : 'var(--text-secondary)' }}">{{ $row->performance_score }}%</span>
                        </div>
                    </td>
                    <td style="text-align: right;">
                        @if($row->employee_of_month)
                            <span class="final-badge badge-whatsapp" style="padding: 4px 12px; box-shadow: 0 0 15px rgba(181, 255, 59, 0.1);">
                                <i class="bi bi-star-fill mr-1"></i> TOP PERFORMER
                            </span>
                        @else
                            <span class="final-badge badge-email" style="font-size: 9px;">QUALIFIED</span>
                        @endif
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="5">
                        <div class="final-empty-state">
                            <i class="bi bi-shield-exclamation"></i>
                            <p>No arena data discovered for this cycle</p>
                        </div>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

@endsection