import React, { createContext, useContext, useState, useEffect } from 'react';

// Import translation JSON files directly
import en from '../lang/en.json';
import hi from '../lang/hi.json';
import sw from '../lang/sw.json';
import tl from '../lang/tl.json';
import ta from '../lang/ta.json';

const LanguageContext = createContext();

const translations = { en, hi, sw, tl, ta };

export const languages = [
    { code: 'en', name: 'English', nativeName: 'English', flag: '🇬🇧' },
    { code: 'hi', name: 'Hindi', nativeName: 'हिन्दी', flag: '🇮🇳' },
    { code: 'sw', name: 'Swahili', nativeName: 'Kiswahili', flag: '🇰🇪' },
    { code: 'tl', name: 'Tagalog', nativeName: 'Tagalog', flag: '🇵🇭' },
    { code: 'ta', name: 'Tamil', nativeName: 'தமிழ்', flag: '🇮🇳' }
];

export function LanguageProvider({ children }) {
    const [locale, setLocale] = useState(() => {
        return localStorage.getItem('app_locale') || 'en';
    });

    useEffect(() => {
        localStorage.setItem('app_locale', locale);
        document.documentElement.lang = locale;
    }, [locale]);

    const t = (key, fallback = '') => {
        const langData = translations[locale] || translations['en'];
        return langData[key] || translations['en'][key] || fallback || key;
    };

    return (
        <LanguageContext.Provider value={{ locale, setLocale, t, languages }}>
            {children}
        </LanguageContext.Provider>
    );
}

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