'use client'

import Link from 'next/link'
import { useEffect, useState } from 'react'

import { ACCOUNT_SUSPENSION_CHANGED_EVENT, ACCOUNT_SUSPENSION_STORAGE_KEY, isAccountSuspended } from '@/lib/accountSuspension'
import { texts } from '@/texts'

export const AccountSuspensionBanner = () => {
  const [isSuspended, setIsSuspended] = useState(false)

  useEffect(() => {
    const sync = () => {
      setIsSuspended(isAccountSuspended())
    }
    const handleStorage = (event: StorageEvent) => {
      if (event.key === ACCOUNT_SUSPENSION_STORAGE_KEY) sync()
    }

    sync()
    window.addEventListener(ACCOUNT_SUSPENSION_CHANGED_EVENT, sync)
    window.addEventListener('storage', handleStorage)

    return () => {
      window.removeEventListener(ACCOUNT_SUSPENSION_CHANGED_EVENT, sync)
      window.removeEventListener('storage', handleStorage)
    }
  }, [])

  if (!isSuspended) return null

  return (
    <div
      aria-live="assertive"
      className="sticky inset-x-0 top-0 z-[10001] flex w-full flex-wrap items-center justify-center gap-x-2 gap-y-1 bg-fourth-700 px-4 py-3 text-center text-sm font-medium text-white"
      role="alert"
    >
      <span>{texts.common.accountSuspendedBanner}</span>
      <Link
        className="font-bold text-white underline underline-offset-4"
        href="/contact"
      >
        {texts.common.contactSupport}
      </Link>
    </div>
  )
}