// @vitest-environment happy-dom
import { describe, expect, it, vi } from 'vitest'
import { fireEvent, render, screen, waitFor } from '@testing-library/react'

// The sidebar fetches forms unread counts on mount for the Forms badge. Stub
// it so these submenu tests stay offline and deterministic (no real fetch /
// teardown-abort noise).
vi.mock('../../lib/forms-service.js', () => ({
  fetchFormsSidebarCounts: vi.fn(async () => []),
}))

const { Sidebar } = await import('../../layout/Sidebar.js')

/**
 * Submenu rendering behaviour:
 *  - Expanded: parent children (e.g. Posts -> All Posts / Post Types) render
 *    inline beneath the parent.
 *  - Collapsed: children are hidden inline and instead revealed in a
 *    hover/focus flyout, so the 80px rail stays clean but sub-pages remain
 *    reachable.
 */
function renderSidebar(collapsed: boolean) {
  return render(
    <Sidebar
      collapsed={collapsed}
      onToggleCollapse={() => {}}
      currentPath="/"
      onNavigate={() => {}}
    />,
  )
}

describe('Sidebar submenus', () => {
  it('renders children inline when expanded', () => {
    renderSidebar(false)
    expect(screen.getByText('All Posts')).toBeTruthy()
    expect(screen.getByText('Post Types')).toBeTruthy()
    expect(screen.getByText('Saved Sections')).toBeTruthy()
    expect(screen.getByText('Widgets')).toBeTruthy()
  })

  it('collapses and re-expands a parent submenu via the chevron toggle', () => {
    renderSidebar(false)

    // Children visible by default.
    expect(screen.getByText('All Posts')).toBeTruthy()

    // Collapse the Posts section.
    fireEvent.click(screen.getByRole('button', { name: 'Collapse Posts' }))
    expect(screen.queryByText('All Posts')).toBeNull()

    // Re-expand it.
    fireEvent.click(screen.getByRole('button', { name: 'Expand Posts' }))
    expect(screen.getByText('All Posts')).toBeTruthy()
  })

  it('keeps the active section expanded even when toggled closed', () => {
    render(
      <Sidebar
        collapsed={false}
        onToggleCollapse={() => {}}
        currentPath="/posts"
        onNavigate={() => {}}
      />,
    )

    // Active section forces the submenu open; the chevron reports it as
    // expanded and offers to collapse.
    expect(screen.getByText('All Posts')).toBeTruthy()
    fireEvent.click(screen.getByRole('button', { name: 'Collapse Posts' }))
    // Still visible because the section is the active route.
    expect(screen.getByText('All Posts')).toBeTruthy()
  })

  it('hides children inline when collapsed and exposes them in a hover flyout', async () => {
    renderSidebar(true)

    // Inline children are not rendered in the collapsed rail.
    expect(screen.queryByText('All Posts')).toBeNull()
    expect(screen.queryByText('Post Types')).toBeNull()

    // The parent is still reachable as an icon button labelled for AT.
    const trigger = screen.getByRole('button', { name: 'Posts' })

    // Hovering the parent opens the flyout (onMouseEnter lives on the wrapper).
    fireEvent.mouseEnter(trigger.parentElement as HTMLElement)

    await waitFor(() => {
      expect(screen.getByText('All Posts')).toBeTruthy()
      expect(screen.getByText('Post Types')).toBeTruthy()
    })
  })
})
