import { Link } from '@inertiajs/react';

import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from '@/Components/ui/tooltip';
import type { SiteNavItem } from '@/config/site-navigation';
import { cn } from '@/lib/utils';

/**
 * NAV-001 V2 — single child link inside an expanded hub.
 *
 * Reuses the disabled-with-tooltip pattern from the legacy `SidebarSiteNav`.
 * Children inside a dimmed hub are not rendered (the explainer page handles
 * Day-0); children inside an enabled hub keep their per-item tooltips for
 * the long-tail "GSC connected but no analysis yet" case.
 */
export interface HubChildProps {
  item: SiteNavItem;
  href: string;
  isActive: boolean;
  onNavigate?: () => void;
}

export function HubChild({ item, href, isActive, onNavigate }: HubChildProps) {
  const Icon = item.icon;

  // If the user is currently ON this child's URL, it must render as active —
  // even if the underlying business rule says the destination is gated. The
  // user is demonstrably here; "you are here" beats "you can't be here." The
  // disabled-tooltip path remains for siblings inside the same hub.
  if (item.disabled && !isActive) {
    const content = (
      <span
        aria-disabled="true"
        // Fitts' law: same 44px touch height as enabled siblings so the row
        // doesn't reflow when items go between gated and ready. The span is
        // not focusable (a11y: disabled affordances should not trap keyboard
        // focus); the tooltip trigger forwards focus only on hover.
        className={cn(
          'flex items-center gap-3 rounded-md px-2 py-3 md:py-1.5 min-h-[44px] md:min-h-0 text-sm transition-colors',
          'pl-8 text-sidebar-foreground/35 cursor-not-allowed',
        )}
      >
        <Icon className="h-4 w-4 shrink-0" aria-hidden="true" />
        <span className="flex-1 truncate">{item.label}</span>
      </span>
    );
    return (
      <Tooltip>
        <TooltipTrigger asChild>{content}</TooltipTrigger>
        <TooltipContent side="right">
          {item.disabledTooltip ?? `${item.label} is not available`}
        </TooltipContent>
      </Tooltip>
    );
  }

  return (
    <Link
      href={href}
      onClick={onNavigate}
      aria-current={isActive ? 'page' : undefined}
      data-testid={`hub-child-${item.key}`}
      className={cn(
        // Fitts' law: 44px tap target on touch viewports; compact py-1.5 on desktop.
        'flex items-center gap-3 rounded-md px-2 py-3 md:py-1.5 min-h-[44px] md:min-h-0 text-sm transition-colors',
        'pl-8 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
        isActive
          ? 'bg-sidebar-accent text-sidebar-accent-foreground font-medium'
          : 'text-sidebar-foreground/80',
      )}
    >
      <Icon className="h-4 w-4 shrink-0" aria-hidden="true" />
      <span className="flex-1 truncate">{item.label}</span>
    </Link>
  );
}