/* eslint-disable @typescript-eslint/no-explicit-any */
import { render, screen } from '@testing-library/react';

import '@testing-library/jest-dom';
import { vi, describe, it, expect, beforeEach } from 'vitest';
import Timetable from '../../../../src/components/stats/SleepTimetable';
import { useStats } from '../../../../src/hooks/useStats';

vi.mock('../../../../src/hooks/useStats', () => ({
  useStats: vi.fn(),
}));

describe('SleepTimetable', () => {
  const defaultProps = {
    from_date: '2025-04-18',
    to_date: '2025-04-25',
    day_start: '22:00',
    day_end: '08:00',
  };

  beforeEach(() => {
    vi.clearAllMocks();
    vi.stubGlobal('innerWidth', 1024);
  });

  it('renders loading state', () => {
    (useStats as any).mockReturnValue({ timetable: null, isLoading: true });
    render(<Timetable {...defaultProps} />);
    expect(screen.getByText(/Loading timetable.../i)).toBeInTheDocument();
  });

  it('renders empty state when no data is available', () => {
    (useStats as any).mockReturnValue({ timetable: { slots: [] }, isLoading: false });
    render(<Timetable {...defaultProps} />);
    expect(screen.getByText(/No data available/i)).toBeInTheDocument();
  });

  it('shows sleeping status for intervals spanning midnight across days', () => {
    const day1 = '2025-04-18';
    const day2 = '2025-04-19';

    (useStats as any).mockReturnValue({
      timetable: {
        slots: [
          {
            date: day1,
            sleeping: true,
            slot_start: '23:00',
            slot_end: '23:45',
          },
          {
            date: day2,
            sleeping: true,
            slot_start: '00:00',
            slot_end: '01:00',
          },
        ],
      },
      isLoading: false,
    });

    const testProps = {
      from_date: day1,
      to_date: day2,
      day_start: '22:00',
      day_end: '08:00',
    };

    vi.stubGlobal('innerWidth', 1024); // Desktop mode
    const { container } = render(<Timetable {...testProps} />);

    // Check Day 1: 23:00
    const cellD1_2300 = container.querySelector(`[data-testid="cell-${day1}-23:00"]`);
    expect(cellD1_2300).toHaveClass('bg-green-500');

    // Check Day 2: 00:15
    const cellD2_0015 = container.querySelector(`[data-testid="cell-${day2}-00:15"]`);
    expect(cellD2_0015).toHaveClass('bg-green-500');
  });
});