import React from "react";
import { cn } from "@/lib/utils";
import { formatCurrency, formatCurrencyAbbrev } from "@/lib/format-currency";
import { Slider } from "./slider";

/**
 * A labeled slider molecule for selecting a dollar amount within a range.
 *
 * Layout (top-to-bottom):
 * - Label (left) + current value (right)
 * - Slider track + thumb
 * - Min label (left) + max label (right) — abbreviated currency
 *
 * Used in the Borrowing Capacity page for inputs like interest rate, purchase
 * price range, or LVR settings where a slider gives better UX than a bare text
 * input.
 */

export interface MoneyInputWithSliderProps {
  /** Label shown above the slider (e.g. "Purchase Price") */
  label: string;
  /** Current value in whole dollars */
  value: number;
  /** Minimum selectable value in whole dollars */
  min: number;
  /** Maximum selectable value in whole dollars */
  max: number;
  /** Step size in dollars (default: 1000) */
  step?: number;
  /** Called on every slider change with the new dollar value */
  onChange?: (value: number) => void;
  disabled?: boolean;
  className?: string;
}

export function MoneyInputWithSlider({
  label,
  value,
  min,
  max,
  step = 1000,
  onChange,
  disabled = false,
  className,
}: MoneyInputWithSliderProps) {
  return (
    <div className={cn("flex flex-col gap-2", className)}>
      {/* Label row */}
      <div className="flex items-center justify-between gap-2">
        <span className="text-body-small text-muted-foreground">{label}</span>
        <span className="text-label-medium tabular-nums text-foreground">
          {formatCurrency(value)}
        </span>
      </div>

      {/* Slider */}
      <Slider
        value={value}
        min={min}
        max={max}
        step={step}
        disabled={disabled}
        onValueChange={onChange}
      />

      {/* Min / max labels */}
      <div className="flex items-center justify-between">
        <span className="text-caption text-muted-foreground">
          {formatCurrencyAbbrev(min)}
        </span>
        <span className="text-caption text-muted-foreground">
          {formatCurrencyAbbrev(max)}
        </span>
      </div>
    </div>
  );
}