import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
import { Language, TranslationKeys, loadLanguage } from '../../locales';
import { getUserDataCache } from '../../utils/userCache';


export type { Language };

interface LanguageContextType {
    currentLanguage: Language;
    setLanguage: (language: Language) => void;
    t: (key: string, fallback?: string) => string;
    isLoading: boolean;
    reloadLanguage: () => Promise<void>;
}

const LanguageContext = createContext<LanguageContextType | undefined>(undefined);

interface LanguageProviderProps {
    children: ReactNode;
}

export const LanguageProvider: React.FC<LanguageProviderProps> = ({ children }) => {
    const [currentLanguage, setCurrentLanguage] = useState<Language>('de');
    const [translations, setTranslations] = useState<TranslationKeys>({});
    const [isLoading, setIsLoading] = useState(true);

    // Function to load and set a language
    const loadAndSetLanguage = async (language: Language) => {
        setIsLoading(true);
        try {
            const newTranslations = await loadLanguage(language);
            setTranslations(newTranslations);
            setCurrentLanguage(language);
        } catch (error) {
            console.error('Failed to load language:', error);
            // Keep current language and translations if loading fails
        } finally {
            setIsLoading(false);
        }
    };

    // Load language from user profile on mount
    useEffect(() => {
        const initializeLanguage = async () => {
            let initialLanguage: Language = 'de';
            
            // Priority 1: Check if user data has language setting (ONLY source of truth!)
            const userData = getUserDataCache();
            if (userData?.language && ['de', 'en', 'fr'].includes(userData.language)) {
                initialLanguage = userData.language as Language;
                console.log('🌍 Using language from user profile (sessionStorage cache):', initialLanguage);
                await loadAndSetLanguage(initialLanguage);
                return;
            }
            
            // Priority 2: Detect browser language (fallback only if no user data)
            const browserLang = navigator.language.split('-')[0] as Language;
            if (['de', 'en', 'fr'].includes(browserLang)) {
                initialLanguage = browserLang;
                console.log('🌍 Using browser language as fallback:', initialLanguage);
            } else {
                console.log('🌍 Using default language:', initialLanguage);
            }
            
            await loadAndSetLanguage(initialLanguage);
        };

        initializeLanguage();
        
        // Listen for user data updates to sync language
        const handleUserUpdate = () => {
            const userData = getUserDataCache();
            if (userData?.language && ['de', 'en', 'fr'].includes(userData.language)) {
                const userLanguage = userData.language as Language;
                if (userLanguage !== currentLanguage) {
                    console.log('🔄 Syncing language with user data (sessionStorage cache):', userLanguage);
                    loadAndSetLanguage(userLanguage);
                }
            }
        };

        // Listen for user info update events
        window.addEventListener('userInfoUpdated', handleUserUpdate);
        
        return () => {
            window.removeEventListener('userInfoUpdated', handleUserUpdate);
        };
    }, []);

    const setLanguage = async (language: Language) => {
        // Load the new language immediately for UI
        await loadAndSetLanguage(language);
        
        // IMPORTANT: This should ONLY be called after the backend profile is updated
        // The settings component should:
        // 1. Update backend user profile with new language
        // 2. Refetch user data (which includes the new language)
        // 3. Update sessionStorage cache with new data (via setUserDataCache)
        // 4. Call this function to sync the UI
    };

    const reloadLanguage = async () => {
        await loadAndSetLanguage(currentLanguage);
    };

    const t = (key: string, fallback?: string): string => {
        const translation = translations[key] || fallback || key;
        return translation;
    };

    const contextValue: LanguageContextType = {
        currentLanguage,
        setLanguage,
        t,
        isLoading,
        reloadLanguage
    };

    return (
        <LanguageContext.Provider value={contextValue}>
            {children}
        </LanguageContext.Provider>
    );
};

export const useLanguage = (): LanguageContextType => {
    const context = useContext(LanguageContext);
    if (!context) {
        throw new Error('useLanguage must be used within a LanguageProvider');
    }
    return context;
}; 