// @design-system: domain/RejectionBannerList

import { useT } from '@/lib/i18n/react';
import { RejectionBanner } from '@/components/ui/domain/RejectionBanner';

/**
 * Shape of an image-rejected notification payload as stored in `notifications.payload`.
 * Matches spec §4.4: { imageId, purpose, reason, replaceHref }
 */
export interface ImageRejectionNotification {
  id: string;
  payload: {
    purpose?: string;
    reason?: string;
    replaceHref?: string;
    [key: string]: unknown;
  };
}

export interface RejectionBannerListProps {
  /** Unresolved image.rejected notifications to display. */
  notifications: ImageRejectionNotification[];
  className?: string;
}

/**
 * Maps upload purpose string → vendor_dashboard i18n title key.
 */
function purposeToTitle(
  t: ReturnType<typeof useT<'vendor_dashboard'>>,
  purpose: string | undefined,
): string {
  switch (purpose) {
    case 'vendor_hero':
      return t('rejection_banner_title_hero');
    case 'vendor_logo':
      return t('rejection_banner_title_logo');
    case 'vendor_gallery':
    case 'user_gallery':
      return t('rejection_banner_title_gallery');
    case 'avatar':
      return t('rejection_banner_title_avatar');
    default:
      return t('rejection_banner_title_hero');
  }
}

/**
 * RejectionBannerList — renders a `<RejectionBanner severity="warning">` for each
 * unresolved image.rejected notification. Used beside vendor dashboard and user profile
 * to surface image rejections with Replace-image CTAs.
 *
 * Each banner maps `payload.purpose` → localized title, shows `payload.reason`,
 * and links `payload.replaceHref` as the replace CTA.
 *
 * @example
 * ```tsx
 * <RejectionBannerList notifications={imageRejections} />
 * ```
 */
export function RejectionBannerList({ notifications, className }: RejectionBannerListProps) {
  const t = useT('vendor_dashboard');

  if (notifications.length === 0) return null;

  return (
    <div className={className} role="region" aria-label={t('rejection_banner_title_hero')}>
      {notifications.map((n) => {
        const title = purposeToTitle(t, n.payload.purpose);
        const reason = typeof n.payload.reason === 'string' ? n.payload.reason : '';
        const replaceHref =
          typeof n.payload.replaceHref === 'string' ? n.payload.replaceHref : undefined;

        return (
          <RejectionBanner
            key={n.id}
            severity="warning"
            title={title}
            reason={reason}
            replaceHref={replaceHref}
            replaceLabel={t('rejection_banner_replace_cta')}
            className="mb-3 last:mb-0"
          />
        );
      })}
    </div>
  );
}