/**
 * @ai-summary Tests for VehicleLimitDialog component
 * @ai-context Validates props, mobile/desktop modes, and user interactions
 */

import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import { VehicleLimitDialog } from './VehicleLimitDialog';

// Mock MUI useMediaQuery to control mobile/desktop mode
jest.mock('@mui/material', () => ({
  ...jest.requireActual('@mui/material'),
  useMediaQuery: jest.fn(),
}));

import { useMediaQuery } from '@mui/material';
const mockedUseMediaQuery = useMediaQuery as jest.MockedFunction<typeof useMediaQuery>;

describe('VehicleLimitDialog', () => {
  const mockOnClose = jest.fn();

  beforeEach(() => {
    jest.clearAllMocks();
    // Default to desktop mode
    mockedUseMediaQuery.mockReturnValue(false);
  });

  describe('Dialog rendering', () => {
    it('renders when open', () => {
      render(
        <VehicleLimitDialog
          open={true}
          onClose={mockOnClose}
          currentCount={2}
          limit={2}
          currentTier="free"
        />
      );

      expect(screen.getByText('Vehicle Limit Reached')).toBeInTheDocument();
      expect(screen.getByText('Additional Vehicles')).toBeInTheDocument();
    });

    it('does not render when closed', () => {
      render(
        <VehicleLimitDialog
          open={false}
          onClose={mockOnClose}
          currentCount={2}
          limit={2}
          currentTier="free"
        />
      );

      expect(screen.queryByText('Vehicle Limit Reached')).not.toBeInTheDocument();
    });
  });

  describe('Props display', () => {
    it('displays current count and limit', () => {
      render(
        <VehicleLimitDialog
          open={true}
          onClose={mockOnClose}
          currentCount={2}
          limit={2}
          currentTier="free"
        />
      );

      expect(screen.getByText('You have 2 of 2 vehicles')).toBeInTheDocument();
    });

    it('displays free tier upgrade prompt', () => {
      render(
        <VehicleLimitDialog
          open={true}
          onClose={mockOnClose}
          currentCount={2}
          limit={2}
          currentTier="free"
        />
      );

      expect(
        screen.getByText(/Free tier is limited to 2 vehicles/)
      ).toBeInTheDocument();
    });

    it('displays pro tier upgrade prompt', () => {
      render(
        <VehicleLimitDialog
          open={true}
          onClose={mockOnClose}
          currentCount={5}
          limit={5}
          currentTier="pro"
        />
      );

      expect(
        screen.getByText(/Pro tier is limited to 5 vehicles/)
      ).toBeInTheDocument();
    });

    it('shows tier chips for free user', () => {
      render(
        <VehicleLimitDialog
          open={true}
          onClose={mockOnClose}
          currentCount={2}
          limit={2}
          currentTier="free"
        />
      );

      expect(screen.getByText('Free')).toBeInTheDocument();
      expect(screen.getByText('Pro')).toBeInTheDocument();
    });

    it('shows tier chips for pro user', () => {
      render(
        <VehicleLimitDialog
          open={true}
          onClose={mockOnClose}
          currentCount={5}
          limit={5}
          currentTier="pro"
        />
      );

      expect(screen.getByText('Pro')).toBeInTheDocument();
      expect(screen.getByText('Enterprise')).toBeInTheDocument();
    });
  });

  describe('User interactions', () => {
    it('calls onClose when "Maybe Later" is clicked', () => {
      render(
        <VehicleLimitDialog
          open={true}
          onClose={mockOnClose}
          currentCount={2}
          limit={2}
          currentTier="free"
        />
      );

      fireEvent.click(screen.getByText('Maybe Later'));
      expect(mockOnClose).toHaveBeenCalledTimes(1);
    });

    it('calls onClose when "Upgrade (Coming Soon)" is clicked', () => {
      render(
        <VehicleLimitDialog
          open={true}
          onClose={mockOnClose}
          currentCount={2}
          limit={2}
          currentTier="free"
        />
      );

      fireEvent.click(screen.getByText('Upgrade (Coming Soon)'));
      expect(mockOnClose).toHaveBeenCalledTimes(1);
    });
  });

  describe('Mobile responsiveness', () => {
    it('renders fullscreen on mobile', () => {
      mockedUseMediaQuery.mockReturnValue(true); // Mobile mode

      const { container } = render(
        <VehicleLimitDialog
          open={true}
          onClose={mockOnClose}
          currentCount={2}
          limit={2}
          currentTier="free"
        />
      );

      // Check for fullScreen prop on Dialog (would be in DOM structure)
      const dialog = container.querySelector('[role="dialog"]');
      expect(dialog).toBeInTheDocument();
    });

    it('shows close button on mobile', () => {
      mockedUseMediaQuery.mockReturnValue(true); // Mobile mode

      render(
        <VehicleLimitDialog
          open={true}
          onClose={mockOnClose}
          currentCount={2}
          limit={2}
          currentTier="free"
        />
      );

      const closeButton = screen.getByLabelText('close');
      expect(closeButton).toBeInTheDocument();

      fireEvent.click(closeButton);
      expect(mockOnClose).toHaveBeenCalledTimes(1);
    });

    it('hides close button on desktop', () => {
      mockedUseMediaQuery.mockReturnValue(false); // Desktop mode

      render(
        <VehicleLimitDialog
          open={true}
          onClose={mockOnClose}
          currentCount={2}
          limit={2}
          currentTier="free"
        />
      );

      expect(screen.queryByLabelText('close')).not.toBeInTheDocument();
    });
  });
});
