document.addEventListener('DOMContentLoaded', () => {
    const projectList = document.getElementById('project-list');
    const loginForm = document.getElementById('login-form');
    const albumTable = document.getElementById('album-table');
    const albumView = document.getElementById('album-view');
    const albumName = document.getElementById('album-name');
    const imageGallery = document.getElementById('image-gallery');
    const uploadButton = document.getElementById('upload-button');
    const fileInput = document.getElementById('file-input');
    const progressBar = document.getElementById('progress-bar');
    const uploadProgress = document.getElementById('upload-progress');

    let currentAlbumId = null;
    let currentIndex = 0;

    const checkLoginStatus = async () => {
        try {
            const response = await fetch('/albums', { credentials: 'include' });
            if (response.ok) {
                loginForm.style.display = 'none';
                loadProjects();
            } else {
                loginForm.style.display = 'block';
            }
        } catch (error) {
            console.error('Error checking login status:', error);
            loginForm.style.display = 'block';
        }
    };

    const loadProjects = async () => {
        try {
            const response = await fetch('/albums', { credentials: 'include' });
            const data = await response.json();
            projectList.innerHTML = '';
            if (data !== undefined && data.albums !== null) {
                data.albums.forEach(album => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                    <td>${album.name}</td>
                    <td>${album.created_at}</td>
                    <td>${album.expire_at}</td>
                    <td>${album.likes}</td>
                    <td><a href="#" data-id="${album.id}" class="view-album">View Album</a></td>
                `;
                    projectList.appendChild(row);
                });
            }

            albumTable.style.display = 'block';
        } catch (error) {
            console.error('Error loading projects:', error);
        }
    };

    const handleLogin = async (event) => {
        event.preventDefault();
        const formData = new FormData(loginForm);
        try {
            const response = await fetch('/login', {
                method: 'POST',
                body: formData
            });
            if (response.ok) {
                loginForm.style.display = 'none';
                loadProjects();
            } else {
                alert('Login failed');
            }
        } catch (error) {
            console.error('Error logging in:', error);
        }
    };

    const loadAlbum = async (albumId) => {
        currentAlbumId = albumId;
        albumTable.style.display = 'none'; // Hide the album table when viewing an album
        try {
            const response = await fetch(`/albums/${albumId}/list`);
            const data = await response.json();
            albumView.style.display = 'block';
            albumName.textContent = data.name;
            imageGallery.innerHTML = '';
            data.images.forEach((image, index) => {
                const fileType = image.split('.').pop();
                const item = document.createElement('div');
                item.className = 'gallery-item';
                item.dataset.index = index;
                if (fileType === 'mp4') {
                    item.innerHTML = `
                        <video src="${image}" class="gallery-thumb" data-id="${image}"></video>
                    `;
                } else {
                    item.innerHTML = `
                        <img src="${image}" class="gallery-thumb" data-id="${image}">
                    `;
                }
                imageGallery.appendChild(item);
            });
        } catch (error) {
            console.error('Error loading album:', error);
        }
    };

    const handleUpload = async (formData, albumId) => {
        progressBar.style.display = 'block';
        try {
            await fetch(`/album/${albumId}/upload`, {
                method: 'POST',
                body: formData,
                credentials: 'include',
                onUploadProgress: (progressEvent) => {
                    const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
                    uploadProgress.style.width = `${percentCompleted}%`;
                    uploadProgress.textContent = `${percentCompleted}%`;
                }
            });
            progressBar.style.display = 'none';
            loadAlbum(albumId);
        } catch (error) {
            console.error('Error uploading images:', error);
            progressBar.style.display = 'none';
        }
    };

    const handleFiles = (files) => {
        const formData = new FormData();
        for (let i = 0; i < files.length; i++) {
            formData.append('files[]', files[i]);
        }
        handleUpload(formData, currentAlbumId);
    };

    const openModal = (index) => {
        const items = document.querySelectorAll('.gallery-thumb');
        currentIndex = index;
        const item = items[currentIndex];
        if (item.tagName === 'VIDEO') {
            document.getElementById('modal-content').innerHTML = `
                <video controls autoplay>
                    <source src="${item.dataset.id}" type="video/mp4">
                </video>
            `;
        } else {
            document.getElementById('modal-content').innerHTML = `
                <img src="${item.dataset.id}">
            `;
        }
        document.getElementById('modal').style.display = 'flex';
    };

    const closeModal = () => {
        document.getElementById('modal').style.display = 'none';
        const video = document.querySelector('#modal-content video');
        if (video) {
            video.pause();
        }
    };

    const nextModal = () => {
        const items = document.querySelectorAll('.gallery-thumb');
        currentIndex = (currentIndex + 1) % items.length;
        openModal(currentIndex);
    };

    const prevModal = () => {
        const items = document.querySelectorAll('.gallery-thumb');
        currentIndex = (currentIndex - 1 + items.length) % items.length;
        openModal(currentIndex);
    };

    const openAddProjectModal = () => {
        document.getElementById('add-project-modal').style.display = 'flex';
    };

    const closeAddProjectModal = () => {
        document.getElementById('add-project-modal').style.display = 'none';
    };

    const handleAddProject = async (event) => {
        event.preventDefault();
        const formData = new FormData(event.target);
        try {
            const response = await fetch('/albums/new', {
                method: 'POST',
                body: formData,
                credentials: 'include'
            });
            if (response.ok) {
                closeAddProjectModal();
                loadProjects();
            } else {
                alert('Failed to create project');
            }
        } catch (error) {
            console.error('Error creating project:', error);
        }
    };

    document.addEventListener('click', (event) => {
        if (event.target.classList.contains('view-album')) {
            const albumId = event.target.dataset.id;
            loadAlbum(albumId);
        }
        if (event.target.classList.contains('gallery-thumb')) {
            openModal(parseInt(event.target.parentElement.dataset.index));
        }
        if (event.target.id === 'close-modal') {
            closeModal();
        }
        if (event.target.id === 'modal-next') {
            nextModal();
        }
        if (event.target.id === 'modal-prev') {
            prevModal();
        }
        if (event.target.id === 'add-project') {
            openAddProjectModal();
        }
        if (event.target.id === 'close-add-project-modal') {
            closeAddProjectModal();
        }
    });

    loginForm.addEventListener('submit', handleLogin);

    document.getElementById('add-project-form').addEventListener('submit', handleAddProject);

    uploadButton.addEventListener('click', () => {
        fileInput.click();
    });

    fileInput.addEventListener('change', () => {
        handleFiles(fileInput.files);
    });

    checkLoginStatus(); // Check if the user is logged in on page load
});