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

/**
 * Linear meter for quota-style values (used vs limit). Color only turns to warning/danger when
 * the threshold is actually crossed; the label always carries the numbers.
 */
export function QuotaBar({
  label,
  used,
  limit,
  usedLabel,
  limitLabel,
  unlimited,
  hint,
  className,
}: {
  label: React.ReactNode;
  used: number;
  limit: number | null;
  usedLabel: string;
  limitLabel?: string;
  unlimited?: boolean;
  hint?: React.ReactNode;
  className?: string;
}) {
  const pct = unlimited || !limit || limit <= 0 ? 0 : Math.min(100, (used / limit) * 100);
  const tone = pct >= 100 ? "bg-danger" : pct >= 80 ? "bg-warning" : "bg-accent";
  return (
    <div className={cn("flex flex-col gap-1.5", className)}>
      <div className="flex items-baseline justify-between gap-3 text-[13px]">
        <span className="font-medium">{label}</span>
        <span className="font-mono tabular text-fg-muted">
          <span className="text-fg">{usedLabel}</span>
          {unlimited ? <span className="text-fg-subtle"> · unlimited</span> : limitLabel ? <span> / {limitLabel}</span> : null}
        </span>
      </div>
      <div className="h-1.5 w-full overflow-hidden rounded-full bg-bg-muted" role="progressbar" aria-valuemin={0} aria-valuemax={100} aria-valuenow={Math.round(pct)} aria-label={typeof label === "string" ? label : undefined}>
        <div className={cn("h-full rounded-full transition-[width]", tone)} style={{ width: `${unlimited ? 0 : pct}%` }} />
      </div>
      <div className="flex items-center justify-between text-[11.5px] text-fg-subtle">
        <span>{hint}</span>
        {!unlimited && limit ? <span className="font-mono tabular">{pct.toFixed(pct > 0 && pct < 1 ? 1 : 0)}%</span> : null}
      </div>
    </div>
  );
}