"use client";

import { useTranslation } from "react-i18next";

import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { formatMinorAsCurrency } from "@/lib/money";
import { cn } from "@/lib/utils";

type HallBetAmountInputProps = {
  id: string;
  label: string;
  value: string;
  onChange: (v: string) => void;
  currencyCode: string;
  minBetMinor: number;
  maxBetMinor: number;
  disabled?: boolean;
  hint?: string;
};

/**
 * 金额输入：展示限额（产品文档：最小/最大下注额），解析为最小货币单位由上层校验。
 */
export function HallBetAmountInput({
  id,
  label,
  value,
  onChange,
  currencyCode,
  minBetMinor,
  maxBetMinor,
  disabled,
  hint,
}: HallBetAmountInputProps) {
  const { t } = useTranslation("player");
  const min = formatMinorAsCurrency(minBetMinor, currencyCode);
  const max = formatMinorAsCurrency(maxBetMinor, currencyCode);

  return (
    <div className="space-y-2">
      <div className="flex flex-wrap items-end justify-between gap-2">
        <Label htmlFor={id}>{label}</Label>
        <p className="text-xs text-muted-foreground">
          {t("hall.amountInput.limit", { min, max })}
        </p>
      </div>
      <Input
        id={id}
        inputMode="decimal"
        autoComplete="off"
        disabled={disabled}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        className={cn("tabular-nums")}
        placeholder={t("hall.amountInput.placeholder")}
      />
      {hint ? <p className="text-xs text-muted-foreground">{hint}</p> : null}
    </div>
  );
}
