import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import { jest } from '@jest/globals';

// Mock the child components to avoid their complex dependencies
jest.unstable_mockModule('../pages/ActivityReports/SystemLoginDetails.js', () => ({
  default: function MockSystemLoginDetails(props) {
    return React.createElement('div', { 'data-testid': 'system-login-details' },
      React.createElement('span', { 'data-testid': 'login-employee-id' }, props.employeeId),
      React.createElement('span', { 'data-testid': 'login-title' }, props.title)
    );
  }
}));

jest.unstable_mockModule('../pages/ActivityReports/SystemSleepDetails.js', () => ({
  default: function MockSystemSleepDetails(props) {
    return React.createElement('div', { 'data-testid': 'system-sleep-details' },
      React.createElement('span', { 'data-testid': 'sleep-employee-id' }, props.employeeId),
      React.createElement('span', { 'data-testid': 'sleep-title' }, props.title)
    );
  }
}));

const { default: SystemActivityScreen } = await import('../pages/ActivityReports/SystemActivityScreen.js');

const renderWithRouter = (ui, { route = '/' } = {}) => {
  return render(
    <MemoryRouter initialEntries={[route]}>
      {ui}
    </MemoryRouter>
  );
};

describe('SystemActivityScreen', () => {
  const defaultProps = {
    summaryFilter: { EmpCode: 'EMP001' },
    title: 'Activity Report',
    employeeId: 'EMP001',
  };

  it('should render with tabs', () => {
    renderWithRouter(<SystemActivityScreen {...defaultProps} />);
    
    expect(screen.getByRole('tablist')).toBeInTheDocument();
    expect(screen.getByRole('tab', { name: /login details/i })).toBeInTheDocument();
    expect(screen.getByRole('tab', { name: /system sleep details/i })).toBeInTheDocument();
  });

  it('should render Login Details tab selected by default', () => {
    renderWithRouter(<SystemActivityScreen {...defaultProps} />);
    
    const loginTab = screen.getByRole('tab', { name: /login details/i });
    expect(loginTab).toHaveAttribute('aria-selected', 'true');
  });

  it('should show Login Details content by default', () => {
    renderWithRouter(<SystemActivityScreen {...defaultProps} />);
    
    expect(screen.getByTestId('system-login-details')).toBeInTheDocument();
  });

  it('should switch to System Sleep Details when clicking the tab', () => {
    renderWithRouter(<SystemActivityScreen {...defaultProps} />);
    
    const sleepTab = screen.getByRole('tab', { name: /system sleep details/i });
    fireEvent.click(sleepTab);
    
    expect(sleepTab).toHaveAttribute('aria-selected', 'true');
    expect(screen.getByTestId('system-sleep-details')).toBeInTheDocument();
  });

  it('should pass props to SystemLoginDetails', () => {
    renderWithRouter(<SystemActivityScreen {...defaultProps} />);
    
    expect(screen.getByTestId('login-employee-id')).toHaveTextContent('EMP001');
    expect(screen.getByTestId('login-title')).toHaveTextContent('Activity Report');
  });

  it('should pass props to SystemSleepDetails when tab is active', () => {
    renderWithRouter(<SystemActivityScreen {...defaultProps} />);
    
    const sleepTab = screen.getByRole('tab', { name: /system sleep details/i });
    fireEvent.click(sleepTab);
    
    expect(screen.getByTestId('sleep-employee-id')).toHaveTextContent('EMP001');
    expect(screen.getByTestId('sleep-title')).toHaveTextContent('Activity Report');
  });

  it('should have correct aria attributes for tabs', () => {
    renderWithRouter(<SystemActivityScreen {...defaultProps} />);
    
    const loginTab = screen.getByRole('tab', { name: /login details/i });
    const sleepTab = screen.getByRole('tab', { name: /system sleep details/i });
    
    expect(loginTab).toHaveAttribute('id', 'system-activity-tab-0');
    expect(loginTab).toHaveAttribute('aria-controls', 'system-activity-tabpanel-0');
    expect(sleepTab).toHaveAttribute('id', 'system-activity-tab-1');
    expect(sleepTab).toHaveAttribute('aria-controls', 'system-activity-tabpanel-1');
  });

  it('should switch back to Login Details from Sleep Details', () => {
    renderWithRouter(<SystemActivityScreen {...defaultProps} />);
    
    // First switch to sleep details
    const sleepTab = screen.getByRole('tab', { name: /system sleep details/i });
    fireEvent.click(sleepTab);
    expect(screen.getByTestId('system-sleep-details')).toBeInTheDocument();
    
    // Then switch back to login details
    const loginTab = screen.getByRole('tab', { name: /login details/i });
    fireEvent.click(loginTab);
    expect(screen.getByTestId('system-login-details')).toBeInTheDocument();
    expect(loginTab).toHaveAttribute('aria-selected', 'true');
  });

  it('should render without optional props', () => {
    renderWithRouter(<SystemActivityScreen />);
    
    expect(screen.getByRole('tablist')).toBeInTheDocument();
    expect(screen.getByRole('tab', { name: /login details/i })).toBeInTheDocument();
  });
});
