import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { TIME_RANGES } from "@/lib/dashboard/constants";
import { cn } from "@/lib/utils";

/**
 * BusinessRangeSelect — the single shared named-range preset selector for
 * dashboards. Renders the canonical TIME_RANGES presets (Today / Yesterday /
 * Last 7|30|90 Days / This|Last Week / This|Last Month).
 *
 * The selected `value` is a *named range* the server resolves to business-day
 * (1am ET) bounds — the client sends the name, never a browser-local
 * toISOString(). See inventory-server/docs/TIME.md.
 *
 * Replaces the duplicated <Select>-over-TIME_RANGES blocks in StatCards,
 * SalesChart, ProductGrid and KlaviyoCampaigns.
 */

export interface RangeOption {
  value: string;
  label: string;
}

export interface BusinessRangeSelectProps {
  value: string;
  onValueChange: (value: string) => void;
  /** Preset options. Defaults to the canonical TIME_RANGES list. */
  options?: RangeOption[];
  /** Merged onto the SelectTrigger (default sizing is w-[130px] h-9). */
  className?: string;
  placeholder?: string;
  id?: string;
}

export function BusinessRangeSelect({
  value,
  onValueChange,
  options = TIME_RANGES as RangeOption[],
  className,
  placeholder = "Select time range",
  id,
}: BusinessRangeSelectProps) {
  return (
    <Select value={value} onValueChange={onValueChange}>
      <SelectTrigger id={id} className={cn("w-[130px] h-9", className)}>
        <SelectValue placeholder={placeholder} />
      </SelectTrigger>
      <SelectContent>
        {options.map((range) => (
          <SelectItem key={range.value} value={range.value}>
            {range.label}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}

export default BusinessRangeSelect;
