/**
 * Theme Management
 * Handles dark/light mode and visual customization
 */

import { appState, userPreferences, updateState, updatePreference } from '../core/state.js';
import { savePreferences } from '../core/storage.js';

/**
 * Toggle between dark and light theme
 */
export function toggleTheme() {
    const newTheme = appState.currentTheme === 'dark' ? 'light' : 'dark';
    updateState('currentTheme', newTheme);
    updatePreference('theme', newTheme);
    savePreferences();
    applyTheme();
}

/**
 * Apply current theme to document
 */
export function applyTheme() {
    const theme = appState.currentTheme;
    
    // Apply theme attributes
    document.documentElement.setAttribute('data-theme', theme);
    document.documentElement.setAttribute('data-color-scheme', theme);
    
    // Update theme toggle button
    const btn = document.getElementById('theme-toggle');
    if (btn) {
        btn.textContent = theme === 'dark' ? '☀️ Claro' : '🌙 Escuro';
        btn.classList.toggle('light', theme === 'light');
    }
    
    console.log(`🎨 Tema aplicado: ${theme}`);
}

/**
 * Apply all user preferences (theme, colors, fonts)
 */
export function applyUserPreferences() {
    // Apply theme
    updateState('currentTheme', userPreferences.theme);
    applyTheme();
    
    // Apply color scheme variant
    document.documentElement.setAttribute('data-color-scheme-variant', userPreferences.colorScheme);
    
    // Apply font size
    document.documentElement.setAttribute('data-font-size', userPreferences.fontSize);
    
    // Apply font family
    document.documentElement.setAttribute('data-font-family', userPreferences.fontFamily);
    
    console.log('🎨 Preferências aplicadas:', userPreferences);
}

/**
 * Preview color scheme (used in admin panel)
 * @param {string} scheme - Color scheme name
 */
export function previewColorScheme(scheme) {
    updatePreference('colorScheme', scheme);
    applyUserPreferences();
    savePreferences();
}

/**
 * Preview font size (used in admin panel)
 * @param {string} size - Font size name
 */
export function previewFontSize(size) {
    updatePreference('fontSize', size);
    applyUserPreferences();
    savePreferences();
}

/**
 * Preview font family (used in admin panel)
 * @param {string} family - Font family name
 */
export function previewFontFamily(family) {
    updatePreference('fontFamily', family);
    applyUserPreferences();
    savePreferences();
}

/**
 * Toggle expert mode
 */
export function toggleExpertMode() {
    const newMode = !appState.expertMode;
    updateState('expertMode', newMode);
    
    document.documentElement.classList.toggle('expert-mode', newMode);
    
    // Update header toggle if it exists (legacy)
    const headerBtn = document.getElementById('expert-toggle');
    if (headerBtn) {
        headerBtn.textContent = newMode ? '🔬 Expert' : '🎯 Simples';
        headerBtn.classList.toggle('active', newMode);
    }
    // Update Admin panel toggle if present
    const adminBtn = document.getElementById('adminExpertToggle');
    if (adminBtn) {
        adminBtn.classList.toggle('active', newMode);
        adminBtn.textContent = newMode ? '🔬 Expert Ativo' : '🎯 Alternar Expert';
    }
    
    // Filter tools by mode
    if (typeof window.filterToolsByMode === 'function') {
        window.filterToolsByMode();
    }
    
    console.log(`🎯 Modo expert: ${newMode ? 'ativado' : 'desativado'}`);
}

// Export to global scope for compatibility
if (typeof window !== 'undefined') {
    window.toggleTheme = toggleTheme;
    window.applyTheme = applyTheme;
    window.applyUserPreferences = applyUserPreferences;
    window.previewColorScheme = previewColorScheme;
    window.previewFontSize = previewFontSize;
    window.previewFontFamily = previewFontFamily;
    window.toggleExpertMode = toggleExpertMode;
}