"use client";

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

interface ProgressProps extends React.ComponentProps<"div"> {
  value?: number;
  max?: number;
  variant?: "default" | "samara" | "refero" | "signal" | "evergreen";
  showLabel?: boolean;
  stageLabel?: string;
}

export function Progress({
  value = 0,
  max = 100,
  variant = "default",
  showLabel = false,
  stageLabel,
  className,
  ...props
}: ProgressProps) {
  const percentage = Math.min(100, Math.max(0, Math.round(((value || 0) / max) * 100)));

  const variantStyles = {
    default: "bg-primary",
    samara: "bg-[#0096f7]",
    refero: "bg-black dark:bg-white",
    signal: "bg-[#ff4000]",
    evergreen: "bg-[#375033]",
  };

  return (
    <div className={cn("w-full space-y-1.5", className)} {...props}>
      {(showLabel || stageLabel) && (
        <div className="flex items-center justify-between text-xs font-medium">
          {stageLabel ? (
            <span className="text-foreground truncate max-w-[80%]">{stageLabel}</span>
          ) : (
            <span className="text-muted-foreground">Uploading...</span>
          )}
          {showLabel && (
            <span className="font-semibold text-foreground font-tabular">{percentage}%</span>
          )}
        </div>
      )}

      <div className="relative h-2 w-full overflow-hidden rounded-full bg-[#f4f5fb] dark:bg-[#1a1d28] border border-[#e2e4ea] dark:border-[#232836]">
        <div
          role="progressbar"
          aria-valuenow={percentage}
          aria-valuemin={0}
          aria-valuemax={100}
          style={{ width: `${percentage}%` }}
          className={cn(
            "h-full rounded-full transition-all duration-300 ease-out",
            variantStyles[variant]
          )}
        />
      </div>
    </div>
  );
}