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

{% block title %}MyCritic | Top{% endblock %}

{% block style %}
    <style>
        .nav-with-fade, footer  {
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
            position: relative;
            backdrop-filter: blur(10px);
        }
        
        body {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
            min-height: 100vh;
        }
        
        .line-clamp-3 {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .game-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 2rem;
        }
        
        @media (max-width: 768px) {
            .game-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }
        }
        
        .header-glow {
            position: relative;
        }
        
        .header-glow::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
            pointer-events: none;
        }

        .filter-toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1.5rem;
            background: rgba(30, 41, 59, 0.8);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(59, 130, 246, 0.2);
            border-radius: 1rem;
            padding: 1rem 2rem;
        }

        .filter-section {
            background: rgba(30, 41, 59, 0.8);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(59, 130, 246, 0.2);
            border-radius: 1rem;
            padding: 2rem;
            margin-bottom: 2rem;
            transition: all 0.3s ease;
        }

        .filter-section.hidden {
            opacity: 0;
            max-height: 0;
            padding: 0 2rem;
            margin-bottom: 0;
            overflow: hidden;
        }

        .filter-toggle h3 {
            color: #f1f5f9;
            font-size: 1.25rem;
            font-weight: 600;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .toggle-button {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            background: rgba(51, 65, 85, 0.8);
            border: 1px solid rgba(71, 85, 105, 0.5);
            border-radius: 0.5rem;
            color: #cbd5e1;
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            user-select: none;
        }

        .toggle-button:hover {
            background: rgba(59, 130, 246, 0.2);
            border-color: rgba(59, 130, 246, 0.4);
            transform: translateY(-1px);
        }

        .toggle-button .toggle-icon {
            transition: transform 0.3s ease;
        }

        .toggle-button.collapsed .toggle-icon {
            transform: rotate(180deg);
        }

        .filter-content {
            transition: all 0.3s ease;
        }

        .filter-row {
            display: flex;
            flex-wrap: wrap;
            gap: 2rem;
            align-items: flex-start;
            margin-bottom: 1.5rem;
        }

        .filter-group {
            flex: 1;
            min-width: 250px;
        }

        .filter-group h4 {
            color: #f1f5f9;
            font-size: 0.875rem;
            font-weight: 600;
            margin-bottom: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.025em;
        }

        .tag-filter {
            display: inline-flex;
            align-items: center;
            padding: 0.5rem 1rem;
            margin: 0.25rem;
            background: rgba(51, 65, 85, 0.8);
            border: 1px solid rgba(71, 85, 105, 0.5);
            border-radius: 2rem;
            color: #cbd5e1;
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            user-select: none;
        }

        .tag-filter:hover {
            background: rgba(59, 130, 246, 0.2);
            border-color: rgba(59, 130, 246, 0.4);
            transform: translateY(-1px);
        }

        .tag-filter.active {
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
            border-color: #3b82f6;
            color: white;
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        }

        .sort-option {
            display: inline-flex;
            align-items: center;
            padding: 0.5rem 1rem;
            margin: 0.25rem;
            background: rgba(51, 65, 85, 0.8);
            border: 1px solid rgba(71, 85, 105, 0.5);
            border-radius: 0.5rem;
            color: #cbd5e1;
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            user-select: none;
        }

        .sort-option:hover {
            background: rgba(34, 197, 94, 0.2);
            border-color: rgba(34, 197, 94, 0.4);
            transform: translateY(-1px);
        }

        .sort-option.active {
            background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
            border-color: #22c55e;
            color: white;
            box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
        }

        .clear-filter {
            background: rgba(239, 68, 68, 0.8);
            border-color: rgba(239, 68, 68, 0.5);
            color: white;
        }

        .clear-filter:hover {
            background: rgba(239, 68, 68, 1);
            transform: translateY(-1px);
        }

        .games-count {
            color: #94a3b8;
            font-size: 0.875rem;
            margin-top: 1rem;
            text-align: center;
        }

        @media (max-width: 768px) {
            .filter-row {
                flex-direction: column;
                gap: 1rem;
            }
            
            .filter-group {
                min-width: 100%;
            }

            .filter-toggle {
                flex-direction: column;
                gap: 1rem;
                align-items: stretch;
            }

            .filter-toggle h3 {
                text-align: center;
            }
        }
    </style>
{% endblock %}

{% block body %}
    <div class="flex grow flex-col min-h-screen">
        {# Header Section #}
        <div class="relative py-16 px-8 text-center overflow-hidden header-glow">
            <div class="relative z-10">
                <h1 class="text-5xl font-bold text-white mb-4 flex items-center justify-center gap-4">
                    <span class="text-6xl">🏆</span>
                    Top Meilleures Notations
                </h1>
                <p class="text-slate-300 text-xl max-w-2xl mx-auto">
                    Découvrez les jeux les mieux notés, classés par excellence
                </p>
            </div>
        </div>

        {# Filter Section #}
        <div class="px-8 pt-8">
            <div class="max-w-7xl mx-auto">
                <div class="filter-toggle">
                    <h3>
                        🎛️ Filters & Tri
                    </h3>
                    <button class="toggle-button collapsed" onclick="toggleFilters()" id="toggle-button">
                        <span>Afficher</span>
                        <span class="toggle-icon">▲</span>
                    </button>
                </div>
                
                <div class="filter-section hidden" id="filter-section">
                    <div class="filter-content" id="filter-content">
                        <div class="filter-row">
                            {# Tags Filter #}
                            <div class="filter-group">
                                <h4>🏷️ Filtrer par tags</h4>
                                <div class="flex flex-wrap gap-2">
                                    <span class="tag-filter clear-filter" onclick="clearFilters()">
                                        ✕ Tout afficher
                                    </span>
                                    {% for tag in allTags %}
                                        <span class="tag-filter" onclick="toggleTag('{{ tag|e('js') }}')" data-tag="{{ tag }}">
                                            {{ tag }}
                                        </span>
                                    {% endfor %}
                                </div>
                            </div>

                            {# Sort Options #}
                            <div class="filter-group">
                                <h4>📊 Trier par</h4>
                                <div class="flex flex-wrap gap-2">
                                    <span class="sort-option active" onclick="setSortOption('note-desc')" data-sort="note-desc">
                                        ⭐ Note décroissante
                                    </span>
                                    <span class="sort-option" onclick="setSortOption('note-asc')" data-sort="note-asc">
                                        ⭐ Note croissante
                                    </span>
                                    <span class="sort-option" onclick="setSortOption('date-desc')" data-sort="date-desc">
                                        📅 Plus récent
                                    </span>
                                    <span class="sort-option" onclick="setSortOption('date-asc')" data-sort="date-asc">
                                        📅 Plus ancien
                                    </span>
                                </div>
                            </div>
                        </div>

                        <div class="games-count" id="games-count">
                            {{ gamesWithRank|length }} jeu(x) affiché(s)
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {# Games Grid #}
        <div class="flex-grow px-8 py-8">
            <div class="max-w-7xl mx-auto">
                <div class="game-grid" id="games-grid">
                    {% for game in gamesWithRank %}
                        <div class="game-item" 
                             data-tags="{{ game.game.tags|join(',') }}" 
                             data-note="{{ game.game.note }}"
                             data-date="{{ game.game.date|date('Y-m-d') }}"
                             data-rank="{{ game.global_rank }}"
                             {{ react_component('Top', {
                                'id': game.game.id,
                                'name': game.game.name,
                                'note': game.game.note,
                                'date': game.game.date|date('d/m/Y'),
                                'logo': game.game.logo,
                                'content': game.game.content,
                                'background': game.game.background,
                                'rank': game.global_rank,
                                'tags': game.game.tags,
                                'index': loop.index0
                            }) }}>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <script>
        let activeFilters = new Set();
        let currentSort = 'note-desc'; // Changé de 'rank' à 'note-desc'
        let filtersVisible = false;

        function toggleFilters() {
            const filterSection = document.getElementById('filter-section');
            const toggleButton = document.getElementById('toggle-button');
            const toggleButtonText = toggleButton.querySelector('span');
            
            filtersVisible = !filtersVisible;
            
            if (filtersVisible) {
                filterSection.classList.remove('hidden');
                toggleButton.classList.remove('collapsed');
                toggleButtonText.textContent = 'Masquer';
            } else {
                filterSection.classList.add('hidden');
                toggleButton.classList.add('collapsed');
                toggleButtonText.textContent = 'Afficher';
            }
        }

        function toggleTag(tag) {
            const tagElement = document.querySelector(`[data-tag="${tag}"]`);
            
            if (activeFilters.has(tag)) {
                activeFilters.delete(tag);
                tagElement.classList.remove('active');
            } else {
                activeFilters.add(tag);
                tagElement.classList.add('active');
            }
            
            filterAndSortGames();
        }

        function setSortOption(sortType) {
            // Retirer la classe active de toutes les options de tri
            document.querySelectorAll('.sort-option').forEach(el => {
                el.classList.remove('active');
            });
            
            // Ajouter la classe active à l'option sélectionnée
            document.querySelector(`[data-sort="${sortType}"]`).classList.add('active');
            
            currentSort = sortType;
            filterAndSortGames();
        }

        function clearFilters() {
            activeFilters.clear();
            document.querySelectorAll('.tag-filter:not(.clear-filter)').forEach(el => {
                el.classList.remove('active');
            });
            
            // Remettre le tri par défaut (note décroissante au lieu de rang)
            document.querySelectorAll('.sort-option').forEach(el => {
                el.classList.remove('active');
            });
            document.querySelector('[data-sort="note-desc"]').classList.add('active');
            currentSort = 'note-desc';
            
            filterAndSortGames();
            
            // Supprimer les paramètres URL
            const url = new URL(window.location);
            url.searchParams.delete('tags');
            url.searchParams.delete('sort');
            window.history.replaceState({}, '', url);
        }

        function filterAndSortGames() {
            const gameItems = Array.from(document.querySelectorAll('.game-item'));
            let visibleItems = [];

            // Filtrage
            gameItems.forEach(item => {
                const gameTags = item.getAttribute('data-tags').split(',').map(tag => tag.trim());
                
                if (activeFilters.size === 0) {
                    // Aucun filtre actif, inclure tous les jeux
                    visibleItems.push(item);
                } else {
                    // Vérifier si le jeu a au moins un des tags sélectionnés
                    const hasMatchingTag = Array.from(activeFilters).some(filter => 
                        gameTags.includes(filter)
                    );
                    
                    if (hasMatchingTag) {
                        visibleItems.push(item);
                    }
                }
            });

            // Tri - créer un tableau avec les données pour éviter les manipulations DOM
            const sortedData = visibleItems.map(item => ({
                element: item,
                rank: parseInt(item.getAttribute('data-rank')),
                note: parseFloat(item.getAttribute('data-note')),
                date: new Date(item.getAttribute('data-date'))
            }));

            sortedData.sort((a, b) => {
                switch (currentSort) {
                    case 'note-desc':
                        return b.note - a.note;
                    
                    case 'note-asc':
                        return a.note - b.note;
                    
                    case 'date-desc':
                        return b.date - a.date;
                    
                    case 'date-asc':
                        return a.date - b.date;
                    
                    default:
                        return b.note - a.note; // Tri par défaut : note décroissante
                }
            });

            // Appliquer la visibilité et l'ordre sans déplacer les éléments DOM
            gameItems.forEach((item, originalIndex) => {
                const sortedIndex = sortedData.findIndex(data => data.element === item);
                
                if (sortedIndex !== -1) {
                    // Élément visible
                    item.style.display = 'block';
                    item.style.order = sortedIndex;
                } else {
                    // Élément masqué
                    item.style.display = 'none';
                    item.style.order = 9999; // Envoyer à la fin
                }
            });

            // Mettre à jour le compteur
            const sortText = getSortText(currentSort);
            document.getElementById('games-count').textContent = 
                `${visibleItems.length} jeu(x) affiché(s)${activeFilters.size > 0 ? ' (filtré)' : ''} - ${sortText}`;
        }

        function getSortText(sortType) {
            switch (sortType) {
                case 'note-desc': return 'Trié par note décroissante';
                case 'note-asc': return 'Trié par note croissante';
                case 'date-desc': return 'Trié par date (plus récent)';
                case 'date-asc': return 'Trié par date (plus ancien)';
                default: return 'Trié par note décroissante';
            }
        }

        // Animation d'entrée pour les filtres
        document.addEventListener('DOMContentLoaded', function() {
            const filters = document.querySelectorAll('.tag-filter, .sort-option');
            filters.forEach((filter, index) => {
                filter.style.opacity = '0';
                filter.style.transform = 'translateY(10px)';
                setTimeout(() => {
                    filter.style.transition = 'all 0.3s ease';
                    filter.style.opacity = '1';
                    filter.style.transform = 'translateY(0)';
                }, index * 30);
            });

            // Vérifier s'il y a des paramètres dans l'URL
            const urlParams = new URLSearchParams(window.location.search);
            
            // Tags
            const tagsParam = urlParams.get('tags');
            if (tagsParam) {
                const tags = tagsParam.split(',');
                tags.forEach(tag => {
                    const tagElement = document.querySelector(`[data-tag="${tag}"]`);
                    if (tagElement) {
                        activeFilters.add(tag);
                        tagElement.classList.add('active');
                    }
                });
            }
            
            // Sort
            const sortParam = urlParams.get('sort');
            if (sortParam && sortParam !== 'rank') { // Ignorer l'ancien paramètre 'rank'
                setSortOption(sortParam);
            }
            
            if (tagsParam || sortParam) {
                filterAndSortGames();
            }
        });
    </script>
{% endblock %}