"use client";

import { Progress } from "@/components/ui/progress";
import { cn } from "@/lib/utils";
import { formatPct } from "@/components/sales-targets/sales-targets-helpers";

function clampPct(pct: number | null | undefined) {
  if (pct == null || Number.isNaN(pct)) return null;
  return Math.min(100, Math.max(0, pct));
}

type SalesTargetProgressBarProps = {
  pct: number | null | undefined;
  className?: string;
};

/** Compact linear progress for team and member rows (no Chart.js). */
export function SalesTargetProgressBar({
  pct,
  className,
}: SalesTargetProgressBarProps) {
  const value = clampPct(pct);
  const hasPct = value != null;
  const complete = hasPct && value >= 100;

  return (
    <div className={cn("flex min-w-0 items-center gap-2.5", className)}>
      <Progress
        value={hasPct ? value : 0}
        className={cn(
          "h-2 min-w-[72px] flex-1 bg-accent/20",
          complete
            ? "[&_[data-slot=progress-indicator]]:bg-emerald-500"
            : "[&_[data-slot=progress-indicator]]:bg-accent",
        )}
      />
      <span
        className={cn(
          "shrink-0 text-xs font-bold tabular-nums font-['Lexend']",
          complete && "text-emerald-600 dark:text-emerald-400",
        )}
      >
        {formatPct(pct)}
      </span>
    </div>
  );
}