import { fireEvent, render, screen } from '@testing-library/react'

import UpdateLogModal from '@/components/UpdateLogModal'

const updateLog = {
  version: '2026.08.15',
  date: '2026-08-15',
  title: '系统更新',
  items: [
    {
      type: 'feature' as const,
      title: '品牌中心看板上线',
      description: '看板首页已经切换到全新的视觉标准。',
    },
    {
      type: 'fix' as const,
      title: '修复展示问题',
      description: '修复部分页面的展示异常。',
    },
  ],
}

describe('UpdateLogModal', () => {
  test('使用可访问的弹窗结构展示更新清单', () => {
    render(<UpdateLogModal isOpen onClose={jest.fn()} updateLog={updateLog} />)

    expect(screen.getByRole('dialog', { name: '系统更新' })).toHaveAttribute('aria-modal', 'true')
    expect(screen.getByText('Version 2026.08.15 · 2026-08-15')).toBeInTheDocument()
    expect(screen.getByText('01')).toBeInTheDocument()
    expect(screen.getByText('02')).toBeInTheDocument()
    expect(screen.getByText('新增')).toBeInTheDocument()
    expect(screen.getByText('修复')).toBeInTheDocument()
    expect(screen.getByRole('button', { name: '关闭' })).toHaveFocus()
  })

  test('支持 Escape、确认按钮和焦点循环', () => {
    const onClose = jest.fn()
    const opener = document.createElement('button')
    document.body.appendChild(opener)
    opener.focus()

    const { unmount } = render(<UpdateLogModal isOpen onClose={onClose} updateLog={updateLog} />)
    const closeButton = screen.getByRole('button', { name: '关闭' })
    const confirmButton = screen.getByRole('button', { name: '知道了' })

    confirmButton.focus()
    fireEvent.keyDown(document, { key: 'Tab' })
    expect(closeButton).toHaveFocus()

    fireEvent.keyDown(document, { key: 'Escape' })
    expect(onClose).toHaveBeenCalledTimes(1)

    fireEvent.click(confirmButton)
    expect(onClose).toHaveBeenCalledTimes(2)

    unmount()
    expect(opener).toHaveFocus()
    opener.remove()
  })
})