// Wood paneling management functionality

type WoodPanelingType = 'none' | 'wood-light' | 'wood-dark' | 'wood-mahogany';

const WOOD_STORAGE_KEY = 'wood-paneling';

// Apply wood paneling to collections container
const applyWoodPaneling = (paneling: WoodPanelingType): void => {
    const container = document.getElementById('collections-container');
    if (!container) return;

    // Remove all wood background classes
    container.classList.remove('bg-wood-light', 'bg-wood-dark', 'bg-wood-mahogany');
    container.removeAttribute('data-wood');

    if (paneling !== 'none') {
        // Add selected wood background class
        container.classList.add(`bg-${paneling}`);
        container.setAttribute('data-wood', paneling);
    }

    // Save to localStorage
    localStorage.setItem(WOOD_STORAGE_KEY, paneling);
};

// Load wood paneling from localStorage on page load
const loadWoodPaneling = (): void => {
    const stored = localStorage.getItem(WOOD_STORAGE_KEY) as WoodPanelingType | null;
    if (stored) {
        applyWoodPaneling(stored);
    } else {
        // Default to none
        applyWoodPaneling('none');
    }
};

// Change wood paneling (called from theme dropdown)
const changeWoodPaneling = (paneling: WoodPanelingType): void => {
    applyWoodPaneling(paneling);

    // Update active indicators
    updateWoodPanelingIndicators();

    // Close dropdown
    const dropdown = document.getElementById('theme-dropdown');
    if (dropdown) {
        dropdown.classList.add('hidden');
    }
};

// Update visual indicators for wood paneling buttons
const updateWoodPanelingIndicators = (): void => {
    const currentWood = localStorage.getItem(WOOD_STORAGE_KEY) || 'none';

    // Update wood paneling buttons
    document.querySelectorAll('.wood-paneling-btn').forEach(btn => {
        const wood = btn.getAttribute('data-wood');
        if (wood === currentWood) {
            // Active state - use CSS class instead of inline style
            btn.classList.add('bg-wood-active');
            btn.classList.remove('bg-wood-inactive');
        } else {
            // Inactive state
            btn.classList.remove('bg-wood-active');
            btn.classList.add('bg-wood-inactive');
        }
    });
};

// Make functions available globally
(window as any).changeWoodPaneling = changeWoodPaneling;
(window as any).loadWoodPaneling = loadWoodPaneling;
(window as any).updateWoodPanelingIndicators = updateWoodPanelingIndicators;

// Auto-initialize when DOM is ready
if (typeof document !== 'undefined') {
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', () => {
            loadWoodPaneling();
            updateWoodPanelingIndicators();
        });
    } else {
        loadWoodPaneling();
        updateWoodPanelingIndicators();
    }
}