import { fireEvent, screen, within } from '@testing-library/react'
import { afterAll, beforeEach, describe, expect, it, vi } from 'vitest'
import { Route, Routes } from 'react-router-dom'

import HelpDetailPage from '@/pages/help/HelpDetailPage'
import { compileMdx, transformMdx } from '@/test/compileMdx'
import { helpFixture } from '@/test/helpFixtures'
import { renderWithProviders } from '@/test/render'

const prefetch = vi.hoisted (() => vi.fn (async () => {}))
vi.hoisted (() => {
  vi.stubGlobal ('Uint8Array', Object.getPrototypeOf (new TextEncoder ().encode ('')).constructor)
})
afterAll (() => vi.unstubAllGlobals ())
vi.mock ('@/lib/prefetchers', () => ({ prefetchForURL: prefetch }))
vi.mock ('@/lib/help', async () => (await import ('@/test/helpFixtures')).helpFixture.api)

const tableSource = [
    '# 表のある記事', '', '| 項目 | 説明 |', '| --- | --- |',
    '| [ヘルプ](/help/guide) | **強調** |', '| 通常 | 本文 |'].join ('\n')


describe ('Help MDX with the application compiler', () => {
  beforeEach (() => helpFixture.reset ())

  it ('compiles GFM table structure, links and emphasis', async () => {
    const Content = await compileMdx (tableSource)
    renderWithProviders (<Content/>)
    const table = screen.getByRole ('table')
    expect (table.querySelector ('thead')).not.toBeNull ()
    expect (table.querySelector ('tbody')).not.toBeNull ()
    expect (within (table).getAllByRole ('columnheader')).toHaveLength (2)
    expect (within (table).getAllByRole ('cell')).toHaveLength (4)
    expect (within (table).getByRole ('link', { name: 'ヘルプ' }))
	.toHaveAttribute ('href', '/help/guide')
    expect (table.querySelector ('strong')).toHaveTextContent ('強調')
  })

  it ('retains headings, paragraphs and lists', async () => {
    const Content = await compileMdx ('# 見出し\n\n本文\n\n- 第一\n- 第二')
    renderWithProviders (<Content/>)
    expect (screen.getByRole ('heading', { level: 1 })).toHaveTextContent ('見出し')
    expect (screen.getByText ('本文').tagName).toBe ('P')
    expect (screen.getAllByRole ('listitem')).toHaveLength (2)
  })

  it ('keeps tables inside the Help dark-mode typography container', async () => {
    const Content = await compileMdx (tableSource)
    helpFixture.modules['../../help/guide/editions/ja/2026-10-02.10.mdx']
	.mockResolvedValue ({ default: Content })
    renderWithProviders (
	<Routes><Route path="/help/:identifier" element={<HelpDetailPage/>}/></Routes>,
	{ route: '/help/guide' })
    const table = await screen.findByRole ('table')
    expect (table.closest ('article')).toHaveClass ('prose', 'dark:prose-invert')
  })

  it ('preserves long cell contents when rendering a wide table', async () => {
    const cell = 'wide'.repeat (100)
    const Content = await compileMdx (`| 項目 |\n| --- |\n| ${ cell } |`)
    renderWithProviders (<Content/>)
    expect (screen.getByRole ('cell')).toHaveTextContent (cell)
  })

  it.each (['.mdx?raw', '.mdx?url']) ('preserves the %s transform bypass', async suffix => {
    expect (await transformMdx (tableSource, suffix)).toBeNull ()
  })

  it ('uses the common PrefetchLink interaction for internal MDX links', async () => {
    prefetch.mockClear ()
    const Content = await compileMdx ('[内部リンク](/help/guide)')
    renderWithProviders (<Content/>)
    fireEvent.mouseEnter (screen.getByRole ('link', { name: '内部リンク' }))
    expect (prefetch).toHaveBeenCalledWith (expect.anything (),
	new URL ('/help/guide', window.location.origin).href)
  })
})