---
import { languages, getLangFromUrl } from '../i18n/ui';
import { Globe } from 'lucide-astro';

const lang = getLangFromUrl(Astro.url);
const currentPath = Astro.url.pathname;
---

<div class="relative" data-language-selector>
  <button class="flex items-center space-x-2 rtl:space-x-reverse text-white hover:text-blueprint-accent transition-colors duration-300 p-2 rounded-lg hover:bg-white/10" data-language-button>
    <Globe class="w-5 h-5" />
    <span class="text-sm font-medium hidden sm:block">{languages[lang]}</span>
  </button>
  
  <div class="absolute top-full right-0 mt-2 w-32 bg-white dark:bg-blueprint-primary rounded-lg shadow-xl border border-blueprint-accent/20 hidden z-50" data-language-dropdown>
    <div class="py-2">
      {Object.entries(languages).map(([code, name]) => {
        return (
          <button 
            class={`block w-full text-left px-4 py-2 text-sm transition-colors duration-200 ${
              code === lang 
                ? 'bg-blueprint-accent text-white' 
                : 'text-blueprint-dark dark:text-white hover:bg-blueprint-light dark:hover:bg-blueprint-accent/20'
            }`}
            data-lang={code}
          >
            {name}
          </button>
        );
      })}
    </div>
  </div>
</div>

<script>
  // Language selector dropdown
  const languageSelector = document.querySelector('[data-language-selector]');
  const languageButton = document.querySelector('[data-language-button]');
  const languageDropdown = document.querySelector('[data-language-dropdown]');

  languageButton?.addEventListener('click', (e) => {
    e.stopPropagation();
    languageDropdown?.classList.toggle('hidden');
  });

  document.addEventListener('click', (e) => {
    if (!languageSelector?.contains(e.target as Node)) {
      languageDropdown?.classList.add('hidden');
    }
  });

  // Handle language selection
  languageDropdown?.addEventListener('click', (e) => {
    const target = e.target as HTMLElement;
    const selectedLang = target.getAttribute('data-lang');
    
    if (selectedLang) {
      const currentPath = window.location.pathname;
      
      let newPath;
      if (selectedLang === 'ar') {
        // Going to Arabic (default) - remove /en prefix
        newPath = currentPath === '/en' || currentPath === '/en/' ? '/' : currentPath.replace('/en', '') || '/';
      } else {
        // Going to English - add /en prefix
        newPath = currentPath === '/' ? '/en' : `/en${currentPath}`;
      }
      
      window.location.href = newPath;
    }
    
    languageDropdown.classList.add('hidden');
  });
</script>