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

import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/Components/ui/tooltip';
import { trackEvent } from '@/lib/analytics';
import { LIMITS_BAR_UPGRADE_CLICKED } from '@/lib/event-catalog';
import { cn } from '@/lib/utils';

interface LimitsBarProps {
  label: string;
  current: number;
  max: number;
  showUpgrade?: boolean;
}

export default function LimitsBar({ label, current, max, showUpgrade = false }: LimitsBarProps) {
  const percent = max > 0 ? Math.min((current / max) * 100, 100) : 0;

  const barColor =
    percent > 90
      ? 'bg-destructive'
      : percent > 70
        ? 'bg-warning'
        : 'bg-success';

  return (
    <div className="flex items-center gap-3 text-sm">
      <span
        className={cn(
          'whitespace-nowrap',
          percent > 90 ? 'text-destructive font-medium' : 'text-muted-foreground',
        )}
      >
        {label}: {current}/{max}
        {percent >= 90 && showUpgrade && (
          <TooltipProvider>
            <Tooltip>
              <TooltipTrigger asChild>
                <Link
                  href={route('billing.plans')}
                  className="text-xs text-primary underline ml-1"
                  data-testid="upgrade-link-at-limit"
                  onClick={() => trackEvent(LIMITS_BAR_UPGRADE_CLICKED, { limit_type: label, threshold_level: 'at_limit' })}
                >
                  Upgrade
                </Link>
              </TooltipTrigger>
              <TooltipContent>Upgrade to Pro — higher limits &amp; priority analysis</TooltipContent>
            </Tooltip>
          </TooltipProvider>
        )}
        {percent >= 70 && percent < 90 && showUpgrade && (
          <TooltipProvider>
            <Tooltip>
              <TooltipTrigger asChild>
                <Link
                  href={route('billing.plans')}
                  className="text-xs text-muted-foreground underline ml-1 hover:text-primary"
                  data-testid="upgrade-link-near-limit"
                  onClick={() => trackEvent(LIMITS_BAR_UPGRADE_CLICKED, { limit_type: label, threshold_level: 'near_limit' })}
                >
                  Upgrade
                </Link>
              </TooltipTrigger>
              <TooltipContent>Upgrade to Pro — higher limits &amp; priority analysis</TooltipContent>
            </Tooltip>
          </TooltipProvider>
        )}
      </span>
      <div
        className="h-2.5 w-32 rounded-full bg-secondary overflow-hidden"
        role="progressbar"
        aria-valuenow={current}
        aria-valuemin={0}
        aria-valuemax={max}
        aria-label={`${label} usage: ${current} of ${max}`}
      >
        <div
          className={cn('h-full rounded-full transition-all', barColor)}
          style={{ width: `${percent}%` }}
        />
      </div>
    </div>
  );
}