<script lang="ts">
    import { goto } from "$app/navigation";
    import { onMount } from "svelte";

    type SubMenuItem = {
        name: string;
        icon: string;
        url: string;
    };

    type MenuItem = {
        name: string;
        icon: string;
        url: string;
        sub?: SubMenuItem[];
    };

    let menuItems: MenuItem[] = [
        { name: "Beranda", icon: "🏠", url: "/" },
        { name: "Profile", icon: "🧑", url: "/profile" },
        { name: "Issues", icon: "📂", url: "/backoffice/issue" },
        { name: "Issue View", icon: "📂", url: "/backoffice/issue/view" },
        { name: "Projects", icon: "📂", url: "/backoffice/project" },
        {
            name: "Purchase Orders",
            icon: "📦",
            url: "/backoffice/purchaseorder",
            sub: [
                {
                    name: "Approval",
                    icon: "✅",
                    url: "/backoffice/purchaseorder/approval",
                },
                {
                    name: "Acknowledged",
                    icon: "📋",
                    url: "/backoffice/purchaseorder/acknowledged",
                },
                {
                    name: "Complete",
                    icon: "✔️",
                    url: "/backoffice/purchaseorder/complete",
                },
                {
                    name: "Received",
                    icon: "📥",
                    url: "/backoffice/purchaseorder/received",
                },
            ],
        },
        { name: "Timesheets", icon: "📂", url: "/backoffice/timesheets" },
        {
            name: "Timesheets View",
            icon: "📂",
            url: "/backoffice/timesheets/view",
        },
        { name: "Villa", icon: "📂", url: "/backoffice/villa" },
        { name: "Inventories", icon: "📂", url: "/backoffice/inventories" },
        { name: "Vendor", icon: "📂", url: "/backoffice/vendor" },
        { name: "Booking", icon: "📂", url: "/backoffice/booking" },
        { name: "Users", icon: "👤", url: "/backoffice/account" },
        { name: "Logout", icon: "🚪", url: "/logout" },
    ];

    let activeUrl = "/";
    let openMenus: Record<string, boolean> = {};

    onMount(() => {
        activeUrl = window.location.pathname;
    });

    function handleMenuClick(item: MenuItem) {
        console.log(`Menu item clicked: ${item.name}`);
        console.log(`URL: ${item.url}`);

        if (item.sub) {
            goto(item.url);
            activeUrl = item.url;
            openMenus[item.name] = !openMenus[item.name];
        } else {
            activeUrl = item.url;
            goto(item.url);
        }
    }

    function handleSubClick(sub: SubMenuItem) {
        activeUrl = sub.url;
        goto(sub.url);
    }
</script>

<div class="w-64 h-screen bg-white border-r shadow-sm">
    <div class="p-8 border-b">
        <h1 class="text-xl font-semibold text-gray-800">Backoffice</h1>
        <p class="text-sm text-gray-500">Manage your application</p>
    </div>
    <ul class="p-2 space-y-1">
        {#each menuItems as item}
            <li>
                <a
                    href={item.url}
                    class={`flex items-center gap-2 px-4 py-2 rounded transition-colors duration-150
                        ${activeUrl === item.url ? "bg-blue-100 text-blue-600 font-semibold" : "text-gray-700 hover:bg-blue-50"}
                        ${item.sub ? "justify-between" : ""}
                    `}
                    on:click|preventDefault={() => handleMenuClick(item)}
                >
                    <span class="flex items-center gap-2">
                        <span class="text-xl">{item.icon}</span>
                        <span class="truncate">{item.name}</span>
                    </span>
                    {#if item.sub}
                        <span>{openMenus[item.name] ? "▲" : "▼"}</span>
                    {/if}
                </a>
                {#if item.sub && openMenus[item.name]}
                    <ul class="ml-8 mt-1 space-y-1">
                        {#each item.sub as sub}
                            <li>
                                <a
                                    href={sub.url}
                                    class={`flex items-center gap-2 px-3 py-1 rounded transition-colors duration-150
                                        ${activeUrl === sub.url ? "bg-blue-50 text-blue-600 font-semibold" : "text-gray-700 hover:bg-blue-50"}
                                    `}
                                    on:click|preventDefault={() =>
                                        handleSubClick(sub)}
                                >
                                    <span class="text-lg">{sub.icon}</span>
                                    <span class="truncate">{sub.name}</span>
                                </a>
                            </li>
                        {/each}
                    </ul>
                {/if}
            </li>
        {/each}
    </ul>
</div>
