(() => {

    "use strict";


    /* ========================================================
       DATA
    ======================================================== */

    const allCards =
        Array.isArray(window.PMPrepFlashcards)
            ? window.PMPrepFlashcards
            : [];


    const maxTerms =
        Number(window.PMPrepMaxTerms) || 3;


    const cards =
        allCards.slice(0, maxTerms);


    if (!cards.length) {
        return;
    }



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

    let currentIndex = 0;

    let knownCount = 0;

    let learningCount = 0;

    let isFlipped = false;

    const results = [];



    /* ========================================================
       ELEMENTS
    ======================================================== */

    const stage =
        document.getElementById("studyStage");


    const complete =
        document.getElementById("studyComplete");


    const card =
        document.getElementById("studyCard");


    const actions =
        document.getElementById("studyActions");


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


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


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


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


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


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


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


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


    const knownCounter =
        document.getElementById("knownCount");


    const learningCounter =
        document.getElementById("learningCount");


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


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



    /* ========================================================
       AVATAR STATES
    ======================================================== */

    const avatars = {

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

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

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

    };



    /* ========================================================
       SAVE SESSION
    ======================================================== */

    function saveSession() {

        const demoSession = {

            cards:
                cards,

            flashcardResults:
                results,

            known:
                knownCount,

            learning:
                learningCount,

            quizResults:
                [],

            quizCorrect:
                0

        };


        sessionStorage.setItem(

            "pmPrepDemoSession",

            JSON.stringify(
                demoSession
            )

        );

    }



    /* ========================================================
       RENDER CURRENT CARD
    ======================================================== */

    function renderCard() {

        const item =
            cards[currentIndex];


        isFlipped = false;


        card.classList.remove(
            "is-flipped"
        );


        actions.hidden = true;


        termTitle.textContent =
            item.term;


        definitionTerm.textContent =
            item.term;


        definition.textContent =
            item.definition;


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


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


        currentCounter.textContent =
            currentIndex + 1;


        totalCounter.textContent =
            cards.length;


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


        avatar.src =
            avatars.think;


        bubble.textContent =
            "Do you know this one?";


        card.setAttribute(
            "aria-label",
            "Reveal definition for " + item.term
        );

    }



    /* ========================================================
       FLIP CARD
    ======================================================== */

    function flipCard() {

        isFlipped =
            !isFlipped;


        card.classList.toggle(
            "is-flipped",
            isFlipped
        );


        if (isFlipped) {

            actions.hidden = false;


            avatar.src =
                avatars.neutral;


            bubble.textContent =
                "How well did you know it?";


            card.setAttribute(
                "aria-label",
                "Show term"
            );

        }

        else {

            actions.hidden = true;


            avatar.src =
                avatars.think;


            bubble.textContent =
                "Do you know this one?";


            card.setAttribute(
                "aria-label",
                "Reveal definition"
            );

        }

    }



    /* ========================================================
       RECORD ANSWER
    ======================================================== */

    function answerCard(result) {

        const item =
            cards[currentIndex];


        results.push({

            id:
                item.id,

            result:
                result

        });



        if (result === "known") {

            knownCount++;


            knownCounter.textContent =
                knownCount;


            avatar.src =
                avatars.celebrate;


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

        }

        else {

            learningCount++;


            learningCounter.textContent =
                learningCount;


            avatar.src =
                avatars.think;


            bubble.textContent =
                "Good one to review again.";

        }



        /* ----------------------------------------
           Save full demo session for quiz page
        ---------------------------------------- */

        saveSession();



        setTimeout(() => {

            if (
                currentIndex
                <
                cards.length - 1
            ) {

                currentIndex++;

                renderCard();

            }

            else {

                showComplete();

            }

        }, 550);

    }



    /* ========================================================
       COMPLETE FLASHCARD SECTION
    ======================================================== */

    function showComplete() {

        progress.style.width =
            "100%";


        stage.hidden =
            true;


        complete.hidden =
            false;


        document
            .getElementById("completeKnown")
            .textContent =
            knownCount;


        document
            .getElementById("completeLearning")
            .textContent =
            learningCount;


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


        document
            .getElementById("completedTermCount")
            .textContent =
            cards.length
            +
            (
                cards.length === 1
                    ? " term"
                    : " terms"
            );


        /*
         Save final flashcard state once more
         before moving to quiz.
        */

        saveSession();

    }



    /* ========================================================
       EVENTS
    ======================================================== */

    card.addEventListener(
        "click",
        flipCard
    );



    card.addEventListener(
        "keydown",
        event => {

            if (
                event.key === "Enter"
                ||
                event.key === " "
            ) {

                event.preventDefault();

                flipCard();

            }

        }
    );



    document
        .querySelectorAll(
            "[data-study-answer]"
        )
        .forEach(button => {

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

                    event.stopPropagation();


                    answerCard(
                        button.dataset.studyAnswer
                    );

                }
            );

        });



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

    totalCounter.textContent =
        cards.length;


    renderCard();


    /*
     Create session immediately.
     This guarantees quiz-demo.asp can read
     the full card array even before the first answer.
    */

    saveSession();

})();