Progress

import { cn, cva } from "@/lib/utils/classnames";

type ProgressSize = "xs" | "sm" | "md" | "lg";
type ProgressVariant = "linear" | "circular";

const linearTrackStyle = cva({
  base: ["relative w-full overflow-hidden rounded-full", "bg-foreground/10 text-accent"],
  variants: {
    size: {
      xs: "h-0.5",
      sm: "h-1",
      md: "h-1.5",
      lg: "h-2",
    } satisfies Record<ProgressSize, string>,
  },
});

const linearFillStyle = "h-full rounded-full bg-current transition-[width] duration-150 ease-out";

const circularSizes = {
  xs: { px: 12, stroke: 1.5 },
  sm: { px: 16, stroke: 2 },
  md: { px: 20, stroke: 2 },
  lg: { px: 24, stroke: 2.5 },
} satisfies Record<ProgressSize, { px: number; stroke: number }>;

interface ProgressProps extends Omit<React.ComponentPropsWithRef<"div">, "children"> {
  /** Current value. Clamped to `[0, max]`. */
  value: number;
  /** Maximum value. Defaults to 100. */
  max?: number;
  size?: ProgressSize;
  variant?: ProgressVariant;
}

const Progress = ({
  value,
  max = 100,
  size = "md",
  variant = "linear",
  className,
  ...props
}: ProgressProps) => {
  const clamped = Math.max(0, Math.min(max, value));
  const percent = (clamped / max) * 100;

  const a11yProps = {
    role: "progressbar" as const,
    "aria-valuemin": 0,
    "aria-valuemax": max,
    "aria-valuenow": clamped,
  };

  if (variant === "circular") {
    const { px, stroke } = circularSizes[size];
    const r = (px - stroke) / 2;
    const c = 2 * Math.PI * r;
    const offset = c * (1 - percent / 100);

    return (
      <div className={cn("inline-flex text-accent", className)} {...a11yProps} {...props}>
        <svg width={px} height={px} viewBox={`0 0 ${px} ${px}`} aria-hidden="true">
          <circle
            cx={px / 2}
            cy={px / 2}
            r={r}
            fill="none"
            strokeWidth={stroke}
            className="stroke-foreground/10"
          />
          <circle
            cx={px / 2}
            cy={px / 2}
            r={r}
            fill="none"
            strokeWidth={stroke}
            strokeDasharray={c}
            strokeDashoffset={offset}
            strokeLinecap="round"
            transform={`rotate(-90 ${px / 2} ${px / 2})`}
            className="stroke-current transition-[stroke-dashoffset] duration-150 ease-out"
          />
        </svg>
      </div>
    );
  }

  return (
    <div className={linearTrackStyle({ size, className })} {...a11yProps} {...props}>
      <div className={linearFillStyle} style={{ width: `${percent}%` }} aria-hidden="true" />
    </div>
  );
};

export type { ProgressProps };
export { Progress };