import { describe, it, expect, vi } from 'vitest'
import { render, screen, fireEvent, waitFor } from '@testing-library/react'
import App from './App.jsx'

// Mock only the components, not the hook
vi.mock('./components/ChatWindow.jsx', () => ({
  ChatWindow: () => <div data-testid="chat-window">ChatWindow Mock</div>
}))

vi.mock('./components/SessionDrawer.jsx', () => ({
  SessionDrawer: ({ isOpen }) => isOpen ? <div data-testid="session-drawer">SessionDrawer Mock</div> : null
}))

describe('App', () => {
  it('should render app with menu button', async () => {
    render(<App />)

    // Wait for loading to finish (hook will set isLoading false after mount)
    await waitFor(() => {
      expect(screen.getByTestId('chat-window')).toBeInTheDocument()
    })

    // Check menu button exists
    expect(screen.getByTitle(/Open Menu/i)).toBeInTheDocument()
  })

  it('should open session drawer when menu clicked', async () => {
    render(<App />)

    await waitFor(() => {
      expect(screen.getByTestId('chat-window')).toBeInTheDocument()
    })

    fireEvent.click(screen.getByTitle(/Open Menu/i))

    await waitFor(() => {
      expect(screen.getByTestId('session-drawer')).toBeInTheDocument()
    })
  })
})