import React, { useEffect } from 'react'
import { X } from 'lucide-react'

export interface ToastNotification {
  id: string
  title: string
  message: string
  icon?: string
  type?: 'success' | 'error' | 'info' | 'warning' | 'review'
  thumbnailUrl?: string
}

interface NotificationToastProps {
  notifications: ToastNotification[]
  onDismiss: (id: string) => void
}

// Individual notification component with auto-dismiss
const ToastItem: React.FC<{ notification: ToastNotification; onDismiss: (id: string) => void }> = ({ notification, onDismiss }) => {
  useEffect(() => {
    // Auto-dismiss after 8 seconds
    const timer = setTimeout(() => {
      onDismiss(notification.id)
    }, 8000)

    return () => clearTimeout(timer)
  }, [notification.id, onDismiss])

  const getColorClasses = (type?: string) => {
    switch (type) {
      case 'success':
        return 'bg-green-50 dark:bg-green-900/90 border-green-200 dark:border-green-700'
      case 'error':
        return 'bg-red-50 dark:bg-red-900/90 border-red-200 dark:border-red-700'
      case 'warning':
      case 'review':
        return 'bg-yellow-50 dark:bg-yellow-900/90 border-yellow-200 dark:border-yellow-700'
      default:
        return 'bg-blue-50 dark:bg-blue-900/90 border-blue-200 dark:border-blue-700'
    }
  }

  return (
    <div className="animate-slide-in-right">
      <div className={`${getColorClasses(notification.type)} border rounded-lg shadow-lg p-3 w-full`}>
        <div className="flex items-start space-x-3 h-full">
          {notification.icon && (
            <div className="flex-shrink-0 text-2xl">
              {notification.icon}
            </div>
          )}
          {notification.thumbnailUrl && (
            <img
              src={notification.thumbnailUrl}
              alt="Thumbnail"
              className="w-12 h-12 rounded object-cover flex-shrink-0"
            />
          )}
          <div className="flex-1 min-w-0">
            <p className="text-sm font-semibold text-slate-900 dark:text-slate-100 line-clamp-2">
              {notification.title}
            </p>
            <p className="text-sm text-slate-600 dark:text-slate-400 mt-1 line-clamp-3">
              {notification.message}
            </p>
          </div>
          <button
            onClick={() => onDismiss(notification.id)}
            className="flex-shrink-0 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors p-2 -mr-2 min-w-[44px] min-h-[44px] flex items-center justify-center"
            aria-label="Dismiss notification"
          >
            <X className="w-5 h-5" />
          </button>
        </div>
      </div>
    </div>
  )
}

const NotificationToast: React.FC<NotificationToastProps> = ({ notifications, onDismiss }) => {
  return (
    <div className="fixed top-32 md:top-20 z-50 space-y-2 w-96 max-w-[calc(100vw-2rem)] left-1/2 -translate-x-1/2 md:left-auto md:right-4 md:translate-x-0 px-4 md:px-0">
      {notifications.map((notification) => (
        <ToastItem
          key={notification.id}
          notification={notification}
          onDismiss={onDismiss}
        />
      ))}
    </div>
  )
}

export default NotificationToast
