document.addEventListener("DOMContentLoaded", function () {

    console.log("NP Collection Edit Loaded");

    /*
    ------------------------------------------------
    Elements
    ------------------------------------------------
    */

    const drawer = document.getElementById("np-collection-drawer");

    const overlay = document.getElementById("np-collection-overlay");

    const modal = document.getElementById("np-my-copies-modal");

    const modalOverlay = document.getElementById("np-my-copies-overlay");

    const modalBody = document.getElementById("np-my-copies-list");

    const closeModalButton =
        document.getElementById("np-close-my-copies");

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

    function openModal() {

        modal.classList.add("open");

        modalOverlay.classList.add("open");

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

    }

    function closeModal() {

        modal.classList.remove("open");

        modalOverlay.classList.remove("open");

        document.body.style.overflow = "";

    }

    if (closeModalButton) {

        closeModalButton.addEventListener("click", closeModal);

    }

    if (modalOverlay) {

        modalOverlay.addEventListener("click", closeModal);

    }

    /*
    ------------------------------------------------
    Load My Copies
    ------------------------------------------------
    */

    function loadCopies(pageId, catalogueId) {

        modalBody.innerHTML = "<p>Loading...</p>";

        const formData = new URLSearchParams();

        formData.append("action", "np_get_owned_copies");

        formData.append("nonce", npCollection.nonce);

        formData.append("page_id", pageId);

        formData.append("catalogue_id", catalogueId);

        fetch(npCollection.ajaxurl, {

            method: "POST",

            headers: {

                "Content-Type":
                    "application/x-www-form-urlencoded"

            },

            body: formData.toString()

        })

        .then(function (response) {

            return response.json();

        })

       .then(function (response) {

    if (!response.success) {

        modalBody.innerHTML = "<p>No copies found.</p>";

        return;

    }

    renderCopies(response.data);

})

        .catch(function (error) {

            console.error(error);

        });

    }
    /*
    ------------------------------------------------
    Open My Copies
    ------------------------------------------------
    */

    document.querySelectorAll(".np-add-collection").forEach(function (button) {

        button.addEventListener("click", function () {

            const action = button.dataset.action || "normal";

            const owned = parseInt(button.dataset.owned || "0", 10);

            if (action !== "edit") {

                return;

            }

            if (owned <= 1) {

                return;

            }

            const pageId = button.dataset.pageId;

            const coin = JSON.parse(button.dataset.coin);

            loadCopies(
                pageId,
                coin.catalogue_id
            );

            openModal();

        });

    });

    /*
    ------------------------------------------------
    Render My Copies
    ------------------------------------------------
    */

    function renderCopies(copies) {

        let html = "";

        copies.forEach(function (coin, index) {

            html += `
                <div class="np-copy-card">

                    <div class="np-copy-card-header">

                        <strong>Copy ${index + 1}</strong>

                        ${coin.upgrade_required == 1
                            ? '<span class="np-copy-upgrade">Needs Upgrade</span>'
                            : ''}

                    </div>

                    <div class="np-copy-card-body">

                        <p><strong>Grade:</strong> ${coin.grade || "Not Graded"}</p>

                        <p><strong>Purpose:</strong> ${coin.purpose}</p>

                        <p><strong>Purchase Price:</strong> ${coin.purchase_price || "-"}</p>

                    </div>

                    <div class="np-copy-card-footer">

                        <button
                            class="np-edit-copy"
                            data-id="${coin.id}">

                            Edit

                        </button>

                    </div>

                </div>
            `;

        });

        modalBody.innerHTML = html;

    }
    /*
    ------------------------------------------------
    Edit Collection Record
    ------------------------------------------------
    */

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

        const button = e.target.closest(".np-edit-copy");

        if (!button) {

            return;

        }

        const collectionId = button.dataset.id;

        const formData = new URLSearchParams();

        formData.append(
            "action",
            "np_get_collection"
        );

        formData.append(
            "nonce",
            npCollection.nonce
        );

        formData.append(
            "collection_id",
            collectionId
        );

        fetch(npCollection.ajaxurl, {

            method: "POST",

            headers: {

                "Content-Type":
                    "application/x-www-form-urlencoded"

            },

            body: formData.toString()

        })

        .then(function (response) {

            return response.json();

        })

        .then(function (response) {

            if (!response.success) {

                alert(response.data.message);

                return;

            }

            populateDrawer(response.data);

        })

        .catch(function (error) {

            console.error(error);

        });

    });

    /*
    ------------------------------------------------
    Populate Drawer
    ------------------------------------------------
    */

    function populateDrawer(data) {

        closeModal();

        drawer.classList.add("open");

        overlay.classList.add("open");

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

        document.getElementById("np-collection-id").value =
            data.id;

        document.getElementById("np-action").value =
            "edit-save";

        document.getElementById("np-page-id").value =
            data.page_id;

        document.getElementById("np-catalogue-id").value =
            data.catalogue_id;

        document.querySelector(
            'input[name="status"][value="' + data.status + '"]'
        ).checked = true;

        document.querySelector(
            'input[name="purpose"][value="' + data.purpose + '"]'
        ).checked = true;

        if (data.upgrade_required == 1) {

            document.getElementById("np-upgrade-required").checked = true;

        }

        document.querySelector('[name="grade"]').value =
            data.grade || "";

        document.querySelector('[name="slab_company"]').value =
            data.slab_company || "";

        document.querySelector('[name="certificate_number"]').value =
            data.certificate_number || "";

        document.querySelector('[name="purchase_source"]').value =
            data.purchase_source || "";

        document.querySelector('[name="source_name"]').value =
            data.source_name || "";

        document.querySelector('[name="auction_house"]').value =
            data.auction_house || "";

        document.querySelector('[name="auction_number"]').value =
            data.auction_number || "";

        document.querySelector('[name="lot_number"]').value =
            data.lot_number || "";

        document.querySelector('[name="purchase_date"]').value =
            data.purchase_date || "";

        document.querySelector('[name="purchase_price"]').value =
            data.purchase_price || "";

        document.querySelector('[name="market_value"]').value =
            data.market_value || "";

        document.querySelector('[name="notes"]').value =
            data.notes || "";

       NPCollection.updateStatusUI(data.status);

    }
	    /*
    ------------------------------------------------
    Edit Save
    ------------------------------------------------
    */

    const collectionForm =
        document.getElementById("np-collection-form");

    if (collectionForm) {

        collectionForm.addEventListener("submit", function () {

            const action =
                document.getElementById("np-action");

            if (!action) {

                return;

            }

            if (action.value !== "edit-save") {

                return;

            }

            action.value = "edit-save";

        });

    }

    /*
    ------------------------------------------------
    Add Another Copy
    ------------------------------------------------
    */

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

        const button = e.target.closest("#np-add-another-copy");

        if (!button) {

            return;

        }

        closeModal();

        document.getElementById("np-action").value = "normal";

        document.getElementById("np-collection-id").value = "";

        drawer.classList.add("open");

        overlay.classList.add("open");

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

    });

});