(() => {

    "use strict";


    /* ========================================================
       LOAD SESSION
    ======================================================== */

    const rawSession =
        sessionStorage.getItem(
            "pmPrepDemoSession"
        );


    const quizStage =
        document.getElementById(
            "quizStage"
        );


    const quizMissing =
        document.getElementById(
            "quizMissing"
        );


    if (!rawSession) {

        if (quizStage) {
            quizStage.hidden = true;
        }

        if (quizMissing) {
            quizMissing.hidden = false;
        }

        return;

    }


    let session;


    try {

        session =
            JSON.parse(rawSession);

    }
    catch (error) {

        sessionStorage.removeItem(
            "pmPrepDemoSession"
        );

        if (quizStage) {
            quizStage.hidden = true;
        }

        if (quizMissing) {
            quizMissing.hidden = false;
        }

        return;

    }



    /* ========================================================
       CARDS
    ======================================================== */

    const cards =
        Array.isArray(session.cards)
            ? session.cards
            : [];


    if (!cards.length) {

        quizStage.hidden = true;
        quizMissing.hidden = false;

        return;

    }



    /* ========================================================
       STATE
    ======================================================== */

    let currentIndex = 0;

    let correctCount = 0;

    let answered = false;


    const quizResults =
        [];



    /* ========================================================
       DOM
    ======================================================== */

    const currentCounter =
        document.getElementById(
            "quizCurrent"
        );


    const totalCounter =
        document.getElementById(
            "quizTotal"
        );


    const progress =
        document.getElementById(
            "quizProgress"
        );


    const definition =
        document.getElementById(
            "quizDefinition"
        );


    const knowledgeArea =
        document.getElementById(
            "quizKnowledgeArea"
        );


    const answersContainer =
        document.getElementById(
            "quizAnswers"
        );


    const feedback =
        document.getElementById(
            "quizFeedback"
        );


    const feedbackTitle =
        document.getElementById(
            "quizFeedbackTitle"
        );


    const feedbackText =
        document.getElementById(
            "quizFeedbackText"
        );


    const nextButton =
        document.getElementById(
            "quizNext"
        );


    const avatar =
        document.getElementById(
            "quizAvatar"
        );


    const bubble =
        document.getElementById(
            "quizCoachBubble"
        );


    const resultScreen =
        document.getElementById(
            "quizResult"
        );



    /* ========================================================
       AVATARS
    ======================================================== */

    const avatars = {

        think:
            "/assets/img/avatars/avatar-think.webp",

        neutral:
            "/assets/img/avatars/avatar-neutral.webp",

        celebrate:
            "/assets/img/avatars/avatar-celebrate.webp"

    };



    /* ========================================================
       SHUFFLE
    ======================================================== */

    function shuffleArray(array) {

        const result =
            [...array];


        for (
            let i = result.length - 1;
            i > 0;
            i--
        ) {

            const j =
                Math.floor(
                    Math.random()
                    *
                    (i + 1)
                );


            [
                result[i],
                result[j]
            ]
            =
            [
                result[j],
                result[i]
            ];

        }


        return result;

    }



    /* ========================================================
       RENDER QUESTION
    ======================================================== */

    function renderQuestion() {

        answered = false;


        const item =
            cards[currentIndex];


        currentCounter.textContent =
            currentIndex + 1;


        totalCounter.textContent =
            cards.length;


        progress.style.width =
            (
                currentIndex
                /
                cards.length
                *
                100
            )
            +
            "%";


        definition.textContent =
            item.definition;


        knowledgeArea.textContent =
            item.area
            ||
            "Project Management";


        feedback.hidden =
            true;


        nextButton.hidden =
            true;


        avatar.src =
            avatars.think;


        bubble.textContent =
            "Which term matches this definition?";


        answersContainer.innerHTML =
            "";


        const wrongAnswers =
            Array.isArray(
                item.wrongAnswers
            )
                ? item.wrongAnswers
                : [];


        const answers =
            shuffleArray([

                item.term,

                ...wrongAnswers

            ]);


        answers.forEach(
            answerText => {

                const button =
                    document.createElement(
                        "button"
                    );


                button.type =
                    "button";


                button.className =
                    "quiz-answer";


                button.textContent =
                    answerText;


                button.dataset.answer =
                    answerText;


                button.addEventListener(
                    "click",
                    () => {

                        selectAnswer(
                            button,
                            answerText
                        );

                    }
                );


                answersContainer.appendChild(
                    button
                );

            }
        );

    }



    /* ========================================================
       SELECT ANSWER
    ======================================================== */

    function selectAnswer(
        selectedButton,
        selectedAnswer
    ) {

        if (answered) {
            return;
        }


        answered = true;


        const item =
            cards[currentIndex];


        const isCorrect =
            selectedAnswer === item.term;


        const buttons =
            answersContainer.querySelectorAll(
                ".quiz-answer"
            );


        buttons.forEach(
            button => {

                button.disabled =
                    true;


                if (
                    button.dataset.answer
                    ===
                    item.term
                ) {

                    button.classList.add(
                        "is-correct"
                    );

                }

            }
        );


        if (isCorrect) {

            correctCount++;


            selectedButton.classList.add(
                "is-correct"
            );


            feedback.className =
                "quiz-feedback is-correct";


            feedbackTitle.textContent =
                "Correct!";


            feedbackText.textContent =
                item.term
                +
                " is the right answer.";


            avatar.src =
                avatars.celebrate;


            bubble.textContent =
                "Nice! You've got it.";

        }

        else {

            selectedButton.classList.add(
                "is-wrong"
            );


            feedback.className =
                "quiz-feedback is-wrong";


            feedbackTitle.textContent =
                "Not quite.";


            feedbackText.textContent =
                "The correct answer is "
                +
                item.term
                +
                ".";


            avatar.src =
                avatars.think;


            bubble.textContent =
                "Good try. Now you'll remember it.";

        }


        feedback.hidden =
            false;


        nextButton.hidden =
            false;



        /* ----------------------------------------
           SAVE RESULT
        ---------------------------------------- */

        quizResults.push({

            id:
                item.id,

            selected:
                selectedAnswer,

            correctAnswer:
                item.term,

            correct:
                isCorrect

        });



        updateSession();

    }



    /* ========================================================
       UPDATE SESSION STORAGE
    ======================================================== */

    function updateSession() {

        session.quizResults =
            quizResults;


        session.quizCorrect =
            correctCount;


        sessionStorage.setItem(

            "pmPrepDemoSession",

            JSON.stringify(
                session
            )

        );

    }



    /* ========================================================
       NEXT QUESTION
    ======================================================== */

    nextButton.addEventListener(
        "click",
        () => {

            if (
                currentIndex
                <
                cards.length - 1
            ) {

                currentIndex++;

                renderQuestion();

            }

            else {

                showResult();

            }

        }
    );



    /* ========================================================
       RESULT SCREEN
    ======================================================== */

    function showResult() {

        progress.style.width =
            "100%";


        quizStage.hidden =
            true;


        resultScreen.hidden =
            false;


        const score =
            document.getElementById(
                "quizScore"
            );


        const message =
            document.getElementById(
                "quizResultMessage"
            );


        score.textContent =
            correctCount
            +
            " / "
            +
            cards.length;


        document
            .getElementById(
                "resultTermsViewed"
            )
            .textContent =
            cards.length;


        document
            .getElementById(
                "resultQuizCorrect"
            )
            .textContent =
            correctCount;



        /* ----------------------------------------
           Result message
        ---------------------------------------- */

        const ratio =
            correctCount
            /
            cards.length;


        if (ratio === 1) {

            message.textContent =
                "Perfect score. You're off to a strong start.";

        }

        else if (ratio >= .66) {

            message.textContent =
                "Good result. You remembered most of the terms.";

        }

        else {

            message.textContent =
                "A good start — a little more practice will make these terms stick.";

        }


        updateSession();

    }



    /* ========================================================
       START
    ======================================================== */

    totalCounter.textContent =
        cards.length;


    renderQuestion();

})();