<script lang="ts">
    import { writable } from "svelte/store";
    import Sidebar from "../../components/Sidebar.svelte";
    import { onMount } from "svelte";
    import { supabase } from "$lib/supabaseClient";
    import { goto } from "$app/navigation";
    import type { Session } from "@supabase/supabase-js";

    export let data;

    let notifications = 3;
    let user = {
        name: "John Doe",
        avatar: "https://i.pravatar.cc/40",
    };
    let userdata: any = null;
    let showDropdown = false;

    const session = writable<Session | null>(null);

    onMount(async () => {
        const {
            data: { session: currentSession },
        } = await supabase.auth.getSession();

        session.set(currentSession || null);

        supabase.auth.onAuthStateChange((event, sessionValue) => {
            session.set(sessionValue);
            if (!sessionValue) goto("/unauthorized");
        });

        const userStr = localStorage.getItem("user");
        if (userStr) {
            userdata = JSON.parse(userStr);
        } else {
            goto("/unauthorized");
        }

        user.name = userdata.full_name || "Guest";
        user.avatar = userdata.profile_picture || "https://i.pravatar.cc/40";
    });

    //alert logout function
    function handleLogout() {
        if (confirm("Are you sure you want to logout?")) {
            logout();
        }
    }

    async function logout() {
        await supabase.auth.signOut();
        localStorage.clear();
        goto("/login");
    }

    let pageName = "Dashboard";
</script>

<div class="flex h-screen">
    <Sidebar {pageName} on:changePage={(e) => pageName = e.detail} />

    <!-- Main Content -->
    <div class="flex-1 flex flex-col bg-gray-100 overflow-hidden">
        <!-- Navbar -->
        <div
            class="flex items-center justify-between bg-white shadow px-6 py-3 border-b"
        >
            <div class="text-lg font-semibold text-gray-700">{pageName}</div>

            <div class="flex items-center gap-6">
                <!-- Notifications -->
                <div class="relative">
                    <button class="text-gray-600 hover:text-gray-800 text-xl"
                        >🔔</button
                    >
                    {#if notifications > 0}
                        <span
                            class="absolute -top-1 -right-1 bg-red-500 text-white text-xs w-5 h-5 flex items-center justify-center rounded-full"
                            >{notifications}</span
                        >
                    {/if}
                </div>

                <!-- Profile with Dropdown -->
                <div class="relative">
                    <button
                        class="flex items-center gap-2 focus:outline-none"
                        on:click={() => (showDropdown = !showDropdown)}
                    >
                        <img
                            src={user.avatar}
                            alt="User Avatar"
                            class="w-8 h-8 rounded-full"
                        />
                        <span class="text-sm font-medium text-gray-700"
                            >{user.name}</span
                        >
                        <svg
                            class="w-4 h-4 ml-1"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M19 9l-7 7-7-7"
                            />
                        </svg>
                    </button>

                    {#if showDropdown}
                        <div
                            class="absolute right-0 mt-2 w-40 bg-white border rounded-md shadow-lg z-10"
                        >
                            <a
                                href="/backoffice/profile"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                                >Profile</a
                            >
                            <button
                                on:click={handleLogout}
                                class="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-gray-100"
                            >
                                Logout
                            </button>
                        </div>
                    {/if}
                </div>
            </div>
        </div>

        <!-- Page Content -->
        <div class="flex-1 p-6 overflow-y-auto">
            <slot />
        </div>
    </div>
</div>
