import { useAppSelector } from '@/app/hooks'
import { EventErrorSnackbar } from '@/components/Error/ErrorSnackbar'
import { useMemo, useState } from 'react'

export default function ImportAlert() {
  const calendars = useAppSelector(state => state.calendars.list)
  const [dismissedErrors, setDismissedErrors] = useState<Set<string>>(new Set())

  // Collect all errors from all events in all calendars
  const errors = useMemo(() => {
    const errorList: { id: string; message: string }[] = []
    Object.values(calendars || {}).forEach(calendar => {
      if (calendar.events) {
        Object.values(calendar.events).forEach(event => {
          if (event.error) {
            errorList.push({
              id: event.uid,
              message: event.error
            })
          }
        })
      }
    })
    return errorList
  }, [calendars])

  // Filter out dismissed errors
  const activeErrors = useMemo(() => {
    return errors.filter(e => !dismissedErrors.has(e.id))
  }, [errors, dismissedErrors])

  const messages = activeErrors.map(e => e.message)

  const handleClose = () => {
    // Mark all currently active errors as dismissed
    setDismissedErrors(prev => {
      const next = new Set(prev)
      activeErrors.forEach(e => next.add(e.id))
      return next
    })
  }

  // If new errors appear that were previously dismissed (e.g. re-fetch),
  // we might want to un-dismiss them, but for now simple dismissal is enough.
  // Actually, if the error persists in the store, it's the same error.
  // If the user fixes it and it comes back, it might be a new fetch.
  // But usually uid is stable.

  if (messages.length === 0) {
    return null
  }

  return <EventErrorSnackbar messages={messages} onClose={handleClose} />
}
