import React from 'react'
import { ViewStyle, Pressable, StyleSheet, View, Text, Platform } from 'react-native'
import { Image } from 'expo-image'
import { BlurView } from 'expo-blur'
import { RightArrowIcon } from '@/components/icon'
export interface NotificationProps {
    /**
     * 未读数量
     */
    count?: number
    /**
     * 是否显示通知
     */
    visible?: boolean
    /**
     * 点击事件
     */
    onPress?: () => void
    /**
     * 自定义样式
     */
    style?: ViewStyle
    /**
     * 最大显示数量，超过显示 99+
     */
    maxCount?: number
    /**
     * 通知标题
     */
    title?: string
    /**
     * 通知内容
     */
    message?: string
}

/**
 * 通知组件
 * 基于 Figma 设计实现的通知横幅组件
 * 尺寸: 359x60
 */
const Notification: React.FC<NotificationProps> = ({
    count = 0,
    visible = true,
    onPress,
    style,
    title,
    message,
}) => {
    const shouldShow = visible && count > 0

    if (!shouldShow) {
        return null
    }

    return (
        <Pressable
            onPress={onPress}
            style={[styles.container, style]}
            disabled={!onPress}
        >
            <BlurView
                intensity={Platform.OS === 'ios' ? 50 : 50}
                tint={Platform.OS === 'ios' ? 'dark' : 'default'}
                style={styles.notificationBanner}
            >
                <View style={styles.notificationBannerIcon}>
                    <Image
                        source={require('@/assets/images/generate.png')}
                        style={styles.iconImage}
                        contentFit="contain"
                    />
                </View>
                <View style={styles.contentWrapper}>
                    {title && (
                        <Text style={styles.title}>
                            {title}
                        </Text>
                    )}
                    {message && (
                        <Text style={styles.message} numberOfLines={1}>
                            {message}
                        </Text>
                    )}
                </View>
                <View style={styles.badgeContainer}>
                    <RightArrowIcon/>
                </View>
            </BlurView>
        </Pressable>
    )
}

const styles = StyleSheet.create({
    container: {
        width: '100%',
    },
    notificationBanner: {
        height: 60,
        width: '100%',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        borderRadius: 12,
        backgroundColor: Platform.OS === 'ios' ? '#FFFFFF1A' : '#FFFFFF1A',
        overflow: 'hidden',
        paddingHorizontal: 16,
    },
    notificationBannerIcon: {
        width: 32,
        height: 32,
        alignItems: 'center',
        justifyContent: 'center',
        marginRight: 12,
    },
    iconImage: {
        width: 32,
        height: 32,
    },
    contentWrapper: {
        flex: 1,
    },
    title: {
        marginBottom: 2,
        fontSize: 14,
        fontWeight: '600',
        color: '#F5F5F5',
    },
    message: {
        fontSize: 12,
        color: '#CCCCCC',
    },
    badgeContainer: {
        marginLeft: 12,
        minWidth: 20,
        alignItems: 'center',
        justifyContent: 'center',
    },
})

export default Notification