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

{% block body %}
    {% if game %}
        <div class="game-container">
            <div class="game-actions">
                {% if game.status == constant('App\\Entity\\Game::STATUS_IN_PROGRESS') %}
                    <div class="abandon-wrapper">
                        <button type="button" class="btn btn-abandon" id="abandon-trigger">Abandonner</button>
                        <div class="abandon-popover" id="abandon-popover">
                            <p class="abandon-popover-text">Êtes-vous sûr de vouloir abandonner ?</p>
                            <div class="abandon-popover-actions">
                                <form method="post" action="{{ path('app_game_abandon', {id: game.id}) }}" id="abandon-form">
                                    <input type="hidden" name="_token" value="{{ csrf_token('game_abandon') }}">
                                    <input type="hidden" name="attempted_letters" id="abandon-attempted-letters" value="">
                                    <button type="submit" class="btn btn-abandon-confirm">Abandonner</button>
                                </form>
                                <button type="button" class="btn btn-abandon-cancel" id="abandon-cancel">Non, continuer</button>
                            </div>
                        </div>
                    </div>
                    <script>
                        (function() {
                            var trigger = document.getElementById('abandon-trigger');
                            var popover = document.getElementById('abandon-popover');
                            var cancel = document.getElementById('abandon-cancel');
                            var form = document.getElementById('abandon-form');
                            var attemptedLettersInput = document.getElementById('abandon-attempted-letters');

                            function collectAttemptedLetters() {
                                if (!attemptedLettersInput) {
                                    return;
                                }

                                var attemptedLetters = {};
                                document.querySelectorAll('#actors input[data-row-index][data-char-index]').forEach(function(input) {
                                    var value = (input.value || '').trim().toUpperCase();
                                    if (!/^[A-Z]$/.test(value)) {
                                        return;
                                    }

                                    var rowIndex = input.getAttribute('data-row-index');
                                    var charIndex = input.getAttribute('data-char-index');

                                    if (!attemptedLetters[rowIndex]) {
                                        attemptedLetters[rowIndex] = {};
                                    }

                                    attemptedLetters[rowIndex][charIndex] = value;
                                });

                                attemptedLettersInput.value = JSON.stringify(attemptedLetters);
                            }

                            trigger.addEventListener('click', function() {
                                popover.classList.toggle('open');
                            });
                            cancel.addEventListener('click', function() {
                                popover.classList.remove('open');
                            });
                            document.addEventListener('click', function(e) {
                                if (!popover.contains(e.target) && e.target !== trigger) {
                                    popover.classList.remove('open');
                                }
                            });
                            form.addEventListener('submit', collectAttemptedLetters);
                        })();
                    </script>
                {% else %}
                    <div class="game-result-banner">
                        <span>Partie abandonnée, voici la solution.</span>
                        <a href="{{ path('app_homepage') }}" class="btn btn-primary">Nouvelle partie</a>
                    </div>
                {% endif %}
            </div>

            <div {{ react_component('GameGrid', {
                grid: grid,
                width: width,
                middle: middle,
                revealed: game.status == constant('App\\Entity\\Game::STATUS_ABANDONED'),
                attemptedLetters: attemptedLetters,
            }) }}></div>

            <div class="game-footer">
                <a href="https://git.lclr.dev/thibaud-lclr/ltbxd-actorle/issues/new?template=.gitea%2fissue_template%2fbug_report.yaml&title={{ ('Bug — Game #' ~ game.id)|url_encode }}" class="btn-bug-report" target="_blank" rel="noopener">
                    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="8" cy="8" r="7"/>
                        <line x1="8" y1="5" x2="8" y2="9"/>
                        <circle cx="8" cy="11.5" r="0.5" fill="currentColor" stroke="none"/>
                    </svg>
                    Signaler un bug
                </a>
            </div>
        </div>
    {% else %}
        <div class="game-start-container">
            <form method="post" action="{{ path('app_game_start') }}" id="start-form"
                  data-controller="game-config"
                  data-game-config-bucket-size-value="20">
                <input type="hidden" name="_token" value="{{ csrf_token('game_start') }}">

                <div class="config-panel">
                    <div class="config-section">
                        <div class="config-section-title">Acteurs</div>
                        <div class="config-range">
                            <span class="config-range-label">Tranche de popularité</span>
                            <span class="config-range-value" data-game-config-target="popularityValue">1-10</span>
                        </div>
                        <div class="config-dual-range">
                            <div class="config-dual-range-track"></div>
                            <div class="config-dual-range-fill" data-game-config-target="popularityFill"></div>
                            <input
                                id="min-popularity"
                                type="range"
                                name="popularity_min_bucket"
                                min="1"
                                max="10"
                                step="1"
                                value="1"
                                class="config-range-input config-range-input-min"
                                data-game-config-target="popularityMinInput"
                                data-action="input->game-config#syncPopularityRange"
                            >
                            <input
                                id="max-popularity"
                                type="range"
                                name="popularity_max_bucket"
                                min="1"
                                max="10"
                                step="1"
                                value="10"
                                class="config-range-input config-range-input-max"
                                data-game-config-target="popularityMaxInput"
                                data-action="input->game-config#syncPopularityRange"
                            >
                        </div>
                        <div class="config-range-scale" aria-hidden="true">
                            <span>1</span>
                            <span>5</span>
                            <span>10</span>
                        </div>
                        <p class="config-help" data-game-config-target="popularitySummary">
                            Tous les acteurs.
                        </p>
                    </div>

                    {% if app.user %}
                        <div class="config-section">
                            <label class="config-toggle">
                                <span class="config-toggle-label">Films vus</span>
                                <input type="checkbox" name="watched_only" value="1" class="toggle-switch">
                            </label>
                        </div>
                    {% endif %}

                    <div class="config-section">
                        <div class="config-section-title">Paramètres des indices</div>
                        <div class="config-hint-types">
                            <label class="config-checkbox">
                                <input type="checkbox" name="hint_film" value="1" checked
                                       data-game-config-target="hintType"
                                       data-action="change->game-config#enforceMinOneChecked">
                                Film
                            </label>
                            <label class="config-checkbox">
                                <input type="checkbox" name="hint_character" value="1" checked
                                       data-game-config-target="hintType"
                                       data-action="change->game-config#enforceMinOneChecked">
                                Rôle
                            </label>
                            <label class="config-checkbox">
                                <input type="checkbox" name="hint_award" value="1" checked
                                       data-game-config-target="hintType"
                                       data-action="change->game-config#enforceMinOneChecked">
                                Récompense
                            </label>
                        </div>

                        <div class="config-award-types" data-game-config-target="awardSection">
                            <div class="config-section-subtitle">Récompenses</div>
                            <div class="config-award-list">
                                <label class="config-checkbox">
                                    <input type="checkbox" checked
                                           data-game-config-target="allAwards"
                                           data-action="change->game-config#toggleAllAwards">
                                    Toutes les récompenses
                                </label>
                                {% for awardType in awardTypes %}
                                    <label class="config-checkbox">
                                        <input type="checkbox" name="award_types[]"
                                               value="{{ awardType.id }}" checked
                                               data-game-config-target="awardType"
                                               data-action="change->game-config#syncAllAwards">
                                        {{ awardType.name }}
                                    </label>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>

                <button type="submit" class="btn btn-primary btn-start">Commencer une partie</button>
            </form>
            <div class="start-loader" id="start-loader"></div>
            {% if not app.user %}
                <p class="start-login-hint">
                    <a href="{{ path('app_login') }}">Connectez-vous</a> pour importer vos propres films
                </p>
            {% endif %}

            {% for message in app.flashes('error') %}
                <div class="flash-error">{{ message }}</div>
            {% endfor %}

            <script>
                document.getElementById('start-form').addEventListener('submit', function () {
                    this.style.display = 'none';
                    document.getElementById('start-loader').style.display = 'block';
                });
            </script>
        </div>
    {% endif %}
{% endblock %}