import { Link, useRouterState } from "@tanstack/react-router";
import {
  LayoutDashboard, ShoppingCart, Package, Boxes, Truck, ShoppingBag,
  Users, UserCog, FileText, Wallet, CalendarClock, Receipt,
  TrendingUp, BarChart3, Barcode, ShieldCheck, Settings, Store, CalendarCheck, IdCard, HandCoins,
} from "lucide-react";
import {
  Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarGroupLabel,
  SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar,
} from "@/components/ui/sidebar";
import { useLang } from "@/lib/i18n";

const groups: { label: string; items: { key: string; url: string; icon: any }[] }[] = [
  {
    label: "g.main",
    items: [
      { key: "n.dashboard", url: "/dashboard", icon: LayoutDashboard },
      { key: "n.pos", url: "/pos", icon: ShoppingCart },
    ],
  },
  {
    label: "g.inventory",
    items: [
      { key: "n.products", url: "/products", icon: Package },
      { key: "n.stock", url: "/stock", icon: Boxes },
      { key: "n.barcode", url: "/barcode", icon: Barcode },
      { key: "n.warranty", url: "/warranty", icon: ShieldCheck },
    ],
  },
  {
    label: "g.transactions",
    items: [
      { key: "n.sales", url: "/sales", icon: ShoppingBag },
      { key: "n.purchases", url: "/purchases", icon: Truck },
      { key: "n.invoices", url: "/invoices", icon: FileText },
      { key: "n.dues", url: "/dues", icon: Wallet },
      { key: "n.installments", url: "/installments", icon: CalendarClock },
      { key: "n.expenses", url: "/expenses", icon: Receipt },
      { key: "n.loans", url: "/loans", icon: HandCoins },
      { key: "n.cash", url: "/cash", icon: Wallet },
    ],
  },
  {
    label: "g.party",
    items: [
      { key: "n.customers", url: "/customers", icon: Users },
      { key: "n.suppliers", url: "/suppliers", icon: UserCog },
      { key: "n.employees", url: "/employees", icon: IdCard },
      { key: "n.attendance", url: "/attendance", icon: CalendarCheck },
    ],
  },
  {
    label: "g.reports",
    items: [
      { key: "n.pl", url: "/reports/pl", icon: TrendingUp },
      { key: "n.reports", url: "/reports", icon: BarChart3 },
    ],
  },
  {
    label: "g.settings",
    items: [
      { key: "n.settings", url: "/settings", icon: Settings },
    ],
  },
];

export function AppSidebar() {
  const { state } = useSidebar();
  const collapsed = state === "collapsed";
  const pathname = useRouterState({ select: (s) => s.location.pathname });
  const { t } = useLang();

  return (
    <Sidebar collapsible="icon">
      <SidebarHeader className="border-b border-sidebar-border">
        <div className="flex items-center gap-2 px-2 py-2">
          <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground shrink-0">
            <Store className="h-5 w-5" />
          </div>
          {!collapsed && (
            <div className="leading-tight">
              <div className="font-semibold text-sm">Raju Travels</div>
              <div className="text-[10px] text-sidebar-foreground/70">& Digital Studio</div>
            </div>
          )}
        </div>
      </SidebarHeader>
      <SidebarContent>
        {groups.map((g) => (
          <SidebarGroup key={g.label}>
            {!collapsed && <SidebarGroupLabel>{t(g.label)}</SidebarGroupLabel>}
            <SidebarGroupContent>
              <SidebarMenu>
                {g.items.map((item) => {
                  const active = pathname === item.url || pathname.startsWith(item.url + "/");
                  return (
                    <SidebarMenuItem key={item.url}>
                      <SidebarMenuButton asChild isActive={active}>
                        <Link to={item.url}>
                          <item.icon className="h-4 w-4" />
                          <span>{t(item.key)}</span>
                        </Link>
                      </SidebarMenuButton>
                    </SidebarMenuItem>
                  );
                })}
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        ))}
      </SidebarContent>
    </Sidebar>
  );
}