Meter

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

type Zone = "low" | "optimum" | "high";

type MeterProps = Omit<React.ComponentProps<"div">, "children" | "role"> & {
  /** What is measured. Used as the accessible name and the visible label. */
  label: string;
  /** The reading. */
  value: number;
  min?: number;
  max?: number;
  /** Values at or below this are low. */
  low?: number;
  /** Values at or above this are high. */
  high?: number;
  /** The best value. Decides whether low, middle or high is the good end. */
  optimum?: number;
  /** Formats the reading shown on the right. */
  format?: (value: number) => string;
};

/** Same rule as the HTML meter element: which of the three zones the optimum sits in. */
function zoneOf(value: number, low: number, high: number): Zone {
  return value < low ? "low" : value > high ? "high" : "optimum";
}

const STATUS = { good: "Good", fair: "Fair", poor: "Poor" } as const;

/**
 * A scalar reading against a range, with the real meter role. Unlike progress it has no
 * end state: the question is whether the value sits in the good zone. Hairline ticks mark
 * `low` and `high`; the status is written out, never carried by colour.
 */
export function Meter({
  label,
  value,
  min = 0,
  max = 100,
  low = min + (max - min) * 0.25,
  high = min + (max - min) * 0.75,
  optimum = max,
  format = (v) => String(v),
  className,
  ...props
}: MeterProps) {
  const span = max - min;
  const clamped = Math.min(Math.max(value, min), max);
  const pct = (v: number) => (span > 0 ? ((v - min) / span) * 100 : 0);
  const optimumZone = zoneOf(optimum, low, high);
  const valueZone = zoneOf(clamped, low, high);
  const status =
    valueZone === optimumZone ? "good" : valueZone === "optimum" || optimumZone === "optimum" ? "fair" : "poor";
  const reading = format(value);

  return (
    <div className={cn("flex w-full flex-col gap-1.5", className)} {...props}>
      <div className="flex items-baseline justify-between gap-3">
        <p className="m-0 truncate text-sm text-foreground">{label}</p>
        <p className="m-0 shrink-0 font-mono text-xs text-muted-foreground tabular-nums">
          {reading}
          <span aria-hidden="true"> · {STATUS[status]}</span>
        </p>
      </div>
      <div
        role="meter"
        aria-label={label}
        aria-valuemin={min}
        aria-valuemax={max}
        aria-valuenow={clamped}
        aria-valuetext={`${reading}, ${STATUS[status].toLowerCase()}`}
        data-status={status}
        className="relative h-1.5 w-full rounded-full bg-muted"
      >
        <div
          data-slot="meter-fill"
          className={cn(
            "h-full rounded-full transition-[width] duration-200 ease-out motion-reduce:transition-none",
            status === "good" ? "bg-foreground" : status === "fair" ? "bg-foreground/60" : "bg-foreground/35",
          )}
          style={{ width: `${pct(clamped)}%` }}
        />
        {[low, high].map((tick) => (
          <span
            key={tick}
            aria-hidden="true"
            data-slot="meter-tick"
            className="absolute -top-0.5 -bottom-0.5 w-px bg-border"
            style={{ left: `${pct(tick)}%` }}
          />
        ))}
      </div>
    </div>
  );
}