import { LayoutDashboard, Activity, CalendarRange, ListFilter, Settings2, UserCircle } from "lucide-react";
import { Link, useLocation } from "wouter";
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar";
import { Logo } from "@/components/logo";

const NAV = [
  { title: "Dashboard", url: "/", icon: LayoutDashboard, testid: "nav-dashboard" },
  { title: "Gamma Levels", url: "/gamma", icon: Activity, testid: "nav-gamma" },
  { title: "Expiry Matrix", url: "/expiry", icon: CalendarRange, testid: "nav-expiry" },
  { title: "Screener", url: "/screener", icon: ListFilter, testid: "nav-screener" },
  { title: "Settings & API", url: "/settings", icon: Settings2, testid: "nav-settings" },
  { title: "Account", url: "/account", icon: UserCircle, testid: "nav-account" },
];

export function AppSidebar() {
  const [location] = useLocation();
  return (
    <Sidebar data-testid="sidebar-main">
      <SidebarHeader className="px-3 pt-4 pb-3">
        <Link
          href="/"
          className="flex items-center gap-2 px-2"
          data-testid="link-home"
        >
          <span className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-primary/15 text-primary">
            <Logo className="h-5 w-5" />
          </span>
          <span className="flex flex-col leading-tight">
            <span className="text-sm font-semibold tracking-tight">GammaDesk</span>
            <span className="text-[11px] text-muted-foreground tracking-wide uppercase">
              Options Analytics
            </span>
          </span>
        </Link>
      </SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Workspace</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              {NAV.map((item) => {
                const active =
                  item.url === "/"
                    ? location === "/" || location === ""
                    : location.startsWith(item.url);
                return (
                  <SidebarMenuItem key={item.title}>
                    <SidebarMenuButton asChild isActive={active} data-testid={item.testid}>
                      <Link href={item.url}>
                        <item.icon className="h-4 w-4" />
                        <span>{item.title}</span>
                      </Link>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                );
              })}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
      <SidebarFooter className="px-3 pb-4">
        <p
          className="text-[11px] leading-snug text-muted-foreground"
          data-testid="text-sidebar-disclaimer"
        >
          Analytics &amp; education only. Not financial advice. Data is simulated
          ORATS-style mock data until an API key is provided.
        </p>
      </SidebarFooter>
    </Sidebar>
  );
}