/* @vitest-environment jsdom */

import { render, screen } from '@testing-library/react';
import { expect, test, vi } from 'vitest';

import { PlatformMediaTileGrid } from './PlatformMediaTileGrid';

vi.mock('../ResolvedAssetImage', () => ({
  ResolvedAssetImage: ({
    src,
    alt,
    className,
    refreshKey,
  }: {
    src?: string | null;
    alt?: string;
    className?: string;
    refreshKey?: string | number | null;
  }) =>
    src ? (
      <img
        src={src}
        alt={alt}
        className={className}
        data-refresh-key={refreshKey ?? undefined}
      />
    ) : null,
}));

test('renders soft square tile grid with media frames', () => {
  const { container } = render(
    <PlatformMediaTileGrid
      columns="five"
      aspect="square"
      surface="soft"
      tileSurface="slate"
      imageClassName="h-full w-full object-contain"
      items={[
        {
          id: 'tile-1',
          src: '/tiles/tile-1.png',
          alt: '地块 1',
          refreshKey: 'asset-tile-1',
          testId: 'tile-preview-1',
        },
        {
          id: 'tile-2',
          fallbackLabel: '地块',
          fallbackContent: <span data-testid="fallback-dot" />,
        },
      ]}
    />,
  );

  const grid = container.querySelector('.platform-media-tile-grid');
  const image = screen.getByRole('img', { name: '地块 1' });
  const fallbackDot = screen.getByTestId('fallback-dot');
  const itemFrames = container.querySelectorAll(
    '.platform-media-tile-grid__item',
  );

  expect(grid?.className).toContain('grid-cols-5');
  expect(grid?.className).toContain('aspect-[1/1]');
  expect(grid?.className).toContain('bg-white/78');
  expect(image.className).toContain('object-contain');
  expect(image.getAttribute('data-refresh-key')).toBe('asset-tile-1');
  expect(image.closest('[data-testid="tile-preview-1"]')).toBe(
    screen.getByTestId('tile-preview-1'),
  );
  expect(itemFrames).toHaveLength(2);
  expect(itemFrames[0]?.className).toContain('bg-slate-50');
  expect(itemFrames[0]?.className).not.toContain(
    'bg-[var(--platform-subpanel-fill)]',
  );
  expect(fallbackDot.closest('.platform-media-tile-grid__item')).toBeTruthy();
});

test('renders six-column white tile grid by default', () => {
  const { container } = render(
    <PlatformMediaTileGrid
      items={[
        { id: 'card-1', src: '/cards/card-1.png', fallbackLabel: '卡片' },
      ]}
    />,
  );

  const grid = container.querySelector('.platform-media-tile-grid');
  const item = container.querySelector('.platform-media-tile-grid__item');

  expect(grid?.className).toContain('grid-cols-6');
  expect(grid?.className).toContain('gap-1.5');
  expect(item?.className).toContain('bg-white');
  expect(item?.className).toContain('shadow-sm');
  expect(item?.className).toContain('rounded-[0.45rem]');
  expect(item?.className).not.toContain('bg-[var(--platform-subpanel-fill)]');
});