import { describe, expect, it } from 'vitest'
import { render, screen, fireEvent } from '@testing-library/react'
import { axe } from 'vitest-axe'
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogTitle,
  DialogDescription,
} from './Dialog'

describe('Dialog', () => {
  it('shows content only after the trigger is activated', () => {
    render(
      <Dialog>
        <DialogTrigger>Open</DialogTrigger>
        <DialogContent>Panel</DialogContent>
      </Dialog>,
    )
    expect(screen.queryByText('Panel')).toBeNull()
    fireEvent.click(screen.getByText('Open'))
    expect(screen.getByText('Panel')).toBeDefined()
  })

  it('exposes a title/description path so the dialog has an accessible name', () => {
    render(
      <Dialog defaultOpen>
        <DialogContent>
          <DialogTitle>Menu</DialogTitle>
          <DialogDescription>Site navigation</DialogDescription>
          Panel
        </DialogContent>
      </Dialog>,
    )
    // Radix wires aria-labelledby/aria-describedby to these — without the
    // exports the dialog renders with no accessible name (a11y hard-floor).
    expect(screen.getByRole('dialog', { name: 'Menu' })).toBeDefined()
  })

  it('uses token-backed overlay/content chrome and stays axe-clean', async () => {
    const { container } = render(
      <Dialog defaultOpen>
        <DialogContent>
          <DialogTitle>Menu</DialogTitle>
          <DialogDescription>Site navigation</DialogDescription>
          Panel
        </DialogContent>
      </Dialog>,
    )
    expect(screen.getByRole('dialog').className).toContain('shadow-[var(--mod-shadow-lg)]')
    await expect(axe(container)).resolves.toHaveNoViolations()
  })
})