---
import ThemeToggle from './ThemeToggle.astro';

const currentPath = Astro.url.pathname;

// Navigation items
const navItems = [
    { href: '/', label: 'Home', icon: 'home' },
    { href: '/dev', label: 'Dev', icon: 'code' },
    { href: '/blog', label: 'Blog', icon: 'file' },
    // { href: '/hubert', label: 'Hubert', icon: 'chat' }, // temporarily disabled
    { href: '/contact', label: 'Contact', icon: 'mail' },
];

// Check if a path is active
function isActive(href: string): boolean {
    if (href === '/') {
        return currentPath === '/';
    }
    return currentPath.startsWith(href);
}
---

<!-- Desktop Navigation: Fixed left sidebar (lg: 1024px+) -->
<nav class="hidden lg:flex fixed left-6 top-1/2 -translate-y-1/2 z-50 flex-col items-center gap-1 p-2 bg-[var(--theme-overlay)] backdrop-blur-md border border-[var(--theme-border-primary)] rounded-2xl">
    {navItems.map((item) => (
        <a
            href={item.href}
            class:list={[
                "nav-icon relative group w-10 h-10 flex items-center justify-center rounded-xl transition-colors duration-200",
                isActive(item.href)
                    ? "bg-brand-accent/10 text-brand-accent"
                    : "text-[var(--theme-text-muted)] hover:text-[var(--theme-text-primary)] hover:bg-[var(--theme-hover-bg-strong)]"
            ]}
            aria-label={item.label}
            data-icon={item.icon}
        >
            {/* Home icon */}
            {item.icon === 'home' && (
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                    <polyline points="9 22 9 12 15 12 15 22"></polyline>
                </svg>
            )}
            {/* Code icon */}
            {item.icon === 'code' && (
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="16 18 22 12 16 6"></polyline>
                    <polyline points="8 6 2 12 8 18"></polyline>
                </svg>
            )}
            {/* File/Blog icon */}
            {item.icon === 'file' && (
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                    <polyline points="14 2 14 8 20 8"></polyline>
                    <line x1="16" y1="13" x2="8" y2="13"></line>
                    <line x1="16" y1="17" x2="8" y2="17"></line>
                    <polyline points="10 9 9 9 8 9"></polyline>
                </svg>
            )}
            {/* Chat icon */}
            {item.icon === 'chat' && (
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
                </svg>
            )}
            {/* Mail icon */}
            {item.icon === 'mail' && (
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                    <polyline points="22,6 12,13 2,6"></polyline>
                </svg>
            )}
            {/* Tooltip */}
            <span class="absolute left-full ml-3 px-3 py-1.5 bg-[var(--theme-bg-secondary)] border border-[var(--theme-border-primary)] rounded-lg text-xs font-medium whitespace-nowrap opacity-0 pointer-events-none group-hover:opacity-100 transition-opacity duration-200 shadow-lg">
                {item.label}
            </span>
        </a>
    ))}

    {/* Divider */}
    <div class="w-6 h-px bg-[var(--theme-border-primary)] my-2"></div>

    {/* Theme Toggle */}
    <div class="nav-theme-toggle w-10 h-10 flex items-center justify-center">
        <ThemeToggle />
    </div>
</nav>

<!-- Mobile Navigation: Top bar with hamburger (< lg) -->
<nav class="lg:hidden fixed top-0 left-0 w-full z-50 px-6 py-6 flex justify-between items-center backdrop-blur-md bg-[var(--theme-overlay)] border-b border-[var(--theme-border-secondary)]">
    <!-- Left side - branding -->
    <a href="/" class="text-[10px] font-mono text-[var(--theme-text-muted)] tracking-widest uppercase hover:text-brand-accent transition-colors duration-300">NV / 2026</a>

    <!-- Mobile menu button -->
    <button
        id="mobile-menu-toggle"
        class="p-2 text-[var(--theme-text-muted)] hover:text-[var(--theme-text-primary)] transition-colors z-[60]"
        aria-label="Toggle menu"
        aria-expanded="false"
    >
        <!-- Hamburger icon -->
        <svg id="menu-icon-open" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
        <!-- Close icon (hidden by default) -->
        <svg id="menu-icon-close" class="w-6 h-6 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
    </button>
</nav>

<!-- Mobile Menu Overlay -->
<div
    id="mobile-menu"
    class="fixed inset-0 z-40 bg-[var(--theme-overlay-heavy)] backdrop-blur-xl transform translate-x-full transition-transform duration-300 ease-out lg:hidden"
>
    <!-- Menu Content -->
    <div class="flex flex-col justify-center items-center h-full px-8">
        <!-- Navigation Links -->
        <nav class="flex flex-col items-center gap-8 mb-12">
            <a
                href="/"
                class="mobile-nav-link text-3xl font-bold uppercase tracking-wider text-[var(--theme-text-primary)] hover:text-brand-accent transition-colors duration-300"
            >
                Home
            </a>
            <a
                href="/dev"
                class="mobile-nav-link text-3xl font-bold uppercase tracking-wider text-[var(--theme-text-primary)] hover:text-brand-accent transition-colors duration-300"
            >
                Dev
            </a>
            <a
                href="/blog"
                class="mobile-nav-link text-3xl font-bold uppercase tracking-wider text-[var(--theme-text-primary)] hover:text-brand-accent transition-colors duration-300"
            >
                Blog
            </a>
            <!-- temporarily disabled
            <a
                href="/hubert"
                class="mobile-nav-link text-3xl font-bold uppercase tracking-wider text-[var(--theme-text-primary)] hover:text-brand-accent transition-colors duration-300"
            >
                Hubert
            </a>
            -->
            <a
                href="/contact"
                class="mobile-nav-link text-3xl font-bold uppercase tracking-wider text-[var(--theme-text-primary)] hover:text-brand-accent transition-colors duration-300"
            >
                Contact
            </a>
        </nav>

        <!-- CTA Button -->
        <a
            href="/contact"
            class="border border-brand-accent px-8 py-4 text-sm font-bold uppercase tracking-[0.2em] text-brand-accent hover:bg-brand-accent hover:text-brand-dark transition-all duration-300 mb-8 rounded-full"
        >
            Let's Talk
        </a>

        <!-- Decorative Elements -->
        <div class="absolute bottom-12 left-8 right-8 flex justify-between items-center">
            <div class="flex flex-col gap-2">
                <div class="text-[10px] font-mono text-[var(--theme-text-muted)] uppercase tracking-widest">
                    NV / 2026
                </div>
                <ThemeToggle />
            </div>
            <div class="text-[10px] font-mono text-[var(--theme-text-muted)] uppercase tracking-widest self-end">
                Menu
            </div>
        </div>
    </div>
</div>

<style>
    /* Custom styling for the nav theme toggle to make it more compact */
    .nav-theme-toggle :global(.theme-toggle-group) {
        flex-direction: column;
        gap: 0.5rem;
        margin-left: 0;
    }

    .nav-theme-toggle :global(.theme-toggle-group > div:first-child) {
        display: none; /* Hide the arrow icon in compact mode */
    }

    .nav-theme-toggle :global(.theme-toggle-group > div:last-child) {
        flex-direction: column;
    }
</style>

<script>
    function initMobileNav() {
        const toggle = document.getElementById('mobile-menu-toggle');
        const menu = document.getElementById('mobile-menu');
        const iconOpen = document.getElementById('menu-icon-open');
        const iconClose = document.getElementById('menu-icon-close');
        const mobileNavLinks = document.querySelectorAll('.mobile-nav-link');

        let isOpen = false;

        function toggleMenu() {
            isOpen = !isOpen;

            if (isOpen) {
                menu?.classList.remove('translate-x-full');
                menu?.classList.add('translate-x-0');
                iconOpen?.classList.add('hidden');
                iconClose?.classList.remove('hidden');
                document.body.style.overflow = 'hidden';
                toggle?.setAttribute('aria-expanded', 'true');
            } else {
                menu?.classList.add('translate-x-full');
                menu?.classList.remove('translate-x-0');
                iconOpen?.classList.remove('hidden');
                iconClose?.classList.add('hidden');
                document.body.style.overflow = '';
                toggle?.setAttribute('aria-expanded', 'false');
            }
        }

        // Remove old listeners by cloning
        if (toggle) {
            const newToggle = toggle.cloneNode(true);
            toggle.parentNode?.replaceChild(newToggle, toggle);
            newToggle.addEventListener('click', toggleMenu);
        }

        // Close menu when clicking a link
        mobileNavLinks.forEach(link => {
            link.addEventListener('click', () => {
                if (isOpen) toggleMenu();
            });
        });
    }

    // Close menu on escape key (only add once)
    let escapeListenerAdded = false;
    function addEscapeListener() {
        if (escapeListenerAdded) return;
        escapeListenerAdded = true;
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') {
                const menu = document.getElementById('mobile-menu');
                if (menu && !menu.classList.contains('translate-x-full')) {
                    const toggle = document.getElementById('mobile-menu-toggle');
                    toggle?.click();
                }
            }
        });
    }

    // Initialize on load and view transitions
    initMobileNav();
    addEscapeListener();
    document.addEventListener('astro:page-load', initMobileNav);
</script>
