import { type FC, useEffect } from 'react'
import { CloseCircle, NotificationBing, ShoppingBag, MessageText1 } from 'iconsax-react'
import Button from '@/components/Button'
import { NotificationSubject } from '@/types/notification.types'

interface NotificationItemProps {
    id: string
    subject: string
    body: string
    onRemove: (id: string) => void
    audioEnabled: boolean
}

const NotificationItem: FC<NotificationItemProps> = ({ id, subject, body, onRemove, audioEnabled }) => {
    useEffect(() => {
        if (!audioEnabled) {
            return
        }

        const playNotificationSound = async () => {
            try {
                const audio = new Audio('/mixkit-correct-answer-tone-2870.wav')
                audio.volume = 0.5

                audio.addEventListener('error', (err) => {
                    console.error('❌ خطا در لود فایل صوتی:', err)
                }, { once: true })

                await audio.play()
            } catch (err) {
                console.warn('خطا در پخش صدا:', err)
            }
        }

        playNotificationSound()
    }, [audioEnabled])
    const getNotificationConfig = (subjectType: string) => {
        switch (subjectType) {
            case NotificationSubject.PAGER_CREATED:
                return {
                    icon: <MessageText1 color="white" size={16} variant="Bold" />,
                    title: 'پیجر جدید',
                }
            case NotificationSubject.ORDER_CREATED:
                return {
                    icon: <ShoppingBag color="white" size={16} variant="Bold" />,
                    title: 'سفارش جدید',
                }
            default:
                return {
                    icon: <NotificationBing color="white" size={16} variant="Bold" />,
                    title: 'اطلاعیه',
                }
        }
    }

    const config = getNotificationConfig(subject)

    return (
        <div className="bg-white border border-gray-200 rounded-lg p-3 shadow-sm transition-all duration-200 hover:shadow-md">
            <div className="flex items-start gap-2.5">
                <div className="bg-black p-1.5 rounded flex-shrink-0">
                    <div className="text-white">
                        {config.icon}
                    </div>
                </div>
                <div className="flex-1 min-w-0">
                    <div className="flex items-center justify-between mb-1">
                        <h4 className="text-xs font-semibold text-gray-900">
                            {config.title}
                        </h4>
                        <button
                            onClick={() => onRemove(id)}
                            className="flex-shrink-0 text-gray-400 hover:text-gray-600 transition-colors p-0.5 rounded hover:bg-gray-100"
                            aria-label="بستن"
                        >
                            <CloseCircle color="gray" size={18} />
                        </button>
                    </div>
                    <p className="text-xs text-gray-700 leading-relaxed mb-2">
                        {body || 'نوتیفیکیشن جدید'}
                    </p>
                    <div className="flex justify-end">
                        <Button
                            onClick={() => onRemove(id)}
                            className="w-fit px-4 h-7 text-xs"
                        >
                            دیدم
                        </Button>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default NotificationItem