document.addEventListener("DOMContentLoaded", () => {

    /*
    |--------------------------------------------------------------------------
    | Project Tabs
    |--------------------------------------------------------------------------
    */

    const tabs = document.querySelectorAll("[data-project-tab]");
    const views = document.querySelectorAll(".project-tab-view");

    tabs.forEach(tab => {

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

            const target = tab.dataset.projectTab;

            tabs.forEach(item => {
                item.classList.remove("is-active");
            });

            views.forEach(view => {
                view.classList.remove("is-active");
            });

            tab.classList.add("is-active");

            const targetView = document.getElementById(
                `project-tab-${target}`
            );

            if (targetView) {
                targetView.classList.add("is-active");
            }

        });

    });


    /*
    |--------------------------------------------------------------------------
    | Modal
    |--------------------------------------------------------------------------
    */

    const modal = document.getElementById("project-action-modal");
    const modalTitle = document.getElementById("project-modal-title");
    const modalDescription = document.getElementById(
        "project-modal-description"
    );

    const closeButtons = document.querySelectorAll(
        ".project-modal-close, .project-modal-close-action"
    );

    const actionButtons = document.querySelectorAll(
        "[data-project-action]"
    );


    const actions = {

        edit: {
            title: "Edit Project",
            description:
                "The project editor will allow you to update the client, project information, budget, timeline, status and other project settings."
        },

        update: {
            title: "Update Project Status",
            description:
                "Choose a new project stage and update the project's progress."
        },

        "new-task": {
            title: "Add Project Task",
            description:
                "Create a task, assign it to a team member and track its progress."
        },

        task: {
            title: "Add Project Task",
            description:
                "Create a new task for this project."
        },

        "new-deliverable": {
            title: "Add Deliverable",
            description:
                "Create a new project deliverable and track whether it has been completed."
        },

        invoice: {
            title: "Create Invoice",
            description:
                "Create and attach an invoice to this project."
        },

        note: {
            title: "Add Internal Note",
            description:
                "Add a private note for the Biritex team."
        },

        "new-note": {
            title: "Add Internal Note",
            description:
                "Add a private project note for the internal team."
        },

        client: {
            title: "Client Information",
            description:
                "The client profile will contain contacts, projects, invoices, communication history and other client records."
        },

        message: {
            title: "Send Client Update",
            description:
                "This will eventually connect to the Biritex communication system for sending client updates."
        }

    };


    function openModal(action) {

        if (!modal) {
            return;
        }

        const data = actions[action] || {
            title: "Project Action",
            description:
                "This project action is ready to be connected to the database."
        };

        modalTitle.textContent = data.title;
        modalDescription.textContent = data.description;

        modal.classList.add("is-open");
        modal.setAttribute("aria-hidden", "false");

    }


    function closeModal() {

        if (!modal) {
            return;
        }

        modal.classList.remove("is-open");
        modal.setAttribute("aria-hidden", "true");

    }


    actionButtons.forEach(button => {

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

            const action = button.dataset.projectAction;

            openModal(action);

        });

    });


    closeButtons.forEach(button => {

        button.addEventListener("click", closeModal);

    });


    const backdrop = document.querySelector(
        ".project-modal-backdrop"
    );

    if (backdrop) {

        backdrop.addEventListener(
            "click",
            closeModal
        );

    }


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

        if (event.key === "Escape") {
            closeModal();
        }

    });


    /*
    |--------------------------------------------------------------------------
    | Confirm Modal
    |--------------------------------------------------------------------------
    */

    const confirmButton = document.getElementById(
        "project-modal-confirm"
    );

    if (confirmButton) {

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

            modalDescription.textContent =
                "Action recorded in the current demo interface. When the database/API is connected, this action will save the appropriate record.";

            confirmButton.textContent = "Done";

            setTimeout(() => {

                closeModal();

                confirmButton.textContent = "Continue";

            }, 900);

        });

    }


    /*
    |--------------------------------------------------------------------------
    | Task Menu
    |--------------------------------------------------------------------------
    */

    document.querySelectorAll(".task-menu").forEach(button => {

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

            alert(
                "Task actions will be connected to the project database."
            );

        });

    });


    /*
    |--------------------------------------------------------------------------
    | Progress Animation
    |--------------------------------------------------------------------------
    */

    const progressBar = document.querySelector(
        ".project-progress-bar"
    );

    if (progressBar) {

        const width = progressBar.style.width;

        progressBar.style.width = "0%";

        requestAnimationFrame(() => {

            setTimeout(() => {

                progressBar.style.width = width;

            }, 150);

        });

    }

});