'use client'

import { useEffect } from 'react'
import { useSearchParams, useRouter, usePathname } from 'next/navigation'
import { toast } from 'sonner'
import { debugProps } from '@/lib/debug'

const ALERT_MESSAGES: Record<string, string> = {
  product_unavailable: 'Je actieve product is niet meer beschikbaar',
}

export function AlertToast() {
  const searchParams = useSearchParams()
  const router = useRouter()
  const pathname = usePathname()
  const alert = searchParams.get('alert')

  useEffect(() => {
    if (!alert || !ALERT_MESSAGES[alert]) return
    toast.error(ALERT_MESSAGES[alert])
    const params = new URLSearchParams(searchParams.toString())
    params.delete('alert')
    const next = params.toString() ? `${pathname}?${params}` : pathname
    router.replace(next)
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [alert])

  return <span {...debugProps('alert-toast')} hidden />
}