import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, expect, it, vi } from 'vitest';
import type { PropertyMedia } from '@/lib/listings-api';
import { ImageLightbox } from '../image-lightbox';

// Mock next/image
vi.mock('next/image', () => ({
  default: (props: Record<string, unknown>) => <img {...props} />,
}));

// Mock scrollIntoView (not available in jsdom)
Element.prototype.scrollIntoView = vi.fn();

function makeImages(count: number): PropertyMedia[] {
  return Array.from({ length: count }, (_, i) => ({
    id: `img-${i}`,
    type: 'image' as const,
    url: `https://example.com/img${i}.jpg`,
    order: i,
    caption: i === 0 ? 'First photo' : null,
  }));
}

describe('ImageLightbox', () => {
  it('returns null when not open', () => {
    const { container } = render(
      <ImageLightbox images={makeImages(3)} open={false} onClose={vi.fn()} />,
    );
    expect(container.firstChild).toBeNull();
  });

  it('returns null when images are empty', () => {
    const { container } = render(
      <ImageLightbox images={[]} open={true} onClose={vi.fn()} />,
    );
    expect(container.firstChild).toBeNull();
  });

  it('renders when open with images', () => {
    render(<ImageLightbox images={makeImages(3)} open={true} onClose={vi.fn()} />);
    expect(screen.getByRole('dialog')).toBeInTheDocument();
  });

  it('has correct aria-label', () => {
    render(<ImageLightbox images={makeImages(3)} open={true} onClose={vi.fn()} />);
    expect(screen.getByLabelText('Xem ảnh toàn màn hình')).toBeInTheDocument();
  });

  it('shows image counter', () => {
    render(<ImageLightbox images={makeImages(5)} open={true} onClose={vi.fn()} />);
    expect(screen.getByText('1 / 5')).toBeInTheDocument();
  });

  it('shows caption when present', () => {
    render(<ImageLightbox images={makeImages(3)} open={true} onClose={vi.fn()} />);
    expect(screen.getByText('First photo')).toBeInTheDocument();
  });

  it('renders close button', () => {
    render(<ImageLightbox images={makeImages(3)} open={true} onClose={vi.fn()} />);
    expect(screen.getByLabelText('Đóng (Escape)')).toBeInTheDocument();
  });

  it('calls onClose when close button clicked', async () => {
    const user = userEvent.setup();
    const onClose = vi.fn();
    render(<ImageLightbox images={makeImages(3)} open={true} onClose={onClose} />);

    await user.click(screen.getByLabelText('Đóng (Escape)'));
    expect(onClose).toHaveBeenCalled();
  });

  it('renders navigation arrows for multiple images', () => {
    render(<ImageLightbox images={makeImages(3)} open={true} onClose={vi.fn()} />);
    expect(screen.getByLabelText(/Ảnh trước/)).toBeInTheDocument();
    expect(screen.getByLabelText(/Ảnh tiếp/)).toBeInTheDocument();
  });

  it('does not render arrows for single image', () => {
    render(<ImageLightbox images={makeImages(1)} open={true} onClose={vi.fn()} />);
    expect(screen.queryByLabelText(/Ảnh trước/)).not.toBeInTheDocument();
    expect(screen.queryByLabelText(/Ảnh tiếp/)).not.toBeInTheDocument();
  });

  it('renders thumbnail strip for multiple images', () => {
    render(<ImageLightbox images={makeImages(4)} open={true} onClose={vi.fn()} />);
    const tablist = screen.getByRole('tablist');
    expect(tablist).toBeInTheDocument();
    expect(screen.getAllByRole('tab')).toHaveLength(4);
  });

  it('first thumbnail is selected by default', () => {
    render(<ImageLightbox images={makeImages(3)} open={true} onClose={vi.fn()} />);
    const tabs = screen.getAllByRole('tab');
    expect(tabs[0]).toHaveAttribute('aria-selected', 'true');
  });

  it('navigates to next image when arrow clicked', async () => {
    const user = userEvent.setup();
    render(<ImageLightbox images={makeImages(3)} open={true} onClose={vi.fn()} />);

    await user.click(screen.getByLabelText(/Ảnh tiếp/));
    expect(screen.getByText('2 / 3')).toBeInTheDocument();
  });

  it('uses initialIndex prop', () => {
    render(
      <ImageLightbox images={makeImages(5)} open={true} onClose={vi.fn()} initialIndex={2} />,
    );
    expect(screen.getByText('3 / 5')).toBeInTheDocument();
  });
});
