// AcademicDetail.test.js
import { render, screen, waitFor, act } from '@testing-library/react';
import AcademicDetail from '../components/Pages/Activities/AcademicDetail';
import { MemoryRouter, useParams, useLocation } from 'react-router-dom';
import '@testing-library/jest-dom';
import React from 'react';

// Mock de componentes
jest.mock('../components/NavBar', () => () => <div>Mocked NavBar</div>);
jest.mock('../components/DetailCard', () => (props) => (
  <div data-testid="mocked-detail-card">
    <h1>{props.title}</h1>
    <p>{props.description}</p>
    <img src={props.image} alt={props.title} />
  </div>
));

// Mock de useParams y useLocation
jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom'),
  useParams: jest.fn(),
  useLocation: jest.fn(),
}));

describe('AcademicDetail Frontend Tests', () => {
  beforeEach(() => {
    useParams.mockReturnValue({ id: 'test-id' });
    useLocation.mockReturnValue({ pathname: '/some-path' });
  });

  afterEach(() => {
    jest.clearAllMocks();
  });

  test('renders loading state initially', () => {
    render(
      <MemoryRouter>
        <AcademicDetail />
      </MemoryRouter>
    );
    expect(screen.getByText(/Loading/i)).toBeInTheDocument();
  });

  test('renders NavBar and DetailCard when activity is loaded', async () => {
    const mockActivity = {
      name: 'Nombre de la actividad',
      description: 'Descripción de la actividad',
      id_image: 'base64image',
    };

    jest.spyOn(React, 'useState').mockImplementationOnce(() => [mockActivity, jest.fn()]);

    render(
      <MemoryRouter>
        <AcademicDetail />
      </MemoryRouter>
    );

    expect(screen.getByText(/Mocked NavBar/i)).toBeInTheDocument();

    await waitFor(() => {
      expect(screen.getByTestId('mocked-detail-card')).toBeInTheDocument();
      expect(screen.getByText('Nombre de la actividad')).toBeInTheDocument();
      expect(screen.getByText('Descripción de la actividad')).toBeInTheDocument();
      expect(screen.getByAltText('Nombre de la actividad')).toBeInTheDocument();
    });
  });
});