import { usePage } from '@inertiajs/react';
import {
    GalleryHorizontal,
    House,
    LayoutGrid,
    Archive,
    Boxes,
    Building2,
    History,
    NotebookPen,
    Settings,
    Users,
} from 'lucide-react';
import { useMemo } from 'react';

import { AppShell } from '@/components/AppShell';
import { Breadcrumbs } from '@/components/Breadcrumbs';
import { NavMain } from '@/components/NavMain';
import { NotificationBell } from '@/components/NotificationBell';
import { NotificationPermissionGate } from '@/components/NotificationPermissionGate';

import { Separator } from '@/components/ui/separator';
import {
    Sidebar,
    SidebarContent,
    SidebarFooter,
    SidebarMenu,
    SidebarMenuItem,
    SidebarProvider,
    SidebarTrigger,
} from '@/components/ui/sidebar';

import { UserMenu } from '@/components/UserMenuOnSide';
import { UserMenuOnTopbar } from '@/components/UserMenuOnTopbar';
import { NotificationProvider } from '@/hooks/use-notifications';
import { cn } from '@/lib/utils';

import { dashboard } from '@/routes';
import { index as adminActivitiesIndex } from '@/routes/admin/activities';
import { index as adminArchivesIndex } from '@/routes/admin/archives';
import { index as adminDivisionsIndex } from '@/routes/admin/divisions';
import { index as adminUsersIndex } from '@/routes/admin/users';
import {
    index as divisionsIndex,
    show_members,
    show_projects,
    show_recurring_tasks,
    show_tasks,
} from '@/routes/divisions/index';
import { index as mediaIndex } from '@/routes/media/index';
import { index as myTasksIndex } from '@/routes/personal-tasks';
import { edit as profileEdit } from '@/routes/profile';
import { index as projectsIndex } from '@/routes/projects/index';

import type { AppLayoutProps, NavItem } from '@/types';
import type { NavSubItem } from '@/types/navigation';

// Scope "Administration": hanya dirender untuk super admin, tampil sejajar
// dengan menu platform. Route-nya sudah dijaga gate, jadi user lain kena 403.
const ADMIN_NAV_ITEMS: NavItem[] = [
    { title: 'User Management', href: adminUsersIndex().url, icon: Users },
    {
        title: 'Division Management',
        href: adminDivisionsIndex().url,
        icon: Building2,
    },
    { title: 'Activity Log', href: adminActivitiesIndex().url, icon: History },
    { title: 'Archives', href: adminArchivesIndex().url, icon: Archive },
];

export default function AppTaskoLayout({
    children,
    breadcrumbs = [],
}: AppLayoutProps) {
    const { sidebarOpen: isOpen, userDivisions = [], auth } = usePage().props;
    const isSuperAdmin = auth.user?.role === 'super_admin';

    // Daftar divisi yang ditangani user. Tiap divisi jadi grup yang bisa
    // di-expand berisi menu-menu di dalamnya (Tasks, Projects, dst), sehingga
    // user cukup scroll dan klik divisi tujuan tanpa bolak-balik ke halaman index.
    const divisionSubItems = useMemo<NavSubItem[] | undefined>(() => {
        if (userDivisions.length === 0) {
            return undefined;
        }

        return userDivisions.map((division) => ({
            title: division.name,
            href: show_tasks(division.slug).url,
            items: [
                {
                    title: 'Tasks',
                    href: show_tasks(division.slug).url,
                },
                {
                    title: 'Projects',
                    href: show_projects(division.slug).url,
                },
                {
                    title: 'Recurring Tasks',
                    href: show_recurring_tasks(division.slug).url,
                },
                {
                    title: 'Members',
                    href: show_members(division.slug).url,
                },
            ],
        }));
    }, [userDivisions]);

    const platformNavItems: NavItem[] = useMemo(
        () => [
            {
                title: 'Dashboard',
                href: dashboard().url,
                icon: House,
            },
            // Super admin tidak punya catatan pribadi — route-nya dijaga gate
            // `use-personal-tasks`, jadi menunya ikut disembunyikan agar tidak
            // menawarkan pintu yang pasti 403.
            ...(isSuperAdmin
                ? []
                : [
                      {
                          title: 'My Tasks',
                          href: myTasksIndex().url,
                          icon: NotebookPen,
                      },
                  ]),
            {
                title: 'Divisions',
                href: divisionsIndex().url,
                icon: GalleryHorizontal,
                items: divisionSubItems,
            },
            {
                title: 'Projects',
                href: projectsIndex().url,
                icon: LayoutGrid,
            },
            {
                title: 'Media',
                href: mediaIndex().url,
                icon: Boxes,
            },
            {
                title: 'Settings',
                href: profileEdit().url,
                icon: Settings,
            },
        ],
        [divisionSubItems, isSuperAdmin],
    );

    return (
        <NotificationPermissionGate>
            <NotificationProvider>
                <SidebarProvider defaultOpen={isOpen}>
                    <AppShell>
                        <div
                            className={cn(
                                'h-[calc(100vh)]',
                                'flex flex-col overflow-hidden bg-app-content',
                            )}
                        >
                            <div className="flex flex-1 overflow-hidden">
                                <div className="flex-none md:py-2">
                                    <Sidebar
                                        collapsible="icon"
                                        variant="sidebar"
                                    >
                                        <SidebarContent>
                                            <UserMenu />
                                            <NavMain items={platformNavItems} />
                                            {isSuperAdmin && (
                                                <NavMain
                                                    items={ADMIN_NAV_ITEMS}
                                                    label="Administration"
                                                />
                                            )}
                                        </SidebarContent>
                                        <SidebarFooter>
                                            <SidebarMenu>
                                                <SidebarMenuItem>
                                                    <SidebarTrigger />
                                                </SidebarMenuItem>
                                            </SidebarMenu>
                                        </SidebarFooter>
                                    </Sidebar>
                                </div>

                                <div className="flex flex-1 flex-col overflow-hidden">
                                    <header className="flex h-12 shrink-0 items-center gap-2 border-b px-4 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 md:px-4">
                                        <SidebarTrigger className="-ml-1 md:hidden" />
                                        <Breadcrumbs
                                            breadcrumbs={breadcrumbs}
                                        />
                                        <div className="ml-auto flex items-center gap-1">
                                            <NotificationBell />
                                            <Separator
                                                orientation="vertical"
                                                className="mx-1 data-[orientation=vertical]:h-5"
                                            />
                                            <UserMenuOnTopbar />
                                        </div>
                                    </header>

                                    <main className="flex-1 overflow-x-hidden overflow-y-auto">
                                        {children}
                                    </main>
                                </div>
                            </div>
                        </div>
                    </AppShell>
                </SidebarProvider>
            </NotificationProvider>
        </NotificationPermissionGate>
    );
}