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

{% block title %}Pedantix - Accueil{% endblock %}

{% block body %}
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="game-container p-5 text-center">
            <h1 class="display-4 mb-4">🧠 Pedantix</h1>
            <p class="lead mb-5">Jeu de mots collaboratif basé sur Wikipedia. Créez votre propre salle ou rejoignez celle d'un ami !</p>

            <!-- Onglets pour créer ou rejoindre une salle -->
            <ul class="nav nav-pills nav-justified mb-4" id="gameTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="create-tab" data-bs-toggle="pill" data-bs-target="#create-room" type="button" role="tab">
                        <i class="fas fa-plus-circle me-2"></i>Créer une salle
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="join-tab" data-bs-toggle="pill" data-bs-target="#join-room" type="button" role="tab">
                        <i class="fas fa-users me-2"></i>Rejoindre une salle
                    </button>
                </li>
            </ul>

            <div class="tab-content" id="gameTabsContent">
                <!-- Créer une salle -->
                <div class="tab-pane fade show active" id="create-room" role="tabpanel">
                    <form id="createRoomForm">
                        <div class="mb-4">
                            <label for="wikipediaUrl" class="form-label fw-bold">URL de l'article Wikipedia :</label>
                            <div class="input-group">
                                <input type="url" class="form-control word-input" id="wikipediaUrl"
                                       placeholder="https://fr.wikipedia.org/wiki/..." required>
                                <button type="button" class="btn btn-outline-secondary" onclick="getRandomArticle()">
                                    <i class="fas fa-random me-1"></i>Aléatoire
                                </button>
                            </div>
                            <div class="form-text">Collez l'URL d'un article Wikipedia français ou utilisez le bouton aléatoire</div>
                        </div>

                        <div class="mb-4">
                            <label class="form-label fw-bold">Mode de jeu :</label>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <div class="card h-100">
                                        <div class="card-body text-center">
                                            <input type="radio" class="form-check-input" id="competitionMode" name="gameMode" value="competition" checked>
                                            <label for="competitionMode" class="form-check-label">
                                                <h5 class="card-title mt-2">🏆 Compétition</h5>
                                                <p class="card-text small">Chaque joueur trouve ses propres mots. Le premier à trouver le mot-titre gagne !</p>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="card h-100">
                                        <div class="card-body text-center">
                                            <input type="radio" class="form-check-input" id="cooperationMode" name="gameMode" value="cooperation">
                                            <label for="cooperationMode" class="form-check-label">
                                                <h5 class="card-title mt-2">🤝 Coopération</h5>
                                                <p class="card-text small">Tous les mots trouvés par les joueurs apparaissent pour tout le monde. Travaillez ensemble !</p>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="fas fa-rocket me-2"></i>Créer la salle
                        </button>

                        <!-- Bouton pour créer une partie aléatoire directement -->
                        <div class="mt-3">
                            <button type="button" class="btn btn-outline-primary btn-lg" onclick="createRandomRoom()">
                                <i class="fas fa-dice me-2"></i>Partie aléatoire mystère
                            </button>
                            <div class="form-text">Crée une partie avec un article surprise (titre caché)</div>
                        </div>
                    </form>
                </div>

                <!-- Rejoindre une salle -->
                <div class="tab-pane fade" id="join-room" role="tabpanel">
                    <form id="joinRoomForm">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="roomCode" class="form-label fw-bold">Code de la salle :</label>
                                <input type="text" class="form-control word-input" id="roomCode"
                                       placeholder="ABC123" maxlength="6" required style="text-transform: uppercase;">
                            </div>
                            <div class="col-md-6">
                                <label for="playerName" class="form-label fw-bold">Votre nom :</label>
                                <input type="text" class="form-control word-input" id="playerName"
                                       placeholder="Votre pseudo" maxlength="20" required>
                            </div>
                        </div>
                        <div class="mt-4">
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="fas fa-sign-in-alt me-2"></i>Rejoindre la salle
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Messages d'erreur/succès -->
            <div id="alertContainer" class="mt-4"></div>
        </div>

        <!-- Instructions -->
        <div class="game-container p-4 mt-4">
            <h3 class="text-center mb-3">Comment jouer ?</h3>
            <div class="row">
                <div class="col-md-4 text-center mb-3">
                    <i class="fas fa-search fa-3x text-primary mb-3"></i>
                    <h5>Devinez les mots</h5>
                    <p>Trouvez les mots-clés de l'article Wikipedia choisi</p>
                </div>
                <div class="col-md-4 text-center mb-3">
                    <i class="fas fa-trophy fa-3x text-warning mb-3"></i>
                    <h5>Gagnez des points</h5>
                    <p>Plus le mot est important dans l'article, plus vous gagnez de points</p>
                </div>
                <div class="col-md-4 text-center mb-3">
                    <i class="fas fa-users fa-3x text-success mb-3"></i>
                    <h5>Jouez ensemble</h5>
                    <p>Partagez le code de votre salle avec vos amis pour jouer ensemble</p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const createForm = document.getElementById('createRoomForm');
    const joinForm = document.getElementById('joinRoomForm');
    const alertContainer = document.getElementById('alertContainer');

    // Transformer le code de salle en majuscules
    document.getElementById('roomCode').addEventListener('input', function(e) {
        e.target.value = e.target.value.toUpperCase();
    });

    // Gérer la création de salle
    createForm.addEventListener('submit', async function(e) {
        e.preventDefault();

        const formData = new FormData(e.target);
        const wikipediaUrl = formData.get('wikipediaUrl') || document.getElementById('wikipediaUrl').value;
        const gameMode = formData.get('gameMode') || 'competition';

        if (!wikipediaUrl) {
            showAlert('Veuillez entrer une URL Wikipedia valide.', 'danger');
            return;
        }

        showAlert('Création de la salle en cours...', 'info');

        try {
            const response = await fetch('/create-room', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    wikipedia_url: wikipediaUrl,
                    game_mode: gameMode
                })
            });

            const data = await response.json();

            if (data.success) {
                const modeText = data.game_mode === 'cooperation' ? ' (Mode Coopération)' : ' (Mode Compétition)';
                showAlert(`Salle créée avec succès ! Code: <strong>${data.room_code}</strong><br>Article: ${data.title}${modeText}`, 'success');
                setTimeout(() => {
                    window.location.href = `/game/${data.room_code}`;
                }, 2000);
            } else {
                showAlert(data.error || 'Erreur lors de la création de la salle', 'danger');
            }
        } catch (error) {
            showAlert('Erreur de connexion. Veuillez réessayer.', 'danger');
        }
    });

    // Gérer la connexion à une salle
    joinForm.addEventListener('submit', async function(e) {
        e.preventDefault();

        const roomCode = document.getElementById('roomCode').value;
        const playerName = document.getElementById('playerName').value;

        if (!roomCode || !playerName) {
            showAlert('Veuillez remplir tous les champs.', 'danger');
            return;
        }

        showAlert('Connexion à la salle...', 'info');

        try {
            const response = await fetch('/join-room', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    room_code: roomCode,
                    player_name: playerName
                })
            });

            const data = await response.json();

            if (data.success) {
                // Stocker les informations de session
                sessionStorage.setItem('gameSession', JSON.stringify({
                    sessionId: data.session_id,
                    roomCode: data.room.code,
                    playerName: data.player.name
                }));

                window.location.href = `/game/${data.room.code}`;
            } else {
                showAlert(data.error || 'Erreur lors de la connexion à la salle', 'danger');
            }
        } catch (error) {
            showAlert('Erreur de connexion. Veuillez réessayer.', 'danger');
        }
    });

    function showAlert(message, type) {
        alertContainer.innerHTML = `
            <div class="alert alert-${type} alert-dismissible fade show" role="alert">
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        `;
    }

    window.getRandomArticle = async function() {
        showAlert('Chargement d\'un article aléatoire...', 'info');

        try {
            const response = await fetch('/api/random-article');
            const data = await response.json();

            if (data.success) {
                document.getElementById('wikipediaUrl').value = data.article.url;
                showAlert(`Article aléatoire chargé : ${data.article.title}`, 'success');
            } else {
                showAlert(data.error || 'Erreur lors du chargement de l\'article aléatoire', 'danger');
            }
        } catch (error) {
            console.error('Erreur lors du chargement de l\'article aléatoire:', error);
            showAlert('Erreur de connexion lors du chargement de l\'article aléatoire. Veuillez réessayer.', 'danger');
        }
    }

    // Fonction pour créer automatiquement une room avec un article aléatoire SANS révéler le titre
    window.createRandomRoom = async function() {
        showAlert('Création d\'une partie avec article mystère...', 'info');

        try {
            // D'abord récupérer un article aléatoire
            const randomResponse = await fetch('/api/random-article');
            const randomData = await randomResponse.json();

            if (!randomData.success) {
                showAlert(randomData.error || 'Aucun article aléatoire disponible', 'danger');
                return;
            }

            // Ensuite créer la room avec cet article SANS afficher le titre côté client
            const gameMode = document.querySelector('input[name="gameMode"]:checked')?.value || 'competition';

            const createResponse = await fetch('/create-room', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    wikipedia_url: randomData.article.url,
                    game_mode: gameMode
                })
            });

            const createData = await createResponse.json();

            if (createData.success) {
                const modeText = createData.game_mode === 'cooperation' ? ' (Mode Coopération)' : ' (Mode Compétition)';
                // NE PAS afficher le titre de l'article pour éviter de spoiler
                showAlert(`Salle créée avec succès ! Code: <strong>${createData.room_code}</strong><br>Article mystère sélectionné${modeText}`, 'success');
                setTimeout(() => {
                    window.location.href = `/game/${createData.room_code}`;
                }, 2000);
            } else {
                showAlert(createData.error || 'Erreur lors de la création de la salle', 'danger');
            }
        } catch (error) {
            console.error('Erreur lors de la création automatique:', error);
            showAlert('Erreur de connexion. Veuillez réessayer.', 'danger');
        }
    }
});
</script>
{% endblock %}