---
import { Icon } from 'astro-icon/components';
import { languages } from '../../lib/i18n/config';
import type { Language } from '../../lib/i18n/config';
import { getRouteFromUrl, getLocalizedRoute } from '../../lib/i18n/utils';

export interface Props {
	currentLang: Language;
}

const { currentLang } = Astro.props;
const currentRoute = getRouteFromUrl(Astro.url);

// Get language labels and flag emojis
const languageLabels = {
	de: 'DE',
	en: 'EN',
	it: 'IT',
	fr: 'FR',
	es: 'ES',
};

const flagEmojis = {
	de: '🇩🇪',
	en: '🇬🇧',
	it: '🇮🇹',
	fr: '🇫🇷',
	es: '🇪🇸',
};

// Generate unique ID for this instance
const uniqueId = `lang-${Math.random().toString(36).substr(2, 9)}`;
---

<div class="relative language-switcher">
	<button
		id={`language-toggle-${uniqueId}`}
		class="flex items-center gap-2 px-3 py-2 rounded-lg text-gray-300 hover:text-white transition-all"
		aria-label="Change language"
		aria-expanded="false"
	>
		<span class="text-base" aria-hidden="true">{flagEmojis[currentLang]}</span>
		<span class="text-sm font-medium">{languageLabels[currentLang]}</span>
		<Icon name="mdi:chevron-down" class="w-4 h-4 transition-transform language-chevron" />
	</button>

	<div
		id={`language-menu-${uniqueId}`}
		class="language-menu absolute right-0 bottom-full mb-2 w-48 rounded-lg shadow-lg hidden"
	>
		<div class="py-1">
			{
				Object.entries(languages).map(([lang, label]) => {
					const isActive = lang === currentLang;
					const href = getLocalizedRoute(currentRoute, lang as Language);

					return (
						<a
							href={href}
							class={`flex items-center gap-3 px-4 py-2 text-sm transition-all ${
								isActive
									? 'text-white bg-blue-500/20'
									: 'text-gray-300 hover:text-white hover:bg-blue-500/10'
							}`}
						>
							<span class="text-base" aria-hidden="true">
								{flagEmojis[lang as Language]}
							</span>
							<span class="flex-1">{label}</span>
							{isActive && <Icon name="mdi:check" class="w-4 h-4 text-blue-500" />}
						</a>
					);
				})
			}
		</div>
	</div>
</div>

<style>
	.language-menu {
		z-index: 9999;
		transition: all 0.2s ease;
		background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%);
		backdrop-filter: blur(12px);
		box-shadow:
			0 25px 50px -12px rgba(0, 0, 0, 0.5),
			0 0 0 1px rgba(248, 250, 252, 0.1);
	}

	.language-switcher button:hover {
		background: rgba(59, 130, 246, 0.1);
	}

	.language-switcher:hover .language-chevron,
	.language-switcher[data-open='true'] .language-chevron {
		transform: rotate(180deg);
	}

	.language-switcher[data-open='true'] .language-menu {
		display: block;
	}
</style>

<script>
	function initLanguageSwitchers() {
		const switchers = document.querySelectorAll('.language-switcher');

		switchers.forEach((switcher) => {
			const toggle = switcher.querySelector('button') as HTMLElement;
			const menu = switcher.querySelector('.language-menu') as HTMLElement;

			if (!toggle || !menu) {
				console.log('Language switcher missing elements');
				return;
			}

			// Toggle menu
			toggle.addEventListener('click', (e) => {
				e.preventDefault();
				e.stopPropagation();

				const isOpen = switcher.getAttribute('data-open') === 'true';

				// Close all other switchers
				document.querySelectorAll('.language-switcher').forEach((otherSwitcher) => {
					if (otherSwitcher !== switcher) {
						otherSwitcher.setAttribute('data-open', 'false');
					}
				});

				// Toggle current switcher
				switcher.setAttribute('data-open', isOpen ? 'false' : 'true');
				toggle.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
			});

			// Prevent menu from closing when clicking inside
			menu.addEventListener('click', (e) => {
				e.stopPropagation();
			});
		});

		// Close all menus when clicking outside
		document.addEventListener('click', (e) => {
			const target = e.target as HTMLElement;
			if (!target.closest('.language-switcher')) {
				document.querySelectorAll('.language-switcher').forEach((switcher) => {
					switcher.setAttribute('data-open', 'false');
					const toggle = switcher.querySelector('button');
					toggle?.setAttribute('aria-expanded', 'false');
				});
			}
		});
	}

	// Init on page load
	if (document.readyState === 'loading') {
		document.addEventListener('DOMContentLoaded', initLanguageSwitchers);
	} else {
		initLanguageSwitchers();
	}
</script>
