import { render, screen } from '@testing-library/react'
import { describe, expect, it } from 'vitest'
import { ATTENTION_ITEMS } from './fixtures/attention'
import { AttentionPanel } from './AttentionPanel'

describe('AttentionPanel', () => {
  it('renders three shared-grid attention rows', () => {
    render(<AttentionPanel items={ATTENTION_ITEMS} />)

    expect(screen.getAllByRole('listitem')).toHaveLength(3)
    expect(screen.getByText('Decision · t4 Backfill integrity')).toBeInTheDocument()
    expect(screen.getByText('Gate failed twice · t2 Write-path validation')).toBeInTheDocument()
    expect(screen.getByText('Capacity limited · codex')).toBeInTheDocument()
  })

  it('renders neutral empty state', () => {
    render(<AttentionPanel items={[]} />)

    expect(
      screen.getByText(
        "Nothing needs you right now. New decisions, failures, or stalls appear here when reported.",
      ),
    ).toBeInTheDocument()
  })

  it('renders agent actions as real links', () => {
    render(
      <AttentionPanel
        items={[
          {
            id: 'agent-t4',
            severity: 'critical',
            title: 'Agent needs attention',
            detail: 'Inspect recorded activity.',
            actions: [{ label: 'Open agent', href: '/plans/run-28/agents/t4.2' }],
          },
        ]}
      />,
    )

    expect(screen.getByRole('link', { name: 'Open agent' })).toHaveAttribute(
      'href',
      '/plans/run-28/agents/t4.2',
    )
  })

  it('makes every row span the panel grid tracks', () => {
    render(<AttentionPanel items={ATTENTION_ITEMS} />)

    for (const row of screen.getAllByRole('listitem')) {
      expect(row).toHaveClass('col-span-full', 'grid', 'grid-cols-subgrid')
    }
  })
})