import {
    AppWindowIcon,
    ChevronUp,
    ChevronRight,
    Home,
    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";

const rheinItems = [
    {
        title: "Dashboard",
        url: "/",
        icon: Home,
    },
    {
        title: "Apps",
        url: "/apps",
        icon: AppWindowIcon,
    },
];

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"
                                    >
                                        <a href={item.url}>
                                            <item.icon/>
                                            <span>{item.title}</span>
                                        </a>
                                    </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"
                                    >

                                        <a href="/demo/settings">
                                            <Settings/>
                                            <span>Demo Settings</span>
                                        </a>
                                    </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">
                                        <SidebarMenuSubItem>
                                            <SidebarMenuSubButton href="/kanzlei/steuer">
                                                Steuer
                                            </SidebarMenuSubButton>
                                        </SidebarMenuSubItem>
                                        <SidebarMenuSubItem>
                                            <SidebarMenuSubButton href="/kanzlei/rechtsanwalt">
                                                Rechtsanwalt
                                            </SidebarMenuSubButton>
                                        </SidebarMenuSubItem>
                                        <SidebarMenuSubItem>
                                            <SidebarMenuSubButton href="/kanzlei/bilanzbuchhalter">
                                                Bilanzbuchhalter
                                            </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]"
                            >
                                <DropdownMenuItem>
                                    <span>Account</span>
                                </DropdownMenuItem>
                                <DropdownMenuItem>
                                    <span>Billing</span>
                                </DropdownMenuItem>
                                <DropdownMenuItem>
                                    <span>Sign out</span>
                                </DropdownMenuItem>
                            </DropdownMenuContent>
                        </DropdownMenu>
                    </SidebarMenuItem>
                </SidebarMenu>
            </SidebarFooter>
        </Sidebar>
    );
}