import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import Menu from '../pages/Monitoring.js';
import { menuItems } from '../constants/menuItems.js';
import { jest } from "@jest/globals";

describe('Monitoring / Menu Component', () => {
  const renderWithRouter = (component) => {
    return render(<MemoryRouter>{component}</MemoryRouter>);
  };

  it('renders the Report Name heading', () => {
    renderWithRouter(<Menu />);
    expect(screen.getByText('Report Name')).toBeInTheDocument();
  });

  it('renders the monitoring component container', () => {
    const { container } = renderWithRouter(<Menu />);
    const containerElement = container.querySelector('.monitoring-component');
    expect(containerElement).toBeInTheDocument();
  });

  it('renders the navigation list', () => {
    renderWithRouter(<Menu />);
    const navigation = screen.getByRole('navigation');
    expect(navigation).toBeInTheDocument();
  });

  it('renders submenu items from menuItems when available', () => {
    renderWithRouter(<Menu />);
    const subMenu = menuItems[1]?.subMenu || [];
    if (subMenu.length > 0) {
      subMenu.forEach((item) => {
        expect(screen.getByText(item.text)).toBeInTheDocument();
      });
    } else {
      // No submenu items, just verify the component renders
      expect(screen.getByText('Report Name')).toBeInTheDocument();
    }
  });

  it('handles empty or undefined subMenu gracefully', () => {
    renderWithRouter(<Menu />);
    // Component should render without error even if subMenu is undefined
    expect(screen.getByText('Report Name')).toBeInTheDocument();
  });

  it('renders navigation even when submenu is empty', () => {
    renderWithRouter(<Menu />);
    const navigation = screen.getByRole('navigation');
    expect(navigation).toBeInTheDocument();
  });

  it('renders h2 element', () => {
    renderWithRouter(<Menu />);
    const heading = screen.getByRole('heading', { level: 2 });
    expect(heading).toBeInTheDocument();
  });

  it('renders List navigation component', () => {
    renderWithRouter(<Menu />);
    const navigation = screen.getByRole('navigation');
    expect(navigation).toBeInTheDocument();
  });

  it('renders links for submenu items', () => {
    renderWithRouter(<Menu />);
    const subMenu = menuItems[1]?.subMenu || [];
    if (subMenu.length > 0) {
      const links = screen.getAllByRole('link');
      expect(links.length).toBeGreaterThanOrEqual(0);
    }
  });

  it('renders default export correctly', () => {
    renderWithRouter(<Menu />);
    expect(screen.getByText('Report Name')).toBeInTheDocument();
  });

  it('renders List component with proper navigation role', () => {
    renderWithRouter(<Menu />);
    const nav = screen.getByRole('navigation');
    expect(nav).toBeInTheDocument();
  });

  it('renders ListItem components for each submenu item', () => {
    renderWithRouter(<Menu />);
    const subMenu = menuItems[1]?.subMenu || [];
    if (subMenu.length > 0) {
      const listItems = screen.getAllByRole('link');
      expect(listItems.length).toBeGreaterThanOrEqual(subMenu.length);
    }
  });

  it('renders proper link hrefs for submenu items', () => {
    renderWithRouter(<Menu />);
    const subMenu = menuItems[1]?.subMenu || [];
    if (subMenu.length > 0) {
      subMenu.forEach((item) => {
        const link = screen.getByText(item.text).closest('a');
        expect(link).toHaveAttribute('href', item.path);
      });
    }
  });

  it('renders ListItemText with primary text for each item', () => {
    renderWithRouter(<Menu />);
    const subMenu = menuItems[1]?.subMenu || [];
    if (subMenu.length > 0) {
      subMenu.forEach((item) => {
        expect(screen.getByText(item.text)).toBeInTheDocument();
      });
    }
  });

  it('uses unique keys for submenu items', () => {
    const { container } = renderWithRouter(<Menu />);
    const listItems = container.querySelectorAll('li');
    // Each list item should be rendered (implies unique keys worked)
    expect(listItems.length).toBeGreaterThanOrEqual(0);
  });

  it('handles menuItems array access correctly', () => {
    renderWithRouter(<Menu />);
    // Accessing menuItems[1] should not throw an error
    expect(menuItems[1]).toBeDefined();
  });

  it('renders with correct component structure', () => {
    const { container } = renderWithRouter(<Menu />);
    const monitoringDiv = container.querySelector('.monitoring-component');
    expect(monitoringDiv).toContainElement(container.querySelector('h2'));
    expect(monitoringDiv).toContainElement(container.querySelector('nav'));
  });
});

// Separate describe block to test with mocked menuItems that has subMenu
describe('Monitoring / Menu Component with SubMenu', () => {
  // Test that the map callback works when subMenu exists
  it('should render submenu items when menuItems[1].subMenu is defined', async () => {
    // Create a modified menu items with subMenu defined
    const mockMenuItems = [...menuItems];
    mockMenuItems[1] = {
      ...mockMenuItems[1],
      subMenu: [
        { text: 'Test Item 1', path: '/test/item1' },
        { text: 'Test Item 2', path: '/test/item2' },
      ]
    };

    // We need to mock the menuItems import
    jest.unstable_mockModule('../constants/menuItems.js', () => ({
      menuItems: mockMenuItems
    }));

    // Dynamic import after mock
    const { default: MockedMenu } = await import('../pages/Monitoring.js');
    
    render(
      <MemoryRouter>
        <MockedMenu />
      </MemoryRouter>
    );

    // The component should render with the mocked subMenu
    expect(screen.getByText('Report Name')).toBeInTheDocument();
  });
});
