import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import { BrowserRouter } from 'react-router-dom';
import CreateSession from './CreateSession';
import axios from 'axios';

// Mock axios
jest.mock('axios');
const mockedAxios = axios as jest.Mocked<typeof axios>;

// Mock useNavigate
const mockedUseNavigate = jest.fn();
jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom'),
  useNavigate: () => mockedUseNavigate,
}));

describe('CreateSession', () => {
  beforeEach(() => {
    // Reset mocks before each test
    jest.clearAllMocks();
    mockedAxios.post.mockResolvedValue({ data: { sessionId: 'test-session-id' } });
  });

  test('renders loading state initially and then navigates to session page on successful creation', async () => {
    render(
      <BrowserRouter>
        <CreateSession />
      </BrowserRouter>
    );

    // Initially, it should show the loading state
    expect(screen.getByText(/Creating a new session.../i)).toBeInTheDocument();
    expect(screen.getByRole('progressbar')).toBeInTheDocument();

    // After session creation, it should navigate
    await waitFor(() => {
      expect(mockedUseNavigate).toHaveBeenCalledWith('/session/test-session-id');
    });
  });
});
