asios/app/weal/detail.tsx

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

import { Images } from '@/constants/images';
import { getWealDetail, getWinningRecord, joinWealRoom } from '@/services/weal';

const TYPE_MAP: any = {
    COMMON: { title: '福利房' },
    PASSWORD: { title: '口令房' },
    ACHIEVEMENT: { title: '成就房' },
    EUROPEAN_GAS: { title: '欧气房' },
    HONOR_ROLL: { title: '荣耀榜' },
};

export default function WealDetailScreen() {
    const { id } = useLocalSearchParams<{ id: string }>();
    const router = useRouter();
    const insets = useSafeAreaInsets();
    const [loading, setLoading] = useState(true);
    const [data, setData] = useState<any>(null);
    const [leftTime, setLeftTime] = useState(0);
    const [scrollTop, setScrollTop] = useState(0);
    const [winVisible, setWinVisible] = useState(false);
    const [winRecords, setWinRecords] = useState([]);
    const [joinVisible, setJoinVisible] = useState(false);
    const [password, setPassword] = useState('');

    const timerRef = useRef<any>(null);

    const loadData = useCallback(async (showLoading = false) => {
        if (showLoading) setLoading(true);
        try {
            const res = await getWealDetail(id as string);
            if (res) {
                setData(res);
                setLeftTime(res.leftTime);
            }
        } catch (error) {
            console.error('加载详情失败:', error);
        }
        setLoading(false);
    }, [id]);

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

    useEffect(() => {
        if (data?.status === 1 && leftTime > 0) {
            startTimer();
        } else {
            stopTimer();
        }
    }, [data, leftTime]);

    const startTimer = () => {
        stopTimer();
        timerRef.current = setInterval(() => {
            setLeftTime(prev => {

                if (prev <= 0) {
                    stopTimer();
                    loadData();
                    return 0;
                }
                return prev - 1000;
            });
        }, 1000);
    };

    const stopTimer = () => {
        if (timerRef.current) {
            clearInterval(timerRef.current);
            timerRef.current = null;
        }
    };

    const formatLeftTime = () => {
        if (leftTime <= 0) return '00:00:00';
        let second = Math.floor(leftTime / 1000);
        const d = Math.floor(second / (24 * 3600));
        second %= 24 * 3600;
        const h = Math.floor(second / 3600);
        second %= 3600;
        const m = Math.floor(second / 60);
        const s = second % 60;

        let res = '';
        if (d > 0) res += `${d}天`;
        res += `${h.toString().padStart(2, '0')}时${m.toString().padStart(2, '0')}分${s.toString().padStart(2, '0')}秒`;
        return res;
    };

    const handleJoin = async () => {
        if (data.status !== 1 || data.myParticipatedFlag === 1) return;

        if (data.type === 'PASSWORD') {
            setJoinVisible(true);
        } else {
            try {
                const res = await joinWealRoom(id as string, '');
                if (res.success) {
                    Alert.alert('提示', '加入成功');
                    loadData();
                } else {
                    Alert.alert('错误', res.msg || '加入失败');
                }
            } catch (error) {
                Alert.alert('错误', '请求异常');
            }
        }
    };

    const handleJoinWithPassword = async () => {
        if (!password) return;
        try {
            const res = await joinWealRoom(id as string, password);
            if (res.success) {
                Alert.alert('提示', '加入成功');
                setJoinVisible(false);
                setPassword('');
                loadData();
            } else {
                Alert.alert('错误', res.msg || '口令错误');
            }
        } catch (error) {
            Alert.alert('错误', '请求异常');
        }
    };

    const showWinRecords = async () => {
        try {
            const res = await getWinningRecord(id as string);
            setWinRecords(res || []);
            setWinVisible(true);
        } catch (error) {
            console.error('获取中奖记录失败:', error);
        }
    };

    if (loading) {
        return <View style={styles.loading}><ActivityIndicator color="#fff" /></View>;
    }

    const headerBg = scrollTop > 50 ? '#333' : 'transparent';

    return (
        <View style={styles.container}>
            <StatusBar barStyle="light-content" />
            <ImageBackground source={{ uri: Images.mine.kaixinMineBg }} style={styles.background} resizeMode="cover">
                {/* 导航 */}
                <View style={[styles.nav, { paddingTop: insets.top, backgroundColor: headerBg }]}>
                    <TouchableOpacity onPress={() => router.back()} style={styles.backBtn}>
                        <Text style={styles.backText}>←</Text>
                    </TouchableOpacity>
                    <Text style={styles.navTitle}>{TYPE_MAP[data.type]?.title || '详情'}</Text>
                    <View style={styles.placeholder} />
                </View>

                <ScrollView
                    style={styles.scrollView}
                    onScroll={e => setScrollTop(e.nativeEvent.contentOffset.y)}
                    scrollEventThrottle={16}
                    showsVerticalScrollIndicator={false}
                >
                    <ImageBackground source={{ uri: Images.mine.kaixinMineHeadBg }} style={styles.headerBg} resizeMode="cover" />

                    <View style={styles.content}>
                        <View style={styles.roomInfo}>
                            <Text style={styles.roomName}>{data.name}</Text>
                            <View style={styles.roomType}>
                                <Text style={styles.roomTypeText}>{TYPE_MAP[data.type]?.title}</Text>
                            </View>
                            <Text style={styles.roomDesc} numberOfLines={1}>{data.description}</Text>
                        </View>

                        {/* 中奖记录按钮 */}
                        {data.prizeMode !== 1 && data.type !== 'EUROPEAN_GAS' && (
                            <TouchableOpacity style={styles.recordBtn} onPress={showWinRecords}>
                                <ImageBackground source={{ uri: Images.welfare.detail.record }} style={styles.recordBtnBg} resizeMode="contain">
                                    <Image source={{ uri: Images.welfare.detail.recordIcon }} style={styles.recordIcon} contentFit="contain" />
                                    <Text style={styles.recordBtnText}>中奖记录</Text>
                                </ImageBackground>
                            </TouchableOpacity>
                        )}

                        {/* 赠品池 */}
                        <View style={styles.goodsCard}>
                            <View style={styles.cardHeader}>
                                <Text style={styles.cardTitle}>赠品池</Text>
                                <Text style={styles.cardNum}>{data.luckRoomGoodsList?.length}件赠品</Text>
                            </View>

                            <View style={styles.goodsList}>
                                {data.luckRoomGoodsList?.map((item: any, index: number) => (
                                    <View key={index} style={styles.goodsItem}>
                                        <Image source={{ uri: item.spu.cover }} style={styles.goodsImg} contentFit="contain" />
                                        <Text style={styles.goodsName} numberOfLines={1}>{item.spu.name}</Text>
                                        <View style={styles.goodsCountTag}>
                                            <Text style={styles.goodsCountText}>数量：{item.quantity}</Text>
                                        </View>
                                    </View>
                                ))}
                            </View>
                        </View>

                        {/* 参与度 */}
                        <View style={styles.participantSection}>
                            <View style={styles.cardHeader}>
                                <Text style={styles.cardTitle}>参与度</Text>
                                <Text style={styles.cardNum}>{data.participatingList?.length}个玩家</Text>
                            </View>
                            <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.userList}>
                                {data.participatingList?.map((user: any, index: number) => (
                                    <View key={index} style={styles.userItem}>
                                        <Image source={{ uri: user.avatar }} style={styles.userAvatar} />
                                        <Text style={styles.userName} numberOfLines={1}>{user.nickname}</Text>
                                    </View>
                                ))}
                            </ScrollView>
                        </View>
                    </View>
                    <View style={{ height: 120 }} />
                </ScrollView>

                {/* 底部按钮栏 */}
                <View style={[styles.bottomBar, { paddingBottom: insets.bottom + 10 }]}>
                    {data.status === 1 && (
                        <View style={styles.timerRow}>
                            <Text style={styles.timerLabel}>倒计时：</Text>
                            <Text style={styles.timerValue}>{formatLeftTime()}</Text>
                        </View>
                    )}
                    <TouchableOpacity
                        style={[styles.joinBtn, (data.myParticipatedFlag === 1 || data.status !== 1) && styles.joinBtnDisabled]}
                        onPress={handleJoin}
                        disabled={data.myParticipatedFlag === 1 || data.status !== 1}
                    >
                        <ImageBackground
                            source={{ uri: data.status === 1 ? Images.common.loginBtn : undefined }}
                            style={styles.joinBtnBg}
                            resizeMode="stretch"
                        >
                            <Text style={styles.joinBtnText}>
                                {data.status !== 1 ? '已开奖' : data.myParticipatedFlag === 1 ? (
                                    data.participateMode === 1 && data.myAuditStatus === 0 ? '待审核' :
                                        data.participateMode === 1 && data.myAuditStatus === 1 ? '审核不通过' :
                                            '等待开赏'
                                ) : '加入房间，即可参与'}
                            </Text>
                        </ImageBackground>
                    </TouchableOpacity>
                </View>

                {/* 口令弹窗 */}
                <Modal visible={joinVisible} transparent animationType="fade">
                    <View style={styles.modalOverlay}>
                        <View style={styles.modalContent}>
                            <Text style={styles.modalTitle}>请输入房间口令</Text>
                            <TextInput
                                style={styles.modalInput}
                                value={password}
                                onChangeText={setPassword}
                                placeholder="请输入口令"
                            />
                            <View style={styles.modalBtns}>
                                <TouchableOpacity style={styles.modalBtn} onPress={() => setJoinVisible(false)}>
                                    <Text style={styles.modalBtnText}>取消</Text>
                                </TouchableOpacity>
                                <TouchableOpacity style={[styles.modalBtn, styles.modalBtnConfirm]} onPress={handleJoinWithPassword}>
                                    <Text style={styles.modalBtnText}>确认加入</Text>
                                </TouchableOpacity>
                            </View>
                        </View>
                    </View>
                </Modal>

                {/* 中奖记录弹窗 */}
                <Modal visible={winVisible} transparent animationType="slide">
                    <View style={styles.winOverlay}>
                        <View style={styles.winContent}>
                            <View style={styles.winHeader}>
                                <Text style={styles.winTitle}>中奖记录</Text>
                                <TouchableOpacity onPress={() => setWinVisible(false)} style={styles.winClose}>
                                    <Text style={styles.winCloseText}>×</Text>
                                </TouchableOpacity>
                            </View>
                            <ScrollView style={styles.winList}>
                                {winRecords.length === 0 ? (
                                    <View style={styles.empty}><Text style={{ color: '#999' }}>暂无记录</Text></View>
                                ) : winRecords.map((item: any, index: number) => (
                                    <View key={index} style={styles.winItem}>
                                        <Image source={{ uri: item.avatar }} style={styles.winAvatar} />
                                        <Text style={styles.winUser}>{item.nickname}</Text>
                                        <Text style={styles.winGot}>获得了</Text>
                                        <Text style={styles.winGoods} numberOfLines={1}>{item.spu.name}</Text>
                                        <Image source={{ uri: item.spu.cover }} style={styles.winGoodsImg} contentFit="contain" />
                                    </View>
                                ))}
                            </ScrollView>
                        </View>
                    </View>
                </Modal>
            </ImageBackground>
        </View>
    );
}

const styles = StyleSheet.create({
    container: { flex: 1 },
    background: { flex: 1 },
    loading: { flex: 1, backgroundColor: '#1a1a2e', justifyContent: 'center', alignItems: 'center' },
    nav: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 15, height: 90, zIndex: 100 },
    backBtn: { width: 40 },
    backText: { color: '#fff', fontSize: 24 },
    navTitle: { color: '#fff', fontSize: 16, fontWeight: 'bold' },
    placeholder: { width: 40 },
    scrollView: { flex: 1 },
    headerBg: { width: '100%', height: 180, position: 'absolute', top: 0 },
    content: { paddingHorizontal: 15, marginTop: 90 },
    roomInfo: { alignItems: 'center', marginBottom: 20 },
    roomName: { color: '#fff', fontSize: 22, fontWeight: 'bold', textShadowColor: '#000', textShadowOffset: { width: 1, height: 1 }, textShadowRadius: 2 },
    roomType: { marginTop: 8, paddingVertical: 4, paddingHorizontal: 12, backgroundColor: 'rgba(255,255,255,0.2)', borderRadius: 10 },
    roomTypeText: { color: '#fff', fontSize: 12 },
    roomDesc: { marginTop: 10, color: '#BEBBB3', fontSize: 12 },

    recordBtn: { position: 'absolute', right: 0, top: 0, zIndex: 10 },
    recordBtnBg: { width: 78, height: 26, justifyContent: 'center', alignItems: 'center', flexDirection: 'row' },
    recordIcon: { width: 16, height: 16, marginRight: 2 },
    recordBtnText: { color: '#fff', fontSize: 12, fontWeight: 'bold', textShadowColor: '#000', textShadowOffset: { width: 1, height: 1 }, textShadowRadius: 1 },

    goodsCard: { marginTop: 25, backgroundColor: 'rgba(255,255,255,0.1)', borderRadius: 15, padding: 15 },
    cardHeader: { flexDirection: 'row', alignItems: 'center', marginBottom: 15 },
    cardTitle: { color: '#fff', fontSize: 18, fontWeight: 'bold' },
    cardNum: { color: '#eee', fontSize: 12, marginLeft: 10 },
    goodsList: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between' },
    goodsItem: { width: '31%', aspectRatio: 0.8, backgroundColor: 'rgba(0,0,0,0.3)', borderRadius: 10, padding: 8, marginBottom: 10, alignItems: 'center' },
    goodsImg: { width: '80%', height: '60%' },
    goodsName: { color: '#fff', fontSize: 10, marginTop: 5 },
    goodsCountTag: { position: 'absolute', left: 0, bottom: 25, backgroundColor: '#FFDD00', paddingHorizontal: 5, borderTopRightRadius: 5, borderBottomRightRadius: 5 },
    goodsCountText: { color: '#000', fontSize: 8, fontWeight: 'bold' },

    participantSection: { marginTop: 20, backgroundColor: 'rgba(255,255,255,0.1)', borderRadius: 15, padding: 15 },
    userList: { flexDirection: 'row' },
    userItem: { alignItems: 'center', marginRight: 15, width: 50 },
    userAvatar: { width: 40, height: 40, borderRadius: 20, borderWidth: 1, borderColor: '#fff' },
    userName: { color: '#fff', fontSize: 8, marginTop: 5, width: '100%', textAlign: 'center' },

    bottomBar: { position: 'absolute', left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.8)', paddingHorizontal: 15, paddingTop: 10 },
    timerRow: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', marginBottom: 10 },
    timerLabel: { color: '#fff', fontSize: 12 },
    timerValue: { color: '#fdf685', fontSize: 12, fontWeight: 'bold' },
    joinBtn: { height: 45, borderRadius: 22.5, width: '100%', overflow: 'hidden' },
    joinBtnDisabled: { backgroundColor: '#666' },
    joinBtnBg: { width: '100%', height: '100%', justifyContent: 'center', alignItems: 'center' },
    joinBtnText: { color: '#fff', fontSize: 14, fontWeight: 'bold' },

    modalOverlay: { flex: 1, backgroundColor: 'rgba(0,0,0,0.6)', justifyContent: 'center', alignItems: 'center' },
    modalContent: { width: '80%', backgroundColor: '#fff', borderRadius: 15, padding: 20, alignItems: 'center' },
    modalTitle: { fontSize: 18, fontWeight: 'bold', marginBottom: 20 },
    modalInput: { width: '100%', height: 45, backgroundColor: '#f5f5f5', borderRadius: 8, paddingHorizontal: 15, marginBottom: 20 },
    modalBtns: { flexDirection: 'row', justifyContent: 'space-between', width: '100%' },
    modalBtn: { flex: 0.45, height: 40, justifyContent: 'center', alignItems: 'center', borderRadius: 20, backgroundColor: '#eee' },
    modalBtnConfirm: { backgroundColor: '#e79018' },
    modalBtnText: { fontWeight: 'bold' },

    winOverlay: { flex: 1, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'flex-end' },
    winContent: { backgroundColor: '#fff', height: '60%', borderTopLeftRadius: 20, borderTopRightRadius: 20, padding: 20 },
    winHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 },
    winTitle: { fontSize: 18, fontWeight: 'bold' },
    winClose: { width: 30, height: 30, backgroundColor: '#eee', borderRadius: 15, justifyContent: 'center', alignItems: 'center' },
    winCloseText: { fontSize: 20, color: '#999' },
    winList: { flex: 1 },
    winItem: { flexDirection: 'row', alignItems: 'center', paddingVertical: 10, borderBottomWidth: 1, borderBottomColor: '#f5f5f5' },
    winAvatar: { width: 30, height: 30, borderRadius: 15 },
    winUser: { marginLeft: 10, fontSize: 12, width: 60 },
    winGot: { fontSize: 12, color: '#999', marginHorizontal: 5 },
    winGoods: { flex: 1, fontSize: 12 },
    winGoodsImg: { width: 30, height: 30, marginLeft: 10 },
    empty: { alignItems: 'center', padding: 30 },
});