/**
 * @fileoverview Manages the starred files functionality for the document management system.
 * This file handles the starred files view and user view preferences.
 * It provides functionality to view starred items in either grid or list view
 * and manages user view preferences for the starred items section.
 */

let currentView = 'grid';

/**
 * Initializes the starred files view when the DOM content is loaded.
 * Sets up the initial view based on user preferences.
 * @function
 */
document.addEventListener('DOMContentLoaded', function() {
    // Initialize view
    initializeView();
});

/**
 * Initializes the view based on user preferences.
 * Fetches the user's preferred view (grid or list) and applies it.
 * Falls back to grid view if there's an error.
 * @async
 * @function
 */
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);
    }
}

/**
 * Toggles between grid and list views for starred files.
 * Updates the UI and saves the user's view preference.
 * @function
 * @param {string} view - The view to switch to ('grid' or 'list')
 * @throws {Error} If the view preference cannot be saved
 */
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));
}