import React from 'react';
import ReactDOMServer from 'react-dom/server';
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 = () => {
    const markup = ReactDOMServer.renderToStaticMarkup(<Layout />);
    const container = document.createElement('div');
    container.innerHTML = markup;
    return container;
  };

  beforeEach(() => {
    mockUseAuth.logout.mockClear();
  });

  it('renders the layout with user information', () => {
    const container = renderLayout();
    const branding = Array.from(container.querySelectorAll('h1'))
      .map((node) => node.textContent);
    expect(branding).toContain('MerchantsOfHope-SupplyANdDemandPortal');

    const textContent = container.textContent || '';
    expect(textContent).toContain('John Doe');
    expect(textContent).toContain('candidate');
  });

  it('renders navigation items for candidate role', () => {
    const container = renderLayout();
    const navTexts = Array.from(container.querySelectorAll('a'))
      .map((link) => link.textContent.replace(/\s+/g, ' ').trim())
      .filter(Boolean);

    expect(navTexts).toEqual(expect.arrayContaining(['Dashboard', 'Jobs', 'Applications', 'Resumes']));
  });

  it('renders logout button', () => {
    const container = renderLayout();
    const buttons = Array.from(container.querySelectorAll('button'))
      .map((button) => button.textContent?.trim());
    expect(buttons).toContain('Logout');
  });
});