document.addEventListener('DOMContentLoaded', () => {
    const dropZone = document.getElementById('dropZone');
    const fileInput = document.getElementById('fileInput');
    const uploadButton = document.getElementById('uploadButton');
    const status = document.getElementById('status');

    let selectedFile;

    dropZone.addEventListener('click', () => fileInput.click());

    fileInput.addEventListener('change', (event) => {
        selectedFile = event.target.files[0];
        handleFileSelection(selectedFile);
    });

    dropZone.addEventListener('dragover', (event) => {
        event.preventDefault();
        dropZone.classList.add('dragover');
    });

    dropZone.addEventListener('dragleave', () => {
        dropZone.classList.remove('dragover');
    });

    dropZone.addEventListener('drop', (event) => {
        event.preventDefault();
        dropZone.classList.remove('dragover');

        selectedFile = event.dataTransfer.files[0];
        handleFileSelection(selectedFile);
    });

    uploadButton.addEventListener('click', async () => {
        if (!selectedFile) {
            status.textContent = 'No file selected';
            return;
        }

        const formData = new FormData();
        formData.append('file', selectedFile);

        try {
            const md5Hash = await calculateMD5(selectedFile);
            console.log('MD5 Hash:', md5Hash);  // Debugging log
            formData.append('md5', md5Hash);

            const token = localStorage.getItem('Authorization');

            const response = await fetch('http://127.0.0.1:8080/api/admin/upfile', {
                method: 'POST',
                headers: {
                    'Authorization': `Bearer ${token}`
                },
                body: formData
            });

            const data = await response.json();

            if (!response.ok) {
                throw new Error(data.error || 'Unknown error');
            }

            alert('File uploaded successfully!');
            resetUploadState();
        } catch (error) {
            console.error('File upload failed:', error);  // Debugging log
            status.textContent = `File upload failed: ${error.message}`;
        }
    });

    function handleFileSelection(file) {
        if (file && file.name.endsWith('.xlsx')) {
            dropZone.textContent = `File selected: ${file.name}`;
            uploadButton.disabled = false;
            status.textContent = '';
        } else {
            selectedFile = null;
            dropZone.textContent = 'Drag & Drop a file here or click to select';
            uploadButton.disabled = true;
            status.textContent = 'File type error: Please upload an .xlsx file';
        }
    }

    function resetUploadState() {
        dropZone.textContent = 'Drag & Drop a file here or click to select';
        status.textContent = '';
        selectedFile = null;
        uploadButton.disabled = true;
        fileInput.value = '';  // Clear the file input
        disableUpload();
    }

    function disableUpload() {
        dropZone.removeEventListener('click', () => fileInput.click());
        dropZone.removeEventListener('dragover', handleDragOver);
        dropZone.removeEventListener('dragleave', handleDragLeave);
        dropZone.removeEventListener('drop', handleDrop);
        uploadButton.removeEventListener('click', handleUploadClick);
    }

    async function handleUploadClick() {
        try {
            const formData = new FormData();
            formData.append('file', selectedFile);
    
            const response = await fetch('/upload', {
                method: 'POST',
                body: formData
            });
    
            if (!response.ok) {
                throw new Error('上传失败');
            }
    
            const result = await response.json();
            console.log('上传成功:', result);
        } catch (error) {
            console.error('上传错误:', error);
        }
    }
    

    function handleDragOver(event) {
        event.preventDefault();
        dropZone.classList.add('dragover');
    }

    function handleDragLeave() {
        dropZone.classList.remove('dragover');
    }

    function handleDrop(event) {
        event.preventDefault();
        dropZone.classList.remove('dragover');
        selectedFile = event.dataTransfer.files[0];
        handleFileSelection(selectedFile);
    }

 

    async function calculateMD5(file) {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.onload = (event) => {
                const fileData = event.target.result;
                const md5Hash = CryptoJS.MD5(CryptoJS.lib.WordArray.create(fileData)).toString();
                resolve(md5Hash);
            };
            reader.onerror = (error) => {
                reject(error);
            };
            reader.readAsArrayBuffer(file);
        });
    }
});