import { useId } from "react";

/**
 * 270° arc gauge for the product detail page's Opportunity Score — visually
 * matches the approved reference's speedometer-style gauge (a full circle
 * would look identical to the existing ScoreRing used elsewhere on this
 * page for the 6 component sub-scores, so this is deliberately a distinct
 * shape reserved for the one headline score). Pure presentation: the caller
 * passes the real, already-computed opportunityScore.
 */
export function OpportunityGauge({
  value,
  size = 124,
  strokeWidth = 10,
  label,
}: {
  value: number;
  size?: number;
  strokeWidth?: number;
  label?: string;
}) {
  const gradientId = useId();
  const radius = (size - strokeWidth) / 2;
  const circumference = 2 * Math.PI * radius;
  const arcFraction = 270 / 360;
  const arcLength = circumference * arcFraction;
  const valueLength = arcLength * (Math.max(0, Math.min(100, value)) / 100);

  return (
    <div
      className="relative inline-flex items-center justify-center"
      style={{ width: size, height: size }}
      role="img"
      aria-label={`${label ?? "Opportunity Score"}: ${value} out of 100`}
    >
      <svg width={size} height={size} style={{ transform: "rotate(135deg)" }}>
        <defs>
          <linearGradient id={gradientId} x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stopColor="var(--success)" stopOpacity="0.55" />
            <stop offset="100%" stopColor="var(--success)" />
          </linearGradient>
        </defs>
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          fill="none"
          stroke="var(--border)"
          strokeWidth={strokeWidth}
          strokeLinecap="round"
          strokeDasharray={`${arcLength} ${circumference}`}
        />
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          fill="none"
          stroke={`url(#${gradientId})`}
          strokeWidth={strokeWidth}
          strokeLinecap="round"
          strokeDasharray={`${valueLength} ${circumference}`}
        />
      </svg>
      <div className="absolute inset-0 flex items-center justify-center">
        <span className="text-[2.3rem] leading-none font-extrabold tracking-tight text-foreground tabular-nums">{value}</span>
      </div>
    </div>
  );
}