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

const renderWithRouter = (component: React.ReactNode) => {
  return render(<MemoryRouter initialEntries={['/providers']}>{component}</MemoryRouter>)
}

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

    expect(screen.getByText('Nex')).toBeInTheDocument()
    expect(screen.getByAltText('Nex logo')).toBeInTheDocument()
  })

  it('keeps logo visible when sidebar is collapsed', async () => {
    const user = userEvent.setup()
    renderWithRouter(<AppLayout />)

    await user.click(screen.getByLabelText('收起侧边栏'))

    expect(screen.getByAltText('Nex logo')).toBeInTheDocument()
    expect(screen.queryByText('Nex')).not.toBeInTheDocument()
    expect(screen.getByLabelText('展开侧边栏')).toBeInTheDocument()
  })

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

    expect(screen.getAllByText('供应商管理').length).toBeGreaterThan(0)
    expect(screen.getAllByText('总览').length).toBeGreaterThan(0)
  })

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

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

  it('renders about 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()
  })
})