"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  Dumbbell,
  LayoutDashboard,
  Menu,
  Receipt,
  ShoppingBag,
  ShoppingCart,
} from "lucide-react";

import { LogoutButton } from "@/components/auth/logout-button";
import { SupportActions } from "@/components/layout/support-actions";
import { buttonVariants } from "@/components/ui/button";
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
import { dashboardNav } from "@/lib/constants/site";
import { cn } from "@/lib/utils";

const iconMap = {
  "layout-dashboard": LayoutDashboard,
  dumbbell: Dumbbell,
  receipt: Receipt,
  "shopping-bag": ShoppingBag,
  cart: ShoppingCart,
} as const;

type Props = {
  userName: string;
  userEmail: string;
};

function NavLinks({ onNavigate }: { onNavigate?: () => void }) {
  const pathname = usePathname();

  return (
    <nav className="flex flex-col gap-0.5" aria-label="Dashboard">
      {dashboardNav.map((item) => {
        const Icon = iconMap[item.icon];
        const active =
          item.href === "/dashboard"
            ? pathname === "/dashboard"
            : pathname.startsWith(item.href);
        return (
          <Link key={item.href} href={item.href} onClick={onNavigate} className={cn(
            "flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-premium",
            active
              ? "bg-primary/12 text-foreground"
              : "text-muted-foreground hover:bg-muted/70 hover:text-foreground",
          )}>
            <Icon className="size-4 shrink-0 opacity-80" />
            {item.label}
          </Link>
        );
      })}
    </nav>
  );
}

function SidebarContent({
  userName,
  userEmail,
  onNavigate,
}: Props & { onNavigate?: () => void }) {
  return (
    <>
      <div className="border-border/50 border-b pb-5">
        <p className="text-muted-foreground text-[10px] font-semibold uppercase tracking-widest">
          Signed in as
        </p>
        <p className="font-display mt-1 truncate text-base font-semibold tracking-tight">
          {userName}
        </p>
        <p className="text-muted-foreground mt-0.5 truncate text-xs">{userEmail}</p>
      </div>

      <div className="mt-6 flex-1">
        <p className="text-muted-foreground mb-2 px-1 text-[10px] font-semibold uppercase tracking-widest">
          Workspace
        </p>
        <NavLinks onNavigate={onNavigate} />
      </div>

      <div className="border-border/50 mt-auto space-y-4 border-t pt-5">
        <p className="text-muted-foreground px-1 text-[10px] font-semibold uppercase tracking-widest">
          Member support
        </p>
        <SupportActions layout="stack" size="sm" />
        <LogoutButton />
      </div>
    </>
  );
}

export function DashboardSidebar({ userName, userEmail }: Props) {
  return (
    <>
      <div className="border-border/60 bg-background/95 flex h-11 shrink-0 items-center justify-between border-b px-4 lg:hidden">
        <span className="text-muted-foreground text-sm font-medium">Workspace</span>
        <Sheet>
          <SheetTrigger
            className={cn(buttonVariants({ variant: "outline", size: "icon-sm" }))}
            aria-label="Open workspace menu"
          >
            <Menu className="size-5" />
          </SheetTrigger>
          <SheetContent side="left" className="border-border/80 w-[min(100vw-1rem,300px)] p-0">
            <SheetHeader className="border-border/60 border-b px-5 py-4 text-left">
              <SheetTitle className="font-display text-base font-semibold tracking-tight">
                Workspace
              </SheetTitle>
            </SheetHeader>
            <div className="flex h-[calc(100dvh-5rem)] flex-col px-4 py-5">
              <SidebarContent
                userName={userName}
                userEmail={userEmail}
                onNavigate={() => {
                  document.querySelector<HTMLButtonElement>('[data-slot="sheet-close"]')?.click();
                }}
              />
            </div>
          </SheetContent>
        </Sheet>
      </div>

      <aside className="border-border/60 bg-sidebar text-sidebar-foreground hidden w-[260px] shrink-0 flex-col border-r lg:sticky lg:top-0 lg:flex lg:max-h-full lg:self-stretch lg:overflow-y-auto">
        <div className="flex flex-1 flex-col px-4 py-6">
          <SidebarContent userName={userName} userEmail={userEmail} />
        </div>
      </aside>
    </>
  );
}