// Language Switcher Component
const { useState, useEffect } = React;

const LanguageSwitcher = ({ onClose }) => {
    const [selectedLanguage, setSelectedLanguage] = useState(window.getCurrentLanguage ? window.getCurrentLanguage() : 'en');
    
    const languages = [
        { code: 'en', name: 'English', flag: '🇬🇧' },
        { code: 'es', name: 'Español', flag: '🇪🇸' },
        { code: 'fr', name: 'Français', flag: '🇫🇷' },
        { code: 'tr', name: 'Türkçe', flag: '🇹🇷' },
        { code: 'it', name: 'Italiano', flag: '🇮🇹' },
        { code: 'ru', name: 'Русский', flag: '🇷🇺' },
        { code: 'ar', name: 'العربية', flag: '🇸🇦' }
    ];

    useEffect(() => {
        // Initialize language when component mounts
        if (window.initLanguage) {
            const initialLang = window.initLanguage();
            setSelectedLanguage(initialLang);
        }
    }, []);
    
    const changeLanguage = (langCode) => {
        if (window.changeLanguage) {
            const success = window.changeLanguage(langCode);
            if (success) {
                setSelectedLanguage(langCode);
                
                // If onClose is provided, close the language panel
                if (onClose) {
                    setTimeout(onClose, 300);
                }
            }
        }
    };
    
    return (
        <div style={{
            backgroundColor: 'white',
            borderRadius: '16px',
            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
            padding: '20px',
            width: '100%',
            maxWidth: '320px',
            animation: 'fadeIn 0.3s ease-out forwards'
        }}>
            <div style={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                marginBottom: '16px'
            }}>
                <h3 style={{
                    fontSize: '18px',
                    fontWeight: '600',
                    color: '#4f46e5',
                    margin: 0
                }}>{window.t ? window.t('languages') : 'Languages'}</h3>
                
                <button 
                    onClick={onClose}
                    style={{
                        background: 'none',
                        border: 'none',
                        fontSize: '24px',
                        color: '#9ca3af',
                        cursor: 'pointer',
                        padding: '0',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        width: '32px',
                        height: '32px',
                        borderRadius: '50%',
                        transition: 'background-color 0.2s'
                    }}
                    onMouseOver={e => e.currentTarget.style.backgroundColor = '#f3f4f6'}
                    onMouseOut={e => e.currentTarget.style.backgroundColor = 'transparent'}
                >
                    &times;
                </button>
            </div>
            
            <div style={{
                display: 'grid',
                gridTemplateColumns: '1fr 1fr',
                gap: '12px'
            }}>
                {languages.map((lang) => (
                    <div 
                        key={lang.code}
                        onClick={() => changeLanguage(lang.code)}
                        style={{
                            padding: '12px',
                            borderRadius: '12px',
                            background: selectedLanguage === lang.code ? '#f3f4f6' : 'white',
                            cursor: 'pointer',
                            display: 'flex',
                            alignItems: 'center',
                            border: selectedLanguage === lang.code ? '2px solid #4f46e5' : '2px solid transparent',
                            transition: 'all 0.2s',
                            position: 'relative'
                        }}
                    >
                        <div style={{
                            fontSize: '24px',
                            marginRight: '12px',
                            width: '32px',
                            textAlign: 'center'
                        }}>
                            {lang.flag}
                        </div>
                        <span style={{
                            fontSize: '14px',
                            fontWeight: selectedLanguage === lang.code ? '600' : '500',
                            color: selectedLanguage === lang.code ? '#4f46e5' : '#4b5563'
                        }}>
                            {lang.name}
                        </span>
                        
                        {selectedLanguage === lang.code && (
                            <div style={{
                                position: 'absolute',
                                top: '4px',
                                right: '4px',
                                width: '16px',
                                height: '16px',
                                borderRadius: '50%',
                                background: '#4f46e5',
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                                color: 'white',
                                fontSize: '10px'
                            }}>
                                ✓
                            </div>
                        )}
                    </div>
                ))}
            </div>
        </div>
    );
};

// Make it globally available
window.LanguageSwitcher = LanguageSwitcher;