{% extends "base.html.twig" %}

{% trans_default_domain "Gamification" %}

{% block title %}{{ 'gamification.leaderboard_title'|trans }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/academia.min.css') }}" />
    <style>
        :root {
            --primary-color: #00A550;
            --primary-hover: #008844;
            --primary-bg: #e8f5e9;
            --accent-color: #ff8600;
            --text-color: #333;
            --text-muted: #666;
            --border-color: #e0e0e0;
            --bg-light: #f8f9fa;
            --bg-page: #f0f2f5;
            --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
            --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
            --radius: 12px;
            --radius-sm: 8px;
        }
        .leaderboard-page {
            background: var(--bg-page);
            min-height: 80vh;
            padding: 30px 0 60px;
        }
        .leaderboard-container {
            max-width: 900px;
            margin: 0 auto;
            padding: 0 20px;
        }
        .leaderboard-header {
            text-align: center;
            margin-bottom: 30px;
        }
        .leaderboard-header h1 {
            font-size: 28px;
            font-weight: 700;
            color: var(--text-color);
            margin: 0 0 8px;
        }
        .leaderboard-header p {
            font-size: 14px;
            color: var(--text-muted);
            margin: 0;
        }
        .leaderboard-header .month-label {
            display: inline-block;
            background: var(--primary-bg);
            color: var(--primary-color);
            padding: 4px 16px;
            border-radius: 16px;
            font-size: 13px;
            font-weight: 600;
            margin-top: 8px;
        }

        /* My Stats Card */
        .my-stats-card {
            background: white;
            border-radius: var(--radius);
            box-shadow: var(--shadow-sm);
            padding: 20px;
            margin-bottom: 24px;
            border: 2px solid var(--primary-bg);
        }
        .my-stats-card h3 {
            font-size: 15px;
            font-weight: 600;
            color: var(--text-color);
            margin: 0 0 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .my-stats-card h3 i { color: var(--primary-color); }
        .my-stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
        }
        .my-stats-item {
            text-align: center;
            padding: 12px 8px;
            background: var(--bg-light);
            border-radius: var(--radius-sm);
        }
        .my-stats-item .stat-val {
            display: block;
            font-size: 22px;
            font-weight: 700;
            color: var(--primary-color);
        }
        .my-stats-item .stat-lbl {
            font-size: 11px;
            color: var(--text-muted);
        }

        /* Leaderboard Table */
        .leaderboard-table-card {
            background: white;
            border-radius: var(--radius);
            box-shadow: var(--shadow-sm);
            overflow: hidden;
        }
        .leaderboard-table {
            width: 100%;
            border-collapse: collapse;
        }
        .leaderboard-table th {
            background: var(--bg-light);
            padding: 12px 16px;
            font-size: 12px;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            text-align: {{ app.request.locale == 'ar' ? 'right' : 'left' }};
            border-bottom: 2px solid var(--border-color);
        }
        .leaderboard-table td {
            padding: 12px 16px;
            font-size: 14px;
            border-bottom: 1px solid #f0f0f0;
            vertical-align: middle;
        }
        .leaderboard-table tr:last-child td {
            border-bottom: none;
        }
        .leaderboard-table tr:hover {
            background: #fafafa;
        }
        .lb-rank {
            font-weight: 700;
            font-size: 16px;
            color: var(--text-color);
            width: 40px;
            text-align: center;
        }
        .lb-rank-1 { color: #FFD700; }
        .lb-rank-2 { color: #C0C0C0; }
        .lb-rank-3 { color: #CD7F32; }
        .lb-user-cell {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .lb-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            background: #eee;
        }
        .lb-user-info {
            line-height: 1.3;
        }
        .lb-user-name {
            font-weight: 600;
            color: var(--text-color);
            font-size: 14px;
        }
        .lb-user-name a {
            color: inherit;
            text-decoration: none;
        }
        .lb-user-name a:hover {
            color: var(--primary-color);
        }
        .lb-user-field {
            font-size: 11px;
            color: var(--text-muted);
        }
        .lb-points {
            font-weight: 700;
            font-size: 16px;
            color: var(--primary-color);
        }
        .lb-badge-pill {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
            color: white;
        }
        .leaderboard-empty {
            text-align: center;
            padding: 60px 20px;
            color: var(--text-muted);
        }
        .leaderboard-empty i {
            font-size: 48px;
            color: #ddd;
            display: block;
            margin-bottom: 16px;
        }

        @media (max-width: 767px) {
            .my-stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .leaderboard-table th:nth-child(4),
            .leaderboard-table td:nth-child(4) {
                display: none;
            }
        }
    </style>
{% endblock %}

{% block body %}
<div class="leaderboard-page">
    <div class="leaderboard-container">

        {# Header #}
        <div class="leaderboard-header">
            <h1><i class="fa fa-trophy" style="color: #FFD700;"></i> {{ 'gamification.leaderboard_title'|trans }}</h1>
            <p>{{ 'gamification.leaderboard_subtitle'|trans }}</p>
            <span class="month-label">{{ currentMonth }}</span>
        </div>

        {# Info Banner #}
        <div style="background: linear-gradient(135deg, #e8eaf6, #f3e5f5); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 24px; display: flex; align-items: center; gap: 12px; border: 1px solid #d1c4e9;">
            <i class="fa fa-info-circle" style="font-size: 22px; color: #5c6bc0;"></i>
            <span style="font-size: 14px; color: #333; line-height: 1.6;">
                {{ 'gamification.leaderboard_info'|trans|raw }}
            </span>
        </div>

        {# My Stats #}
        {% if myStats is not null %}
        <div class="my-stats-card">
            <h3><i class="fa fa-user"></i> {{ 'gamification.leaderboard_your_stats'|trans }}</h3>
            <div class="my-stats-grid">
                <div class="my-stats-item">
                    <span class="stat-val">{{ myStats.totalPoints|number_format }}</span>
                    <span class="stat-lbl">{{ 'gamification.total_points'|trans }}</span>
                </div>
                <div class="my-stats-item">
                    <span class="stat-val">{{ myStats.monthPoints|number_format }}</span>
                    <span class="stat-lbl">{{ 'gamification.monthly_points'|trans }}</span>
                </div>
                <div class="my-stats-item">
                    <span class="stat-val">#{{ myStats.monthRank }}</span>
                    <span class="stat-lbl">{{ 'gamification.monthly_rank'|trans }}</span>
                </div>
                <div class="my-stats-item">
                    <span class="stat-val">
                        {% if myStats.streak and myStats.streak.currentStreak > 0 %}🔥{% endif %}
                        {{ myStats.streak ? myStats.streak.currentStreak : 0 }}
                    </span>
                    <span class="stat-lbl">{{ 'gamification.streak_days'|trans }}</span>
                </div>
            </div>
        </div>
        {% endif %}

        {# Leaderboard Table #}
        <div class="leaderboard-table-card">
            {% if leaderboard|length > 0 %}
            <table class="leaderboard-table">
                <thead>
                    <tr>
                        <th style="width: 50px; text-align: center;">{{ 'gamification.leaderboard_rank'|trans }}</th>
                        <th>{{ 'gamification.leaderboard_user'|trans }}</th>
                        <th style="width: 100px; text-align: center;">{{ 'gamification.leaderboard_points'|trans }}</th>
                        <th style="width: 120px;">{{ 'gamification.leaderboard_badges'|trans }}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for i, entry in leaderboard %}
                        {% set rank = i + 1 %}
                        <tr>
                            <td class="lb-rank {{ rank <= 3 ? 'lb-rank-' ~ rank : '' }}">
                                {% if rank == 1 %}🥇
                                {% elseif rank == 2 %}🥈
                                {% elseif rank == 3 %}🥉
                                {% else %}{{ rank }}
                                {% endif %}
                            </td>
                            <td>
                                <div class="lb-user-cell">
                                    <img class="lb-avatar" src="{{ entry.user.webPath }}" alt="" loading="lazy">
                                    <div class="lb-user-info">
                                        <div class="lb-user-name">
                                            <a href="{{ path('user_profile_show', {username: entry.user.username}) }}">
                                                {{ entry.user.firstName }} {{ entry.user.lastName }}
                                            </a>
                                        </div>
                                        {% if entry.user.studyField %}
                                            <div class="lb-user-field">{{ entry.user.studyField }}</div>
                                        {% endif %}
                                    </div>
                                </div>
                            </td>
                            <td class="lb-points" style="text-align: center;">{{ entry.points|number_format }}</td>
                            <td>
                                {% if entry.topBadge %}
                                    <span class="lb-badge-pill" style="background: {{ entry.topBadge.color }};">
                                        <i class="fa {{ entry.topBadge.icon }}"></i>
                                        {{ ('gamification.badge_' ~ entry.topBadge.badge)|trans }}
                                    </span>
                                {% endif %}
                                {% if entry.badgeCount > 1 %}
                                    <span style="font-size: 11px; color: var(--text-muted); margin-{{ app.request.locale == 'ar' ? 'right' : 'left' }}: 4px;">+{{ entry.badgeCount - 1 }}</span>
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% else %}
            <div class="leaderboard-empty">
                <i class="fa fa-trophy"></i>
                <p>{{ 'gamification.leaderboard_empty'|trans }}</p>
            </div>
            {% endif %}
        </div>

    </div>
</div>
{% endblock %}