asios/app/store/components/CheckoutModal.tsx

import { Image } from 'expo-image';
import { useRouter } from 'expo-router';
import React, { useEffect, useState } from 'react';
import {
    ActivityIndicator,
    Alert,
    ImageBackground,
    Modal,
    Platform,
    ScrollView,
    StyleSheet,
    Text,
    TouchableOpacity,
    View,
} from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

import { Images } from '@/constants/images';
import { Address, getDefaultAddress } from '@/services/address';
import { takeApply, takePreview } from '@/services/award';

interface GroupedGoods {
  total: number;
  data: { id: string; cover: string; spuId: string; level: string; name?: string };
}

interface CheckoutModalProps {
  visible: boolean;
  selectedItems: Array<{ id: string; spu: { id: string; name: string; cover: string }; level: string }>;
  onClose: () => void;
  onSuccess: () => void;
}

export default function CheckoutModal({ visible, selectedItems, onClose, onSuccess }: CheckoutModalProps) {
  const router = useRouter();
  const insets = useSafeAreaInsets();
  const [loading, setLoading] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [address, setAddress] = useState<Address | null>(null);
  const [expressAmount, setExpressAmount] = useState(0);
  const [goodsList, setGoodsList] = useState<GroupedGoods[]>([]);

  const showAlert = (msg: string) => {
    if (Platform.OS === 'web') window.alert(msg);
    else Alert.alert('提示', msg);
  };

  useEffect(() => {
    if (visible && selectedItems.length > 0) {
      loadData();
    }
  }, [visible, selectedItems]);

  const loadData = async () => {
    setLoading(true);
    try {
      // 获取默认地址
      const addr = await getDefaultAddress();
      setAddress(addr);

      // 获取提货预览
      const ids = selectedItems.map(item => item.id);
      const res = await takePreview(ids, addr?.id || '');
      if (res) {
        setExpressAmount(res.expressAmount || 0);
      }

      // 合并相同商品
      const goodsMap: Record<string, GroupedGoods> = {};
      selectedItems.forEach((item) => {
        const key = `${item.spu.id}_${item.level}`;
        if (goodsMap[key]) {
          goodsMap[key].total += 1;
        } else {
          goodsMap[key] = {
            total: 1,
            data: {
              id: item.id,
              cover: item.spu.cover,
              spuId: item.spu.id,
              level: item.level,
              name: item.spu.name,
            },
          };
        }
      });
      setGoodsList(Object.values(goodsMap));
    } catch (e) {
      console.error('加载提货信息失败:', e);
    }
    setLoading(false);
  };

  const goToAddress = () => {
    onClose();
    router.push('/address?type=1' as any);
  };

  const handleSubmit = async () => {
    if (!address) {
      showAlert('请选择收货地址');
      return;
    }
    if (submitting) return;
    setSubmitting(true);
    try {
      const ids = selectedItems.map(item => item.id);
      const res = await takeApply(ids, address.id, 'WALLET');
      if (res) {
        showAlert('提货成功');
        onSuccess();
      }
    } catch (e) {
      console.error('提货失败:', e);
    }
    setSubmitting(false);
  };

  return (
    <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
      <View style={styles.overlay}>
        <TouchableOpacity style={styles.overlayBg} onPress={onClose} activeOpacity={1} />
        <View style={[styles.container, { paddingBottom: insets.bottom + 20 }]}>
          {/* 标题 */}
          <View style={styles.header}>
            <Text style={styles.title}>提货</Text>
            <TouchableOpacity style={styles.closeBtn} onPress={onClose}>
              <Text style={styles.closeBtnText}>×</Text>
            </TouchableOpacity>
          </View>

          {loading ? (
            <View style={styles.loadingBox}>
              <ActivityIndicator size="large" color="#FC7D2E" />
            </View>
          ) : (
            <>
              {/* 商品列表 */}
              <View style={styles.goodsSection}>
                <ScrollView horizontal showsHorizontalScrollIndicator={false}>
                  {goodsList.map((goods, idx) => (
                    <View key={idx} style={styles.goodsItem}>
                      <Image source={{ uri: goods.data.cover }} style={styles.goodsImg} contentFit="contain" />
                      <View style={styles.goodsCount}>
                        <Text style={styles.goodsCountText}>x{goods.total}</Text>
                      </View>
                    </View>
                  ))}
                </ScrollView>
              </View>

              {/* 运费 */}
              {expressAmount > 0 && (
                <View style={styles.feeRow}>
                  <Text style={styles.feeLabel}>运费</Text>
                  <Text style={styles.feeValue}>¥{expressAmount}</Text>
                </View>
              )}

              {/* 收货地址 */}
              <TouchableOpacity style={styles.addressSection} onPress={goToAddress}>
                {!address ? (
                  <Text style={styles.noAddress}>请填写收货地址</Text>
                ) : (
                  <View style={styles.addressInfo}>
                    <Text style={styles.addressName}>{address.contactName} {address.contactNo}</Text>
                    <Text style={styles.addressDetail}>{address.province}{address.city}{address.district}{address.address}</Text>
                  </View>
                )}
                <Text style={styles.arrowIcon}>›</Text>
              </TouchableOpacity>

              {/* 提交按钮 */}
              <TouchableOpacity style={styles.submitBtn} onPress={handleSubmit} disabled={submitting}>
                <ImageBackground source={{ uri: Images.common.loginBtn }} style={styles.submitBtnBg} resizeMode="contain">
                  <Text style={styles.submitBtnText}>{submitting ? '提交中...' : '确定发货'}</Text>
                </ImageBackground>
              </TouchableOpacity>
            </>
          )}
        </View>
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  overlay: { flex: 1, justifyContent: 'flex-end' },
  overlayBg: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.5)' },
  container: { backgroundColor: '#fff', borderTopLeftRadius: 15, borderTopRightRadius: 15, paddingHorizontal: 14 },
  header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', paddingVertical: 20, position: 'relative' },
  title: { fontSize: 16, fontWeight: 'bold', color: '#000' },
  closeBtn: { position: 'absolute', right: 0, top: 15, width: 24, height: 24, backgroundColor: '#ebebeb', borderRadius: 12, justifyContent: 'center', alignItems: 'center' },
  closeBtnText: { fontSize: 18, color: '#a2a2a2', lineHeight: 20 },
  loadingBox: { height: 200, justifyContent: 'center', alignItems: 'center' },
  goodsSection: { paddingVertical: 10 },
  goodsItem: { width: 79, height: 103, backgroundColor: '#fff', borderRadius: 6, marginRight: 8, alignItems: 'center', justifyContent: 'center', position: 'relative', borderWidth: 1, borderColor: '#eaeaea' },
  goodsImg: { width: 73, height: 85 },
  goodsCount: { position: 'absolute', top: 0, right: 0, backgroundColor: '#ff6b00', borderRadius: 2, paddingHorizontal: 4, paddingVertical: 2 },
  goodsCountText: { color: '#fff', fontSize: 10, fontWeight: 'bold' },
  feeRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: 8 },
  feeLabel: { fontSize: 14, color: '#333' },
  feeValue: { fontSize: 14, color: '#ff6b00', fontWeight: 'bold' },
  addressSection: { flexDirection: 'row', alignItems: 'center', paddingVertical: 10, borderTopWidth: 1, borderTopColor: '#f0f0f0' },
  noAddress: { flex: 1, fontSize: 16, fontWeight: 'bold', color: '#333' },
  addressInfo: { flex: 1 },
  addressName: { fontSize: 14, color: '#333', fontWeight: 'bold' },
  addressDetail: { fontSize: 12, color: '#666', marginTop: 4 },
  arrowIcon: { fontSize: 20, color: '#999', marginLeft: 10 },
  submitBtn: { alignItems: 'center', marginTop: 15 },
  submitBtnBg: { width: 260, height: 60, justifyContent: 'center', alignItems: 'center' },
  submitBtnText: { color: '#000', fontSize: 16, fontWeight: 'bold' },
});