document.addEventListener('DOMContentLoaded', () => {
	    fetchFiles();

	    document.getElementById('upload-form').addEventListener('submit', handleFileUpload);
});

function fetchFiles() {
	    fetch('/files')
	        .then(response => response.json())
	        .then(files => {
			            const fileList = document.getElementById('file-list');
			            fileList.innerHTML = '';
			            files.forEach(file => {
					                    const li = document.createElement('li');
					                    li.textContent = `${file.name} (Size: ${file.size} bytes, Date: ${new Date(file.date).toLocaleString()})`;

					                    const downloadButton = document.createElement('button');
					                    downloadButton.textContent = 'Download';
					                    downloadButton.onclick = () => {
								                        window.location.href = `/download/${file.name}`;
								                    };

					                    const deleteButton = document.createElement('button');
					                    deleteButton.textContent = 'Delete';
					                    deleteButton.onclick = () => {
								                        fetch(`/delete/${file.name}`, { method: 'DELETE' })
								                            .then(response => {
												                                if (response.ok) {
																	                                li.remove();
																	                                alert('File deleted successfully!');
																	                            } else {
																					                                    alert('Error deleting file');
																					                                }
												                            });
								                    };

					                    const previewButton = document.createElement('button');
					                    previewButton.textContent = 'Preview';
					                    previewButton.onclick = () => {
								                        showPreview(file);
								                    };

					                    li.appendChild(downloadButton);
					                    li.appendChild(deleteButton);
					                    li.appendChild(previewButton);
					                    fileList.appendChild(li);
					                });
			        })
	        .catch(error => {
			            console.error('Error fetching file list:', error);
			        });
}

function handleFileUpload(event) {
	    event.preventDefault();

	    const form = event.target;
	    const formData = new FormData(form);

	    fetch('/upload', {
		            method: 'POST',
		            body: formData
		        })
	    .then(response => response.text())
	    .then(message => {
		            alert(message);
		            form.reset();
		            fetchFiles();
		        })
	    .catch(error => {
		            console.error('Error uploading file:', error);
		            alert('File upload failed!');
		        });
}

function showPreview(file) {
	    const previewContainer = document.createElement('div');
	    previewContainer.className = 'preview-modal';
	    
	    const closeButton = document.createElement('button');
	    closeButton.textContent = 'Close';
	    closeButton.onclick = () => {
		            document.body.removeChild(previewContainer);
		        };

	    const content = document.createElement('div');
	    content.className = 'preview-content';

	    if (file.name.endsWith('.txt')) {
		            const textPreview = document.createElement('iframe');
		            textPreview.src = file.path;
		            textPreview.style.width = '100%';
		            textPreview.style.height = '200px';
		            content.appendChild(textPreview);
		        } else if (file.name.match(/\.(jpg|jpeg|png|gif)$/)) {
				        const imgPreview = document.createElement('img');
				        imgPreview.src = file.path;
				        imgPreview.onload = () => {
						            document.body.appendChild(previewContainer); 
						        };
				        imgPreview.onerror = () => {
						            alert('Error loading image preview');
						            document.body.removeChild(previewContainer);
						        };
				        content.appendChild(imgPreview);
				    } else {
					            content.textContent = 'Preview not available for this file type.';
					        }

	    previewContainer.appendChild(closeButton);
	    previewContainer.appendChild(content);
	    if (!file.name.match(/\.(jpg|jpeg|png|gif)$/)) {
		            document.body.appendChild(previewContainer);
		        }
}