import { Link, useRouterState } from "@tanstack/react-router";
import { motion } from "framer-motion";
import { NAV_PRIMARY, NAV_SECONDARY, APP_NAME } from "@/constants";
import { useUIStore } from "@/store";
import { cn } from "@/lib/utils";
import { Sparkles, ChevronLeft } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";

export function Sidebar() {
  const collapsed = useUIStore((s) => s.sidebarCollapsed);
  const toggle = useUIStore((s) => s.toggleSidebar);
  const pathname = useRouterState({ select: (r) => r.location.pathname });

  return (
    <TooltipProvider delayDuration={200}>
      <aside
        className={cn(
          "sticky top-0 hidden h-screen flex-col border-r border-border bg-sidebar text-sidebar-foreground transition-all duration-300 md:flex",
          collapsed ? "w-[72px]" : "w-[240px]",
        )}
      >
        <div className="flex h-16 items-center justify-between px-4">
          <Link to="/dashboard" className="flex items-center gap-2 overflow-hidden">
            <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg gradient-brand shadow-lg shadow-primary/40">
              <Sparkles className="h-4 w-4 text-primary-foreground" />
            </div>
            {!collapsed && (
              <span className="truncate text-sm font-semibold tracking-tight">{APP_NAME}</span>
            )}
          </Link>
          <Button
            size="icon"
            variant="ghost"
            className="h-7 w-7 text-muted-foreground hover:text-foreground"
            onClick={toggle}
            aria-label="Toggle sidebar"
          >
            <ChevronLeft
              className={cn("h-4 w-4 transition-transform", collapsed && "rotate-180")}
            />
          </Button>
        </div>

        <nav className="flex-1 overflow-y-auto px-3 py-2 scrollbar-thin">
          {!collapsed && (
            <p className="px-2 pb-2 pt-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
              Workspace
            </p>
          )}
          <NavList items={NAV_PRIMARY} pathname={pathname} collapsed={collapsed} />

          {!collapsed && (
            <p className="px-2 pb-2 pt-5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
              Account
            </p>
          )}
          <div className={cn(collapsed && "mt-4")}>
            <NavList items={NAV_SECONDARY} pathname={pathname} collapsed={collapsed} />
          </div>
        </nav>

        <div className="border-t border-border p-3">
          {collapsed ? (
            <div className="flex h-10 items-center justify-center rounded-md gradient-brand text-xs font-semibold text-primary-foreground">
              Pro
            </div>
          ) : (
            <div className="rounded-xl border border-border bg-card p-3">
              <p className="text-xs font-medium">Upgrade to Team</p>
              <p className="mt-1 text-[11px] text-muted-foreground">
                Collaborate with classmates and share decks.
              </p>
              <Link
                to="/pricing"
                className="mt-3 inline-flex h-7 items-center rounded-md gradient-brand px-2.5 text-[11px] font-medium text-primary-foreground hover:opacity-90"
              >
                See plans
              </Link>
            </div>
          )}
        </div>
      </aside>
    </TooltipProvider>
  );
}

function NavList({
  items,
  pathname,
  collapsed,
}: {
  items: ReadonlyArray<{ label: string; to: string; icon: React.ComponentType<{ className?: string }> }>;
  pathname: string;
  collapsed: boolean;
}) {
  return (
    <ul className="space-y-0.5">
      {items.map((item) => {
        const active =
          pathname === item.to ||
          (item.to !== "/dashboard" && pathname.startsWith(item.to + "/"));
        const link = (
          <Link
            to={item.to}
            className={cn(
              "group relative flex h-9 items-center gap-3 rounded-md px-2.5 text-sm font-medium transition-colors",
              active
                ? "bg-sidebar-accent text-sidebar-accent-foreground"
                : "text-muted-foreground hover:bg-sidebar-accent/60 hover:text-foreground",
            )}
          >
            {active && (
              <motion.span
                layoutId="nav-active"
                className="absolute inset-y-1.5 left-0 w-0.5 rounded-r-full bg-primary"
                transition={{ type: "spring", stiffness: 400, damping: 32 }}
              />
            )}
            <item.icon className="h-4 w-4 shrink-0" />
            {!collapsed && <span className="truncate">{item.label}</span>}
          </Link>
        );

        return (
          <li key={item.to}>
            {collapsed ? (
              <Tooltip>
                <TooltipTrigger asChild>{link}</TooltipTrigger>
                <TooltipContent side="right">{item.label}</TooltipContent>
              </Tooltip>
            ) : (
              link
            )}
          </li>
        );
      })}
    </ul>
  );
}