<script lang="ts">
    import { getLocale } from '$lib/paraglide/runtime'
    import { m } from '$lib/paraglide/messages.js'
    import { page } from '$app/state'

    const locale = $derived(getLocale())
    const pathname = $derived(page.url.pathname)

    type LeafItem = { label: () => string; href: string }
    type Column = { label: () => string; href: string; children?: LeafItem[] }
    type NavItem = { id: string; label: () => string; href?: string; columns?: Column[] }

    const navItems = $derived<NavItem[]>([
        {
            id: 'donauschwaben',
            label: () => m.nav_donauschwaben(),
            href: `/${locale}/donauschwaben`,
            columns: [
                {
                    label: () => m.nav_geschichte(),
                    href: `/${locale}/donauschwaben/geschichte`,
                },
                {
                    label: () => m.nav_kultur(),
                    href: `/${locale}/donauschwaben/kultur`,
                    children: [
                        { label: () => m.nav_brauchtum(), href: `/${locale}/donauschwaben/kultur/brauchtum` },
                        { label: () => m.nav_tracht(),    href: `/${locale}/donauschwaben/kultur/tracht` },
                        { label: () => m.nav_religion(),  href: `/${locale}/donauschwaben/kultur/religion` },
                        { label: () => m.nav_kueche(),    href: `/${locale}/donauschwaben/kultur/kueche` },
                    ],
                },
                {
                    label: () => m.nav_politik(),
                    href: `/${locale}/donauschwaben/politik`,
                },
                {
                    label: () => m.nav_persoenlichkeiten(),
                    href: `/${locale}/donauschwaben/persoenlichkeiten`,
                },
            ],
        },
        { id: 'neuigkeiten',    label: () => m.nav_news(), href: `/${locale}/neuigkeiten` },
        { id: 'artikel', label: () => m.nav_artikel(), href: `/${locale}/artikel` },
        { id: 'organisationen', label: () => m.nav_org(),  href: `/${locale}/organisationen` },
    ])

    let openId = $state<string | null>(null)

    function toggle(id: string) {
        openId = openId === id ? null : id
    }

    function close() {
        openId = null
    }

    function isActive(href: string) {
        return pathname.startsWith(href)
    }
</script>

<svelte:document onclick={close} />

<nav id="main" aria-label="Main navigation" class="relative bg-white border-b border-gray-200 flex justify-center items-center px-5 min-h-10">
    <ul role="menubar" class="flex items-center gap-1 list-none m-0 p-0">
        {#each navItems as item (item.id)}
            <li role="none" class="relative">
                {#if item.columns}
                    <button
                        role="menuitem"
                        aria-haspopup="menu"
                        aria-expanded={openId === item.id}
                        onclick={(e) => { e.stopPropagation(); toggle(item.id) }}
                        class="flex items-center gap-1 px-3 py-2 text-sm hover:bg-gray-100 transition cursor-pointer"
                        class:font-semibold={isActive(item.href ?? '')}
                    >
                        {item.label()}
                        <span class="text-xs opacity-50 transition-transform duration-150" class:rotate-180={openId === item.id}>▾</span>
                    </button>

                    {#if openId === item.id}
                        <!-- Backdrop -->
                        <button
                            class="fixed inset-0 z-10 bg-gray-600 opacity-30"
                            style="top: 80px"
                            onclick={close}
                            aria-label="Close menu"
                            tabindex="-1"
                        ></button>

                        <!-- Mega menu panel -->
                        <div
                            class="fixed left-0 right-0 z-20 bg-white border border-gray-200 shadow-lg"
                            role="presentation"
                            onclick={(e) => e.stopPropagation()}
                            onkeydown={(e) => e.stopPropagation()}
                        >
                            <div class="px-8 py-6 flex justify-center gap-10">
                                {#each item.columns as col (col.href)}
                                    <div class="min-w-40">
                                        <a
                                        role="menuitem"
                                        href={col.href}
                                        onclick={close}
                                        class="block text-base font-semibold text-gray-800 hover:text-black mb-3 tracking-wide transition"
                                        class:underline={isActive(col.href)}
                                        >
                                        {col.label()}
                                        </a>

                                        {#if col.children}
                                            <ul class="list-none m-0 p-0 flex flex-col gap-2">
                                                {#each col.children as child (child.href)}
                                                    <li role="none">
                                                        <a
                                                        role="menuitem"
                                                        href={child.href}
                                                        onclick={close}
                                                        class="block text-sm text-gray-500 hover:text-gray-900 tracking-wide transition pl-3 border-l border-gray-200 hover:border-gray-500"
                                                        class:font-semibold={isActive(child.href)}
                                                        class:text-gray-900={isActive(child.href)}
                                                        >
                                                        {child.label()}
                                                        </a>
                                                    </li>
                                                {/each}
                                            </ul>
                                        {/if}
                                    </div>
                                {/each}
                            </div>
                        </div>
                    {/if}
                {:else}
                    <a
                    role="menuitem"
                    href={item.href}
                    class="block px-3 py-2 text-sm hover:bg-gray-100 transition"
                    class:font-semibold={isActive(item.href ?? '')}
                    >
                    {item.label()}
                    </a>
                {/if}
            </li>
        {/each}
    </ul>
</nav>

