import { render, screen } from '@testing-library/react'
import { BrowserRouter } from 'react-router'
import { describe, it, expect } from 'vitest'
import { AppLayout } from '@/components/AppLayout'

const renderWithRouter = (component: React.ReactNode) => {
  return render(<BrowserRouter>{component}</BrowserRouter>)
}

describe('AppLayout', () => {
  it('renders sidebar with app name', () => {
    renderWithRouter(<AppLayout />)

    const appNames = screen.getAllByText('AI Gateway')
    expect(appNames.length).toBeGreaterThan(0)
  })

  it('renders navigation menu items', () => {
    renderWithRouter(<AppLayout />)

    expect(screen.getByText('供应商管理')).toBeInTheDocument()
    expect(screen.getByText('用量统计')).toBeInTheDocument()
  })

  it('renders settings menu item', () => {
    renderWithRouter(<AppLayout />)

    expect(screen.getByText('设置')).toBeInTheDocument()
  })

  it('renders content outlet', () => {
    const { container } = renderWithRouter(<AppLayout />)

    // TDesign Layout content
    expect(container.querySelector('.t-layout__content')).toBeInTheDocument()
  })

  it('renders sidebar', () => {
    const { container } = renderWithRouter(<AppLayout />)

    // TDesign Layout.Aside might render with different class names
    // Check for Menu component which is in the sidebar
    expect(container.querySelector('.t-menu')).toBeInTheDocument()
  })

  it('renders header with page title', () => {
    const { container } = renderWithRouter(<AppLayout />)

    // TDesign Layout header
    expect(container.querySelector('.t-layout__header')).toBeInTheDocument()
  })
})
