// src/components/Dashboard.test.tsx
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { screen } from '@testing-library/react';
import { Dashboard } from './Dashboard';
import { renderWithProviders } from '../tests/utils/renderWithProviders';

// Mock child components to isolate Dashboard logic
// Note: The Dashboard component imports these using '../components/RecipeSuggester'
// which resolves to the same file as './RecipeSuggester' when inside src/components.
vi.mock('./RecipeSuggester', () => ({
  RecipeSuggester: () => <div data-testid="recipe-suggester-mock">Recipe Suggester</div>,
}));

vi.mock('./FlyerCountDisplay', () => ({
  FlyerCountDisplay: () => <div data-testid="flyer-count-display-mock">Flyer Count Display</div>,
}));

vi.mock('./Leaderboard', () => ({
  Leaderboard: () => <div data-testid="leaderboard-mock">Leaderboard</div>,
}));

describe('Dashboard Component', () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

  it('renders the dashboard title', () => {
    console.log('TEST: Verifying dashboard title render');
    renderWithProviders(<Dashboard />);
    expect(screen.getByRole('heading', { name: /dashboard/i, level: 1 })).toBeInTheDocument();
  });

  it('renders the RecipeSuggester widget', () => {
    console.log('TEST: Verifying RecipeSuggester presence');
    renderWithProviders(<Dashboard />);
    expect(screen.getByTestId('recipe-suggester-mock')).toBeInTheDocument();
  });

  it('renders the FlyerCountDisplay widget within the "Your Flyers" section', () => {
    console.log('TEST: Verifying FlyerCountDisplay presence and section title');
    renderWithProviders(<Dashboard />);

    // Check for the section heading
    expect(screen.getByRole('heading', { name: /your flyers/i, level: 2 })).toBeInTheDocument();

    // Check for the component
    expect(screen.getByTestId('flyer-count-display-mock')).toBeInTheDocument();
  });

  it('renders the Leaderboard widget in the sidebar area', () => {
    console.log('TEST: Verifying Leaderboard presence');
    renderWithProviders(<Dashboard />);
    expect(screen.getByTestId('leaderboard-mock')).toBeInTheDocument();
  });

  it('renders with the correct grid layout classes', () => {
    console.log('TEST: Verifying layout classes');
    const { container } = renderWithProviders(<Dashboard />);

    // The main grid container
    const gridContainer = container.querySelector('.grid');
    expect(gridContainer).toBeInTheDocument();
    expect(gridContainer).toHaveClass('grid-cols-1');
    expect(gridContainer).toHaveClass('lg:grid-cols-3');
    expect(gridContainer).toHaveClass('gap-6');
  });
});
