import { useEffect, useState } from 'react';
import { View, Text, Input } from '@tarojs/components';

type OrderQtyControlsProps = {
  value: number;
  unitLabel: string;
  onChange: (next: number) => void;
};

const MAX_QTY = 999;

function parseQty(raw: string): number | null {
  const n = parseInt(String(raw).replace(/\D/g, ''), 10);
  if (!Number.isFinite(n)) return null;
  return Math.min(MAX_QTY, Math.max(1, n));
}

/** 下单数量：加减 + 手动输入，旁注单位（瓶/箱） */
export default function OrderQtyControls({ value, unitLabel, onChange }: OrderQtyControlsProps) {
  const [draft, setDraft] = useState(String(value));

  useEffect(() => {
    setDraft(String(value));
  }, [value]);

  function current(): number {
    return parseQty(draft) ?? value;
  }

  function commit() {
    const next = parseQty(draft);
    if (next == null) {
      setDraft(String(value));
      return;
    }
    setDraft(String(next));
    if (next !== value) onChange(next);
  }

  return (
    <View className="order-qty-row">
      <Text>购买数量</Text>
      <View className="order-qty-controls">
        <View className="order-qty-btn" onClick={() => onChange(Math.max(1, current() - 1))}>
          <Text>−</Text>
        </View>
        <Input
          className="order-qty-input"
          type="number"
          maxlength={3}
          value={draft}
          onInput={(e) => setDraft(String(e.detail.value ?? ''))}
          onBlur={commit}
          onConfirm={commit}
        />
        <View className="order-qty-btn" onClick={() => onChange(Math.min(MAX_QTY, current() + 1))}>
          <Text>＋</Text>
        </View>
        <Text className="order-qty-unit">{unitLabel}</Text>
      </View>
    </View>
  );
}