<script lang="ts">
    import { browser } from "$app/environment";
    import { goto, onNavigate } from "$app/navigation";
    import { page } from "$app/state";
    import Icon from "$lib/components/atoms/icon.svelte";
    import MaxWidthWrapper from "$lib/components/molecules/max-width-wrapper.svelte";
    import * as Sheet from "$lib/components/ui/sheet/index.js";
    import * as Tabs from "$lib/components/ui/tabs/index.js";
    import { secondaryNavTree } from "$lib/core/constants";
    import Menu from "@lucide/svelte/icons/menu";
    import { onMount } from "svelte";

    let { children } = $props();

    let chosen = $state(secondaryNavTree[0].url);
    let sheetOpen = $state(false);
    let isMobile = $state(false);

    // Check if mobile on initial load and set up resize listener
    function updateIsMobile() {
        if (browser) {
            isMobile = window.innerWidth < 768;
        }
    }

    onNavigate((info) => {
        if (!info || !info.to) return;
        chosen = info.to.url.pathname;
        // Close sheet after navigation on mobile
        if (isMobile) {
            sheetOpen = false;
        }
    });

    // Set initial state and add resize listener
    $effect(() => {
        updateIsMobile();

        if (browser) {
            const handleResize = () => {
                updateIsMobile();
            };

            window.addEventListener("resize", handleResize);

            return () => {
                window.removeEventListener("resize", handleResize);
            };
        }
    });

    // Function to handle navigation from tabs
    function handleNavigation(url: string) {
        goto(url);
    }

    onMount(() => {
        if (page.url.pathname !== secondaryNavTree[0].url) {
            const found = secondaryNavTree.find(
                (each) => each.url === page.url.pathname,
            );
            if (found) {
                chosen = found.url;
            }
        }
    });
</script>

<MaxWidthWrapper
    cls="grid grid-cols-1 gap-4 md:grid-cols-5 lg:grid-cols-4 max-w-5xl pt-20"
>
    <!-- Desktop sidebar - hidden on mobile -->
    <div class="hidden w-full md:col-span-2 md:block lg:col-span-1">
        <Tabs.Root value={chosen}>
            <Tabs.List class="flex h-full w-full flex-col gap-2">
                {#each secondaryNavTree as each}
                    <Tabs.Trigger
                        class="flex w-full items-start gap-2 text-start"
                        value={each.url}
                        onclick={() => {
                            handleNavigation(each.url);
                        }}
                    >
                        <Icon icon={each.icon} cls="w-4 h-4" />
                        <p class="w-full">
                            {each.title}
                        </p>
                    </Tabs.Trigger>
                {/each}
            </Tabs.List>
        </Tabs.Root>
    </div>

    <div class="h-full w-full md:col-span-3">
        {@render children()}
    </div>
</MaxWidthWrapper>

<!-- FAB for mobile - fixed position -->
{#if isMobile}
    <button
        class="bg-primary text-primary-foreground hover:bg-primary/90 focus:ring-ring fixed right-6 bottom-6 z-40 flex h-14 w-14 items-center justify-center rounded-full shadow-lg focus:ring-2 focus:ring-offset-2 focus:outline-none"
        onclick={() => (sheetOpen = true)}
        aria-label="Open navigation menu"
    >
        <Menu class="h-6 w-6" />
    </button>

    <!-- Sheet for mobile navigation -->
    <Sheet.Root bind:open={sheetOpen}>
        <Sheet.Content side="bottom">
            <div class="py-6">
                <Tabs.Root value={chosen}>
                    <Tabs.List class="flex h-full w-full flex-col gap-4">
                        {#each secondaryNavTree as each}
                            <Tabs.Trigger
                                class="flex w-full items-center gap-3 text-start"
                                value={each.url}
                                onclick={() => {
                                    handleNavigation(each.url);
                                }}
                            >
                                <Icon icon={each.icon} cls="w-5 h-5" />
                                <p class="w-full text-base">
                                    {each.title}
                                </p>
                            </Tabs.Trigger>
                        {/each}
                    </Tabs.List>
                </Tabs.Root>
            </div>
        </Sheet.Content>
    </Sheet.Root>
{/if}
