import { render } from '@testing-library/react';
import { describe, it, expect } from 'vitest';

import WinnersLosersTableSkeleton from './WinnersLosersTableSkeleton';

describe('WinnersLosersTableSkeleton', () => {
  it('renders without crashing', () => {
    const { container } = render(<WinnersLosersTableSkeleton />);
    expect(container).toBeInTheDocument();
  });

  it('renders 2 tab button skeletons', () => {
    const { container } = render(<WinnersLosersTableSkeleton />);

    const tabContainer = container.querySelector('.flex.gap-2.mb-4');
    expect(tabContainer).toBeInTheDocument();

    const tabSkeletons = tabContainer?.querySelectorAll('.animate-pulse');
    expect(tabSkeletons).toHaveLength(2);
  });

  it('renders a table structure', () => {
    const { container } = render(<WinnersLosersTableSkeleton />);

    const table = container.querySelector('table');
    expect(table).toBeInTheDocument();
    expect(table).toHaveClass('w-full');
    expect(table).toHaveClass('text-sm');
  });

  it('renders table header with 5 column headers', () => {
    const { container } = render(<WinnersLosersTableSkeleton />);

    const thead = container.querySelector('thead');
    expect(thead).toBeInTheDocument();

    const headerCells = thead?.querySelectorAll('th');
    expect(headerCells).toHaveLength(5);
  });

  it('renders 5 table rows in tbody', () => {
    const { container } = render(<WinnersLosersTableSkeleton />);

    const tbody = container.querySelector('tbody');
    expect(tbody).toBeInTheDocument();

    const rows = tbody?.querySelectorAll('tr');
    expect(rows).toHaveLength(5);
  });

  it('each row has 5 cells', () => {
    const { container } = render(<WinnersLosersTableSkeleton />);

    const tbody = container.querySelector('tbody');
    const rows = tbody?.querySelectorAll('tr');

    rows?.forEach((row) => {
      const cells = row.querySelectorAll('td');
      expect(cells).toHaveLength(5);
    });
  });

  it('has responsive hidden columns on mobile', () => {
    const { container } = render(<WinnersLosersTableSkeleton />);

    const hiddenCells = container.querySelectorAll('.hidden.md\\:table-cell');
    // 2 hidden header cells + (2 hidden cells per row * 5 rows) = 12
    expect(hiddenCells.length).toBeGreaterThan(0);
  });

  it('table is wrapped in overflow container', () => {
    const { container } = render(<WinnersLosersTableSkeleton />);

    const tableContainer = container.querySelector('.overflow-x-auto.rounded-lg.border');
    expect(tableContainer).toBeInTheDocument();
  });

  it('is marked as aria-hidden', () => {
    const { container } = render(<WinnersLosersTableSkeleton />);

    const root = container.firstElementChild;
    expect(root).toHaveAttribute('aria-hidden', 'true');
  });
});