import { useState, useEffect } from 'react';
import { getSidebarItems } from '../components/PageManager/pageConfigs';
import { SidebarItem } from '../components/PageManager/pageConfigInterface';
import { useLanguage } from '../contexts/LanguageContext';

// Hook to get sidebar items from page configurations
export const useSidebarFromPageConfigs = (): { items: SidebarItem[]; isLoading: boolean } => {
    const { t } = useLanguage();
    const [refreshTrigger, setRefreshTrigger] = useState(0);
    const [sidebarItems, setSidebarItems] = useState<SidebarItem[]>([]);
    const [isLoading, setIsLoading] = useState(true);
    
    // Listen for localStorage changes to refresh sidebar when sign-up status changes
    useEffect(() => {
        const handleStorageChange = (e: StorageEvent) => {
            if (e.key === 'speechSignUpData' || e.key === 'speechSignUpTimestamp') {
                setRefreshTrigger(prev => prev + 1);
            }
        };
        
        window.addEventListener('storage', handleStorageChange);
        
        // Also listen for changes in the same tab
        const handleCustomStorageChange = () => {
            setRefreshTrigger(prev => prev + 1);
        };
        
        // Custom event for same-tab changes
        window.addEventListener('speechSignUpChanged', handleCustomStorageChange);
        
        return () => {
            window.removeEventListener('storage', handleStorageChange);
            window.removeEventListener('speechSignUpChanged', handleCustomStorageChange);
        };
    }, []);
    
    // Load sidebar items when refreshTrigger changes
    useEffect(() => {
        const loadSidebarItems = async () => {
            try {
                setIsLoading(true);
                console.log('🔄 Sidebar refreshing, trigger:', refreshTrigger);
                
                const items = await getSidebarItems();
                console.log('📋 Sidebar items:', items.map(item => ({ 
                    name: item.name, 
                    hasSubmenu: !!item.submenu,
                    submenuCount: item.submenu?.length || 0
                })));
                
                // Map the items with translations
                const translatedItems = items.map(item => ({
                    ...item,
                    name: getTranslatedName(item.name, t)
                }));
                
                setSidebarItems(translatedItems);
            } catch (error) {
                console.error('Error loading sidebar items:', error);
                setSidebarItems([]);
            } finally {
                setIsLoading(false);
            }
        };
        
        loadSidebarItems();
    }, [t, refreshTrigger]);
    
    return { items: sidebarItems, isLoading };
};

// Helper function to get translated names
// This maps the page config names to translation keys
const getTranslatedName = (name: string, t: (key: string) => string): string => {
    const translationMap: Record<string, string> = {
        'Dashboard': t('nav.dashboard'),
        'Dateien': t('nav.files'),
        'Workflows': t('nav.workflows'),
        'Connections': t('nav.connections'),
        'Team Bereich': t('nav.team'),
        'Einstellungen': t('nav.settings'),
        'Test Sharepoint': t('nav.testSharepoint'),
        'Speech': t('nav.speech'),
        'Transkriptverwaltung': t('nav.transcript_management')
    };
    
    return translationMap[name] || name;
};

// Backward-compatible hook that returns just the items array
export const useSidebarItems = (): SidebarItem[] => {
    const { items } = useSidebarFromPageConfigs();
    return items;
};

export default useSidebarFromPageConfigs;