'use client'

import { useState } from 'react'
import { Link } from '@/i18n/navigation'
import { useTranslations } from 'next-intl'
import { Mail, X } from 'lucide-react'

interface EmailVerificationBannerProps {
  email: string
}

export default function EmailVerificationBanner({ email }: EmailVerificationBannerProps) {
  const t = useTranslations('Account.emailVerification')
  const [dismissed, setDismissed] = useState(false)
  const [resent, setResent] = useState(false)
  const [isSending, setIsSending] = useState(false)

  if (dismissed) return null

  const handleResend = async () => {
    setIsSending(true)
    try {
      await fetch('/api/frontend/auth/verify-email/send', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'include',
      })
      setResent(true)
    } catch {
      // Non-critical — the "Verify Now" link still works as a fallback.
    } finally {
      setIsSending(false)
    }
  }

  return (
    <div className="flex items-start sm:items-center gap-3 bg-amber-50 border border-amber-200 text-amber-800 text-sm rounded-xl px-4 py-3 mb-6">
      <Mail size={18} className="shrink-0 mt-0.5 sm:mt-0" />
      <div className="flex-1">
        {resent ? (
          <span>{t.rich('resentNotice', { email, strong: (chunks) => <strong>{chunks}</strong> })}</span>
        ) : (
          <span>{t.rich('notice', { email, strong: (chunks) => <strong>{chunks}</strong> })}</span>
        )}
        <div className="flex items-center gap-4 mt-1">
          <Link
            href={`/verify-otp?email=${encodeURIComponent(email)}`}
            className="font-medium underline hover:no-underline"
          >
            {t('verifyNow')}
          </Link>
          {!resent && (
            <button
              type="button"
              onClick={handleResend}
              disabled={isSending}
              className="font-medium underline hover:no-underline disabled:opacity-60"
            >
              {isSending ? t('sending') : t('resendCode')}
            </button>
          )}
        </div>
      </div>
      <button
        type="button"
        onClick={() => setDismissed(true)}
        aria-label={t('dismiss')}
        className="shrink-0 text-amber-500 hover:text-amber-700"
      >
        <X size={16} />
      </button>
    </div>
  )
}