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

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

export const WishRecordModal = forwardRef<WishRecordModalRef, {}>((props, ref) => {
    const [visible, setVisible] = useState(false);
    const [list, setList] = useState<any[]>([]);

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

    const loadData = async () => {
        // Reuse catch record API or a new one if specified, for now assuming similar structure
        // If there is no specific API for wish records yet, we might need to add one.
        // Assuming 'getWealRecord' but maybe filtered by type? 
        // For waiting for backend implementation, mock empty or use generic record.
        // Or if 'services/weal.ts' didn't have specific wish record, we stick to placeholder or generic.
        // Actually, let's use a placeholder for now as per plan, or maybe 'getWealRecord'.
        try {
            // const res = await Service.getWishRecord(); // Need to implement if separate
            // For now, let's just show structure
        } catch (e) {
            console.error(e);
        }
    };

    const renderItem = ({ item }: { item: any }) => (
        <View style={styles.item}>
            <Text style={styles.itemText}>{item.createTime}</Text>
            <Text style={styles.itemText}>{item.goodsName}</Text>
        </View>
    );

    if (!visible) return null;

    return (
        <Modal visible={visible} transparent animationType="fade" onRequestClose={() => setVisible(false)}>
            <View style={styles.overlay}>
                <View style={styles.contentContainer}>
                    <ImageBackground style={styles.content} source={{ uri: Images.welfare.welfareDialogBg }} resizeMode="stretch">
                        <View style={styles.titleBox}>
                            <ImageBackground style={styles.titleBg} source={{ uri: Images.common.qijiDialogTitBg }} resizeMode="stretch">
                                <Text style={styles.titleText}>祈愿记录</Text>
                            </ImageBackground>
                        </View>
                        <View style={styles.closeBox}>
                            <TouchableOpacity onPress={() => setVisible(false)}>
                                <Image style={styles.close} source={{ uri: Images.common.closeBut }} />
                            </TouchableOpacity>
                        </View>
                        <View style={styles.listContainer}>
                            <FlatList
                                data={list}
                                renderItem={renderItem}
                                keyExtractor={(item, index) => index.toString()}
                                ListEmptyComponent={<Text style={styles.emptyText}>暂无记录</Text>}
                            />
                        </View>
                    </ImageBackground>
                </View>
            </View>
        </Modal>
    );
});

export default WishRecordModal;

const styles = StyleSheet.create({
    overlay: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0,0.7)',
        justifyContent: 'center',
        alignItems: 'center',
    },
    contentContainer: {
        width: 320,
        height: 450,
        alignItems: 'center',
        justifyContent: 'center',
    },
    content: {
        width: '100%',
        height: '100%',
        alignItems: 'center',
        paddingTop: 40,
        paddingBottom: 20,
    },
    titleBox: {
        position: 'absolute',
        top: -15,
        zIndex: 1,
    },
    titleBg: {
        width: 180,
        height: 50,
        justifyContent: 'center',
        alignItems: 'center',
    },
    titleText: {
        color: '#fff',
        fontSize: 18,
        fontWeight: 'bold',
        marginTop: -5,
    },
    closeBox: {
        position: 'absolute',
        top: 0,
        right: -5,
        zIndex: 2,
    },
    close: {
        width: 30,
        height: 30,
    },
    listContainer: {
        flex: 1,
        width: '90%',
        marginTop: 20,
    },
    item: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingVertical: 10,
        borderBottomWidth: 1,
        borderBottomColor: '#eee',
    },
    itemText: {
        fontSize: 14,
        color: '#333',
    },
    emptyText: {
        textAlign: 'center',
        marginTop: 50,
        color: '#999',
    },
});