import { Link, type LinkProps } from "@tanstack/react-router";
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
import { cn } from "@/lib/utils";

/**
 * NavLink — item de nav du sidebar / tab bar.
 *
 * État actif : bord gauche rubis (desktop) ou label rubis (tab bar).
 * Pas de bg plein quand inactif, le sidebar reste calme.
 *
 * En mode `collapsed` (sidebar repliée), seul l'icône est rendue — le
 * label devient un tooltip qui apparaît au hover. Garde l'identité de
 * navigation tout en récupérant ~170px de surface utile.
 */
type Variant = "sidebar" | "tab-bar";

type NavLinkProps = Omit<LinkProps, "children"> & {
  icon: React.ReactNode;
  label: string;
  variant?: Variant;
  /** Sidebar uniquement : repliée → icône seule + tooltip. */
  collapsed?: boolean;
  className?: string;
};

export function NavLink({
  icon,
  label,
  variant = "sidebar",
  collapsed = false,
  className,
  ...linkProps
}: NavLinkProps) {
  const isSidebar = variant === "sidebar";
  const isCollapsed = isSidebar && collapsed;

  const link = (
    <Link
      {...linkProps}
      activeOptions={{ exact: linkProps.to === "/" }}
      aria-label={isCollapsed ? label : undefined}
      className={cn(
        "group relative flex items-center transition-colors duration-150",
        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rubis-glow",
        isSidebar
          ? cn(
              "rounded-default text-[14px] font-medium text-ink-2 hover:text-ink hover:bg-cream",
              isCollapsed
                ? "justify-center py-2.5"
                : "gap-3 px-3 py-2.5",
            )
          : "flex-1 flex-col gap-0.5 py-2 text-[10.5px] font-semibold text-ink-3 hover:text-ink",
        className,
      )}
      activeProps={{
        className: isSidebar
          ? "text-rubis bg-cream shadow-soft"
          : "text-rubis",
      }}
    >
      {/* Marqueur rubis vertical (sidebar actif) — préservé en mode replié. */}
      {isSidebar && (
        <span
          aria-hidden="true"
          className={cn(
            "absolute left-0 top-1/2 h-5 w-[3px] -translate-y-1/2 rounded-r-full bg-rubis",
            "opacity-0 transition-opacity duration-150",
            "group-aria-[current=page]:opacity-100",
          )}
        />
      )}
      <span
        className={cn(
          "shrink-0",
          isSidebar
            ? "text-ink-3 group-aria-[current=page]:text-rubis"
            : "text-current",
        )}
      >
        {icon}
      </span>
      {!isCollapsed && (
        <span className={cn(isSidebar ? "" : "leading-none")}>{label}</span>
      )}
    </Link>
  );

  // En mode replié, on wrappe dans un Tooltip Radix qui montre le label
  // côté droit au hover. En déployé : pas de tooltip (label déjà visible).
  if (!isCollapsed) return link;

  return (
    <TooltipPrimitive.Provider delayDuration={200}>
      <TooltipPrimitive.Root>
        <TooltipPrimitive.Trigger asChild>{link}</TooltipPrimitive.Trigger>
        <TooltipPrimitive.Portal>
          <TooltipPrimitive.Content
            side="right"
            sideOffset={8}
            className={cn(
              "z-50 rounded-default bg-ink px-2.5 py-1.5 text-[12px] font-medium text-white shadow-soft",
              "data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95",
            )}
          >
            {label}
            <TooltipPrimitive.Arrow className="fill-ink" width={8} height={4} />
          </TooltipPrimitive.Content>
        </TooltipPrimitive.Portal>
      </TooltipPrimitive.Root>
    </TooltipPrimitive.Provider>
  );
}
