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

describe('GroupCard', () => {
  it('renders title and children', () => {
    render(<GroupCard title="Test Group"><p>Content</p></GroupCard>)
    expect(screen.getByText('Test Group')).toBeInTheDocument()
    expect(screen.getByText('Content')).toBeInTheDocument()
  })

  it('renders title in mono font by default', () => {
    render(<GroupCard title="Mono Title"><p>C</p></GroupCard>)
    const title = screen.getByText('Mono Title')
    expect(title.className).toContain('titleMono')
  })

  it('renders non-mono title when titleMono=false', () => {
    render(<GroupCard title="Regular" titleMono={false}><p>C</p></GroupCard>)
    const title = screen.getByText('Regular')
    expect(title.className).toContain('title')
    expect(title.className).not.toContain('titleMono')
  })

  it('renders headerRight content', () => {
    render(<GroupCard title="T" headerRight={<span>Badge</span>}><p>C</p></GroupCard>)
    expect(screen.getByText('Badge')).toBeInTheDocument()
  })

  it('renders meta row when provided', () => {
    render(<GroupCard title="T" meta={<span>Meta info</span>}><p>C</p></GroupCard>)
    expect(screen.getByText('Meta info')).toBeInTheDocument()
  })

  it('renders footer when provided', () => {
    render(<GroupCard title="T" footer={<div>Alert</div>}><p>C</p></GroupCard>)
    expect(screen.getByText('Alert')).toBeInTheDocument()
  })

  it('does not render meta when not provided', () => {
    const { container } = render(<GroupCard title="T"><p>C</p></GroupCard>)
    expect(container.querySelector('[class*="meta"]')).not.toBeInTheDocument()
  })

  it('applies accent class', () => {
    const { container } = render(<GroupCard title="T" accent="error"><p>C</p></GroupCard>)
    expect(container.firstChild).toHaveClass(/accentError/)
  })

  it('calls onClick when header is clicked', async () => {
    const user = userEvent.setup()
    const onClick = vi.fn()
    render(<GroupCard title="Clickable" onClick={onClick}><p>C</p></GroupCard>)
    await user.click(screen.getByText('Clickable'))
    expect(onClick).toHaveBeenCalled()
  })
})
