import Link from 'next/link';
import {
    ChevronUp,
    ChevronRight,
    Scale,
    User2,
    Settings,
} from "lucide-react";
import {
    Sidebar,
    SidebarContent,
    SidebarFooter,
    SidebarGroup,
    SidebarGroupContent,
    SidebarGroupLabel,
    SidebarHeader,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarMenuSub,
    SidebarMenuSubItem,
    SidebarMenuSubButton,
} from "@/components/ui/sidebar";
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
    Collapsible,
    CollapsibleTrigger,
    CollapsibleContent,
} from "@/components/ui/collapsible";
import {rheinItems, customerItems, kanzleiItems} from "@/lib/navigation/sidebar-items";
import {userMenuItems} from "@/lib/navigation/user-menu-items";


export function AppSidebar() {
    return (
        <Sidebar>
            <SidebarHeader/>
            <SidebarContent>
                {/* Rhein section */}
                <SidebarGroup>
                    <SidebarGroupLabel>Rhein Software Development</SidebarGroupLabel>
                    <SidebarGroupContent>
                        <SidebarMenu className="flex flex-col gap-y-1">
                            {rheinItems.map((item) => (
                                <SidebarMenuItem key={item.title}>
                                    <SidebarMenuButton
                                        asChild
                                        className="hover:bg-accent hover:text-accent-foreground"
                                    >
                                        <Link href={item.url}>
                                            <item.icon/>
                                            <span>{item.title}</span>
                                        </Link>
                                    </SidebarMenuButton>
                                </SidebarMenuItem>
                            ))}
                        </SidebarMenu>
                    </SidebarGroupContent>
                </SidebarGroup>

                <SidebarGroup>
                    <SidebarGroupLabel>Kunden</SidebarGroupLabel>
                    <SidebarGroupContent>
                        <SidebarMenu className="flex flex-col gap-y-1">
                            {customerItems.map((item) => (
                                <SidebarMenuItem key={item.title}>
                                    <SidebarMenuButton
                                        asChild
                                        className="hover:bg-accent hover:text-accent-foreground"
                                    >
                                        <Link href={item.url}>
                                            <item.icon/>
                                            <span>{item.title}</span>
                                        </Link>
                                    </SidebarMenuButton>
                                </SidebarMenuItem>
                            ))}
                        </SidebarMenu>
                    </SidebarGroupContent>
                </SidebarGroup>

                {/* Demos section */}
                <SidebarGroup>
                    <SidebarGroupLabel>Demos</SidebarGroupLabel>
                    <SidebarGroupContent>
                        <SidebarMenu className="flex flex-col gap-y-1">
                            <SidebarMenu className="flex flex-col gap-y-1">
                                <SidebarMenuItem key="demo-settings">
                                    <SidebarMenuButton
                                        asChild
                                        className="hover:bg-accent hover:text-accent-foreground"
                                    >
                                        <Link href="/demo/settings">
                                            <Settings/>
                                            <span>Demo Settings</span>
                                        </Link>
                                    </SidebarMenuButton>
                                </SidebarMenuItem>
                            </SidebarMenu>
                        </SidebarMenu>
                        <SidebarMenu className="flex flex-col gap-y-1">
                            <Collapsible className="group/collapsible">
                                <SidebarMenuItem className="flex items-center">
                                    <CollapsibleTrigger asChild>
                                        <SidebarMenuButton
                                            className="flex items-center w-full hover:bg-accent hover:text-accent-foreground">
                                            <Scale/>
                                            <span className="flex-1">Kanzlei</span>
                                            <ChevronRight
                                                className="transition-transform group-data-[state=open]/collapsible:rotate-90"
                                                size={16}
                                            />
                                        </SidebarMenuButton>
                                    </CollapsibleTrigger>
                                </SidebarMenuItem>

                                <CollapsibleContent>
                                    <SidebarMenuSub className="ml-4 border-l border-border pl-4 flex flex-col gap-y-1">
                                        {kanzleiItems.map((item) => (
                                            <SidebarMenuSubItem key={item.title}>
                                                <SidebarMenuSubButton asChild>
                                                    <Link href={item.url}>
                                                        {item.title}
                                                    </Link>
                                                </SidebarMenuSubButton>
                                            </SidebarMenuSubItem>
                                        ))}
                                    </SidebarMenuSub>
                                </CollapsibleContent>
                            </Collapsible>
                        </SidebarMenu>
                    </SidebarGroupContent>
                </SidebarGroup>
            </SidebarContent>

            {/* Footer with user dropdown */}
            <SidebarFooter>
                <SidebarMenu>
                    <SidebarMenuItem>
                        <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                                <SidebarMenuButton className="hover:bg-accent hover:text-accent-foreground">
                                    <User2/>
                                    Username
                                    <ChevronUp className="ml-auto"/>
                                </SidebarMenuButton>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent
                                side="top"
                                className="w-[--radix-popper-anchor-width]"
                            >
                                {userMenuItems.map((item) => (
                                    <DropdownMenuItem key={item.title} asChild>
                                        <Link href={item.url}>
                                            {item.icon && <item.icon className="mr-2 h-4 w-4"/>}
                                            <span>{item.title}</span>
                                        </Link>
                                    </DropdownMenuItem>
                                ))}
                            </DropdownMenuContent>
                        </DropdownMenu>
                    </SidebarMenuItem>
                </SidebarMenu>
            </SidebarFooter>
        </Sidebar>
    );
}