import { render, screen, fireEvent } from '@testing-library/react';
import { VehicleRosterCard } from '../VehicleRosterCard';
import { Vehicle } from '../../../vehicles/types/vehicles.types';
import { VehicleRosterData, AttentionItem } from '../../types';

jest.mock('@auth0/auth0-react');
jest.mock('../../../vehicles/components/VehicleImage', () => ({
  VehicleImage: () => <div data-testid="vehicle-image" />,
}));

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 = (overrides: Partial<VehicleRosterData> = {}): VehicleRosterData => ({
  vehicle: makeVehicle(),
  health: 'green',
  attentionItems: [],
  ...overrides,
});

describe('VehicleRosterCard', () => {
  it('renders vehicle label with year make model', () => {
    const data = makeRosterData();
    const onClick = jest.fn();

    render(<VehicleRosterCard data={data} onClick={onClick} />);

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

  it('renders health badge with correct color class for green health', () => {
    const data = makeRosterData({ health: 'green' });
    const onClick = jest.fn();

    const { container } = render(<VehicleRosterCard data={data} onClick={onClick} />);

    const badge = container.querySelector('.bg-emerald-500');
    expect(badge).toBeInTheDocument();
  });

  it('renders health badge with correct color class for yellow health', () => {
    const data = makeRosterData({ health: 'yellow' });
    const onClick = jest.fn();

    const { container } = render(<VehicleRosterCard data={data} onClick={onClick} />);

    const badge = container.querySelector('.bg-amber-500');
    expect(badge).toBeInTheDocument();
  });

  it('renders health badge with correct color class for red health', () => {
    const data = makeRosterData({ health: 'red' });
    const onClick = jest.fn();

    const { container } = render(<VehicleRosterCard data={data} onClick={onClick} />);

    const badge = container.querySelector('.bg-red-500');
    expect(badge).toBeInTheDocument();
  });

  it('renders attention items text', () => {
    const attentionItems: AttentionItem[] = [
      {
        label: 'Oil Change',
        urgency: 'overdue',
        daysUntilDue: -5,
        source: 'maintenance',
      },
    ];
    const data = makeRosterData({ attentionItems });
    const onClick = jest.fn();

    render(<VehicleRosterCard data={data} onClick={onClick} />);

    expect(screen.getByText('Oil Change - OVERDUE')).toBeInTheDocument();
  });

  it('renders odometer with formatting', () => {
    const data = makeRosterData();
    const onClick = jest.fn();

    render(<VehicleRosterCard data={data} onClick={onClick} />);

    expect(screen.getByText('87,412 mi')).toBeInTheDocument();
  });

  it('calls onClick with vehicle ID when clicked', () => {
    const data = makeRosterData();
    const onClick = jest.fn();

    render(<VehicleRosterCard data={data} onClick={onClick} />);

    fireEvent.click(screen.getByText('2019 Ford F-150'));

    expect(onClick).toHaveBeenCalledWith('vehicle-1');
  });

  it('renders All clear when no attention items', () => {
    const data = makeRosterData({ attentionItems: [] });
    const onClick = jest.fn();

    render(<VehicleRosterCard data={data} onClick={onClick} />);

    expect(screen.getByText('All clear')).toBeInTheDocument();
  });
});
