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

{% block title %}{{ game.name }} | MyCritic{% 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;
            color: #e2e8f0;
        }

        .view-container {
            max-width: 1400px;
            margin: 0 auto;
            margin-bottom: 2em;
        }

        .hero-section {
            position: relative;
            height: 400px;
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            margin-bottom: 2rem;
        }

        .hero-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(45deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.8) 100%);
            z-index: 1;
        }

        .hero-content {
            position: relative;
            z-index: 2;
            text-align: center;
            padding: 2rem;
        }

        .game-logo {
            max-width: 350px;
            max-height: 200px;
            object-fit: contain;
            filter: drop-shadow(0 8px 16px rgba(0,0,0,0.6));
            animation: float 3s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }

        .title-section {
            background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
            backdrop-filter: blur(16px);
            border-radius: 20px 20px 0 0;
            padding: 2rem;
            text-align: center;
            border: 1px solid rgba(148, 163, 184, 0.2);
            border-bottom: none;
            position: relative;
            overflow: hidden;
        }

        .title-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #3b82f6, transparent);
            animation: shine 3s infinite;
        }

        @keyframes shine {
            0% { left: -100%; }
            100% { left: 100%; }
        }

        .game-title {
            font-size: 3rem;
            font-weight: bold;
            background: linear-gradient(135deg, #e2e8f0 0%, #94a3b8 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 1rem;
        }

        .content-section {
            display: grid;
            grid-template-columns: 1fr 400px;
            gap: 2rem;
            background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
            border-radius: 0 0 20px 20px;
            padding: 2rem;
            border: 1px solid rgba(148, 163, 184, 0.2);
            border-top: none;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
        }

        .review-content {
            background: rgba(15, 23, 42, 0.4);
            border-radius: 16px;
            padding: 2rem;
            border: 1px solid rgba(148, 163, 184, 0.1);
            backdrop-filter: blur(8px);
        }

        .review-text {
            line-height: 1.8;
            font-size: 1.1rem;
            color: #cbd5e1;
            white-space: pre-line;
            margin-bottom: 2rem;
        }

        .tags-section {
            display: flex;
            align-items: center;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .tags-label {
            font-size: 1.2rem;
            font-weight: 600;
            color: #e2e8f0;
        }

        .tag-item {
            background: linear-gradient(135deg, #475569 0%, #334155 100%);
            color: #e2e8f0;
            padding: 0.6rem 1.2rem;
            border-radius: 25px;
            font-size: 0.9rem;
            font-weight: 500;
            border: 1px solid rgba(148, 163, 184, 0.3);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
        }

        .tag-item::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(16, 185, 129, 0.3) 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .tag-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
            border-color: #3b82f6;
        }

        .tag-item:hover::before {
            opacity: 1;
        }

        .tag-item:active {
            transform: translateY(0);
        }

        .sidebar {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .score-card {
            background: linear-gradient(135deg, #334155 0%, #475569 100%);
            border-radius: 20px;
            padding: 2rem;
            text-align: center;
            border: 1px solid rgba(148, 163, 184, 0.2);
            position: relative;
            overflow: hidden;
        }

        .score-circle {
            position: relative;
            width: 120px;
            height: 120px;
            margin: 0 auto 1.5rem;
            border-radius: 50%;
            background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
            border: 3px solid #e2e8f0;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        .score-circle.trophy {
            background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
            border-color: #fbbf24;
            animation: glow 2s ease-in-out infinite alternate;
        }

        @keyframes glow {
            0% { box-shadow: 0 10px 30px rgba(251, 191, 36, 0.3); }
            100% { box-shadow: 0 10px 30px rgba(251, 191, 36, 0.6); }
        }

        .score-number {
            font-size: 2.5rem;
            font-weight: bold;
            color: #fff;
            position: relative;
            z-index: 2;
        }

        .ranking-card {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            border-radius: 16px;
            padding: 1.5rem;
            border: 1px solid rgba(148, 163, 184, 0.2);
            backdrop-filter: blur(8px);
        }

        .ranking-title {
            font-size: 1.5rem;
            font-weight: bold;
            text-align: center;
            margin-bottom: 1rem;
            color: #e2e8f0;
            border-bottom: 2px solid rgba(59, 130, 246, 0.3);
            padding-bottom: 0.5rem;
        }

        .ranking-list {
            display: flex;
            flex-direction: column;
            gap: 0.8rem;
        }

        .ranking-item {
            background: rgba(30, 41, 59, 0.5);
            padding: 0.8rem 1rem;
            border-radius: 8px;
            border-left: 3px solid #3b82f6;
            font-size: 1rem;
            transition: all 0.3s ease;
        }

        .ranking-item:hover {
            background: rgba(30, 41, 59, 0.8);
            transform: translateX(4px);
        }

        .ranking-item.global {
            border-left-color: #fbbf24;
            background: rgba(251, 191, 36, 0.1);
        }

        .date-info {
            text-align: center;
            font-style: italic;
            color: #94a3b8;
            font-size: 1rem;
            background: rgba(15, 23, 42, 0.3);
            padding: 1rem;
            border-radius: 12px;
            border: 1px solid rgba(148, 163, 184, 0.1);
        }

        .floating-elements {
            position: absolute;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
        }

        .floating-particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: rgba(59, 130, 246, 0.6);
            border-radius: 50%;
            animation: float-particle 15s infinite linear;
        }

        @keyframes float-particle {
            0% {
                transform: translateY(100vh) translateX(0) rotate(0deg);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                transform: translateY(-100px) translateX(100px) rotate(360deg);
                opacity: 0;
            }
        }

        @media (max-width: 1024px) {
            .content-section {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }
            
            .hero-section {
                height: 300px;
            }
            
            .game-title {
                font-size: 2.5rem;
            }
            
            .view-container {
                padding: 0 1rem;
            }
        }

        @media (max-width: 768px) {
            .game-title {
                font-size: 2rem;
            }
            
            .hero-section {
                height: 250px;
            }
            
            .content-section {
                padding: 1rem;
            }
            
            .tags-section {
                justify-content: center;
            }
        }
    </style>
{% endblock %}

{% block body %}
<div class="view-container">
    <!-- Floating particles effect -->
    <div class="floating-elements">
        <div class="floating-particle" style="left: 10%; animation-delay: 0s;"></div>
        <div class="floating-particle" style="left: 20%; animation-delay: 3s;"></div>
        <div class="floating-particle" style="left: 30%; animation-delay: 6s;"></div>
        <div class="floating-particle" style="left: 40%; animation-delay: 9s;"></div>
        <div class="floating-particle" style="left: 50%; animation-delay: 12s;"></div>
        <div class="floating-particle" style="left: 60%; animation-delay: 2s;"></div>
        <div class="floating-particle" style="left: 70%; animation-delay: 5s;"></div>
        <div class="floating-particle" style="left: 80%; animation-delay: 8s;"></div>
        <div class="floating-particle" style="left: 90%; animation-delay: 11s;"></div>
    </div>

    <!-- Hero Section -->
    <div class="hero-section" style="background-image: url('{{ game.background }}');">
        <div class="hero-content">
            <img src="{{ asset(game.logo) }}" alt="{{ game.name }}" class="game-logo">
        </div>
    </div>

    <!-- Title Section -->
    <div class="title-section">
        <h1 class="game-title">Review de {{ game.name }}</h1>
    </div>

    <!-- Main Content -->
    <div class="content-section">
        <!-- Review Content -->
        <div class="review-content">
            <div class="review-text">{{ game.content }}</div>
            
            <div class="tags-section">
                <span class="tags-label">🏷️ Tags :</span>
                <div class="flex flex-wrap gap-2">
                    {% for tag in game.tags %}
                        <a href="{{ path('app_top', {'tags': tag.name}) }}" class="tag-item">{{ tag.name }}</a>
                    {% endfor %}
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="sidebar">
            <!-- Score Card -->
            <div class="score-card">
                <div class="score-circle {% if game.note >= 95 %}trophy{% endif %}">
                    <span class="score-number">{{ game.note }}</span>
                </div>
                <div class="text-lg font-semibold text-slate-300">Note sur 100</div>
            </div>

            <!-- Ranking Card -->
            <div class="ranking-card">
                <h2 class="ranking-title">🏆 Classement</h2>
                <div class="ranking-list">
                    <div class="ranking-item global">
                        #{{ ranking['global_rank'] }} Global ({{ totalGames }} jeux)
                    </div>
                    {% for tag, rank in ranking['tag_rankings'] %}
                        <div class="ranking-item">
                            #{{ rank }} dans {{ tag }}
                        </div>
                    {% endfor %}
                </div>
            </div>

            <!-- Publication Date -->
            <div class="date-info">
                📅 Publié le {{ game.date ? game.date|date('d/m/Y') : "N/A" }}
            </div>
        </div>
    </div>
</div>

<script>
    // Add entrance animations
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
            }
        });
    }, observerOptions);

    // Animate elements on scroll
    document.querySelectorAll('.score-card, .ranking-card, .review-content').forEach(el => {
        el.style.opacity = '0';
        el.style.transform = 'translateY(30px)';
        el.style.transition = 'all 0.6s ease';
        observer.observe(el);
    });
</script>
{% endblock %}