import { Button, InputNumber, Modal, Space, Tag } from 'antd';
import type { PointsMallProduct } from '../../../api';

export default function ConfirmExchangeModal(props: {
  open: boolean;
  product: PointsMallProduct | null;
  userPoints: number;
  quantity: number;
  loading: boolean;
  onQuantityChange: (v: number) => void;
  onConfirm: () => void;
  onCancel: () => void;
}) {
  const { open, product, userPoints, quantity, loading, onQuantityChange, onConfirm, onCancel } = props;
  const totalPoints = product ? product.pointsPrice * quantity : 0;
  const canAfford = product ? userPoints >= totalPoints : false;

  return (
    <Modal title="确认兑换" open={open} onCancel={onCancel} footer={null} width={460} destroyOnClose>
      {!product ? null : (
        <div>
          <div style={{ fontWeight: 700, fontSize: 14, marginBottom: 10 }}>{product.name}</div>
          <Space size={8} wrap style={{ marginBottom: 16 }}>
            <Tag color="processing" style={{ marginInlineEnd: 0 }}>
              单价 {product.pointsPrice.toLocaleString()} 积分
            </Tag>
            <Tag color="default" style={{ marginInlineEnd: 0 }}>
              当前余额 {userPoints.toLocaleString()}
            </Tag>
            <Tag color={canAfford ? 'success' : 'error'} style={{ marginInlineEnd: 0 }}>
              合计 {totalPoints.toLocaleString()}
            </Tag>
          </Space>

          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginBottom: 12 }}>
            <div style={{ color: 'var(--color-text-secondary)', fontSize: 13 }}>兑换数量</div>
            <InputNumber
              min={1}
              max={Math.max(1, product.stock || 1)}
              value={quantity}
              disabled={loading}
              onChange={(v) => onQuantityChange(Number(v || 1))}
              style={{ width: 140 }}
            />
          </div>

          <div style={{ color: 'var(--color-text-tertiary)', fontSize: 12.5, lineHeight: 1.6, marginBottom: 16 }}>
            确认后将发起兑换申请并冻结积分/预扣库存，成功后请继续填写收件信息完成兑换。
          </div>

          <Button type="primary" block disabled={!canAfford || loading} loading={loading} onClick={onConfirm}>
            {canAfford ? '确认并继续' : '积分不足'}
          </Button>
        </div>
      )}
    </Modal>
  );
}

