import { fireEvent, render, screen } from '@testing-library/react'
import { describe, expect, it, vi } from 'vitest'
import HelpButton from './HelpButton'
import { HELP } from './helpContent'

describe('HelpButton', () => {
  it('물음표를 누르면 그 기능의 설명서가 열린다', () => {
    render(<HelpButton topic="dashboard.kanban" />)

    expect(screen.queryByRole('dialog')).toBeNull()
    fireEvent.click(screen.getByRole('button', { name: '단계별 현황 (칸반) 도움말' }))

    const dialog = screen.getByRole('dialog')
    expect(dialog.textContent).toContain('기관 카드를 끌어다 놓아')
    expect(dialog.textContent).toContain('사용 방법')
    expect(dialog.textContent).toContain('알아둘 점')
  })

  it('캡처 이미지를 캡션과 함께 보여준다', () => {
    render(<HelpButton topic="dashboard.kpi" />)
    fireEvent.click(screen.getByRole('button', { name: 'KPI 타일 도움말' }))

    const image = screen.getByAltText('대시보드 상단 KPI 타일 7개')
    expect(image).toHaveAttribute('src', '/help/dashboard-kpi.png')
    expect(screen.getByText(/왼쪽부터 신청/)).toBeTruthy()
  })

  it('닫기·바깥 클릭·ESC로 닫힌다', () => {
    render(<HelpButton topic="system.reset" />)
    const open = () => fireEvent.click(screen.getByRole('button', { name: '채널 초기화 도움말' }))

    open()
    fireEvent.click(screen.getByRole('button', { name: '닫기' }))
    expect(screen.queryByRole('dialog')).toBeNull()

    open()
    fireEvent.click(screen.getByRole('dialog'))
    expect(screen.queryByRole('dialog')).toBeNull()

    open()
    fireEvent.keyDown(window, { key: 'Escape' })
    expect(screen.queryByRole('dialog')).toBeNull()
  })

  it('카드나 표 줄 안에 있어도 상위 클릭으로 번지지 않는다', () => {
    const onRowClick = vi.fn()
    render(
      <div onClick={onRowClick}>
        <HelpButton topic="dashboard.recent" />
      </div>,
    )

    fireEvent.click(screen.getByRole('button', { name: '최근 진행 기관 도움말' }))

    expect(screen.getByRole('dialog')).toBeTruthy()
    expect(onRowClick).not.toHaveBeenCalled()
  })

  it('없는 topic이면 아무것도 그리지 않는다', () => {
    const { container } = render(<HelpButton topic="없는.항목" />)
    expect(container.innerHTML).toBe('')
  })

  it('모든 도움말 항목은 제목·요약을 갖는다', () => {
    for (const [key, topic] of Object.entries(HELP)) {
      expect(topic.title, key).toBeTruthy()
      expect(topic.summary, key).toBeTruthy()
      expect(topic.steps?.length ?? topic.cautions?.length ?? 0, key).toBeGreaterThan(0)
    }
  })
})