"use client";

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

interface StarRatingProps {
  value: number; // 0 to 5
  onChange?: (val: number) => void;
  size?: "xs" | "sm" | "md" | "lg";
  interactive?: boolean;
  showValue?: boolean;
  showLabel?: boolean;
  totalReviews?: number;
  className?: string;
}

const RATING_LABELS: Record<number, string> = {
  1: "Poor Experience",
  2: "Fair",
  3: "Good & Satisfactory",
  4: "Very Good & Professional",
  5: "Exceptional & Highly Recommended",
};

const SIZE_MAP = {
  xs: "size-3",
  sm: "size-3.5",
  md: "size-4.5",
  lg: "size-6",
};

export function StarRating({
  value,
  onChange,
  size = "md",
  interactive = false,
  showValue = false,
  showLabel = false,
  totalReviews,
  className,
}: StarRatingProps) {
  const [hoverValue, setHoverValue] = React.useState<number | null>(null);

  const displayValue = hoverValue !== null ? hoverValue : value;
  const starSizeClass = SIZE_MAP[size] || SIZE_MAP.md;

  return (
    <div className={cn("inline-flex items-center gap-1.5", className)}>
      <div
        className={cn("flex items-center gap-0.5", interactive && "cursor-pointer select-none")}
        onMouseLeave={() => interactive && setHoverValue(null)}
      >
        {[1, 2, 3, 4, 5].map((star) => {
          const isFilled = displayValue >= star;
          const isHalf = !isFilled && displayValue >= star - 0.5;

          return (
            <button
              key={star}
              type="button"
              disabled={!interactive}
              onClick={() => interactive && onChange?.(star)}
              onMouseEnter={() => interactive && setHoverValue(star)}
              className={cn(
                "relative transition-transform focus:outline-none",
                interactive && "hover:scale-115 active:scale-95 p-0.5"
              )}
              title={interactive ? `${star} Star - ${RATING_LABELS[star]}` : undefined}
            >
              {/* Background empty star */}
              <Star
                className={cn(
                  starSizeClass,
                  "text-muted/40 transition-colors",
                  isFilled && "text-amber-400 fill-amber-400 drop-shadow-xs",
                  isHalf && "text-amber-400 fill-amber-400/50"
                )}
              />
            </button>
          );
        })}
      </div>

      {showValue && (
        <span
          className={cn(
            "font-bold text-foreground font-mono",
            size === "xs" && "text-xs",
            size === "sm" && "text-xs",
            size === "md" && "text-sm",
            size === "lg" && "text-base"
          )}
        >
          {value.toFixed(1)}
        </span>
      )}

      {totalReviews !== undefined && (
        <span className="text-xs text-muted-foreground font-medium">
          ({totalReviews} {totalReviews === 1 ? "review" : "reviews"})
        </span>
      )}

      {showLabel && displayValue > 0 && (
        <span className="text-xs font-semibold text-emerald-700 dark:text-emerald-400 ml-1">
          {RATING_LABELS[Math.round(displayValue)]}
        </span>
      )}
    </div>
  );
}