import { Images } from '@/constants/images';
import { ImageBackground } from 'expo-image';
import React, { forwardRef, useImperativeHandle, useState } from 'react';
import { Image, Modal, StyleSheet, Text, TouchableOpacity, View } from 'react-native';

export interface CatchRuleModalRef {
    show: () => void;
    close: () => void;
}

export const CatchRuleModal = forwardRef<CatchRuleModalRef>((_, ref) => {
    const [visible, setVisible] = useState(false);

    useImperativeHandle(ref, () => ({
        show: () => setVisible(true),
        close: () => setVisible(false),
    }));

    if (!visible) return null;

    return (
        <Modal visible={visible} transparent animationType="fade" onRequestClose={() => setVisible(false)}>
            <View style={styles.overlay}>
                <View style={styles.contentContainer}>
                    <ImageBackground
                        source={{ uri: Images.welfare.qijiWelfareDollRule }}
                        style={styles.bgContainer}
                        resizeMode="stretch"
                    >
                        <View style={styles.titleContainer}>
                            <Text style={styles.title}>扭蛋机 玩法规则</Text>
                        </View>
                        <View style={styles.textContent}>
                            <Text style={styles.textTitle}>扭蛋机规则</Text>
                            <Text style={styles.text}>一个源力币可以扭动一次旋钮，按照需求可选择“扭一次”或“扭五次”，扭动后随机掉落捣蛋机内物品。</Text>
                            <Text style={styles.textTitle}>源力币获取途径</Text>
                            <Text style={styles.text}>在宝箱中购买超神或欧皇款后，系统自动发放源力市。</Text>
                            <Text style={styles.text}>(超神款2个，欧皇款1个)</Text>
                            <Text style={[styles.text, { marginTop: 10, color: '#999', fontSize: 10 }]}>特别声明：扭蛋机及相关福利活动由艾斯潮盒官方发起，与苹果公司（Apple Inc.）无关。苹果不是赞助商，也没有以任何形式参与。</Text>
                        </View>
                    </ImageBackground>
                    <TouchableOpacity onPress={() => setVisible(false)} style={styles.closeBtn}>
                        <Image source={{ uri: Images.mine.dialogClose }} style={styles.closeIcon} />
                    </TouchableOpacity>
                </View>
            </View>
        </Modal>
    );
});

const styles = StyleSheet.create({
    overlay: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0,0.6)',
        justifyContent: 'center',
        alignItems: 'center',
    },
    contentContainer: {
        width: '100%',
        alignItems: 'center',
    },
    bgContainer: {
        width: 357, // 714rpx
        height: 290, // adjusted for disclaimer
        paddingTop: 32, // 64rpx
        alignItems: 'center',
    },
    titleContainer: {
        alignItems: 'center',
        marginBottom: 10,
    },
    title: {
        fontSize: 18,
        fontWeight: 'bold',
        color: 'rgba(255,255,255,0.68)',
        textShadowColor: '#07004A',
        textShadowOffset: { width: 1, height: 1 },
        textShadowRadius: 1,
    },
    textContent: {
        paddingHorizontal: 15,
        marginTop: 10,
        width: '100%',
    },
    textTitle: {
        textAlign: 'center',
        fontSize: 16,
        fontWeight: 'bold',
        color: '#000',
        marginVertical: 5,
    },
    text: {
        fontSize: 12,
        color: '#000',
        lineHeight: 18,
        marginBottom: 4,
    },
    closeBtn: {
        marginTop: 20,
    },
    closeIcon: {
        width: 30,
        height: 30,
    }
});