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

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

export const LackMolibModal = forwardRef<LackMolibModalRef>((_, ref) => {
    const [visible, setVisible] = useState(false);
    const router = useRouter();

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

    const handleSubmit = () => {
        setVisible(false);
        // Navigate to box homepage
        router.push('/box');
    }

    if (!visible) return null;

    return (
        <Modal visible={visible} transparent animationType="fade" onRequestClose={() => setVisible(false)}>
            <View style={styles.overlay}>
                <TouchableOpacity style={styles.mask} activeOpacity={1} onPress={() => setVisible(false)} />
                <View style={styles.contentContainer}>
                    <View style={styles.wrapper}>
                        <ImageBackground source={{ uri: Images.welfare.welfareDialogMain }} style={styles.main} resizeMode="stretch">
                            <Text style={styles.imgText}>尊主大人的源力币不够啦， 快去收集源力币吧。</Text>
                        </ImageBackground>
                        <TouchableOpacity onPress={handleSubmit}>
                            <ImageBackground source={{ uri: Images.welfare.welfareDialogSubmit }} style={styles.submitBtn} resizeMode="stretch">
                                <Text style={styles.btnText}>收集源力币</Text>
                            </ImageBackground>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        </Modal>
    );
});

const styles = StyleSheet.create({
    overlay: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0,0.6)',
        justifyContent: 'center',
        alignItems: 'center',
    },
    mask: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
    },
    contentContainer: {
        width: '100%',
        alignItems: 'center',
    },
    wrapper: {
        marginTop: 33,
        alignItems: 'center',
    },
    main: {
        width: 357, // 714rpx
        height: 142, // 284rpx
        justifyContent: 'center',
        alignItems: 'center',
        marginBottom: 17,
        paddingHorizontal: 25,
    },
    imgText: {
        fontWeight: 'bold',
        fontSize: 20,
        color: '#000',
        textAlign: 'center',
    },
    submitBtn: {
        width: 179, // 358rpx
        height: 57, // 114rpx
        justifyContent: 'center',
        alignItems: 'center',
        paddingTop: 5,
    },
    btnText: {
        fontSize: 17.5, // 35rpx
        color: '#fff',
        textShadowColor: '#000',
        textShadowOffset: { width: 1, height: 1 },
        textShadowRadius: 1,
    }
});