let currentView = 'grid';

// Make functions globally available
window.showEmptyTrashModal = function() {
    console.log('Showing Empty Trash Modal');
    const modalEl = document.getElementById('emptyTrashModal');
    console.log('Modal Element:', modalEl);
    
    if (!modalEl) {
        console.error('Empty Trash Modal element not found');
        return;
    }
    
    try {
        const modal = new bootstrap.Modal(modalEl);
        console.log('Modal instance created:', modal);
        modal.show();
    } catch (error) {
        console.error('Error showing modal:', error);
    }
};

window.emptyTrash = function() {
    console.log('Emptying Trash');
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    if (!csrfToken) {
        console.error('CSRF token not available');
        return;
    }

    // Get all trashed files to get their room IDs
    fetch('/api/rooms/trash')
    .then(r => r.json())
    .then(files => {
        // Get unique room IDs
        const roomIds = [...new Set(files.map(file => file.room_id))];
        
        // Create an array of promises for emptying trash in each room
        const emptyPromises = roomIds.map(roomId => 
            fetch(`/api/rooms/${roomId}/trash/empty`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': csrfToken
                }
            })
        );
        
        // Execute all promises
        return Promise.all(emptyPromises);
    })
    .then(responses => {
        // Check if all responses were successful
        const allSuccessful = responses.every(r => r.ok);
        if (allSuccessful) {
            // Clear all files from the current view
            window.currentFiles = [];
            // Update the grid directly
            const grid = document.getElementById('fileGrid');
            grid.innerHTML = '<div class="col"><div class="text-muted">No items found.</div></div>';
            // Close the modal
            const modal = bootstrap.Modal.getInstance(document.getElementById('emptyTrashModal'));
            modal.hide();
        } else {
            console.error('Failed to empty trash in some rooms');
        }
    })
    .catch(error => {
        console.error('Error emptying trash:', error);
    });
};

document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM Content Loaded');
    
    // Add event listener for the empty trash button
    const emptyTrashBtn = document.getElementById('emptyTrashBtn');
    console.log('Empty Trash Button:', emptyTrashBtn);
    
    if (emptyTrashBtn) {
        emptyTrashBtn.addEventListener('click', function(e) {
            console.log('Empty Trash Button Clicked');
            e.preventDefault();
            showEmptyTrashModal();
        });
    }

    // Add event listener for the confirm empty trash button
    const confirmEmptyTrashBtn = document.getElementById('confirmEmptyTrash');
    console.log('Confirm Empty Trash Button:', confirmEmptyTrashBtn);
    
    if (confirmEmptyTrashBtn) {
        confirmEmptyTrashBtn.addEventListener('click', window.emptyTrash);
    }

    // Initialize view
    initializeView();
});

async function initializeView() {
    try {
        const response = await fetch('/api/user/preferred_view');
        const data = await response.json();
        currentView = data.preferred_view || 'grid';
        toggleView(currentView);
    } catch (error) {
        console.error('Error fetching preferred view:', error);
        currentView = 'grid';
        toggleView(currentView);
    }
}

function toggleView(view) {
    currentView = view;
    const grid = document.getElementById('fileGrid');
    const gridBtn = document.getElementById('gridViewBtn');
    const listBtn = document.getElementById('listViewBtn');
    
    // Reset both buttons first
    gridBtn.classList.remove('active');
    listBtn.classList.remove('active');
    
    if (view === 'grid') {
        grid.classList.remove('list-view');
        gridBtn.classList.add('active');
    } else {
        grid.classList.add('list-view');
        listBtn.classList.add('active');
    }
    
    // Save the new preference
    fetch('/api/user/preferred_view', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({ preferred_view: view })
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        console.log('Preferred view saved:', data);
    })
    .catch(error => console.error('Error saving preferred view:', error));
}