import { render, screen, fireEvent } from '@testing-library/react';
import { vi, describe, it, expect } from 'vitest';
import { MessageLightbox } from '../message-lightbox';

const ATTACHMENTS = [
  { url: '/a.jpg', thumb_url: '/a-thumb.jpg', content_type: 'image/jpeg', size_bytes: 1 },
  { url: '/b.jpg', thumb_url: '/b-thumb.jpg', content_type: 'image/jpeg', size_bytes: 2 },
];

describe('MessageLightbox', () => {
  it('renders the active image and calls onClose on close button', () => {
    const onClose = vi.fn();
    render(
      <MessageLightbox
        open
        onClose={onClose}
        attachments={ATTACHMENTS}
        startIndex={1}
      />,
    );
    const img = screen.getByRole('img', { name: /Attachment/i }) as HTMLImageElement;
    expect(img.src).toContain('/b.jpg');
    fireEvent.click(screen.getByRole('button', { name: /Close/i }));
    expect(onClose).toHaveBeenCalled();
  });

  it('arrow keys advance + retreat through attachments', () => {
    render(
      <MessageLightbox
        open
        onClose={() => {}}
        attachments={ATTACHMENTS}
        startIndex={0}
      />,
    );
    fireEvent.keyDown(document, { key: 'ArrowRight' });
    expect(
      (screen.getByRole('img', { name: /Attachment/i }) as HTMLImageElement).src,
    ).toContain('/b.jpg');
    fireEvent.keyDown(document, { key: 'ArrowLeft' });
    expect(
      (screen.getByRole('img', { name: /Attachment/i }) as HTMLImageElement).src,
    ).toContain('/a.jpg');
  });
});