import AppLogo from '@/components/app-logo';
import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, useSidebar } from '@/components/ui/sidebar';
import { dashboard } from '@/routes';
import { Link, usePage } from '@inertiajs/react';
import { appMenuItems } from './menuItems/menuLists/application-menu-items';
import { ContactMenuItems } from './menuItems/menuLists/ContactMenuItems';
import { erpMenuItems } from './menuItems/menuLists/erpMenuItems';
import { platformMenuItems, otherMenuItems } from './menuItems/menuLists/generalMenuItems';
import { toolsMenuItems } from './menuItems/menuLists/ToolsMenuItems';
import { InventoryMenuItems } from './menuItems/menuLists/InventoryMenuItems';
import { paymentMenuItems } from './menuItems/menuLists/payment';
import { UsersMenuItems } from './menuItems/menuLists/UsersMenuItems';
import { NavErp } from './menuItems/modules/NavErp';
import { NavGeneral } from './menuItems/modules/NavGeneral';
import { NavUser } from './nav-user';

export function AppSidebar() {
    const pageProps = usePage().props as any;
    const { modules, enabled_app_modules, company_settings, current_user_roles, auth } = pageProps;
    const applications = enabled_app_modules?.applications || { apps: {}, modules: {} };
    const tools = enabled_app_modules?.tools || { apps: {}, modules: {} };

    function getModuleByName(moduleName: string) {
        return modules?.find((m: any) => m.name === moduleName) || null;
    }
    const { state } = useSidebar();    const showErpModule = false;
    getModuleByName('Productivity');
    getModuleByName('Communication');
    return (
        <Sidebar collapsible="icon" variant="inset" className="border-r p-0">
            {/* Mobile Logo Header */}
            {state != 'expanded' ? (
                <div className="bg-sidebar-dark">
                    <div className="mx-auto my-4 ml-2 flex h-9 w-9">
                        <img src="/assets/logo/logo-v2.svg" alt="Logo" className="h-full w-full" />
                    </div>
                </div>
            ) : (
                <SidebarHeader className="block bg-sidebar-dark py-4">
                    <div>
                        <Link href={dashboard()} prefetch>
                            <AppLogo company_logo={company_settings?.company_logo} />
                        </Link>
                    </div>
                </SidebarHeader>
            )}

            <SidebarContent
                className="h-screen overflow-y-auto bg-sidebar-dark py-2 font-medium [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
                style={{
                    scrollbarWidth: 'none' /* Firefox */,
                    msOverflowStyle: 'none' /* Internet Explorer 10+ */,
                }}
            >
                <div className="flex items-center space-x-2 p-2">
                    <div className="flex h-9 w-9 items-center justify-center rounded-lg">
                        <img src="/assets/company-logo.svg" alt="logo" width={50} height={50} className="rounded-lg" />
                    </div>
                    {state === 'expanded' && (
                        <div className="mb-1">
                            <h2 className="font-semibold text-primary-foreground">Taskco Digital</h2>
                            <p className="text-xs text-gray-600">Version 1.0.0</p>
                        </div>
                    )}
                </div>
                {/* Main Navigation */}
                <NavGeneral items={platformMenuItems(current_user_roles || [])} groupLabel="Platform" />
                {(() => {
                    const appItems = appMenuItems(applications);
                    return appItems.length > 0 ? (
                        <NavGeneral items={appItems} groupLabel="Applications" />
                    ) : null;
                })()}

                {(() => {
                    const toolItems = toolsMenuItems(tools);
                    return toolItems.length > 0 ? (
                        <NavGeneral items={toolItems} groupLabel="Tools" />
                    ) : null;
                })()}
                <div className="my-auto">
                    <NavGeneral items={otherMenuItems(current_user_roles || [])} groupLabel="Administration" />
                </div>
                {/*<div className="my-auto">*/}
                {/*    <NavGeneral items={paymentMenuItems(current_user_roles || [])} groupLabel="Payment" />*/}
                {/*</div>*/}
            </SidebarContent>

            <SidebarFooter className="">
                {/* <div className="mb-2"></div> */}
                <NavUser />
            </SidebarFooter>
        </Sidebar>
    );
}