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

import { Images } from '@/constants/images';
import { getDateTimeScope, getRoomTypePermission } from '@/services/weal';

export default function WealIndexScreen() {
    const router = useRouter();
    const insets = useSafeAreaInsets();
    const [showSection, setShowSection] = useState(false);
    const [startTime, setStartTime] = useState('');
    const [endTime, setEndTime] = useState('');
    const [wishSwitch, setWishSwitch] = useState(false);
    const [roomSwitch, setRoomSwitch] = useState(false);

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

    const loadConfig = async () => {
        try {
            // 获取时间范围
            const timeRes = await getDateTimeScope();
            if (timeRes && timeRes.startTime && timeRes.endTime) {
                setStartTime(timeRes.startTime.substring(0, 10));
                setEndTime(timeRes.endTime.substring(0, 10));

                const now = new Date().getTime();
                const start = new Date(timeRes.startTime.replace(/-/g, '/')).getTime();
                const end = new Date(timeRes.endTime.replace(/-/g, '/')).getTime();
                setShowSection(now >= start && now <= end);
            }

            // 获取开关配置 (模拟 getParamConfig)
            // 原项目是 getParamConfig('wish_on') 和 getParamConfig('roomcost_on')
            // 这里假设 getRoomTypePermission 中包含相关信息，或者需要额外的配置接口
            const permission = await getRoomTypePermission();
            setRoomSwitch(permission?.roomConfig !== 0);
            setWishSwitch(true); // 默认开启或根据实际接口调整
        } catch (error) {
            console.error('加载福利房配置失败:', error);
        }
    };

    const toRouter = (path: string) => {
        router.push(path as any);
    };

    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 }]}>
                    <Text style={styles.navTitle}>福利</Text>
                </View>

                <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
                    {/* 头部标题区 */}
                    <ImageBackground source={{ uri: Images.welfare.wealTitle }} style={styles.head} resizeMode="contain">
                        <View style={styles.headContent}>
                            <Text style={styles.headTitle}>限时福利活动</Text>
                            <Text style={styles.headSub}>限时活动，不定时开放</Text>
                        </View>
                    </ImageBackground>

                    {/* 活动入口列表 */}
                    {showSection && (
                        <View style={styles.selectSection}>
                            {roomSwitch && (
                                <TouchableOpacity
                                    activeOpacity={0.8}
                                    onPress={() => toRouter('/weal/room')}
                                    style={styles.itemContainer}
                                >
                                    <ImageBackground source={{ uri: Images.welfare.indexItem1 }} style={styles.item} resizeMode="stretch">
                                        <View style={styles.dateTag}>
                                            <Text style={styles.dateText}>开放时间：{startTime}至{endTime}</Text>
                                        </View>
                                    </ImageBackground>
                                </TouchableOpacity>
                            )}

                            <TouchableOpacity
                                activeOpacity={0.8}
                                onPress={() => toRouter('/weal/catchDoll')}
                                style={styles.itemContainer}
                            >
                                <ImageBackground source={{ uri: Images.welfare.indexItem2 }} style={styles.item} resizeMode="stretch">
                                    <View style={styles.dateTag}>
                                        <Text style={styles.dateText}>开放时间：{startTime}至{endTime}</Text>
                                    </View>
                                </ImageBackground>
                            </TouchableOpacity>

                            {wishSwitch && (
                                <TouchableOpacity
                                    activeOpacity={0.8}
                                    onPress={() => toRouter('/weal/wish')}
                                    style={styles.itemContainer}
                                >
                                    <ImageBackground source={{ uri: Images.welfare.indexItem3 }} style={styles.item} resizeMode="stretch">
                                        <View style={styles.dateTag}>
                                            <Text style={styles.dateText}>开放时间：{startTime}至{endTime}</Text>
                                        </View>
                                    </ImageBackground>
                                </TouchableOpacity>
                            )}
                        </View>
                    )}

                    <View style={{ height: 100 }} />
                </ScrollView>
            </ImageBackground>
        </View>
    );
}

const styles = StyleSheet.create({
    container: { flex: 1, backgroundColor: '#52504e' },
    background: { flex: 1 },
    nav: {
        height: 80,
        justifyContent: 'center',
        alignItems: 'center',
        zIndex: 100,
    },
    navTitle: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#fff',
    },
    scrollView: { flex: 1 },
    head: {
        width: '100%',
        height: 192, // 385rpx
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 20,
    },
    headContent: {
        alignItems: 'center',
    },
    headTitle: {
        fontSize: 40, // 80rpx
        fontWeight: 'bold',
        color: '#FDF685',
        textShadowColor: '#E85801',
        textShadowOffset: { width: 1, height: 2 },
        textShadowRadius: 1,
    },
    headSub: {
        fontSize: 15, // 30rpx
        fontWeight: '400',
        color: '#E85801',
        textShadowColor: '#fff',
        textShadowOffset: { width: 1, height: 1 },
        textShadowRadius: 1,
        marginTop: 5,
    },
    selectSection: {
        width: '100%',
        paddingHorizontal: 0,
        marginTop: 15,
    },
    itemContainer: {
        width: '100%',
        height: 130, // 260rpx
        marginBottom: 15,
    },
    item: {
        flex: 1,
        position: 'relative',
    },
    dateTag: {
        position: 'absolute',
        right: 10,
        top: 15,
        backgroundColor: '#FFFFFF',
        borderRadius: 13,
        paddingHorizontal: 10,
        paddingVertical: 2,
    },
    dateText: {
        fontSize: 10,
        fontWeight: '500',
        color: '#000000',
    },
});