asios/app/award-detail/components/CheckoutModal.tsx

import { Image } from 'expo-image';
import React, { forwardRef, useImperativeHandle, useState } from 'react';
import {
    ActivityIndicator,
    Alert,
    Dimensions,
    Modal,
    ScrollView,
    StyleSheet,
    Text,
    TouchableOpacity,
    View
} from 'react-native';

import { applyOrder, getApplyResult, previewOrder } from '@/services/award';

const { width: SCREEN_WIDTH } = Dimensions.get('window');

// 等级配置
const LEVEL_MAP: Record<string, { title: string; color: string }> = {
  A: { title: '超神款', color: '#FF4444' },
  B: { title: '欧皇款', color: '#FF9600' },
  C: { title: '隐藏款', color: '#9B59B6' },
  D: { title: '普通款', color: '#666666' },
};

interface CheckoutModalProps {
  data: any;
  poolId: string;
  onSuccess: (param: { num: number; tradeNo: string }) => void;
  boxNumber?: string;
}

export interface CheckoutModalRef {
  show: (num: number, preview: any, boxNum?: string, seatNumbers?: number[], packFlag?: boolean) => void;
  showFreedom: () => void;
  close: () => void;
}

interface LotteryItem {
  id: string;
  name: string;
  cover: string;
  level: string;
  spu?: { marketPrice: number };
}

// 自由购买数量选项
const FREEDOM_NUMS = [10, 20, 30, 40, 50];

export const CheckoutModal = forwardRef<CheckoutModalRef, CheckoutModalProps>(
  ({ data, poolId, onSuccess, boxNumber }, ref) => {
    const [visible, setVisible] = useState(false);
    const [num, setNum] = useState(1);
    const [checked, setChecked] = useState(true);
    const [loading, setLoading] = useState(false);
    const [freedomNum, setFreedomNum] = useState(10);
    const [freedomSelectVisible, setFreedomSelectVisible] = useState(false);

    // 预览数据
    const [coin, setCoin] = useState<number | null>(null);
    const [couponAmount, setCouponAmount] = useState<number | null>(null);
    const [lastPrice, setLastPrice] = useState<number | null>(null);
    const [magic, setMagic] = useState<any>(null);
    const [cash, setCash] = useState<any>(null);
    const [cashChecked, setCashChecked] = useState(false);

    // 盒子相关
    const [boxNum, setBoxNum] = useState<string | undefined>(boxNumber);
    const [seatNumbers, setSeatNumbers] = useState<number[] | undefined>();
    const [packFlag, setPackFlag] = useState<boolean | undefined>();

    // 抽奖结果
    const [resultVisible, setResultVisible] = useState(false);
    const [resultLoading, setResultLoading] = useState(false);
    const [resultList, setResultList] = useState<LotteryItem[]>([]);

    // 设置预览数据
    const setPreviewData = (previewData: any) => {
      setCoin(previewData.magicAmount || null);
      setCouponAmount(previewData.couponAmount || null);
      setLastPrice(previewData.paymentAmount);
      setMagic(previewData.magic || null);

      if (previewData.cash && previewData.cash.balance > previewData.paymentAmount) {
        setCash(previewData.cash);
        setCashChecked(true);
      } else {
        setCash(previewData.cash || null);
        setCashChecked(false);
      }
    };

    useImperativeHandle(ref, () => ({
      show: (n: number, previewData: any = {}, bNum?: string, seats?: number[], pack?: boolean) => {
        setNum(n);
        setBoxNum(bNum);
        setSeatNumbers(seats);
        setPackFlag(pack || undefined);
        setPreviewData(previewData);
        setVisible(true);
      },
      showFreedom: () => {
        setFreedomNum(10);
        setFreedomSelectVisible(true);
      },
      close: () => {
        setVisible(false);
        setFreedomSelectVisible(false);
        setResultVisible(false);
      },
    }));

    const handleFreedomSelect = async (selectedNum: number) => {
      setFreedomSelectVisible(false);
      setLoading(true);
      try {
        const preview = await previewOrder(poolId, selectedNum);
        if (preview) {
          setNum(selectedNum);
          setFreedomNum(selectedNum);
          setPreviewData(preview);
          setVisible(true);
        }
      } catch (error: any) {
        Alert.alert('提示', error?.message || '获取订单信息失败');
      } finally {
        setLoading(false);
      }
    };

    const close = () => {
      setVisible(false);
      setFreedomSelectVisible(false);
    };

    const closeResult = () => {
      setResultVisible(false);
      setResultList([]);
      onSuccess({ tradeNo: '', num });
    };

    // 支付
    const pay = async () => {
      if (loading) return;
      if (!checked) {
        Alert.alert('提示', '请同意《宝箱服务协议》');
        return;
      }

      setLoading(true);
      try {
        const paymentType = 'WALLET';
        const payNum = packFlag ? 1 : num;

        const res = await applyOrder(poolId, payNum, paymentType, boxNum, seatNumbers, packFlag);

        if (res?.paySuccess || res?.bizTradeNo || res?.tradeNo) {
          const tradeNo = res.bizTradeNo || res.tradeNo;
          setVisible(false);
          fetchLotteryResult(tradeNo);
        } else {
          Alert.alert('提示', res?.message || '支付失败，请重试');
        }
      } catch (error: any) {
        Alert.alert('支付失败', error?.message || '请稍后重试');
      } finally {
        setLoading(false);
      }
    };

    // 获取抽奖结果
    const fetchLotteryResult = async (tradeNo: string) => {
      setResultLoading(true);
      setResultVisible(true);
      setResultList([]);

      let attempts = 0;
      const maxAttempts = 5;

      const poll = async () => {
        try {
          const res = await getApplyResult(tradeNo);
          if (res?.inventoryList && res.inventoryList.length > 0) {
            setResultList(res.inventoryList);
            setResultLoading(false);
          } else if (attempts < maxAttempts) {
            attempts++;
            setTimeout(poll, 1000);
          } else {
            setResultLoading(false);
            Alert.alert('提示', '获取结果超时，请在仓库中查看');
          }
        } catch {
          if (attempts < maxAttempts) {
            attempts++;
            setTimeout(poll, 1000);
          } else {
            setResultLoading(false);
            Alert.alert('提示', '获取结果失败，请在仓库中查看');
          }
        }
      };
      poll();
    };

    const displayPrice = lastPrice ?? (data?.price || 0) * num;

    return (
      <>
        {/* 自由购买数量选择弹窗 */}
        <Modal visible={freedomSelectVisible} transparent animationType="fade" onRequestClose={() => setFreedomSelectVisible(false)}>
          <View style={styles.overlay}>
            <TouchableOpacity style={styles.mask} activeOpacity={1} onPress={() => setFreedomSelectVisible(false)} />
            <View style={styles.freedomContainer}>
              <View style={styles.header}>
                <Text style={styles.title}>购买多盒</Text>
                <TouchableOpacity onPress={() => setFreedomSelectVisible(false)} style={styles.closeBtn}>
                  <Text style={styles.closeText}>×</Text>
                </TouchableOpacity>
              </View>
              <View style={styles.freedomContent}>
                <View style={styles.freedomBtnList}>
                  {FREEDOM_NUMS.map((item) => (
                    <TouchableOpacity
                      key={item}
                      style={[styles.freedomBtn, freedomNum === item && styles.freedomBtnActive]}
                      onPress={() => setFreedomNum(item)}
                    >
                      <Text style={[styles.freedomBtnText, freedomNum === item && styles.freedomBtnTextActive]}>
                        {item}<Text style={styles.freedomUnit}>盒</Text>
                      </Text>
                      {freedomNum === item && <Text style={styles.checkIcon}>✓</Text>}
                    </TouchableOpacity>
                  ))}
                </View>
                <TouchableOpacity
                  style={[styles.freedomSubmitBtn, loading && styles.payBtnDisabled]}
                  onPress={() => handleFreedomSelect(freedomNum)}
                  disabled={loading}
                >
                  {loading ? (
                    <ActivityIndicator color="#fff" size="small" />
                  ) : (
                    <Text style={styles.freedomSubmitText}>确认 ¥{(data?.price || 0) * freedomNum}</Text>
                  )}
                </TouchableOpacity>
              </View>
            </View>
          </View>
        </Modal>

        {/* 支付确认弹窗 */}
        <Modal visible={visible} transparent animationType="slide" onRequestClose={close}>
          <View style={styles.overlay}>
            <TouchableOpacity style={styles.mask} activeOpacity={1} onPress={close} />
            <View style={styles.container}>
              <View style={styles.header}>
                <Text style={styles.title}>{data?.name}</Text>
                <TouchableOpacity onPress={close} style={styles.closeBtn}>
                  <Text style={styles.closeText}>×</Text>
                </TouchableOpacity>
              </View>

              <View style={styles.content}>
                <View style={styles.row}>
                  <Text style={styles.label}>购买件数</Text>
                  <Text style={styles.priceText}>¥{data?.price} x {num}</Text>
                </View>

                <View style={styles.row}>
                  <Text style={styles.label}>优惠券</Text>
                  <Text style={[styles.valueText, couponAmount ? styles.themeColor : {}]}>
                    {couponAmount ? `已使用优惠¥${couponAmount}` : '暂无优惠券可选'}
                  </Text>
                </View>

                {magic && magic.balance > 0 && (
                  <View style={styles.row}>
                    <View style={styles.rowLeft}>
                      <Text style={styles.label}>果实</Text>
                      <Text style={styles.balanceText}>(剩余：{magic.balance})</Text>
                    </View>
                    <Text style={styles.balanceText}>
                      已抵扣 <Text style={styles.themeColor}>¥{coin || 0}</Text>
                    </Text>
                  </View>
                )}

                {cash && (
                  <View style={styles.row}>
                    <View style={styles.rowLeft}>
                      <Text style={styles.label}>钱包支付</Text>
                      <Text style={styles.themeColor}>(余额：¥{cash.balance})</Text>
                    </View>
                    <TouchableOpacity
                      style={[styles.radio, cashChecked && styles.radioChecked]}
                      onPress={() => setCashChecked(!cashChecked)}
                    >
                      {cashChecked && <View style={styles.radioInner} />}
                    </TouchableOpacity>
                  </View>
                )}

                <View style={styles.agreementRow}>
                  <View style={styles.agreementLeft}>
                    <Text style={styles.agreementText}>
                      我已满18周岁，已阅读并同意<Text style={styles.link}>《宝箱服务协议》</Text>
                    </Text>
                    <Text style={styles.tips}>宝箱商品存在概率性，请谨慎消费</Text>
                  </View>
                  <TouchableOpacity
                    style={[styles.radio, checked && styles.radioChecked]}
                    onPress={() => setChecked(!checked)}
                  >
                    {checked && <View style={styles.radioInner} />}
                  </TouchableOpacity>
                </View>
              </View>

              <View style={styles.footer}>
                <View style={styles.priceInfo}>
                  <Text style={styles.totalLabel}>实付：</Text>
                  <Text style={styles.totalPrice}>¥{displayPrice.toFixed(2)}</Text>
                </View>
                <TouchableOpacity
                  style={[styles.payBtn, loading && styles.payBtnDisabled]}
                  onPress={pay}
                  disabled={loading}
                >
                  {loading ? <ActivityIndicator color="#fff" size="small" /> : <Text style={styles.payBtnText}>立即支付</Text>}
                </TouchableOpacity>
              </View>
            </View>
          </View>
        </Modal>

        {/* 抽奖结果弹窗 */}
        <Modal visible={resultVisible} transparent animationType="fade" onRequestClose={closeResult}>
          <View style={styles.resultOverlay}>
            <View style={styles.resultContainer}>
              <View style={styles.resultHeader}>
                <Text style={styles.resultTitle}>🎉 恭喜您获得 🎉</Text>
                <TouchableOpacity onPress={closeResult} style={styles.resultCloseBtn}>
                  <Text style={styles.closeText}>×</Text>
                </TouchableOpacity>
              </View>

              {resultLoading ? (
                <View style={styles.resultLoading}>
                  <ActivityIndicator size="large" color="#ff9600" />
                  <Text style={styles.resultLoadingText}>正在开启宝箱...</Text>
                </View>
              ) : (
                <ScrollView style={styles.resultScroll} showsVerticalScrollIndicator={false}>
                  <View style={styles.resultList}>
                    {resultList.map((item, index) => (
                      <View key={item.id || index} style={styles.resultItem}>
                        <View style={[styles.levelBadge, { backgroundColor: LEVEL_MAP[item.level]?.color || '#666' }]}>
                          <Text style={styles.levelText}>{LEVEL_MAP[item.level]?.title || item.level}</Text>
                        </View>
                        <View style={styles.resultImageBox}>
                          <Image source={{ uri: item.cover }} style={styles.resultImage} contentFit="contain" />
                        </View>
                        <Text style={styles.resultName} numberOfLines={2}>{item.name}</Text>
                        {item.spu?.marketPrice && (
                          <Text style={styles.resultPrice}>参考价：¥{item.spu.marketPrice}</Text>
                        )}
                      </View>
                    ))}
                  </View>
                </ScrollView>
              )}

              <View style={styles.resultFooter}>
                <TouchableOpacity style={styles.resultBtn} onPress={closeResult}>
                  <Text style={styles.resultBtnText}>继续抽奖</Text>
                </TouchableOpacity>
              </View>
            </View>
          </View>
        </Modal>
      </>
    );
  }
);


const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.5)',
    justifyContent: 'flex-end',
  },
  mask: { flex: 1 },
  container: {
    backgroundColor: '#fff',
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    paddingBottom: 34,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
    position: 'relative',
  },
  title: { fontSize: 16, fontWeight: '600', color: '#333' },
  closeBtn: { position: 'absolute', right: 15, top: 10 },
  closeText: { fontSize: 24, color: '#999' },
  content: { padding: 15 },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 10,
  },
  rowLeft: { flexDirection: 'row', alignItems: 'center', flex: 1 },
  label: { fontSize: 14, color: '#333' },
  priceText: { fontSize: 14, color: '#ff9600', fontWeight: '600' },
  valueText: { fontSize: 12, color: '#999' },
  themeColor: { color: '#ff9600' },
  balanceText: { fontSize: 12, color: '#999', marginLeft: 5 },
  radio: {
    width: 20,
    height: 20,
    borderRadius: 10,
    borderWidth: 2,
    borderColor: '#ddd',
    justifyContent: 'center',
    alignItems: 'center',
  },
  radioChecked: { borderColor: '#ff9600' },
  radioInner: { width: 10, height: 10, borderRadius: 5, backgroundColor: '#ff9600' },
  agreementRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    paddingVertical: 10,
    marginTop: 10,
  },
  agreementLeft: { flex: 1, marginRight: 10 },
  agreementText: { fontSize: 12, color: '#333', lineHeight: 18 },
  link: { color: '#ff9600' },
  tips: { fontSize: 11, color: '#999', marginTop: 5 },
  footer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 15,
    paddingTop: 15,
    borderTopWidth: 1,
    borderTopColor: '#eee',
  },
  priceInfo: { flexDirection: 'row', alignItems: 'center' },
  totalLabel: { fontSize: 14, color: '#333' },
  totalPrice: { fontSize: 20, color: '#ff9600', fontWeight: 'bold' },
  payBtn: {
    backgroundColor: '#ff9600',
    paddingHorizontal: 30,
    paddingVertical: 12,
    borderRadius: 25,
  },
  payBtnDisabled: { opacity: 0.6 },
  payBtnText: { color: '#fff', fontSize: 16, fontWeight: '600' },

  // 自由购买弹窗
  freedomContainer: {
    backgroundColor: '#fff',
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    paddingBottom: 34,
  },
  freedomContent: { padding: 20 },
  freedomBtnList: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between' },
  freedomBtn: {
    width: '48%',
    height: 50,
    backgroundColor: '#fff',
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 12,
    borderWidth: 1,
    borderColor: '#eee',
    position: 'relative',
  },
  freedomBtnActive: { backgroundColor: '#F1423D', borderColor: '#F1423D' },
  freedomBtnText: { fontSize: 18, fontWeight: 'bold', color: '#333' },
  freedomBtnTextActive: { color: '#fff' },
  freedomUnit: { fontSize: 12, fontWeight: '500' },
  checkIcon: {
    position: 'absolute',
    bottom: 0,
    right: 0,
    backgroundColor: '#fff',
    color: '#F1423D',
    fontSize: 12,
    paddingHorizontal: 6,
    paddingVertical: 2,
    borderTopLeftRadius: 8,
    borderBottomRightRadius: 8,
  },
  freedomSubmitBtn: {
    backgroundColor: '#ff9600',
    height: 50,
    borderRadius: 25,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 20,
  },
  freedomSubmitText: { color: '#fff', fontSize: 16, fontWeight: '600' },

  // 抽奖结果弹窗
  resultOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.7)',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  resultContainer: {
    width: '100%',
    maxHeight: '80%',
    backgroundColor: '#fff',
    borderRadius: 16,
    overflow: 'hidden',
  },
  resultHeader: {
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#ff9600',
    position: 'relative',
  },
  resultTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#fff',
  },
  resultCloseBtn: {
    position: 'absolute',
    right: 15,
    top: 15,
    width: 30,
    height: 30,
    backgroundColor: 'rgba(255,255,255,0.3)',
    borderRadius: 15,
    justifyContent: 'center',
    alignItems: 'center',
  },
  resultLoading: {
    padding: 60,
    alignItems: 'center',
  },
  resultLoadingText: {
    marginTop: 15,
    fontSize: 14,
    color: '#666',
  },
  resultScroll: {
    maxHeight: 400,
  },
  resultList: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    padding: 10,
    justifyContent: 'space-between',
  },
  resultItem: {
    width: (SCREEN_WIDTH - 80) / 2,
    backgroundColor: '#f9f9f9',
    borderRadius: 10,
    padding: 10,
    marginBottom: 10,
    alignItems: 'center',
  },
  levelBadge: {
    paddingHorizontal: 10,
    paddingVertical: 3,
    borderRadius: 10,
    marginBottom: 8,
  },
  levelText: {
    color: '#fff',
    fontSize: 11,
    fontWeight: 'bold',
  },
  resultImageBox: {
    width: '100%',
    aspectRatio: 1,
    backgroundColor: '#fff',
    borderRadius: 8,
    overflow: 'hidden',
  },
  resultImage: {
    width: '100%',
    height: '100%',
  },
  resultName: {
    fontSize: 12,
    color: '#333',
    textAlign: 'center',
    marginTop: 8,
    lineHeight: 16,
  },
  resultPrice: {
    fontSize: 10,
    color: '#999',
    marginTop: 4,
  },
  resultFooter: {
    padding: 15,
    borderTopWidth: 1,
    borderTopColor: '#eee',
  },
  resultBtn: {
    backgroundColor: '#ff9600',
    height: 46,
    borderRadius: 23,
    justifyContent: 'center',
    alignItems: 'center',
  },
  resultBtnText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '600',
  },
});