document.addEventListener("DOMContentLoaded", function () {
    // Create custom alert elements
    const alertOverlay = document.createElement("div");
    alertOverlay.className = "custom-alert-overlay";
    alertOverlay.style.display = "none";
    
    const alertBox = document.createElement("div");
    alertBox.className = "custom-alert-box";
    
    const alertContent = document.createElement("div");
    alertContent.className = "custom-alert-content";
    
    const alertButtons = document.createElement("div");
    alertButtons.className = "custom-alert-buttons";
    
    const okButton = document.createElement("button");
    okButton.className = "custom-alert-button";
    okButton.textContent = "OK";
    
    alertButtons.appendChild(okButton);
    alertBox.appendChild(alertContent);
    alertBox.appendChild(alertButtons);
    alertOverlay.appendChild(alertBox);
    document.body.appendChild(alertOverlay);
    
    // Custom alert styles
    const styles = document.createElement("style");
    styles.textContent = `
        .custom-alert-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        
        .custom-alert-box {
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            max-width: 400px;
            width: 90%;
        }
        
        .custom-alert-content {
            margin-bottom: 20px;
            font-size: 16px;
            line-height: 1.5;
        }
        
        .custom-alert-buttons {
            display: flex;
            justify-content: flex-end;
        }
        
        .custom-alert-button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 8px 16px;
            font-size: 14px;
            cursor: pointer;
            border-radius: 4px;
        }
        
        .custom-alert-button:hover {
            background-color: #45a049;
        }
        
        .custom-confirm-buttons {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
        
        .custom-confirm-cancel {
            background-color: #f44336;
        }
        
        .custom-confirm-cancel:hover {
            background-color: #d32f2f;
        }
    `;
    document.head.appendChild(styles);
    
    // Custom alert function
    window.customAlert = function(message) {
        return new Promise((resolve) => {
            alertContent.textContent = message;
            alertOverlay.style.display = "flex";
            
            okButton.onclick = function() {
                alertOverlay.style.display = "none";
                resolve(true);
            };
        });
    };
    
    // Custom confirm function
    window.customConfirm = function(message) {
        return new Promise((resolve) => {
            alertContent.textContent = message;
            
            // Clear previous buttons
            alertButtons.innerHTML = "";
            
            // Create new buttons
            const cancelButton = document.createElement("button");
            cancelButton.className = "custom-alert-button custom-confirm-cancel";
            cancelButton.textContent = "Batal";
            
            const confirmButton = document.createElement("button");
            confirmButton.className = "custom-alert-button";
            confirmButton.textContent = "Ya";
            
            alertButtons.className = "custom-confirm-buttons";
            alertButtons.appendChild(cancelButton);
            alertButtons.appendChild(confirmButton);
            
            alertOverlay.style.display = "flex";
            
            cancelButton.onclick = function() {
                alertOverlay.style.display = "none";
                // Reset to default alert buttons
                alertButtons.innerHTML = "";
                alertButtons.appendChild(okButton);
                alertButtons.className = "custom-alert-buttons";
                resolve(false);
            };
            
            confirmButton.onclick = function() {
                alertOverlay.style.display = "none";
                // Reset to default alert buttons
                alertButtons.innerHTML = "";
                alertButtons.appendChild(okButton);
                alertButtons.className = "custom-alert-buttons";
                resolve(true);
            };
        });
    };
    
    // File upload handling
    const uploadBox = document.querySelector("#upload-box");
    const fileInput = document.getElementById("file");
    const form = document.getElementById("sk-form");
    
    // Store the initial HTML content of the upload box for resetting
    const initialUploadBoxContent = `<p>Seret file anda ke sini atau <span id="browse-btn" style="color: blue; cursor: pointer;">Jelajahi</span></p>
<p>Ukuran file yang diizinkan maksimal 10 MB dengan format .jpeg, .jpg, dan .png</p>`;

    // Function to reset upload box to initial state
    function resetUploadBox() {
        uploadBox.innerHTML = initialUploadBoxContent;
        // Reattach click event to the browse button
        const browseBtn = document.getElementById("browse-btn");
        if (browseBtn) {
            browseBtn.addEventListener("click", function() {
                fileInput.click();
            });
        }
    }

    // Initialize upload box
    resetUploadBox();

    uploadBox.addEventListener("click", function (e) {
        // Check if the user clicked on the upload box but not on a list item
        if (e.target === uploadBox || e.target.tagName !== "LI") {
            fileInput.click();
        }
    });

    fileInput.addEventListener("change", function () {
        handleFiles(fileInput.files);
    });

    uploadBox.addEventListener("dragover", function (event) {
        event.preventDefault();
        uploadBox.classList.add("dragover");
    });

    uploadBox.addEventListener("dragleave", function () {
        uploadBox.classList.remove("dragover");
    });

    uploadBox.addEventListener("drop", function (event) {
        event.preventDefault();
        uploadBox.classList.remove("dragover");
        handleFiles(event.dataTransfer.files);
    });

    async function handleFiles(files) {
        if (!files.length) return;
        
        const fileList = document.createElement("ul");
        fileList.id = "file-list";
        let validFileFound = false;

        // Create a new DataTransfer object to manage the FileList
        const dataTransfer = new DataTransfer();

        for (const file of Array.from(files)) {
            const validExtensions = ["jpeg", "jpg", "png"];
            const fileExtension = file.name.split(".").pop().toLowerCase();

            if (!validExtensions.includes(fileExtension)) {
                await customAlert("File " + file.name + " tidak diperbolehkan. Hanya format JPEG, JPG, dan PNG.");
                continue;
            }

            if (file.size > 10 * 1024 * 1024) {
                await customAlert("File " + file.name + " terlalu besar. Maksimal 10MB.");
                continue;
            }

            validFileFound = true;
            dataTransfer.items.add(file);

            const listItem = document.createElement("li");
            listItem.textContent = file.name;
            
            // Add a remove button for each file
            const removeBtn = document.createElement("span");
            removeBtn.textContent = "×";
            removeBtn.style.marginLeft = "10px";
            removeBtn.style.cursor = "pointer";
            removeBtn.style.fontWeight = "bold";
            removeBtn.style.color = "red";
            
            removeBtn.addEventListener("click", function(e) {
                e.stopPropagation(); // Prevent triggering uploadBox click
                
                // Create new DataTransfer without this file
                const newDataTransfer = new DataTransfer();
                for (let i = 0; i < fileInput.files.length; i++) {
                    if (fileInput.files[i].name !== file.name) {
                        newDataTransfer.items.add(fileInput.files[i]);
                    }
                }
                
                // Update the file input with the new file list
                fileInput.files = newDataTransfer.files;
                
                // If no files left, reset the upload box
                if (fileInput.files.length === 0) {
                    resetUploadBox();
                } else {
                    // Just remove this item from the list
                    listItem.remove();
                }
            });
            
            listItem.appendChild(removeBtn);
            fileList.appendChild(listItem);
        }

        if (validFileFound) {
            // Clear the upload box and add the file list
            uploadBox.innerHTML = "";
            uploadBox.appendChild(fileList);
            
            // Update the file input with the valid files
            fileInput.files = dataTransfer.files;
        } else {
            // If no valid files were found, reset the file input and upload box
            fileInput.value = ""; // This is crucial for allowing the same file to be selected again
            resetUploadBox();
        }
    }

    form.addEventListener("submit", async function (event) {
        event.preventDefault(); // Prevent form submission initially
        
        const confirmResult = await customConfirm("Apakah Anda yakin ingin menngupload Berita ini?");
        if (confirmResult) {
            form.submit(); // Submit the form if confirmed
        }
    });
});