import { ReactNode } from "react";
import type { Metadata } from "next";
import { cookies } from "next/headers";
import { HydrationBoundary, dehydrate } from "@tanstack/react-query";
import Header from "@/components/layout/dashboard/header";
import AppSidebar from "@/components/layout/app-sidebar";
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
import { DashboardProvider } from "@/components/layout/dashboard";
import { createHelpers } from "@/lib/trpc/server";
import { getNavItems } from "@/config/nav-items";
import { config } from "@/config/env";

export const metadata: Metadata = {
    title: `${config.app.name} Dashboard`,
    description: `${config.app.name} Dashboard`
};

type Props = {
    children: ReactNode;
};

export default async function Layout({ children }: Props) {
    const cookieStore = await cookies();
    const defaultOpen = cookieStore.get("sidebar_state")?.value === "true";
    const helpers = await createHelpers();

    await Promise.all(
        getNavItems().flatMap((item) => {
            const permissions = [];

            if(item.permission) {
                permissions.push(
                    helpers.gate.can.prefetch({
                        resource: item.permission[0],
                        action: item.permission[1]
                    })
                );
            }

            if(item.items) {
                for(const subItem of item.items) {
                    if(subItem.permission) {
                        permissions.push(
                            helpers.gate.can.prefetch({
                                resource: subItem.permission[0],
                                action: subItem.permission[1]
                            })
                        );
                    }
                }
            }

            return permissions;
        })
    );

    return (
        <HydrationBoundary state={dehydrate(helpers.queryClient)}>
            <DashboardProvider>
                <SidebarProvider defaultOpen={defaultOpen}>
                    <AppSidebar />

                    <SidebarInset>
                        <Header />

                        {children}
                    </SidebarInset>
                </SidebarProvider>
            </DashboardProvider>
        </HydrationBoundary>
    );
}