/* =========================
   PROJECT POPUP
========================= */

function openProject() {

    const popup =
        document.getElementById("project-popup");

    popup.classList.add("show");

    document.body.style.overflow = "hidden";

    // Always start on customer view
    switchShowcase("customer");
}


function closeProject() {

    const popup =
        document.getElementById("project-popup");

    popup.classList.remove("show");

    document.body.style.overflow = "";
}


/* =========================
   CLOSE POPUP BY BACKDROP
========================= */

document.addEventListener(
    "click",
    function (event) {

        const popup =
            document.getElementById("project-popup");

        if (event.target === popup) {
            closeProject();
        }

    }
);


/* =========================
   ESCAPE KEY
========================= */

document.addEventListener(
    "keydown",
    function (event) {

        if (event.key === "Escape") {

            closeProject();

            closeImagePreview();

        }

    }
);


/* =========================
   NOTIFICATION
========================= */

function showNotification(message) {

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

    if (!notification) return;

    notification.textContent = message;

    notification.classList.add("show");

    setTimeout(
        function () {

            notification.classList.remove("show");

        },
        2500
    );
}


/* =========================
   GITHUB
========================= */

function showGithubMessage() {

    showNotification(
        "♡ GITHUB LINK COMING SOON"
    );

}


/* =========================
   LIVE PREVIEW
========================= */

function showLiveMessage() {

    showNotification(
        "👀 LIVE PREVIEW COMING SOON"
    );

}


/* =========================
   LOCKED PROJECT
========================= */

function lockedProject() {

    showNotification(
        "🔒 QUEST LOCKED — KEEP BUILDING!"
    );

}


/* =========================
   CUSTOMER / ADMIN TABS
========================= */

function switchShowcase(type) {

    const customer =
        document.getElementById("customer-showcase");

    const admin =
        document.getElementById("admin-showcase");

    const customerButton =
        document.getElementById("customer-tab");

    const adminButton =
        document.getElementById("admin-tab");

    if (!customer || !admin) return;


    if (type === "customer") {

        customer.classList.add("active-showcase");
        admin.classList.remove("active-showcase");

        if (customerButton) {
            customerButton.classList.add("active-tab");
        }

        if (adminButton) {
            adminButton.classList.remove("active-tab");
        }

    }


    if (type === "admin") {

        admin.classList.add("active-showcase");
        customer.classList.remove("active-showcase");

        if (adminButton) {
            adminButton.classList.add("active-tab");
        }

        if (customerButton) {
            customerButton.classList.remove("active-tab");
        }

    }

}


/* =========================
   IMAGE PREVIEW
========================= */

function previewImage(image) {

    const preview =
        document.getElementById("image-preview");

    const previewImage =
        document.getElementById("preview-image");

    if (!preview || !previewImage) return;

    previewImage.src = image.src;

    previewImage.alt = image.alt;

    preview.classList.add("show");

    document.body.style.overflow = "hidden";
}


function closeImagePreview() {

    const preview =
        document.getElementById("image-preview");

    if (!preview) return;

    preview.classList.remove("show");

    document.body.style.overflow = "";
}


/* =========================
   IMAGE PREVIEW BACKDROP
========================= */

document.addEventListener(
    "click",
    function (event) {

        const preview =
            document.getElementById("image-preview");

        if (
            preview &&
            event.target === preview
        ) {

            closeImagePreview();

        }

    }
);


/* =========================
   PAGE LOAD
========================= */

window.addEventListener(
    "load",
    function () {

        setTimeout(
            function () {

                showNotification(
                    "✦ WELCOME TO KISHA.EXE"
                );

            },
            800
        );

    }
);