import React from 'react';
import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import Layout from './Layout';

// Mock the AuthContext
const mockUseAuth = {
  user: {
    id: '1',
    firstName: 'John',
    lastName: 'Doe',
    email: 'john@example.com',
    role: 'candidate'
  },
  logout: jest.fn()
};

jest.mock('../contexts/AuthContext', () => ({
  useAuth: () => mockUseAuth
}));

// Mock react-router-dom
jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom'),
  useLocation: () => ({ pathname: '/dashboard' }),
  Link: ({ children, to }) => <a href={to}>{children}</a>,
  Outlet: () => <div data-testid="outlet">Outlet</div>
}));

describe('Layout', () => {
  const renderLayout = () => {
    return render(
      <MemoryRouter>
        <Layout />
      </MemoryRouter>
    );
  };

  it('renders the layout with user information', () => {
    renderLayout();
    expect(screen.getAllByText('MerchantsOfHope-SupplyANdDemandPortal').length).toBeGreaterThan(0);
    expect(screen.getAllByText('John Doe').length).toBeGreaterThan(0);
    expect(screen.getAllByText('candidate').length).toBeGreaterThan(0);
  });

  it('renders navigation items for candidate role', () => {
    renderLayout();
    expect(screen.getAllByText('Dashboard').length).toBeGreaterThan(0);
    expect(screen.getAllByText('Jobs').length).toBeGreaterThan(0);
    expect(screen.getAllByText('Applications').length).toBeGreaterThan(0);
    expect(screen.getAllByText('Resumes').length).toBeGreaterThan(0);
  });

  it('renders logout button', () => {
    renderLayout();
    expect(screen.getByRole('button', { name: /logout/i })).toBeInTheDocument();
  });
});