// @design-system: feedback/EmailVerificationBanner
/**
 * EmailVerificationBanner — sticky soft-gate banner for unverified email.
 *
 * Shown at the top of protected pages when the user's email is unverified.
 * Provides a resend-link CTA and a per-session dismiss action.
 *
 * Dismiss persists in sessionStorage so it resurfaces on next session.
 *
 * @example
 * <EmailVerificationBanner
 *   email="me@example.com"
 *   onResend={() => resendMutation.mutateAsync()}
 *   resending={resendMutation.isPending}
 * />
 */

import { useState } from 'react';
import { useT } from '@/lib/i18n/react';
import { Button } from '@/components/ui/primitives/Button';
import { Icon } from '@/components/ui/icons/Icon';
import { bannerVariants } from './variants';

const STORAGE_KEY = 'verify-banner-dismissed';

export interface EmailVerificationBannerProps {
  /** The user's unverified email address — displayed in the banner body. */
  email: string;
  /** Async callback to resend the verification email. */
  onResend: () => Promise<void>;
  /** When true, the resend button is disabled (request in flight). */
  resending: boolean;
}

/**
 * Sticky warning banner prompting the user to verify their email.
 *
 * Mounts as `role="region"` with an accessible label. Dismissible per-session
 * via sessionStorage — rerenders null immediately on dismiss without
 * server round-trip.
 */
export function EmailVerificationBanner({
  email,
  onResend,
  resending,
}: EmailVerificationBannerProps) {
  const t = useT('auth_flow');

  // Lazy initializer — read sessionStorage once on mount, no useEffect + setState.
  const [dismissed, setDismissed] = useState<boolean>(() => {
    if (typeof window === 'undefined') return false;
    return sessionStorage.getItem(STORAGE_KEY) === '1';
  });

  if (dismissed) return null;

  const handleDismiss = () => {
    sessionStorage.setItem(STORAGE_KEY, '1');
    setDismissed(true);
  };

  return (
    <div
      role="region"
      aria-label={t('verify_email_banner_title')}
      aria-live="polite"
      className={bannerVariants()}
    >
      <Icon name="AlertTriangle" size="sm" />
      <div className="flex-1 text-sm">
        <strong>{t('verify_email_banner_title')}</strong>{' '}
        <span>{t('verify_email_banner_body').replace('{email}', email)}</span>
      </div>
      <Button
        type="button"
        variant="secondary"
        size="sm"
        loading={resending}
        onClick={() => void onResend()}
      >
        {t('verify_email_banner_cta')}
      </Button>
      <Button
        type="button"
        variant="ghost"
        size="sm"
        aria-label={t('verify_email_banner_dismiss')}
        onClick={handleDismiss}
      >
        {t('verify_email_banner_dismiss')}
      </Button>
    </div>
  );
}