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

{% block title %}Ajouter un jeu | 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;
        }

        .add-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
        }

        .page-header {
            text-align: center;
            margin-bottom: 3rem;
            padding: 2rem 0;
        }

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

        .page-subtitle {
            color: #94a3b8;
            font-size: 1.125rem;
        }

        .game-preview {
            background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(148, 163, 184, 0.2);
            margin-bottom: 3rem;
            opacity: 0.7;
        }

        .game-header {
            position: relative;
            height: 250px;
            background: linear-gradient(135deg, #475569 0%, #334155 100%);
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: flex-end;
            padding: 2rem;
        }

        .game-header::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(45deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 100%);
        }

        .game-logo {
            position: relative;
            z-index: 2;
            max-width: 200px;
            max-height: 80px;
            object-fit: contain;
            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
            background: rgba(15, 23, 42, 0.8);
            padding: 1rem;
            border-radius: 8px;
        }

        .game-score {
            position: absolute;
            top: 1rem;
            right: 1rem;
            z-index: 3;
            background: rgba(15, 23, 42, 0.9);
            backdrop-filter: blur(10px);
            border-radius: 50%;
            width: 80px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid #e2e8f0;
            font-size: 1.5rem;
            font-weight: bold;
            color: #fff;
        }

        .add-panel {
            background: rgba(30, 41, 59, 0.6);
            backdrop-filter: blur(16px);
            border-radius: 16px;
            padding: 2rem;
            margin-bottom: 2rem;
            border: 1px solid rgba(148, 163, 184, 0.1);
            transition: all 0.3s ease;
        }

        .add-panel:hover {
            background: rgba(30, 41, 59, 0.8);
            border-color: rgba(148, 163, 184, 0.3);
        }

        .panel-header {
            display: flex;
            align-items: center;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid rgba(148, 163, 184, 0.2);
        }

        .panel-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: #e2e8f0;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .form-input, .form-textarea {
            width: 100%;
            background: rgba(15, 23, 42, 0.8);
            border: 1px solid rgba(148, 163, 184, 0.3);
            border-radius: 8px;
            padding: 0.75rem;
            color: #e2e8f0;
            font-size: 1rem;
            transition: all 0.3s ease;
        }

        .form-input:focus, .form-textarea:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        .form-textarea {
            min-height: 120px;
            resize: vertical;
            line-height: 1.6;
        }

        .form-label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: #e2e8f0;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
        }

        .stat-card {
            background: linear-gradient(135deg, #334155 0%, #475569 100%);
            padding: 1.5rem;
            border-radius: 12px;
            text-align: center;
            border: 1px solid rgba(148, 163, 184, 0.2);
        }

        .stat-number {
            font-size: 2rem;
            font-weight: bold;
            color: #94a3b8;
            display: block;
        }

        .stat-label {
            color: #94a3b8;
            font-size: 0.875rem;
            margin-top: 0.5rem;
        }

        .action-bar {
            position: sticky;
            bottom: 2rem;
            background: rgba(15, 23, 42, 0.95);
            backdrop-filter: blur(16px);
            border-radius: 16px;
            padding: 1rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 1px solid rgba(148, 163, 184, 0.2);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        .submit-btn {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
            padding: 0.75rem 2rem;
            border-radius: 12px;
            border: none;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
        }

        .status-indicator {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: #94a3b8;
            font-size: 0.875rem;
        }

        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #3b82f6;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        .input-row {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 1rem;
            align-items: end;
        }

        .media-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }

        .preview-hint {
            background: rgba(59, 130, 246, 0.1);
            border: 1px solid rgba(59, 130, 246, 0.3);
            border-radius: 8px;
            padding: 1rem;
            margin-bottom: 2rem;
            color: #93c5fd;
            text-align: center;
        }

        @media (max-width: 768px) {
            .add-container {
                padding: 1rem;
            }
            
            .page-title {
                font-size: 2rem;
            }
            
            .game-header {
                height: 200px;
                padding: 1rem;
            }
            
            .input-row,
            .media-row {
                grid-template-columns: 1fr;
            }
            
            .action-bar {
                flex-direction: column;
                gap: 1rem;
                padding: 1rem;
            }
        }

        .form-errors {
            color: #ef4444;
            font-size: 0.875rem;
            margin-top: 0.25rem;
        }

        /* Tags styling */
        .tags-widget {
            margin-top: 0.5rem;
        }

        .tags-selector input[type="checkbox"] {
            margin-right: 0.5rem;
            accent-color: #3b82f6;
        }

        .tags-selector label {
            display: inline-flex;
            align-items: center;
            background: linear-gradient(135deg, #475569 0%, #334155 100%);
            color: #e2e8f0;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-size: 0.875rem;
            border: 1px solid rgba(148, 163, 184, 0.2);
            margin: 0.25rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .tags-selector label:hover {
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
            border-color: #3b82f6;
        }

        .tags-selector input[type="checkbox"]:checked + label,
        .tags-selector label:has(input[type="checkbox"]:checked) {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            border-color: #10b981;
        }

        /* Si c'est un select multiple */
        .tags-selector select[multiple] {
            background: rgba(15, 23, 42, 0.8);
            border: 1px solid rgba(148, 163, 184, 0.3);
            border-radius: 8px;
            padding: 0.75rem;
            color: #e2e8f0;
            min-height: 120px;
            width: 100%;
        }

        .tags-selector select[multiple] option {
            background: #1e293b;
            color: #e2e8f0;
            padding: 0.5rem;
        }

        .tags-selector select[multiple] option:checked {
            background: #3b82f6;
        }
    </style>
{% endblock %}

{% block body %}
<div class="add-container">
    <div class="page-header">
        <h1 class="page-title">Ajouter un nouveau jeu</h1>
        <p class="page-subtitle">Créez une nouvelle critique et partagez votre expérience</p>
    </div>

    {{ form_start(form, {'attr': {'class': 'needs-validation', 'novalidate': true}}) }}

    {# Add Panels #}
    <div class="space-y-6">
        {# Title & Score #}
        <div class="add-panel">
            <div class="panel-header">
                <div class="panel-title">
                    🎮 Informations principales
                </div>
            </div>
            <div class="input-row">
                <div>
                    {{ form_label(form.name, 'Nom du jeu', {'label_attr': {'class': 'form-label'}}) }}
                    {{ form_widget(form.name, {'attr': {'class': 'form-input', 'placeholder': 'Ex: The Legend of Zelda: Breath of the Wild'}}) }}
                    {{ form_errors(form.name) }}
                </div>
                <div>
                    {{ form_label(form.note, 'Note sur 100', {'label_attr': {'class': 'form-label'}}) }}
                    {{ form_widget(form.note, {'attr': {'class': 'form-input', 'type': 'number', 'min': 0, 'max': 100, 'step': 1, 'placeholder': '85'}}) }}
                    {{ form_errors(form.note) }}
                </div>
            </div>
        </div>

        {# Content #}
        <div class="add-panel">
            <div class="panel-header">
                <div class="panel-title">
                    📝 Votre critique
                </div>
            </div>
            {{ form_label(form.content, 'Contenu de la review', {'label_attr': {'class': 'form-label'}}) }}
            {{ form_widget(form.content, {'attr': {'class': 'form-textarea', 'placeholder': 'Partagez votre expérience, vos impressions et votre analyse du jeu...'}}) }}
            {{ form_errors(form.content) }}
        </div>

        {# Media URLs #}
        <div class="add-panel">
            <div class="panel-header">
                <div class="panel-title">
                    🖼️ Images et visuels
                </div>
            </div>
            <div class="media-row">
                <div>
                    {{ form_label(form.logo, 'URL du logo', {'label_attr': {'class': 'form-label'}}) }}
                    {{ form_widget(form.logo, {'attr': {'class': 'form-input', 'placeholder': 'https://exemple.com/logo.png'}}) }}
                    {{ form_errors(form.logo) }}
                </div>
                <div>
                    {{ form_label(form.background, 'URL de l\'arrière-plan', {'label_attr': {'class': 'form-label'}}) }}
                    {{ form_widget(form.background, {'attr': {'class': 'form-input', 'placeholder': 'https://exemple.com/background.jpg'}}) }}
                    {{ form_errors(form.background) }}
                </div>
            </div>
        </div>

        {# Tags #}
        <div class="add-panel">
            <div class="panel-header">
                <div class="panel-title">
                    🏷️ Tags et catégories
                </div>
            </div>
            {{ form_label(form.tags, 'Sélectionnez les tags appropriés', {'label_attr': {'class': 'form-label'}}) }}
            <div class="tags-widget">
                {{ form_widget(form.tags, {'attr': {'class': 'tags-selector'}}) }}
            </div>
            {{ form_errors(form.tags) }}
        </div>

        {# Date #}
        <div class="add-panel">
            <div class="panel-header">
                <div class="panel-title">
                    📅 Date de publication
                </div>
            </div>
            {{ form_label(form.date, 'Date de publication de votre critique', {'label_attr': {'class': 'form-label'}}) }}
            {{ form_widget(form.date, {'attr': {'class': 'form-input'}}) }}
            {{ form_errors(form.date) }}
        </div>
    </div>

    {# Espacement avant la barre d'action #}
    <div class="mb-6"></div>

    {# Action Bar #}
    <div class="action-bar">
        <div class="status-indicator">
            <div class="status-dot"></div>
            <span>Prêt à publier votre critique</span>
        </div>
        {{ form_widget(form.submit, {'attr': {'class': 'submit-btn'}, 'label': '🚀 Publier la critique'}) }}
    </div>

    {{ form_end(form) }}

    <script>
        // Form validation and status updates
        let hasChanges = false;
        const form = document.querySelector('form');
        const statusText = document.querySelector('.status-indicator span');
        const statusDot = document.querySelector('.status-dot');

        form.addEventListener('input', () => {
            if (!hasChanges) {
                hasChanges = true;
                statusText.textContent = 'Modifications en cours...';
                statusDot.style.background = '#f59e0b';
            }
        });

        // Set today's date as default
        const dateInput = document.querySelector('input[name*="date"]');
        if (dateInput && !dateInput.value) {
            const today = new Date().toISOString().split('T')[0];
            dateInput.value = today;
        }
    </script>
</div>
{% endblock %}