"use client";

/**
 * Accessible quantity stepper.
 *
 * Buttons are the primary control; the number input stays keyboard- and
 * screen-reader-friendly and clamps to `[min, max]`.
 */
export function QuantitySelector({
  value,
  onChange,
  min = 1,
  max = 99,
  disabled = false,
  label = "Quantity",
  size = "md",
}: {
  value: number;
  onChange: (quantity: number) => void;
  min?: number;
  max?: number;
  disabled?: boolean;
  label?: string;
  size?: "sm" | "md";
}) {
  const clamp = (next: number) => Math.max(min, Math.min(max, next));

  const buttonClass =
    size === "sm"
      ? "flex size-8 items-center justify-center text-slate-600 transition-colors hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-40"
      : "flex size-11 items-center justify-center text-slate-600 transition-colors hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-40";

  return (
    <div className="inline-flex items-center gap-3">
      <div
        className={`inline-flex items-center overflow-hidden rounded-xl border border-slate-300 bg-white ${
          size === "sm" ? "h-8" : "h-11"
        }`}
      >
        <button
          type="button"
          onClick={() => onChange(clamp(value - 1))}
          disabled={disabled || value <= min}
          className={buttonClass}
        >
          <span className="text-lg leading-none" aria-hidden="true">
            &minus;
          </span>
          <span className="sr-only">Decrease {label.toLowerCase()}</span>
        </button>

        <input
          type="number"
          inputMode="numeric"
          value={value}
          min={min}
          max={max}
          disabled={disabled}
          aria-label={label}
          onChange={(event) => {
            const parsed = Number.parseInt(event.target.value, 10);
            if (Number.isFinite(parsed)) onChange(clamp(parsed));
          }}
          className={`w-12 border-x border-slate-200 text-center text-sm font-semibold text-slate-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-indigo-600 ${
            size === "sm" ? "h-8" : "h-11"
          } [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none`}
        />

        <button
          type="button"
          onClick={() => onChange(clamp(value + 1))}
          disabled={disabled || value >= max}
          className={buttonClass}
        >
          <span className="text-lg leading-none" aria-hidden="true">
            +
          </span>
          <span className="sr-only">Increase {label.toLowerCase()}</span>
        </button>
      </div>
    </div>
  );
}