// @design-system: domain/support/AttachmentGallery

/**
 * AttachmentGallery — grid of thumbnails for attachments on a ticket or case.
 * Thumbnails link to the signed full-variant URL via the authz redirect at
 * /api/support/attachments/[id]?variant=full. Abuse-flagged attachments are
 * badged; rejected ones are replaced with a locked-placeholder card.
 *
 * Layout: responsive grid; RTL-safe (logical props only). Alt text is the
 * author/role + createdAt to avoid leaking message body contents.
 */

import { Icon } from '@/components/ui/icons/Icon';
import { useT } from '@/lib/i18n/react';
import { cn } from '@/lib/cn';
import type { SupportAttachmentView } from '@/server/support/types';

export interface AttachmentGalleryProps {
  attachments: SupportAttachmentView[];
  viewerRole: 'customer' | 'vendor' | 'admin';
  className?: string;
}

export function AttachmentGallery({ attachments, viewerRole, className }: AttachmentGalleryProps) {
  const t = useT('support');
  if (attachments.length === 0) {
    return (
      <p className={cn('text-text-secondary text-sm', className)}>
        {t('attachment_gallery_empty')}
      </p>
    );
  }
  return (
    <ul
      className={cn(
        'grid grid-cols-[repeat(auto-fill,minmax(120px,1fr))] gap-[var(--space-2)]',
        className,
      )}
    >
      {attachments.map((att) => {
        const badge =
          att.abuseStatus === 'pending'
            ? t('attachment_abuse_pending')
            : att.abuseStatus === 'flagged'
              ? t('attachment_abuse_flagged')
              : att.abuseStatus === 'rejected'
                ? t('attachment_abuse_rejected')
                : null;

        if (att.abuseStatus === 'rejected' && viewerRole !== 'admin') {
          return (
            <li
              key={att.id}
              className="bg-surface-raised flex aspect-square items-center justify-center rounded-[var(--radius-md)]"
            >
              <Icon name="Lock" aria-label={badge ?? ''} />
            </li>
          );
        }

        return (
          <li key={att.id} className="relative">
            <a
              href={`/api/support/attachments/${att.id}?variant=full`}
              target="_blank"
              rel="noopener noreferrer"
              aria-label={t('attachment_open_full')}
              className="block aspect-square overflow-hidden rounded-[var(--radius-md)] focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] focus-visible:outline-none"
            >
              {/* Plain img OK here: authz URL, no static optimization needed */}
              <img
                src={`/api/support/attachments/${att.id}?variant=thumb`}
                alt={`${att.uploaderRole} — ${att.createdAt}`}
                width={200}
                height={200}
                loading="lazy"
                className="h-full w-full object-cover"
              />
            </a>
            {badge ? (
              <span className="absolute start-[var(--space-1)] top-[var(--space-1)] rounded-[var(--radius-sm)] bg-[var(--color-warning-bg)] px-[var(--space-1)] text-xs text-[var(--color-warning-fg)]">
                {badge}
              </span>
            ) : null}
          </li>
        );
      })}
    </ul>
  );
}