asios/app/weal/wish.tsx

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

import { Images } from '@/constants/images';
import { get } from '@/services/http';

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`,
  left: `${CDN_BASE}/box/detail/left.png`,
  right: `${CDN_BASE}/box/detail/right.png`,
};

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

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

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 loadData = useCallback(async () => {
    try {
      const res = await get('/api/wish/list');
      if (res.data && res.data.length > 0) {
        setTableData(res.data);
      }
    } catch (error) {
      console.error('加载祈愿数据失败:', error);
    }
  }, []);

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

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

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

  const currentItem = tableData[active];
  const remaining = currentItem ? currentItem.quantity - currentItem.completeQuantity : 0;

  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>

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

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

          {/* 规则按钮 */}
          <TouchableOpacity style={styles.ruleBtn}>
            <Image source={{ uri: wishImages.rule }} style={styles.ruleBtnImg} contentFit="contain" />
          </TouchableOpacity>

          {/* 商品轮播 */}
          <View style={styles.swiperBox}>
            {active > 0 && (
              <TouchableOpacity style={styles.prevBtn} onPress={handlePrev}>
                <Image source={{ uri: wishImages.left }} style={styles.arrowImg} contentFit="contain" />
              </TouchableOpacity>
            )}

            <View style={styles.cardBox}>
              {currentItem && (
                <View style={styles.card}>
                  <View style={styles.imgBox}>
                    <Image source={{ uri: currentItem.spu?.cover }} style={styles.spuImage} contentFit="contain" />
                    <View style={styles.remainingBox}>
                      <Text style={styles.remainingText}>仅剩：{remaining}</Text>
                    </View>
                  </View>
                  <Text style={styles.cardName} numberOfLines={1}>{currentItem.name}</Text>
                </View>
              )}
            </View>

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

          {/* 进度条 */}
          <View style={styles.progressSection}>
            <Text style={styles.progressLabel}>进度：</Text>
            <View style={styles.progressBar}>
              <View style={[styles.progressFill, { width: `${progress}%` }]} />
            </View>
            <Text style={styles.progressText}>{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}>
                <ImageBackground source={{ uri: wishImages.addBg }} style={styles.addBtnBg} resizeMode="contain">
                  <Image source={{ uri: `${CDN_BASE}/welfare/add.png` }} style={styles.addIcon} contentFit="contain" />
                  <Text style={styles.addBtnText}>添加</Text>
                </ImageBackground>
              </TouchableOpacity>
              <View style={styles.addCenter}>
                <ScrollView horizontal showsHorizontalScrollIndicator={false}>
                  {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} contentFit="cover" />
                      </ImageBackground>
                      <TouchableOpacity style={styles.closeBtn}>
                        <Image source={{ uri: wishImages.addClose }} style={styles.closeIcon} contentFit="contain" />
                      </TouchableOpacity>
                    </View>
                  ))}
                  {/* 空位占位 */}
                  {Array.from({ length: Math.max(0, 6 - goodsList.length) }).map((_, i) => (
                    <View key={`empty-${i}`} style={styles.emptySlot} />
                  ))}
                </ScrollView>
              </View>
            </View>
          </ImageBackground>

          {/* 底部按钮 */}
          <TouchableOpacity style={styles.bottomBtn}>
            <ImageBackground source={{ uri: Images.common.butBgHui }} style={styles.bottomBtnBg} resizeMode="contain">
              <Text style={styles.bottomBtnText}>还差一点点，去收集</Text>
            </ImageBackground>
          </TouchableOpacity>

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

          <View style={{ height: 100 }} />
        </ScrollView>
      </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 },

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

  ruleBtn: { position: 'absolute', left: 0, top: 180, zIndex: 10 },
  ruleBtnImg: { width: 39, height: 20 },

  swiperBox: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', paddingHorizontal: 20 },
  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: 275 },
  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 },

  progressSection: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', marginTop: 5, paddingHorizontal: 20 },
  progressLabel: { color: '#fff', fontSize: 12, width: 40 },
  progressBar: { flex: 1, height: 14, backgroundColor: '#FFEABE', borderWidth: 2, borderColor: '#000', marginHorizontal: 5 },
  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', paddingLeft: 20, paddingTop: 7 },
  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%' },
  emptySlot: { width: 42, height: 42, backgroundColor: '#f0f0f0', borderWidth: 1, borderColor: '#ddd', marginRight: 10 },

  bottomBtn: { alignItems: 'center', marginTop: -10 },
  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 },
});