Progress

"use client";

import * as React from "react";
import { motion } from "motion/react";
import { cn } from "@/lib/utils";

const spring = { type: "spring", stiffness: 120, damping: 22 } as const;

export interface ProgressProps {
  value: number;
  max?: number;
  /** Turns the bar to the destructive color at or above this fraction (0–1). */
  warnAt?: number;
  className?: string;
  "aria-label"?: string;
}

export function Progress({ value, max = 100, warnAt, className, ...aria }: ProgressProps) {
  const pct = Math.min(1, Math.max(0, value / max));
  const warn = warnAt !== undefined && pct >= warnAt;
  return (
    <div
      role="progressbar"
      aria-label={aria["aria-label"]}
      aria-valuemin={0}
      aria-valuemax={max}
      aria-valuenow={value}
      className={cn("h-1.5 w-full overflow-hidden rounded-full bg-muted", className)}
    >
      <motion.div
        className={cn("h-full rounded-full", warn ? "bg-destructive" : "bg-primary")}
        initial={{ width: 0 }}
        animate={{ width: `${pct * 100}%` }}
        transition={spring}
      />
    </div>
  );
}

export interface ProgressRingProps {
  value: number;
  max?: number;
  size?: number;
  thickness?: number;
  children?: React.ReactNode;
  className?: string;
  "aria-label"?: string;
}

export function ProgressRing({ value, max = 100, size = 56, thickness = 5, children, className, ...aria }: ProgressRingProps) {
  const pct = Math.min(1, Math.max(0, value / max));
  const r = (size - thickness) / 2;
  return (
    <div
      role="progressbar"
      aria-label={aria["aria-label"]}
      aria-valuemin={0}
      aria-valuemax={max}
      aria-valuenow={value}
      className={cn("relative inline-grid place-items-center", className)}
      style={{ width: size, height: size }}
    >
      <svg width={size} height={size} className="-rotate-90">
        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="var(--muted)" strokeWidth={thickness} />
        <motion.circle
          cx={size / 2}
          cy={size / 2}
          r={r}
          fill="none"
          stroke="var(--primary)"
          strokeWidth={thickness}
          strokeLinecap="round"
          initial={{ pathLength: 0 }}
          animate={{ pathLength: pct }}
          transition={spring}
        />
      </svg>
      {children && <span className="absolute inset-0 grid place-items-center text-xs font-medium tabular-nums">{children}</span>}
    </div>
  );
}

export interface MeterProps {
  /** Segments filled out of `segments`. */
  value: number;
  segments?: number;
  className?: string;
  "aria-label"?: string;
}

/** A segmented meter, e.g. for password strength or a plan's quota. */
export function Meter({ value, segments = 5, className, ...aria }: MeterProps) {
  return (
    <div role="meter" aria-label={aria["aria-label"]} aria-valuemin={0} aria-valuemax={segments} aria-valuenow={value} className={cn("flex gap-1", className)}>
      {Array.from({ length: segments }, (_, i) => (
        <span key={i} className="relative h-1.5 flex-1 overflow-hidden rounded-full bg-muted">
          <motion.span
            className="absolute inset-0 origin-left rounded-full bg-primary"
            initial={false}
            animate={{ scaleX: i < value ? 1 : 0 }}
            transition={{ ...spring, delay: i * 0.04 }}
          />
        </span>
      ))}
    </div>
  );
}