'use client';

import { AttachmentGallery } from '@/components/ui/domain/support/AttachmentGallery';
import type { SupportAttachmentView } from '@/server/support/types';

const SAMPLE: SupportAttachmentView[] = [
  {
    id: '00000000-0000-0000-0000-000000000001',
    parentType: 'ticket',
    parentId: '00000000-0000-0000-0000-000000000010',
    messageId: null,
    cfImageId: 'sample1',
    variants: { thumb: '', card: '', full: '' },
    mime: 'image/jpeg',
    sizeBytes: 123456,
    uploaderId: '00000000-0000-0000-0000-000000000020',
    uploaderRole: 'customer',
    abuseStatus: 'clean',
    createdAt: new Date().toISOString(),
  },
  {
    id: '00000000-0000-0000-0000-000000000002',
    parentType: 'ticket',
    parentId: '00000000-0000-0000-0000-000000000010',
    messageId: null,
    cfImageId: 'sample2',
    variants: { thumb: '', card: '', full: '' },
    mime: 'image/png',
    sizeBytes: 654321,
    uploaderId: '00000000-0000-0000-0000-000000000020',
    uploaderRole: 'vendor',
    abuseStatus: 'flagged',
    createdAt: new Date().toISOString(),
  },
];

export function SupportInfraSection() {
  return (
    <section id="support-infra" className="space-y-[var(--space-6)]">
      <header>
        <h2 className="text-xl font-semibold">15. Support — Shared Infra (Phase 2)</h2>
        <p className="text-text-secondary text-sm">
          Thin wrappers backing ticket + case media. Uses tokens only. RTL-safe. Attachment authz
          routes through /api/support/attachments/[id].
        </p>
      </header>

      <div>
        <h3 className="mb-[var(--space-2)] text-lg font-medium">AttachmentGallery — empty</h3>
        <AttachmentGallery attachments={[]} viewerRole="customer" />
      </div>

      <div>
        <h3 className="mb-[var(--space-2)] text-lg font-medium">
          AttachmentGallery — customer view
        </h3>
        <AttachmentGallery attachments={SAMPLE} viewerRole="customer" />
      </div>

      <div>
        <h3 className="mb-[var(--space-2)] text-lg font-medium">AttachmentGallery — admin view</h3>
        <AttachmentGallery attachments={SAMPLE} viewerRole="admin" />
      </div>
    </section>
  );
}