import { Link, useRouterState } from "@tanstack/react-router";
import { BarChart3, Database, LayoutGrid, MemoryStick, Settings } from "lucide-react";
import { useTranslations } from "@/common/hooks/use-translations";
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupLabel,
  SidebarGroupContent,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton,
} from "@/common/components/ui/sidebar.tsx";
import { WorkspaceSwitcher } from "@/features/workspaces/components/workspace-switcher";

// The dashboard's live resources (Services + Databases + Key Value + Usage) plus
// account settings. Each is a client of bex-api's GraphQL (see docs/ADR006-bex-api.md).
const NAV_ITEMS = [
  { labelKey: "common.navServices", to: "/", icon: LayoutGrid },
  { labelKey: "common.navDatabases", to: "/databases", icon: Database },
  { labelKey: "common.navKeyValue", to: "/keyvalue", icon: MemoryStick },
  { labelKey: "common.navUsage", to: "/usage", icon: BarChart3 },
  { labelKey: "common.navSettings", to: "/settings", icon: Settings },
] as const;

export function DashboardSidebar() {
  const pathname = useRouterState({ select: (s) => s.location.pathname });
  const { t } = useTranslations();

  return (
    <Sidebar collapsible="offcanvas">
      <SidebarHeader>
        <WorkspaceSwitcher />
      </SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>{t("common.navDashboardGroup")}</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              {NAV_ITEMS.map((item) => (
                <SidebarMenuItem key={item.to}>
                  <SidebarMenuButton asChild isActive={pathname === item.to}>
                    <Link to={item.to}>
                      <item.icon />
                      <span>{t(item.labelKey)}</span>
                    </Link>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
    </Sidebar>
  );
}
