import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, useSidebar } from '@admin/components/ui/sidebar';
import { Link, usePage } from '@inertiajs/react';
import { Activity, Building, Building2, Database, FileText, Laptop,CreditCard, LayoutDashboard, LogOut, ShieldCheck,Palette, Settings, Users, Package } from 'lucide-react';
import { NavGeneral } from './menuItems/modules/NavGeneral';

interface UserRole {
    id: number;
    name: string;
    slug: string;
}

// Helper function to check if user has dev role
function hasDevRole(userRoles: UserRole[]): boolean {
    return userRoles.some((role: UserRole) => role.slug === 'dev');
}

const getAdminMenuItems = (userRoles: UserRole[] = []) => {
    const items = [
        {
            title: 'Dashboard',
            url: route('admin.dashboard.main'),
            icon: LayoutDashboard,
            isActive: true,
        },
        {
            title: 'Packages',
            url: route('admin.packages.index'),
            icon: Package,
            isActive: true,
            items: [
                {
                    title: 'Packages',
                    url: route('admin.packages.index'),
                },
                {
                    title: 'Add On Packages',
                    url: route('admin.packages-addon.index'),
                },
            ],
        },
        {
            title: 'Tenants',
            url: route('admin.tenants.index'),
            icon: Building,
            isActive: true,
            items: [
                {
                    title: 'Tenants',
                    url: route('admin.tenants.index'),
                },
            ],
        },
        {
            title: 'Billing',
            url: route('admin.subscriptions.index'),
            icon: CreditCard,
            isActive: true,
            items: [
                {
                    title: 'Subscriptions',
                    url: route('admin.subscriptions.index'),
                },
                {
                    title: 'Transactions',
                    url: route('admin.transactions.index'),
                },
            ],
        },
        {
            title: 'User',
            url: route('admin.admins.index'),
            icon: Users,
            isActive: true,
        },
        {
            title: 'Roles',
            url: route('admin.roles.index'),
            icon: ShieldCheck,
            isActive: true,
        },
        {
            title: 'Themes',
            url: route('admin.themes.index'),
            icon: Palette,
            isActive: true,
            items: [
                { title: 'Theme Management', url: route('admin.themes.index') },
                { title: 'Theme Settings', url: route('admin.theme-settings.index') },
            ],
        },

    ];

    // Only add Developer menu if user has dev role
    if (hasDevRole(userRoles)) {
        items.push({
            title: 'Developer',
            url: route('admin.developer.modules.edit'),
            icon: Laptop,
            isActive: true,
            items: [
                // { title: 'Module Settings', url: route('admin.developer.modules.edit') },
                { title: 'Create Modules', url: route('admin.developer.modules.create') },
                { title: 'Crud Generator', url: route('admin.developer.crud.generator') },
                { title: 'Documentation', url: route('admin.developer.docs.index') },
            ],
        });
    }

    return items;
};

const systemMenuItems = [
    {
        title: 'Product Settings',
        url: route('admin.settings.product'),
        icon: Settings,
        isActive: true,
        items: [
            // { title: 'Product Profiles', url: route('admin.settings.product-profile') },
            // { title: 'Theme Settings', url: route('admin.theme-settings.index') },
            { title: 'Central Dashboard', url: route('admin.settings.central-dashboard') },
            { title: 'Product Features', url: route('admin.settings.product') },
            { title: 'Appearance Settings', url: '/admin/settings/general/personalizer' },
        ],
    },
    {
        title: 'Addon Setting',
        url: route('admin.settings.addon'),
        icon: Settings,
        isActive: true,
        items: [
            { title: 'Addon Features', url: route('admin.settings.addon') },
        ],
    },
    {
        title: 'System Settings',
        url: '/admin/settings/general',
        icon: Settings,
        isActive: true,
    },
    // {
    //     title: 'System Logs',
    //     url: '/admin/system/logs',
    //     icon: FileText,
    //     isActive: true,
    // },
    // {
    //     title: 'Job Queue',
    //     url: '/admin/system/jobs',
    //     icon: Activity,
    //     isActive: true,
    // },
    // {
    //     title: 'Database',
    //     url: '/admin/system/database',
    //     icon: Database,
    //     isActive: true,
    // },
];

export function AdminSidebar() {
    const { state } = useSidebar();
    const { current_user_roles, personalizer } = usePage().props as any;

    const branding = personalizer?.branding ?? {};
    const logoUrl: string | null = branding.default_logo ?? null;
    const iconUrl: string | null = branding.default_icon ?? null;

    // Get admin menu items based on user roles
    const adminMenuItems = getAdminMenuItems((current_user_roles as UserRole[]) || []);

    return (
        <Sidebar collapsible="icon" variant="inset" className="border-r p-0">
            {/* Logo Header */}
            {state !== 'expanded' ? (
                <div className="bg-sidebar-dark">
                    <div className="mx-auto my-4 ml-2 flex h-9 w-9 items-center justify-center">
                        {iconUrl ? (
                            <img src={iconUrl} alt="Icon" className="h-full w-full rounded object-contain" />
                        ) : logoUrl ? (
                            <img src={logoUrl} alt="Logo" className="h-full w-full rounded object-contain" />
                        ) : (
                            <Building2 className="h-6 w-6 text-blue-400" />
                        )}
                    </div>
                </div>
            ) : (
                <SidebarHeader className="block bg-sidebar-dark py-4">
                    <div>
                        <Link href="/admin" prefetch>
                            <div className="flex items-center gap-2 px-4">
                                {logoUrl ? (
                                    <img src={logoUrl} alt="Logo" className="h-8 max-w-[140px] object-contain" />
                                ) : (
                                    <>
                                        <Building2 className="h-6 w-6 text-blue-400" />
                                        <div>
                                            <h2 className="font-bold text-white">Super Admin</h2>
                                            <p className="text-xs text-gray-400">Control Panel</p>
                                        </div>
                                    </>
                                )}
                            </div>
                        </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',
                    msOverflowStyle: 'none',
                }}
            >
                <div className="flex items-center space-x-2 p-2">
                    <div className="flex h-9 w-9 items-center justify-center rounded-lg">
                        {iconUrl ? (
                            <img src={iconUrl} alt="icon" width={50} height={50} className="rounded-lg object-contain" />
                        ) : (
                            <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">Admin Panel</h2>
                            <p className="text-xs text-gray-600">Manage Tenants</p>
                        </div>
                    )}
                </div>

                {/* Main Navigation */}
                <NavGeneral items={adminMenuItems} groupLabel="Management" />

                {/* System Navigation */}
                <NavGeneral items={systemMenuItems} groupLabel="System" />
            </SidebarContent>

            <SidebarFooter className="">
                <AdminUser />
            </SidebarFooter>
        </Sidebar>
    );
}

function AdminUser() {
    const { state } = useSidebar();

    const handleLogout = () => {
        // Get CSRF token
        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');

        // Create form and submit
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '/admin/logout';

        const csrfInput = document.createElement('input');
        csrfInput.type = 'hidden';
        csrfInput.name = '_token';
        csrfInput.value = csrfToken || '';

        form.appendChild(csrfInput);
        document.body.appendChild(form);
        form.submit();
    };

    return (
        <div className="border-t border-gray-700 bg-sidebar-dark p-2">
            {state === 'expanded' ? (
                <div className="flex items-center justify-between rounded-lg p-2 hover:bg-gray-800">
                    <div className="flex items-center gap-2">
                        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-600">
                            <Users className="h-4 w-4 text-white" />
                        </div>
                        <div className="flex flex-col">
                            <span className="text-sm font-medium text-white">Admin User</span>
                            <span className="text-xs text-gray-400">Super Admin</span>
                        </div>
                    </div>
                    <button onClick={handleLogout} className="rounded p-1 hover:bg-gray-700" title="Logout">
                        <LogOut className="h-4 w-4 text-gray-400" />
                    </button>
                </div>
            ) : (
                <button onClick={handleLogout} className="flex w-full items-center justify-center rounded-lg p-2 hover:bg-gray-800" title="Logout">
                    <LogOut className="h-4 w-4 text-gray-400" />
                </button>
            )}
        </div>
    );
}