import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import Unauthorized from './Unauthorized.js';

describe('Unauthorized Component', () => {
  test('renders without crashing', () => {
    const { container } = render(<Unauthorized />);
    expect(container).toBeDefined();
  });

  test('displays unauthorized message', () => {
    render(<Unauthorized />);
    expect(screen.getByText('You do not have permission to access this page.')).toBeInTheDocument();
  });

  test('renders unauthorized icon image', () => {
    render(<Unauthorized />);
    const image = screen.getByAltText('unauthorized access');
    expect(image).toBeInTheDocument();
  });

  test('has correct container class', () => {
    const { container } = render(<Unauthorized />);
    expect(container.querySelector('.page-not-found')).toBeInTheDocument();
  });

  test('image has correct alt text', () => {
    render(<Unauthorized />);
    const image = screen.getByAltText('unauthorized access');
    expect(image).toHaveAttribute('alt', 'unauthorized access');
  });

  test('renders span with permission message', () => {
    const { container } = render(<Unauthorized />);
    const span = container.querySelector('span');
    expect(span).toBeInTheDocument();
    expect(span).toHaveTextContent('You do not have permission to access this page.');
  });

  test('component structure has image and span', () => {
    const { container } = render(<Unauthorized />);
    const unauthorized = container.querySelector('.page-not-found');
    const image = unauthorized.querySelector('img');
    const span = unauthorized.querySelector('span');
    expect(image).toBeInTheDocument();
    expect(span).toBeInTheDocument();
  });

  test('renders as a functional component', () => {
    const { container } = render(<Unauthorized />);
    expect(container.firstChild).not.toBeNull();
  });

  test('does not have any interactive elements', () => {
    const { container } = render(<Unauthorized />);
    const button = container.querySelector('button');
    const input = container.querySelector('input');
    expect(button).not.toBeInTheDocument();
    expect(input).not.toBeInTheDocument();
  });

  test('image src is defined', () => {
    render(<Unauthorized />);
    const image = screen.getByAltText('unauthorized access');
    expect(image).toHaveAttribute('src');
  });

  test('message is descriptive', () => {
    render(<Unauthorized />);
    const message = screen.getByText(/permission/i);
    expect(message).toBeInTheDocument();
  });
});
