const fileInput = document.getElementById("file-input")
const uploadButton = document.getElementById("upload-button")
const progressContainer = document.getElementById("progress-container")
const progressBar = document.getElementById("progress-bar")
const progressText = document.getElementById("progress-text")
const dragOverlay = document.getElementById("drag-overlay")
const deleteButtons = document.querySelectorAll(".delete-button")
let dragCounter = 0

fileInput.addEventListener("change", () => {
    uploadButton.style.display = fileInput.files.length > 0 ? "block" : "none"
})

deleteButtons.forEach(button => {
    button.addEventListener("click", async () => {
        const file = button.dataset.file
        if (!confirm("Are you sure you want to delete " + file + "?")) return

        try {
            const response = await fetch(window.location.pathname + "/delete/" + file, {
                method: "DELETE"
            })

            if (response.ok) {
                window.location.reload()
            } else {
                alert("Delete failed")
            }
        } catch (err) {
            alert("Delete failed")
        }
    })
})

function uploadFile(file) {
    const xhr = new XMLHttpRequest()
    const formData = new FormData()
    formData.append("file", file)

    progressContainer.style.display = "block"
    uploadButton.disabled = true
    fileInput.disabled = true

    xhr.upload.addEventListener("progress", (e) => {
        if (e.lengthComputable) {
            const percent = Math.round((e.loaded / e.total) * 100)
            progressBar.style.width = percent + "%"
            progressText.textContent = percent + "%"
        }
    })

    xhr.addEventListener("load", () => {
        if (xhr.status === 200) {
            window.location.reload()
        } else {
            alert("Upload failed")
            progressContainer.style.display = "none"
            uploadButton.disabled = false
            fileInput.disabled = false
        }
    })

    xhr.addEventListener("error", () => {
        alert("Upload failed")
        progressContainer.style.display = "none"
        uploadButton.disabled = false
        fileInput.disabled = false
    })

    xhr.open("POST", window.location.pathname + "/upload")
    xhr.send(formData)
}

uploadButton.addEventListener("click", () => {
    const file = fileInput.files[0]
    if (!file) return
    uploadFile(file)
})

document.addEventListener("DOMContentLoaded", () => {
    const tabButtons = document.querySelectorAll(".tab-button")
    const tabContents = document.querySelectorAll(".tab-content")

    tabButtons.forEach(button => {
        button.addEventListener("click", () => {
            const tab = button.dataset.tab

            tabButtons.forEach(btn => btn.classList.remove("active"))
            tabContents.forEach(content => content.classList.remove("active"))

            button.classList.add("active")
            document.querySelector(`[data-content="${tab}"]`).classList.add("active")
        })
    })
})

document.addEventListener("dragenter", (e) => {
    e.preventDefault()
    e.stopPropagation()
    dragCounter++
    dragOverlay.style.display = "flex"
})

document.addEventListener("dragleave", (e) => {
    e.preventDefault()
    e.stopPropagation()
    dragCounter--
    if (dragCounter === 0) {
        dragOverlay.style.display = "none"
    }
})

document.addEventListener("dragover", (e) => {
    e.preventDefault()
    e.stopPropagation()
})

document.addEventListener("drop", async (e) => {
    e.preventDefault()
    e.stopPropagation()
    dragCounter = 0
    dragOverlay.style.display = "none"

    const files = [...e.dataTransfer.files]
    if (files.length === 0) return

    for (const file of files) {
        uploadFile(file)
        break
    }
})