import { ChevronDown, Check } from "lucide-react";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { useNavigation, type PageId } from "@/contexts/navigation-context";
import { featureBreadcrumbs, routeHref } from "@/lib/feature-navigation";

export function DashboardBreadcrumbs() {
  const { currentPage, navigateTo } = useNavigation();
  const location = featureBreadcrumbs(currentPage);
  const follow = (event: React.MouseEvent, page: PageId) => {
    if (!event.ctrlKey && !event.metaKey && !event.shiftKey && !event.altKey) {
      event.preventDefault();
      navigateTo(page);
    }
  };
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem className="hidden md:block">
          <BreadcrumbLink
            href={routeHref("dashboard")}
            onClick={(event) => follow(event, "dashboard")}
          >
            Swift Commerce
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator className="hidden md:block" />
        {location.group && (
          <>
            <BreadcrumbItem>
              {location.siblings.length > 1 ? (
                <DropdownMenu>
                  <DropdownMenuTrigger
                    aria-label={`Browse ${location.group} features`}
                  className="inline-flex items-center gap-1 rounded-sm text-sm hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
                  >
                    {location.group}
                    <ChevronDown className="size-3.5" aria-hidden="true" />
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="start">
                    {location.siblings.map((feature) => (
                      <DropdownMenuItem key={feature.pageId} asChild>
                        <a
                          href={routeHref(feature.pageId)}
                          onClick={(event) => follow(event, feature.pageId)}
                          aria-current={
                            feature.pageId === currentPage ? "page" : undefined
                          }
                          className="flex items-center justify-between gap-3"
                        >
                          {feature.title}
                          {feature.pageId === currentPage && (
                            <Check className="size-4" aria-hidden="true" />
                          )}
                        </a>
                      </DropdownMenuItem>
                    ))}
                  </DropdownMenuContent>
                </DropdownMenu>
              ) : (
                <BreadcrumbLink
                  href={routeHref("dashboard")}
                  onClick={(event) => follow(event, "dashboard")}
                >
                  {location.group}
                </BreadcrumbLink>
              )}
            </BreadcrumbItem>
            <BreadcrumbSeparator />
          </>
        )}
        <BreadcrumbItem>
          <BreadcrumbPage>{location.title}</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}