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

import SegmentBreakdownSkeleton from './SegmentBreakdownSkeleton';

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

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

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

  it('renders a title skeleton', () => {
    const { container } = render(<SegmentBreakdownSkeleton />);

    const titleSkeleton = container.querySelector('.h-6.w-44');
    expect(titleSkeleton).toBeInTheDocument();
    expect(titleSkeleton).toHaveClass('animate-pulse');
  });

  it('renders 3 segment tables in a responsive grid', () => {
    const { container } = render(<SegmentBreakdownSkeleton />);

    const grid = container.querySelector('.grid');
    expect(grid).toBeInTheDocument();
    expect(grid).toHaveClass('grid-cols-1');
    expect(grid).toHaveClass('md:grid-cols-3');
    expect(grid).toHaveClass('gap-6');

    const tables = grid?.querySelectorAll('table');
    expect(tables).toHaveLength(3);
  });

  it('each table has a subtitle skeleton', () => {
    const { container } = render(<SegmentBreakdownSkeleton />);

    const grid = container.querySelector('.grid');
    const subtitles = grid?.querySelectorAll('.h-4.w-20.mb-2');
    expect(subtitles).toHaveLength(3);
  });

  it('each table has 3 column headers', () => {
    const { container } = render(<SegmentBreakdownSkeleton />);

    const tables = container.querySelectorAll('table');
    tables.forEach((table) => {
      const headerCells = table.querySelectorAll('th');
      expect(headerCells).toHaveLength(3);
    });
  });

  it('each table has 3 data rows', () => {
    const { container } = render(<SegmentBreakdownSkeleton />);

    const tables = container.querySelectorAll('table');
    tables.forEach((table) => {
      const tbody = table.querySelector('tbody');
      const rows = tbody?.querySelectorAll('tr');
      expect(rows).toHaveLength(3);
    });
  });

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

    const tbodies = container.querySelectorAll('tbody');
    tbodies.forEach((tbody) => {
      const rows = tbody.querySelectorAll('tr');
      rows.forEach((row) => {
        const cells = row.querySelectorAll('td');
        expect(cells).toHaveLength(3);
      });
    });
  });

  it('tables are wrapped in overflow containers with border', () => {
    const { container } = render(<SegmentBreakdownSkeleton />);

    const tableContainers = container.querySelectorAll('.rounded-lg.border.overflow-hidden');
    expect(tableContainers).toHaveLength(3);
  });

  it('direction column uses rounded-full for badge-like appearance', () => {
    const { container } = render(<SegmentBreakdownSkeleton />);

    const badgeSkeletons = container.querySelectorAll('.rounded-full');
    expect(badgeSkeletons.length).toBeGreaterThanOrEqual(9); // 3 rows * 3 tables
  });
});