asios/app/weal/wish.tsx

import { Images } from '@/constants/images';
import Service from '@/services/weal';
import { useRouter } from 'expo-router';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import {
  Alert,
  Dimensions,
  Image,
  ImageBackground,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { WishMaterialModal, WishMaterialModalRef } from './components/WishMaterialModal';
import { WishRecordModal, WishRecordModalRef } from './components/WishRecordModal';
import { WishRuleModal, WishRuleModalRef } from './components/WishRuleModal';

const { width: SCREEN_WIDTH } = Dimensions.get('window');
const CDN_BASE = 'https://cdn.acetoys.cn/kai_xin_ma_te/supermart';

const wishImages = {
  bg: `${CDN_BASE}/common/wishBg.png`,
  title: `${CDN_BASE}/welfare/wishTitle.png`,
  rule: `${CDN_BASE}/welfare/wishRule.png`,
  addBg: `${CDN_BASE}/welfare/addBg.png`,
  addLiBg: `${CDN_BASE}/welfare/addLiBg.png`,
  addClose: `${CDN_BASE}/welfare/addClose.png`,
  addSectionBg: `${CDN_BASE}/welfare/toys/addSectionBg.png`,
  add: `${CDN_BASE}/welfare/add.png`,
  left: `${CDN_BASE}/box/detail/left.png`,
  right: `${CDN_BASE}/box/detail/right.png`,
  progressBar: `${CDN_BASE}/welfare/toys/wishProgressBar.png`,
};

interface WishItem {
  id: string;
  name: string;
  spu: { cover: string };
  quantity: number;
  completeQuantity: number;
}

interface GoodsItem {
  id: string;
  spu: { cover: string };
  magicAmount: number;
}

export default function WishScreen() {
  const router = useRouter();
  const insets = useSafeAreaInsets();
  const [tableData, setTableData] = useState<WishItem[]>([]);
  const [active, setActive] = useState(0);
  const [goodsList, setGoodsList] = useState<GoodsItem[]>([]);
  const [progress, setProgress] = useState(0);
  const [magicAmount, setMagicAmount] = useState(0);

  // Modals
  const ruleRef = useRef<WishRuleModalRef>(null);
  const recordRef = useRef<WishRecordModalRef>(null);
  const materialRef = useRef<WishMaterialModalRef>(null);

  const loadData = useCallback(async () => {
    try {
      const data = await Service.getWishList();
      // Ensure data is array
      const list = Array.isArray(data) ? data : (data?.records || []);

      if (list && list.length > 0) {
        setTableData(list);
      }
    } catch (error) {
      console.error('加载祈愿数据失败:', error);
    }
  }, []);

  useEffect(() => {
    loadData();
  }, [loadData]);

  // Update progress when active item changes or goodsList changes
  useEffect(() => {
    const updateProgress = async () => {
      if (tableData.length > 0 && tableData[active]) {
        const current = tableData[active];
        if (goodsList.length === 0) {
          setProgress(0);
          setMagicAmount(0);
        } else {
          // Call preview to get progress
          const inventoryIds = goodsList.map(g => g.id);
          try {
            const res = await Service.wishPreview({
              substituteGoodsId: current.id,
              inventoryIds
            });
            if (res) {
              let p = (res.progress || 0) * 100;
              if (p > 100) p = 100;
              setProgress(p);
              setMagicAmount(res.magicAmount || 0);
            }
          } catch (e) {
            console.error(e);
          }
        }
      } else {
        setProgress(0);
        setMagicAmount(0);
      }
    };
    updateProgress();
  }, [tableData, active, goodsList]);

  const handlePrev = () => {
    if (active > 0) {
      setActive(active - 1);
      setGoodsList([]);
    }
  };

  const handleNext = () => {
    if (active < tableData.length - 1) {
      setActive(active + 1);
      setGoodsList([]);
    }
  };

  const currentItem = tableData[active];
  const serverRemaining = currentItem ? currentItem.quantity - currentItem.completeQuantity : 0;
  // Visual remaining doesn't update until submit in this flow
  const remaining = serverRemaining;

  const removeGoods = (item: GoodsItem) => {
    setGoodsList(goodsList.filter((g) => g.id !== item.id));
  };

  const openMaterialModal = () => {
    if (!currentItem) return;
    materialRef.current?.show((selected) => {
      // Add selected items to goodsList
      setGoodsList(prev => {
        const newIds = new Set(prev.map(i => i.id));
        const toAdd = selected.filter(i => !newIds.has(i.id));
        return [...prev, ...toAdd];
      });
    });
  };

  const submitWish = async () => {
    try {
      const inventoryIds = goodsList.map(g => g.id);

      console.log('Submitting Wish:', { substituteGoodsId: currentItem.id, inventoryIds });

      const res = await Service.wishSubmit({
        substituteGoodsId: currentItem.id,
        inventoryIds
      });

      console.log('Submit Res:', res);

      // Fix: Use loose equality since backend returns string "0"
      if (res.code == 0 || res.success) {
        Alert.alert('成功', '点亮成功！');
        setGoodsList([]);
        loadData();
      } else {
        Alert.alert('提交失败', `Code: ${res.code}, Msg: ${res.msg}`);
      }

    } catch (error) {
      console.error('LightUp Error:', error);
      Alert.alert('执行异常', String(error));
    }
  };

  const handleLightUp = async () => {
    if (!currentItem) return;
    if (progress < 100) {
      if (goodsList.length === 0) {
        Alert.alert('提示', '请先添加材料');
        return;
      }
      Alert.alert('提示', '进度未满100%，无法点亮');
      return;
    }

    Alert.alert(
      '确认点亮',
      '是否确认消耗所选材料进行点亮？',
      [
        { text: '取消', style: 'cancel' },
        {
          text: '确认',
          onPress: () => {
            submitWish();
          }
        }
      ]
    );
  };

  return (
    <View style={styles.container}>
      <StatusBar barStyle="light-content" />
      <ImageBackground source={{ uri: wishImages.bg }} style={styles.background} resizeMode="cover">
        {/* 头部导航 */}
        <View style={[styles.header, { paddingTop: insets.top }]}>
          <TouchableOpacity style={styles.backBtn} onPress={() => router.back()}>
            <Text style={styles.backText}>←</Text>
          </TouchableOpacity>
          <Text style={styles.title}>祈愿</Text>
          <View style={styles.placeholder} />
        </View>

        {/* 规则按钮 */}
        <TouchableOpacity style={[styles.ruleBtn, { top: insets.top + 160 }]} onPress={() => ruleRef.current?.show()}>
          <Image source={{ uri: wishImages.rule }} style={styles.ruleBtnImg} resizeMode="contain" />
        </TouchableOpacity>

        <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
          <View style={{ height: insets.top + 50 }} />

          {/* 标题图片 */}
          <View style={styles.titleBox}>
            <Image source={{ uri: wishImages.title }} style={styles.titleImg} resizeMode="contain" />
          </View>

          {/* 卡片轮播区域 */}
          <View style={styles.swiperBox}>
            {/* 左箭头 */}
            {active > 0 && (
              <TouchableOpacity style={styles.prevBtn} onPress={handlePrev}>
                <Image source={{ uri: wishImages.left }} style={styles.arrowImg} resizeMode="contain" />
              </TouchableOpacity>
            )}

            {/* 卡片 */}
            <View style={styles.cardBox}>
              {currentItem ? (
                <View style={styles.card}>
                  <View style={styles.imgBox}>
                    <Image source={{ uri: currentItem.spu?.cover }} style={styles.spuImage} resizeMode="contain" />
                    {/* 仅剩标签 */}
                    <View style={styles.remainingBox}>
                      <Text style={styles.remainingText}>仅剩：{remaining}</Text>
                    </View>
                  </View>
                  <Text style={styles.cardName} numberOfLines={1}>
                    {currentItem.name}
                  </Text>
                </View>
              ) : (
                <View style={styles.card}>
                  <View style={styles.imgBox}>
                    <Text style={styles.emptyText}>暂无祈愿商品</Text>
                  </View>
                </View>
              )}
            </View>

            {/* 右箭头 */}
            {active < tableData.length - 1 && (
              <TouchableOpacity style={styles.nextBtn} onPress={handleNext}>
                <Image source={{ uri: wishImages.right }} style={styles.arrowImg} resizeMode="contain" />
              </TouchableOpacity>
            )}
          </View>

          {/* 指示点 */}
          {tableData.length > 1 && (
            <View style={styles.dotsBox}>
              {tableData.map((_, i) => (
                <View key={i} style={[styles.dot, i === active && styles.dotActive]} />
              ))}
            </View>
          )}

          {/* 进度条区域 */}
          <View style={styles.progressSection}>
            <View style={styles.progressLabelBox}>
              <Text style={styles.progressLabel}>进度：</Text>
            </View>

            {/* Show Magic Return if 100% and magicAmount > 0 */}
            {progress >= 100 && magicAmount > 0 && (
              <View style={styles.magicBubble}>
                <Text style={styles.magicText}>返还: {magicAmount}果实</Text>
              </View>
            )}

            <View style={styles.progressBar}>
              <View style={[styles.progressFill, { width: `${progress}%` }]} />
            </View>
            <Text style={styles.progressText}>{progress > 0 ? progress.toFixed(1) : progress}%</Text>
          </View>

          {/* 材料添加区域 */}
          <ImageBackground source={{ uri: wishImages.addSectionBg }} style={styles.addSection} resizeMode="stretch">
            <Text style={styles.addTitle}>材料添加</Text>
            <View style={styles.addMain}>
              {/* 添加按钮 */}
              <TouchableOpacity style={styles.addBtn} onPress={openMaterialModal}>
                <ImageBackground source={{ uri: wishImages.addBg }} style={styles.addBtnBg} resizeMode="contain">
                  <Image source={{ uri: wishImages.add }} style={styles.addIcon} resizeMode="contain" />
                  <Text style={styles.addBtnText}>添加</Text>
                </ImageBackground>
              </TouchableOpacity>

              {/* 已添加的材料列表 */}
              <View style={styles.addCenter}>
                <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.addScrollContent}>
                  {goodsList.map((item, index) => (
                    <View key={item.id || index} style={styles.addItem}>
                      <ImageBackground source={{ uri: wishImages.addLiBg }} style={styles.addItemBg} resizeMode="contain">
                        <Image source={{ uri: item.spu?.cover }} style={styles.addItemImg} resizeMode="cover" />
                      </ImageBackground>
                      <TouchableOpacity style={styles.closeBtn} onPress={() => removeGoods(item)}>
                        <Image source={{ uri: wishImages.addClose }} style={styles.closeIcon} resizeMode="contain" />
                      </TouchableOpacity>
                    </View>
                  ))}
                </ScrollView>
              </View>
            </View>
          </ImageBackground>

          {/* 底部按钮 */}
          <View style={styles.bottomContainer}>
            {/* Record Link (Optional, if design has it outside standard flow, adding it near bottom or top) 
                Wait, original design had "Rule" on left, maybe "Record" is not prominently displayed or inside Rule?
                Let's stick to current design.
             */}
            <TouchableOpacity style={styles.bottomBtn} onPress={handleLightUp}>
              <ImageBackground
                source={{ uri: progress >= 100 || goodsList.length > 0 ? Images.common.butBgL : Images.common.butBgHui }}
                style={styles.bottomBtnBg}
                resizeMode="contain"
              >
                <Text style={styles.bottomBtnText}>{progress >= 100 ? '点亮心愿' : (goodsList.length > 0 ? '确认添加' : '等待参与')}</Text>
              </ImageBackground>
            </TouchableOpacity>
          </View>

          <Text style={styles.bottomTip}>*本活动最终解释权归本平台所有</Text>
          <View style={{ height: 100 }} />
        </ScrollView>

        <WishRuleModal ref={ruleRef} />
        <WishRecordModal ref={recordRef} />
        <WishMaterialModal ref={materialRef} />
      </ImageBackground>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#1a1a2e' },
  background: { flex: 1 },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 10,
    paddingBottom: 10,
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    zIndex: 100,
  },
  backBtn: { width: 40, height: 40, justifyContent: 'center', alignItems: 'center' },
  backText: { color: '#fff', fontSize: 20 },
  title: { color: '#fff', fontSize: 16, fontWeight: 'bold' },
  placeholder: { width: 40 },
  scrollView: { flex: 1 },

  // 规则按钮
  ruleBtn: { position: 'absolute', left: 0, zIndex: 99 },
  ruleBtnImg: { width: 39, height: 20 },

  // 标题
  titleBox: { alignItems: 'center', marginBottom: 10 },
  titleImg: { width: 288, height: 86 },

  // 轮播区域
  swiperBox: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 20,
    minHeight: 350,
    position: 'relative',
  },
  prevBtn: { position: 'absolute', left: 15, zIndex: 10 },
  nextBtn: { position: 'absolute', right: 15, zIndex: 10 },
  arrowImg: { width: 51, height: 49 },

  // 卡片
  cardBox: { alignItems: 'center' },
  card: { alignItems: 'center' },
  imgBox: {
    width: 215,
    height: 284,
    backgroundColor: '#FFF7D8',
    borderWidth: 4.5,
    borderColor: '#000',
    justifyContent: 'center',
    alignItems: 'center',
    position: 'relative',
  },
  spuImage: { width: 200, height: 260 },
  emptyText: { color: '#999', fontSize: 14 },
  remainingBox: {
    position: 'absolute',
    bottom: '15%',
    backgroundColor: '#fff',
    borderWidth: 3,
    borderColor: '#000',
    paddingHorizontal: 15,
    paddingVertical: 5,
  },
  remainingText: { fontSize: 13, fontWeight: 'bold', color: '#000' },
  cardName: {
    color: '#D0D0D0',
    fontSize: 12,
    marginTop: 13,
    textAlign: 'center',
    maxWidth: 200,
  },

  // 指示点
  dotsBox: { flexDirection: 'row', justifyContent: 'center', marginTop: 10 },
  dot: { width: 8, height: 8, borderRadius: 4, backgroundColor: '#666', marginHorizontal: 3 },
  dotActive: { backgroundColor: '#fff' },

  // 进度条
  progressSection: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 5,
    paddingHorizontal: 20,
    position: 'relative',
    zIndex: 20,
  },
  progressLabelBox: { width: 40 },
  progressLabel: { color: '#fff', fontSize: 12 },
  magicBubble: {
    position: 'absolute',
    right: 0,
    top: -24,
    zIndex: 10,
    backgroundColor: '#f44336',
    borderRadius: 4,
    paddingHorizontal: 8,
    paddingVertical: 3,
  },
  magicText: { color: '#fff', fontSize: 10 },
  progressBar: {
    flex: 1,
    height: 14,
    backgroundColor: '#FFEABE',
    borderWidth: 2,
    borderColor: '#000',
    marginHorizontal: 5,
    position: 'relative',
  },
  progressFill: {
    height: '100%',
    backgroundColor: '#FFAD00',
    borderRightWidth: 2,
    borderRightColor: '#000',
  },
  progressText: { color: '#fff', fontSize: 12, width: 40, textAlign: 'right' },

  // 材料添加区域
  addSection: {
    width: SCREEN_WIDTH - 20,
    height: 124,
    marginHorizontal: 10,
    marginTop: 10,
    paddingTop: 10,
  },
  addTitle: {
    color: '#fff',
    fontSize: 14,
    textAlign: 'center',
    fontWeight: '400',
    textShadowColor: '#000',
    textShadowOffset: { width: 1, height: 1 },
    textShadowRadius: 1,
    marginBottom: 7,
  },
  addMain: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 25,
  },
  addBtn: { marginRight: 10 },
  addBtnBg: {
    width: 42,
    height: 42,
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: 5,
  },
  addIcon: { width: 16, height: 16 },
  addBtnText: { fontSize: 12, color: '#000', fontWeight: '500' },
  addCenter: {
    flex: 1,
    height: 60,
    backgroundColor: '#FFFBEA',
    paddingTop: 7,
    paddingLeft: 20,
  },
  addScrollContent: { paddingRight: 10 },
  addItem: { position: 'relative', marginRight: 10 },
  addItemBg: { width: 42, height: 42, justifyContent: 'center', alignItems: 'center' },
  addItemImg: { width: '80%', height: '80%' },
  closeBtn: { position: 'absolute', right: 0, top: 0, width: 13, height: 13 },
  closeIcon: { width: '100%', height: '100%' },

  // 底部按钮
  bottomContainer: { alignItems: 'center', marginTop: -10 },
  bottomBtn: { alignItems: 'center' },
  bottomBtnBg: {
    width: 160,
    height: 60,
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: 4,
  },
  bottomBtnText: {
    color: '#fff',
    fontSize: 15,
    fontWeight: 'bold',
    textShadowColor: '#000',
    textShadowOffset: { width: 1, height: 1 },
    textShadowRadius: 1,
  },
  bottomTip: {
    color: 'rgba(255,255,255,0.67)',
    fontSize: 10,
    textAlign: 'center',
    marginTop: 5,
  },
});