import { Link, usePage } from "@inertiajs/react";
import { Ticket, ChevronRight, Sun, Sunrise, Moon, CalendarDays } from "lucide-react";
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupLabel,
  SidebarGroupContent,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton,
  SidebarHeader,
  useSidebar,
} from "@/Components/ui/sidebar";
import { drawGroups, slugify, sortByDrawOrder } from "@/lib/loto-data";

const groupIcons: Record<string, React.ReactNode> = {
  Matin: <Sunrise className="h-4 w-4" />,
  Midi: <Sun className="h-4 w-4" />,
  Soir: <Moon className="h-4 w-4" />,
  "Week-end": <CalendarDays className="h-4 w-4" />,
};

export function AppSidebar() {
  const currentPath = usePage().url;
  const { state } = useSidebar();
  const collapsed = state === "collapsed";
  const { drawNames } = usePage().props as any;
  const names = drawNames || [];

  return (
    <Sidebar collapsible="icon" className="border-r border-border">
      <SidebarHeader className="gap-2 p-3">
        <div className="flex flex-col items-center justify-center gap-2 px-1 py-2 text-center">
          <div className="flex h-12 w-28 items-center justify-center bg-white p-1 rounded-xl shadow-sm border border-border/40">
            <img src="/images/logo.jpg" alt="MÔ Loto" className="h-full w-auto object-contain rounded-xl" />
          </div>
        </div>
      </SidebarHeader>

      <SidebarContent className="gap-1 px-2 py-2">
        <SidebarGroup>
          <SidebarGroupLabel className="text-[10px] uppercase tracking-wider text-sidebar-foreground/50">
            <span className="mr-1.5 text-sidebar-foreground/70">
              <Ticket className="h-4 w-4" />
            </span>
            {!collapsed && "Tous les tirages"}
          </SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              {names.map((name: string) => {
                const drawSlug = slugify(name);
                const isActive = currentPath === `/loto/${drawSlug}`;

                  return (
                    <SidebarMenuItem key={name}>
                      <SidebarMenuButton
                        asChild
                        isActive={isActive}
                        tooltip={collapsed ? name : undefined}
                        className="text-sidebar-foreground/90"
                      >
                        <Link
                          href={`/loto/${drawSlug}`}
                          className="flex items-center gap-2"
                        >
                          <ChevronRight className="h-3.5 w-3.5 shrink-0 text-primary/80" />
                          <span className="truncate">{name}</span>
                        </Link>
                      </SidebarMenuButton>
                    </SidebarMenuItem>
                  );
                })}
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
      </SidebarContent>
    </Sidebar>
  );
}