---
import Container from '../layout/Container.astro';
import Button from '../ui/Button.astro';
import ThemeToggle from '../ui/ThemeToggle.astro';
import MobileMenu from './MobileMenu.astro';
import LanguageSwitcher from '../ui/LanguageSwitcher.astro';
import { getLangFromUrl, useTranslations } from '../../lib/i18n/config';
import { getLocalizedRoute } from '../../lib/i18n/utils';

export interface Props {
	transparent?: boolean;
	sticky?: boolean;
}

const { transparent = false, sticky = true } = Astro.props;

const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);

const navLinks = [
	{ href: getLocalizedRoute('/apps', lang), label: t('nav.apps') },
	{ href: getLocalizedRoute('/pricing', lang), label: t('nav.pricing') },
	{ href: getLocalizedRoute('/clients', lang), label: t('nav.references') },
	{ href: getLocalizedRoute('/devlog', lang), label: t('nav.devlog') },
	{ href: getLocalizedRoute('/privacy', lang), label: t('nav.privacy') },
];

const baseStyles = 'w-full transition-all duration-300';
const bgStyles = transparent
	? 'bg-transparent'
	: 'bg-white/80 dark:bg-gray-900/80 backdrop-blur-md border-b border-gray-200/50 dark:border-gray-800/50';
const positionStyles = sticky ? 'sticky top-0 z-50' : '';

const classes = `${baseStyles} ${bgStyles} ${positionStyles}`;
---

<nav class={classes}>
	<Container>
		<div class="flex items-center justify-between h-16">
			<!-- Logo -->
			<a href={getLocalizedRoute('/', lang)} class="flex items-center gap-2">
				<img src="/icons/mana-icon.svg" alt="Mana Logo" class="w-8 h-8" />
				<span class="text-2xl font-bold text-mana-blue"> Manacore </span>
			</a>

			<!-- Desktop Navigation -->
			<div class="hidden md:flex items-center space-x-8">
				{
					navLinks.map((link) => (
						<a
							href={link.href}
							class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium transition-colors"
						>
							{link.label}
						</a>
					))
				}
			</div>

			<!-- CTA Buttons and Theme Toggle -->
			<div class="hidden md:flex items-center space-x-3">
				<LanguageSwitcher currentLang={lang} />
				<ThemeToggle />
				<Button
					href={getLocalizedRoute('/start', lang)}
					size="small"
					class="bg-mana-orange hover:bg-orange-600"
				>
					{t('button.startFree')}
				</Button>
			</div>

			<!-- Mobile Menu Button -->
			<div class="md:hidden flex items-center gap-2">
				<ThemeToggle />
				<button
					id="mobile-menu-open"
					class="p-2 rounded-lg text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 transition-colors"
					aria-label="Menü öffnen"
				>
					<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M4 6h16M4 12h16M4 18h16"></path>
					</svg>
				</button>
			</div>
		</div>
	</Container>

	<!-- Mobile Menu Component -->
	<MobileMenu navLinks={navLinks} />
</nav>

<script>
	document.addEventListener('DOMContentLoaded', () => {
		const mobileMenu = document.getElementById('mobile-menu');
		const mobileMenuPanel = mobileMenu?.querySelector('.transform');
		const mobileMenuOverlay = document.getElementById('mobile-menu-overlay');
		const mobileMenuClose = document.getElementById('mobile-menu-close');
		const mobileMenuOpen = document.getElementById('mobile-menu-open');

		function openMobileMenu() {
			if (!mobileMenu || !mobileMenuPanel) return;

			mobileMenu.classList.remove('hidden');
			document.body.style.overflow = 'hidden';

			// Trigger animation after display change
			requestAnimationFrame(() => {
				mobileMenuPanel.classList.remove('translate-x-full');
			});
		}

		function closeMobileMenu() {
			if (!mobileMenu || !mobileMenuPanel) return;

			mobileMenuPanel.classList.add('translate-x-full');
			document.body.style.overflow = '';

			// Hide after animation completes
			setTimeout(() => {
				mobileMenu.classList.add('hidden');
			}, 300);
		}

		mobileMenuOpen?.addEventListener('click', openMobileMenu);
		mobileMenuClose?.addEventListener('click', closeMobileMenu);
		mobileMenuOverlay?.addEventListener('click', closeMobileMenu);

		// Close menu on escape key
		document.addEventListener('keydown', (e) => {
			if (e.key === 'Escape' && !mobileMenu?.classList.contains('hidden')) {
				closeMobileMenu();
			}
		});
	});
</script>
