import { Link, usePage } from '@inertiajs/react';
import type { CSSProperties } from 'react';
import {
    BarChart3,
    CalendarClock,
    Globe,
    LayoutGrid,
    Mail,
    Map,
} from 'lucide-react';
import AppLogo from '@/components/app-logo';
import { NavFooter } from '@/components/nav-footer';
import { NavMain } from '@/components/nav-main';
import { NavUser } from '@/components/nav-user';
import {
    Sidebar,
    SidebarContent,
    SidebarFooter,
    SidebarHeader,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
} from '@/components/ui/sidebar';
import { dashboard, home } from '@/routes';
import { dashboard as adminDashboard } from '@/routes/admin';
import { index as adminBookings } from '@/routes/admin/bookings';
import { index as adminRoutes } from '@/routes/admin/routes';
import { index as adminStats } from '@/routes/admin/stats';
import { index as adminSubscribers } from '@/routes/admin/subscribers';
import type { NavItem } from '@/types';

const adminNavItems: NavItem[] = [
    { title: 'Overview', href: adminDashboard(), icon: LayoutGrid },
    { title: 'Bookings', href: adminBookings(), icon: CalendarClock },
    { title: 'Routes', href: adminRoutes(), icon: Map },
    { title: 'Statistics', href: adminStats(), icon: BarChart3 },
    { title: 'Subscribers', href: adminSubscribers(), icon: Mail },
];

const memberNavItems: NavItem[] = [
    { title: 'Dashboard', href: dashboard(), icon: LayoutGrid },
];

const footerNavItems: NavItem[] = [
    { title: 'View website', href: home(), icon: Globe },
];

export function AppSidebar() {
    const { auth } = usePage().props;
    const isAdmin = auth.user.role === 'admin';
    const mainNavItems = isAdmin ? adminNavItems : memberNavItems;
    const adminColors = {
        '--sidebar': '#0b1f33',
        '--sidebar-foreground': '#ffffff',
        '--sidebar-accent': 'rgba(214, 160, 74, 0.18)',
        '--sidebar-accent-foreground': '#f2c77f',
        '--sidebar-border': 'rgba(255, 255, 255, 0.12)',
        '--sidebar-primary': '#d6a04a',
        '--sidebar-primary-foreground': '#0b1f33',
        '--sidebar-ring': '#d6a04a',
    } as CSSProperties;

    return (
        <Sidebar
            collapsible="icon"
            variant="inset"
            className={isAdmin ? 'admin-sidebar border-r-0' : undefined}
            style={isAdmin ? adminColors : undefined}
        >
            <SidebarHeader>
                <SidebarMenu>
                    <SidebarMenuItem>
                        <SidebarMenuButton size="lg" asChild>
                            <Link href={dashboard()} prefetch>
                                <AppLogo />
                            </Link>
                        </SidebarMenuButton>
                    </SidebarMenuItem>
                </SidebarMenu>
                {isAdmin && (
                    <p className="px-3 pb-2 text-[10px] font-semibold tracking-[0.2em] text-white/55">
                        ADMIN CONSOLE
                    </p>
                )}
            </SidebarHeader>

            <SidebarContent>
                <NavMain items={mainNavItems} />
            </SidebarContent>

            <SidebarFooter>
                <NavFooter items={footerNavItems} className="mt-auto" />
                <NavUser />
            </SidebarFooter>
        </Sidebar>
    );
}