/**
 * (happy path UX, interactions, navigation contract).
 */
import React from 'react'
import { fireEvent, render, screen } from '@testing-library/react'
import { describe, expect, it, jest } from '@jest/globals'

jest.mock('next-intl', () => {
  const translator = ((key: string) => key) as ((key: string) => string) & {
    rich: (
      key: string,
      values: {
        p: (chunks: React.ReactNode) => React.ReactNode
        retry: (chunks: React.ReactNode) => React.ReactNode
      }
    ) => React.ReactNode
  }

  translator.rich = (_key, values) => (
    <>
      {values.p('paragraph')}
      {values.retry('retry')}
    </>
  )

  return {
    useTranslations: () => translator,
  }
})

jest.mock('@/share/ui/empty', () => ({
  Empty: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
  EmptyHeader: ({ children }: { children: React.ReactNode }) => (
    <div>{children}</div>
  ),
  EmptyContent: ({ children }: { children: React.ReactNode }) => (
    <div>{children}</div>
  ),
  EmptyTitle: ({ children }: { children: React.ReactNode }) => (
    <div>{children}</div>
  ),
  EmptyDescription: ({ children }: { children: React.ReactNode }) => (
    <div>{children}</div>
  ),
}))

jest.mock('@/share/ui/button', () => ({
  Button: ({ children }: { children: React.ReactNode }) => (
    <button type="button">{children}</button>
  ),
}))

jest.mock('@/share/components/full-page/error-layout', () => ({
  __esModule: true,
  default: ({ children }: { children: React.ReactNode }) => (
    <div data-testid="error-page-layout">{children}</div>
  ),
}))

jest.mock('@/share/icons', () => ({
  Error404: () => <div>Error404Icon</div>,
}))

jest.mock('next/link', () => ({
  __esModule: true,
  default: ({ children, href }: { children: React.ReactNode; href: string }) => (
    <a href={href} data-testid="home-link">
      {children}
    </a>
  ),
}))

describe('[locale]/error.tsx — ErrorPage', () => {
  describe('happy path — copy', () => {
    it('renders title from common.error.title namespace', async () => {
      const { default: ErrorPage } = await import('../error')
      render(<ErrorPage error={new Error('boom')} reset={() => {}} />)
      expect(screen.getByText('error.title')).toBeInTheDocument()
      expect(screen.getByTestId('error-page-layout')).toBeInTheDocument()
      expect(screen.getByText('Error404Icon')).toBeInTheDocument()
    })
  })

  describe('interactions', () => {
    it('calls reset once when retry (rich translation) is clicked', async () => {
      const reset = jest.fn()
      const { default: ErrorPage } = await import('../error')

      render(<ErrorPage error={new Error('boom')} reset={reset} />)

      fireEvent.click(screen.getByText('retry'))

      expect(reset).toHaveBeenCalledTimes(1)
    })
  })

  describe('navigation contract', () => {
    it('"Got it" links to / with accessible label', async () => {
      const { default: ErrorPage } = await import('../error')

      render(<ErrorPage error={new Error('boom')} reset={() => {}} />)

      expect(screen.getByText('btn.got_it')).toBeInTheDocument()
      const link = screen.getByRole('link', { name: 'btn.got_it' })
      expect(link).toHaveAttribute('href', '/')
      expect(screen.getByTestId('home-link')).toHaveAttribute('href', '/')
    })
  })
})
