import {
    Sidebar,
    SidebarContent,
    SidebarFooter,
    SidebarGroup,
    SidebarGroupContent,
    SidebarHeader,
    SidebarMenu,
    SidebarRail,
} from "@/components/ui/sidebar";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Session } from "../../types/user";
import { adminMenu, clientMenu } from "../../data/sidebar-menu-content";
import { LogoutButton } from "./logout-button";
import { SidebarMenuLink } from "./sidebar-menu-link";
import UserBadge from "./user-badge";

export function AppSidebar({ session }: { session: Session }) {
    const menu = session.isAdmin ? adminMenu : clientMenu;
    const avatarUrl = `https://api.dicebear.com/10.x/waves/svg?seed=${encodeURIComponent(session.userId)}`;

    return (
        <Sidebar>
            <SidebarHeader className="gap-4 p-4">
                <div className="flex min-w-0 items-center gap-3">
                    <Avatar size="lg" className="shrink-0">
                        <AvatarImage src={avatarUrl} alt={session.name} />
                        <AvatarFallback>{session.name.slice(0, 2).toUpperCase()}</AvatarFallback>
                    </Avatar>
                    <div className="flex min-w-0 flex-col overflow-hidden">
                        <span className="truncate text-sm font-medium">{session.name}</span>
                        <span className="text-xs text-muted-foreground"><UserBadge session={session}/></span>
                    </div>
                </div>
            </SidebarHeader>
            <SidebarContent className="py-2">
                <SidebarGroup>
                    <SidebarGroupContent>
                        <SidebarMenu className="gap-1.5">
                            {menu.map((item) => (
                                <SidebarMenuLink
                                    key={item.url}
                                    title={item.title}
                                    url={item.url}
                                    icon={<item.icon className="size-4.5" />}
                                />
                            ))}
                        </SidebarMenu>
                    </SidebarGroupContent>
                </SidebarGroup>
            </SidebarContent>
            <SidebarFooter className="gap-3 p-4">
                <p className="truncate text-xs text-muted-foreground">{session.email}</p>
                <LogoutButton />
            </SidebarFooter>
            <SidebarRail />
        </Sidebar>
    )
}