document.addEventListener('DOMContentLoaded', function () {
    // Funkcja sprawdzająca orientację urządzenia
    function checkOrientation() {
        if (window.innerHeight < window.innerWidth) {
            document.getElementById('orientationWarning').style.display = 'flex';
        } else {
            document.getElementById('orientationWarning').style.display = 'none';
        }
    }
    window.addEventListener('resize', checkOrientation);
    window.addEventListener('orientationchange', checkOrientation);
    checkOrientation();

    // Ekrany wstępne (screen1-screen4) – działają jak wcześniej
    var screens = [
        document.getElementById('screen1'),
        document.getElementById('screen2'),
        document.getElementById('screen3'),
        document.getElementById('screen4')
    ];
    var currentScreen = 0;
    for (var i = 0; i < 3; i++) {
        screens[i].addEventListener('click', function () {
            screens[currentScreen].classList.remove('visible');
            currentScreen++;
            screens[currentScreen].classList.add('visible');
        });
    }

    // Dane graczy oraz odpowiedzi
    var firstPlayerName = '';
    var secondPlayerName = '';
    var player1Answers = [];
    var player2Answers = [];
    var currentPlayer = 1;
    var currentQuestionIndex = 0;
    var questionSet = [];
    var allQuestions = [];

    // Ładowanie pytań z pliku JSON
    fetch('questions.json')
            .then(response => response.json())
            .then(data => {
                allQuestions = data;
            })
            .catch(error => {
                console.error('Błąd podczas ładowania pytań:', error);
            });

    function selectRandomQuestions() {
        var copy = allQuestions.slice();
        copy.sort(() => Math.random() - 0.5);
        return copy.slice(0, 10);
    }

    // Funkcja czyszcząca kontener #quizContent
    function clearQuizContent() {
        var qc = document.getElementById('quizContent');
        qc.innerHTML = "";
    }

    // Funkcja tworząca sekcję quizu dynamicznie
    function createQuizSection() {
        var quizSection = document.createElement('div');
        quizSection.id = "quizSection";
        quizSection.className = "screen visible";

        var playerMessage = document.createElement('div');
        playerMessage.id = "playerMessage";
        quizSection.appendChild(playerMessage);

        var questionContainer = document.createElement('div');
        questionContainer.id = "questionContainer";

        var questionHeader = document.createElement('h2');
        questionHeader.id = "questionHeader";
        questionContainer.appendChild(questionHeader);

        var optionsContainer = document.createElement('div');
        optionsContainer.id = "optionsContainer";
        questionContainer.appendChild(optionsContainer);

        quizSection.appendChild(questionContainer);
        return quizSection;
    }

    // Funkcja ładująca pytanie w bieżącej sekcji quizu
    function loadQuestion(quizSection) {
        var playerMessage = quizSection.querySelector('#playerMessage');
        var questionHeader = quizSection.querySelector('#questionHeader');
        var optionsContainer = quizSection.querySelector('#optionsContainer');

        if (currentQuestionIndex >= questionSet.length) {
            finishRound();
            return;
        }
        var q = questionSet[currentQuestionIndex];
        questionHeader.textContent = q.header;
        optionsContainer.innerHTML = "";
        var letters = ['a', 'b', 'c', 'd'];
        letters.forEach(function (letter) {
            var optionDiv = document.createElement('div');
            optionDiv.className = 'option';

            var circleSpan = document.createElement('span');
            circleSpan.className = 'option-circle';
            circleSpan.textContent = letter;

            var textSpan = document.createElement('span');
            textSpan.className = 'option-text';
            textSpan.textContent = q[letter];

            optionDiv.appendChild(circleSpan);
            optionDiv.appendChild(textSpan);

            optionDiv.addEventListener('click', function () {
                // Dodajemy klasę active dla efektu podświetlenia
                optionDiv.classList.add('active');

                // Po krótkim opóźnieniu usuwamy podświetlenie i przechodzimy do kolejnego pytania
                setTimeout(function () {
                    optionDiv.classList.remove('active');

                    if (currentPlayer === 1) {
                        player1Answers.push(letter);
                    } else {
                        player2Answers.push(letter);
                    }
                    currentQuestionIndex++;
                    loadQuestion(quizSection);
                }, 300); // opóźnienie 300 ms (możesz dostosować ten czas)
            });

            optionsContainer.appendChild(optionDiv);
        });
    }


    // Funkcja wyświetlająca ekran przejściowy (transitional) dla danej rundy
    // imagePath – ścieżka do SVG, playerName – imię wyświetlane w SVG, callback – funkcja startująca rundę
    function showTransitionalScreen(imagePath, playerName, callback) {
        clearQuizContent();
        fetch(imagePath)
                .then(response => response.text())
                .then(svgText => {
                    var updatedSvg = svgText.replace(
                            /(<text class="st2" transform="translate\(245\.7 651\.4\)"><tspan(?: class="cls-6")? x="0" y="0">)[^<]+(<\/tspan><\/text>)/,
                            `$1${playerName}$2`
                            );
                    var transitionalScreen = document.createElement('div');
                    transitionalScreen.className = "screen visible";
                    transitionalScreen.innerHTML = updatedSvg;
                    transitionalScreen.style.cursor = "pointer";
                    document.getElementById('quizContent').appendChild(transitionalScreen);
                    transitionalScreen.onclick = function () {
                        transitionalScreen.remove();
                        callback();
                    };
                })
                .catch(error => {
                    console.error("Błąd podczas ładowania " + imagePath, error);
                });
    }

    // Funkcja kończąca rundę
    function finishRound() {
        if (currentPlayer === 1) {
            // Runda pierwszego gracza zakończona – wyświetlamy ekran przejściowy dla rundy drugiego gracza
            clearQuizContent();
            showTransitionalScreen('images/gracz2.svg', secondPlayerName, function () {
                // Po kliknięciu transitional screenu:
                currentPlayer = 2;
                currentQuestionIndex = 0;
                // Usunięto ponowne losowanie, aby zachować ten sam zestaw pytań:
                // questionSet = selectRandomQuestions();
                clearQuizContent();
                var newQuizSection = createQuizSection();
                document.getElementById('quizContent').appendChild(newQuizSection);
                loadQuestion(newQuizSection);
            });
        } else {
            // Runda drugiego gracza zakończona – obliczenie wyniku i wyświetlenie ekranu z wynikiem
            clearQuizContent();
            var matchCount = 0;
            for (var i = 0; i < questionSet.length; i++) {
                if (player1Answers[i] === player2Answers[i]) {
                    matchCount++;
                }
            }
            var score = matchCount * 10; // np. 4 zgodne odpowiedzi dają 40 punktów

            if (score < 50) {
                fetch('images/result_small.svg')
                        .then(response => response.text())
                        .then(svgText => {
                            var updatedSvg;
                            if (score === 0) {
                                updatedSvg = svgText.replace(
                                        /<text class="cls-2" transform="[^"]*">/,
                                        `<text class="cls-2" transform="translate(1158.79 896.92)">`
                                        );
                                updatedSvg = updatedSvg.replace(
                                        /<tspan[^>]*>[^<]+<\/tspan>/,
                                        `<tspan x="0" y="0">0</tspan>`
                                        );
                            } else {
                                updatedSvg = svgText.replace(
                                        /<text class="cls-2" transform="[^"]*">/,
                                        `<text class="cls-2" transform="translate(928.79 896.92)">`
                                        ).replace(
                                        /<tspan[^>]*>40<\/tspan>/,
                                        `<tspan x="0" y="0">${score}</tspan>`
                                        );
                            }
                            var resultScreen = document.createElement('div');
                            resultScreen.className = 'screen visible';
                            resultScreen.innerHTML = updatedSvg;
                            document.getElementById('quizContent').appendChild(resultScreen);

                            // Kliknięcie na ekran wyniku uruchamia prompt konkursowy
                            resultScreen.addEventListener('click', function () {
                                resultScreen.remove();
                                showContestPrompt();
                            });
                        })
                        .catch(error => {
                            console.error("Błąd podczas ładowania result_small.svg", error);
                        });
            } else {
                fetch('images/result.svg')
                        .then(response => response.text())
                        .then(svgText => {
                            var newTransform;
                            if (score >= 50 && score <= 90) {
                                newTransform = 'translate(900 895.8)';
                            } else {
                                newTransform = 'translate(748.68 895.84)';
                            }
                            // Zmiana transformacji w elemencie tekstowym o klasie "st1"
                            var updatedSvg = svgText.replace(/<text class="st1" transform="[^"]*">/, `<text class="st1" transform="${newTransform}">`);
                            updatedSvg = updatedSvg.replace(/<tspan[^>]*>100<\/tspan>/, `<tspan x="0" y="0">${score}</tspan>`);

                            var resultScreen = document.createElement('div');
                            resultScreen.className = 'screen visible';
                            resultScreen.innerHTML = updatedSvg;
                            document.getElementById('quizContent').appendChild(resultScreen);

                            resultScreen.addEventListener('click', function () {
                                resultScreen.remove();
                                showContestPrompt();
                            });
                        })
                        .catch(error => {
                            console.error("Błąd podczas ładowania result.svg", error);
                        });

            }
        }
    }



    // Funkcja wyświetlająca prompt o konkursie
    function showContestPrompt() {
        clearQuizContent();  // upewnij się, że masz tę funkcję, jeśli używasz jej do czyszczenia kontenera
        var contestDiv = document.createElement('div');
        contestDiv.id = 'contestPrompt';
        contestDiv.className = 'screen visible';
        contestDiv.style.textAlign = 'center';
        contestDiv.style.padding = '20px';

        var questionEl = document.createElement('p');
        questionEl.textContent = "Czy chcesz wziąć udział w konkursie i zdobyć nagrody?";
        contestDiv.appendChild(questionEl);

        // Utwórz kontener na przyciski
        var buttonContainer = document.createElement('div');
        buttonContainer.className = 'button-container';

        // Przycisk TAK – przekierowanie do conquest.html
        var btnYes = document.createElement('button');
        btnYes.textContent = "TAK";
        btnYes.addEventListener('click', function () {
            window.location.href = "conquest.html";
        });
        buttonContainer.appendChild(btnYes);

        // Przycisk NIE – przekierowanie do t-mobile.pl
        var btnNo = document.createElement('button');
        btnNo.textContent = "NIE";
        btnNo.addEventListener('click', function () {
            window.location.href = "https://t-mobile.pl";
        });
        buttonContainer.appendChild(btnNo);

        // Dodaj kontener przycisków do głównego prompta
        contestDiv.appendChild(buttonContainer);

        document.getElementById('quizContent').appendChild(contestDiv);
    }


    // Obsługa przycisku start na ekranie 4 (formularz)
    document.getElementById('startBtn').addEventListener('click', function () {
        firstPlayerName = document.getElementById('firstNameInput').value.trim();
        secondPlayerName = document.getElementById('secondNameInput').value.trim();
        if (!firstPlayerName || !secondPlayerName) {
            alert('Proszę uzupełnić oba pola imion.');
            return;
        }
        // Rozpoczynamy rundę pierwszego gracza – ładujemy ekran przejściowy (screen5)
        clearQuizContent();
        fetch('images/gracz7.svg')
                .then(response => response.text())
                .then(svgText => {
                    var updatedSvg = svgText.replace(
                            /(<text class="st2" transform="translate\(245\.7 651\.4\)"><tspan(?: class="cls-6")? x="0" y="0">)[^<]+(<\/tspan><\/text>)/,
                            `$1${firstPlayerName}$2`
                            );
                    var transitionalScreen = document.createElement('div');
                    transitionalScreen.className = "screen visible";
                    transitionalScreen.innerHTML = updatedSvg;
                    transitionalScreen.style.cursor = "pointer";
                    document.getElementById('quizContent').appendChild(transitionalScreen);
                    transitionalScreen.onclick = function () {
                        transitionalScreen.remove();
                        currentPlayer = 1;
                        currentQuestionIndex = 0;
                        questionSet = selectRandomQuestions();
                        clearQuizContent();
                        var quizSection = createQuizSection();
                        document.getElementById('quizContent').appendChild(quizSection);
                        loadQuestion(quizSection);
                    };
                })
                .catch(error => {
                    console.error("Błąd podczas ładowania gracz7.svg:", error);
                });
    });

    // Dodatkowa obsługa – nakładka na górną połowę ekranu1 (przekierowanie)
    var introScreen = document.getElementById('screen1');
    if (introScreen) {
        var topHalf = introScreen.querySelector('.bottom-half');
        if (topHalf) {
            topHalf.addEventListener('click', function (e) {
                window.location.href =
                        "https://www.t-mobile.pl/c/oferta-specjalna/magenta-moments?srsltid=AfmBOopufAmD72n6Z32_1CDd1573mItZdc1lu2-pA920s5cni7bwdSxz";
                e.stopPropagation();
            });
        }
    }
});
