document.addEventListener('DOMContentLoaded', function() {
    const supportedLanguages = {
        'en': 'English',
        'ru': 'Русский',
        'es': 'Español'
    };

    const switcherContainer = document.createElement('div');
    switcherContainer.id = 'language-switcher';
    switcherContainer.style.position = 'fixed';
    switcherContainer.style.bottom = '20px';
    switcherContainer.style.right = '20px';
    switcherContainer.style.zIndex = '1000';
    switcherContainer.style.cursor = 'pointer';

    const currentLang = window.location.pathname.split('/')[1];
    const currentLangDisplay = supportedLanguages[currentLang] || 'Language'; // Fallback if not on a supported lang path

    switcherContainer.innerHTML = `
        <div id="language-icon" style="width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background-color: #007bff; text-align: center; line-height: 40px; font-weight: bold;">
            <img src="https://flagcdn.com/w40/${currentLang === 'en' ? 'gb' : currentLang}.png" alt="${currentLang.toUpperCase()}" style="width: 100%; height: 100%; object-fit: cover;">
        </div>
        <div id="language-options-container" class="language-options-container" style="position: absolute; bottom: 50px; right: 0;">
            ${Object.keys(supportedLanguages).map(lang => `
                <div class="language-option" data-lang="${lang}" style="width: 40px; height: 40px; border-radius: 50%; overflow: hidden; margin-bottom: 10px; cursor: pointer;">
                    <img src="https://flagcdn.com/w40/${lang === 'en' ? 'gb' : lang}.png" alt="${supportedLanguages[lang]}" style="width: 100%; height: 100%; object-fit: cover;">
                </div>
            `).join('')}
        </div>
    `;

    document.body.appendChild(switcherContainer);

    const languageIcon = document.getElementById('language-icon');
    const languageOptionsContainer = document.getElementById('language-options-container');

    languageIcon.addEventListener('click', function(event) {
        // Close any other open language switchers first
        document.querySelectorAll('.language-options-container.show').forEach(el => {
            if (el !== languageOptionsContainer) {
                el.classList.remove('show');
            }
        });
        
        // Toggle current switcher
        languageOptionsContainer.classList.toggle('show');
        
        // Prevent event bubbling and default behavior
        event.stopPropagation();
        event.preventDefault();
    });

    document.addEventListener('click', function(event) {
        if (!switcherContainer.contains(event.target)) {
            languageOptionsContainer.classList.remove('show');
        }
    });

    // Close language switcher when other modals open
    document.addEventListener('modalOpened', function() {
        languageOptionsContainer.classList.remove('show');
    });

    languageOptionsContainer.querySelectorAll('.language-option').forEach(item => {
        item.addEventListener('click', function() {
            const lang = this.getAttribute('data-lang');
            const currentPathname = window.location.pathname;
            const pathParts = currentPathname.split('/').filter(part => part !== '');

            // Remove existing language prefix if present
            if (supportedLanguages[pathParts[0]]) {
                pathParts.shift();
            }

            // Construct new path with selected language
            const newPath = '/' + lang + '/' + pathParts.join('/');
            window.location.href = newPath;
        });
    });
});