import { describe, it, expect } from 'vitest'
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { Popover } from './Popover'

describe('Popover', () => {
  it('does not show content initially', () => {
    render(
      <Popover trigger={<button>Open</button>} content={<p>Popover content</p>} />,
    )
    expect(screen.queryByText('Popover content')).not.toBeInTheDocument()
  })

  it('shows content on trigger click', async () => {
    const user = userEvent.setup()
    render(
      <Popover trigger={<button>Open</button>} content={<p>Popover content</p>} />,
    )
    await user.click(screen.getByText('Open'))
    expect(screen.getByText('Popover content')).toBeInTheDocument()
  })

  it('toggles closed on second trigger click', async () => {
    const user = userEvent.setup()
    render(
      <Popover trigger={<button>Open</button>} content={<p>Popover content</p>} />,
    )
    await user.click(screen.getByText('Open'))
    expect(screen.getByText('Popover content')).toBeInTheDocument()
    await user.click(screen.getByText('Open'))
    expect(screen.queryByText('Popover content')).not.toBeInTheDocument()
  })

  it('closes on Esc key', async () => {
    const user = userEvent.setup()
    render(
      <Popover trigger={<button>Open</button>} content={<p>Popover content</p>} />,
    )
    await user.click(screen.getByText('Open'))
    expect(screen.getByText('Popover content')).toBeInTheDocument()
    await user.keyboard('{Escape}')
    expect(screen.queryByText('Popover content')).not.toBeInTheDocument()
  })

  it('closes on outside click', async () => {
    const user = userEvent.setup()
    render(
      <div>
        <Popover trigger={<button>Open</button>} content={<p>Popover content</p>} />
        <button>Outside</button>
      </div>,
    )
    await user.click(screen.getByText('Open'))
    expect(screen.getByText('Popover content')).toBeInTheDocument()
    await user.click(screen.getByText('Outside'))
    expect(screen.queryByText('Popover content')).not.toBeInTheDocument()
  })

  it('renders content via portal into document.body', async () => {
    const user = userEvent.setup()
    render(
      <Popover trigger={<button>Open</button>} content={<p>Popover content</p>} />,
    )
    await user.click(screen.getByText('Open'))
    const contentEl = screen.getByTestId('popover-content')
    expect(document.body.contains(contentEl)).toBe(true)
  })

  it('accepts position prop without error', async () => {
    const user = userEvent.setup()
    render(
      <Popover
        trigger={<button>Open</button>}
        content={<p>Top content</p>}
        position="top"
      />,
    )
    await user.click(screen.getByText('Open'))
    expect(screen.getByText('Top content')).toBeInTheDocument()
  })

  it('accepts align prop without error', async () => {
    const user = userEvent.setup()
    render(
      <Popover
        trigger={<button>Open</button>}
        content={<p>Start aligned</p>}
        position="bottom"
        align="start"
      />,
    )
    await user.click(screen.getByText('Open'))
    expect(screen.getByText('Start aligned')).toBeInTheDocument()
  })

  it('does not close when clicking inside the content panel', async () => {
    const user = userEvent.setup()
    render(
      <Popover
        trigger={<button>Open</button>}
        content={<button>Inner button</button>}
      />,
    )
    await user.click(screen.getByText('Open'))
    await user.click(screen.getByText('Inner button'))
    expect(screen.getByText('Inner button')).toBeInTheDocument()
  })
})
