// @vitest-environment happy-dom
import { render, screen, within } from '@testing-library/react'
import '@testing-library/jest-dom/vitest'
import { vi } from 'vitest'
import { AppLayout } from './AppLayout'

// Mock dependencies
vi.mock('@tanstack/react-router', () => ({
  Link: ({ children, to }: any) => {
    const content = typeof children === 'function' ? children({ isActive: false }) : children
    return <a href={to}>{content}</a>
  },
}))
vi.mock('@/components/ThemeToggle', () => ({ ThemeToggle: () => null }))
vi.mock('@/components/HealthDot', () => ({ HealthDot: () => null }))
vi.mock('@/components/NavBadge', () => ({
  NavBadge: ({ count }: { count: number }) => (
    count > 0 ? <span data-testid="nav-badge">{count}</span> : null
  ),
}))

const mockUseQuery = vi.hoisted(() => vi.fn())
vi.mock('@/lib/trpc', () => ({
  trpc: {
    listAgents: { useQuery: mockUseQuery },
  },
}))

beforeEach(() => {
  vi.clearAllMocks()
  mockUseQuery.mockReturnValue({ data: [] })
})

describe('AppLayout navItems', () => {
  it('renders HQ nav link', () => {
    render(<AppLayout connectionState="connected">{null}</AppLayout>)
    expect(screen.getByRole('link', { name: /hq/i })).toBeInTheDocument()
  })

  it('does not render Inbox nav link', () => {
    render(<AppLayout connectionState="connected">{null}</AppLayout>)
    expect(screen.queryByRole('link', { name: /inbox/i })).not.toBeInTheDocument()
  })

  it('shows badge on HQ when agents are waiting_for_input', () => {
    mockUseQuery.mockReturnValue({
      data: [
        { id: '1', status: 'waiting_for_input' },
        { id: '2', status: 'running' },
      ],
    })
    render(<AppLayout connectionState="connected">{null}</AppLayout>)
    // NavBadge rendered next to HQ link (count=1)
    const hqLink = screen.getByRole('link', { name: /hq/i })
    const badge = within(hqLink).getByTestId('nav-badge')
    expect(badge).toHaveTextContent('1')
  })

  it('does not show questions badge on any Inbox link (Inbox removed)', () => {
    mockUseQuery.mockReturnValue({
      data: [{ id: '1', status: 'waiting_for_input' }],
    })
    render(<AppLayout connectionState="connected">{null}</AppLayout>)
    expect(screen.queryByRole('link', { name: /inbox/i })).not.toBeInTheDocument()
  })
})
