import React from 'react';
import { render, screen } from '@testing-library/react';
import { ThemeProvider, createTheme } from '@mui/material';
import { DashboardScreen } from '../DashboardScreen';
import { Vehicle } from '../../../vehicles/types/vehicles.types';
import { VehicleRosterData } from '../../types';
import { useVehicleRoster } from '../../hooks/useDashboardData';

jest.mock('@auth0/auth0-react');
jest.mock('../../../../core/api/client');
jest.mock('../../../vehicles/api/vehicles.api');
jest.mock('../../../maintenance/api/maintenance.api');
jest.mock('../../../documents/api/documents.api');
jest.mock('../../../vehicles/components/VehicleImage', () => ({
  VehicleImage: () => <div data-testid="vehicle-image" />,
}));
jest.mock('../../../email-ingestion/components/PendingAssociationBanner', () => ({
  PendingAssociationBanner: () => null,
}));
jest.mock('../../../email-ingestion/components/PendingAssociationList', () => ({
  PendingAssociationList: () => null,
}));
jest.mock('../../hooks/useDashboardData');

const mockUseVehicleRoster = useVehicleRoster as jest.MockedFunction<typeof useVehicleRoster>;

const makeVehicle = (overrides: Partial<Vehicle> = {}): Vehicle => ({
  id: 'vehicle-1',
  userId: 'user-1',
  vin: '1HGBH41JXMN109186',
  year: 2019,
  make: 'Ford',
  model: 'F-150',
  odometerReading: 87412,
  isActive: true,
  createdAt: '2025-01-01T00:00:00Z',
  updatedAt: '2025-01-01T00:00:00Z',
  ...overrides,
});

const makeRosterData = (vehicle?: Vehicle): VehicleRosterData => ({
  vehicle: vehicle ?? makeVehicle(),
  health: 'green' as const,
  attentionItems: [],
});

const theme = createTheme();

const renderWithProviders = (ui: React.ReactElement) => {
  return render(
    <ThemeProvider theme={theme}>
      {ui}
    </ThemeProvider>
  );
};

describe('DashboardScreen', () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });

  it('renders vehicle roster cards', () => {
    const vehicle1 = makeVehicle({ id: 'v1', make: 'Ford', model: 'F-150', year: 2019 });
    const vehicle2 = makeVehicle({ id: 'v2', make: 'Honda', model: 'Civic', year: 2020 });
    const roster = [makeRosterData(vehicle1), makeRosterData(vehicle2)];

    mockUseVehicleRoster.mockReturnValue({
      data: roster,
      vehicles: [vehicle1, vehicle2],
      isLoading: false,
      error: null,
      refetch: jest.fn(),
    });

    renderWithProviders(<DashboardScreen />);

    expect(screen.getByText('2019 Ford F-150')).toBeInTheDocument();
    expect(screen.getByText('2020 Honda Civic')).toBeInTheDocument();
  });

  it('renders empty state when 0 vehicles', () => {
    mockUseVehicleRoster.mockReturnValue({
      data: [],
      vehicles: [],
      isLoading: false,
      error: null,
      refetch: jest.fn(),
    });

    renderWithProviders(<DashboardScreen />);

    expect(screen.getByText('Welcome to MotoVaultPro')).toBeInTheDocument();
  });

  it('renders loading skeletons when loading', () => {
    mockUseVehicleRoster.mockReturnValue({
      data: undefined,
      vehicles: undefined,
      isLoading: true,
      error: null,
      refetch: jest.fn(),
    });

    renderWithProviders(<DashboardScreen />);

    expect(screen.getByText('Your Fleet')).toBeInTheDocument();
  });

  it('renders "Your Fleet" heading', () => {
    const vehicle = makeVehicle();
    const roster = [makeRosterData(vehicle)];

    mockUseVehicleRoster.mockReturnValue({
      data: roster,
      vehicles: [vehicle],
      isLoading: false,
      error: null,
      refetch: jest.fn(),
    });

    renderWithProviders(<DashboardScreen />);

    expect(screen.getByText('Your Fleet')).toBeInTheDocument();
  });
});
