import { Link, useRouterState } from "@tanstack/react-router";
import { LayoutDashboard, LineChart, Settings, BarChart3, Zap, ShieldCheck, CandlestickChart, History, Activity, Briefcase } from "lucide-react";
import {
  Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarGroupLabel,
  SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarHeader, SidebarFooter, useSidebar,
} from "@/components/ui/sidebar";
import { useAuth } from "@/lib/auth";
import { UserSwitcher } from "@/components/user-switcher";

const baseItems = [
  { title: "Dashboard", url: "/dashboard", icon: LayoutDashboard },
  { title: "Positions", url: "/positions", icon: Briefcase },
  { title: "Chart", url: "/chart", icon: CandlestickChart },
  { title: "Screener", url: "/screener", icon: LineChart },
  { title: "Signals", url: "/signals", icon: History },
  { title: "Activity", url: "/activity", icon: Activity },
  { title: "Settings", url: "/settings", icon: Settings },
  { title: "Reports", url: "/reports", icon: BarChart3 },
];

export function AppSidebar() {
  const { state } = useSidebar();
  const collapsed = state === "collapsed";
  const path = useRouterState({ select: (r) => r.location.pathname });
  const { user } = useAuth();
  const items =
    user?.role === "admin" && !user.impersonating
      ? [...baseItems, { title: "Admin", url: "/admin", icon: ShieldCheck }]
      : baseItems;

  return (
    <Sidebar collapsible="icon" className="border-r border-sidebar-border">
      <SidebarHeader className="px-3 py-4">
        <div className="flex items-center gap-2">
          <div className="grid h-10 w-10 shrink-0 place-items-center rounded-xl gradient-primary text-primary-foreground shadow-lg ring-1 ring-primary/40">
            <Zap className="h-5 w-5" />
          </div>
          {!collapsed && (
            <div className="min-w-0">
              <div className="truncate font-display text-sm font-bold tracking-tight">
                <span className="gradient-text">DELTA TERMINAL</span>
              </div>
              <div className="truncate text-[10px] uppercase tracking-widest text-muted-foreground">Live · Realtime</div>
            </div>
          )}
        </div>
      </SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Trading</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              {items.map((item) => {
                const active = path === item.url;
                return (
                  <SidebarMenuItem key={item.title}>
                    <SidebarMenuButton
                      asChild
                      isActive={active}
                      tooltip={item.title}
                      className="relative data-[active=true]:bg-sidebar-accent/60"
                    >
                      <Link to={item.url} className="flex items-center gap-3">
                        {active && (
                          <span
                            aria-hidden
                            className="absolute left-0 top-1/2 h-5 w-0.5 -translate-y-1/2 rounded-r-full gradient-primary"
                          />
                        )}
                        <item.icon className={`h-4 w-4 shrink-0 ${active ? "text-primary" : ""}`} />
                        <span className="truncate">{item.title}</span>
                      </Link>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                );
              })}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
      <SidebarFooter className="border-t border-sidebar-border p-3 space-y-2">
        {user?.role === "admin" && !user.impersonating && (
          <UserSwitcher collapsed={collapsed} />
        )}
        {!collapsed && (
          <div className="flex items-center gap-2 text-xs text-muted-foreground">
            <span className="relative flex h-2 w-2">
              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-75" />
              <span className="relative inline-flex h-2 w-2 rounded-full bg-primary" />
            </span>
            WS connected · Delta Exchange
          </div>
        )}
      </SidebarFooter>
    </Sidebar>
  );
}