import { cleanup, render, screen, within } from '@testing-library/react'
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'

import { CmsRouteProvider, type CmsRouteData } from '@/spa/cmsRoute'
import { pressIndexContent } from '@/spa/pressIndexContent'
import Press from '@/spa/pages/Press'

const viewport = vi.hoisted(() => ({ mobile: false }))

vi.mock('@/spa/hooks/useIsMobile', () => ({
  useIsMobile: () => viewport.mobile,
}))

vi.mock('next/navigation', () => ({
  usePathname: () => '/presse',
  useRouter: () => ({ push: vi.fn(), replace: vi.fn() }),
}))

const pressRoute = (contactImage?: unknown, contactImageAlt?: string): CmsRouteData => ({
  collection: 'pages',
  doc: {
    id: 'press-page',
    slug: 'presse',
    spaPath: '/presse',
    pressIndex: {
      downloads: {
        contactImage,
        contactImageAlt,
      },
    },
  },
  lists: {
    events: [],
    posts: [],
  },
})

describe('Presse contact image', () => {
  beforeEach(() => {
    viewport.mobile = false
  })

  afterEach(() => cleanup())

  it('renders selected media and page-owned alt text in the desktop right column', () => {
    render(
      <CmsRouteProvider
        value={pressRoute(
          { url: '/api/media/file/press-contact.jpg', alt: 'Media default alt' },
          'Press team portrait',
        )}
      >
        <Press />
      </CmsRouteProvider>,
    )

    const layout = screen.getByTestId('press-contact-layout')
    const imageColumn = screen.getByTestId('press-contact-image')
    const image = within(imageColumn).getByRole('img', { name: 'Press team portrait' })

    expect(layout.getAttribute('data-layout')).toBe('two-column')
    expect(layout.style.gridTemplateColumns).toBe('minmax(0, 1fr) minmax(320px, 1fr)')
    expect(image.getAttribute('src')).toBe('/api/media/file/press-contact.jpg')
    expect(
      screen.getByTestId('press-contact-copy').compareDocumentPosition(imageColumn) &
        Node.DOCUMENT_POSITION_FOLLOWING,
    ).toBeTruthy()
  })

  it('clears only the visual and keeps the contact copy in a compact fallback-free layout', () => {
    const { rerender } = render(
      <CmsRouteProvider
        value={pressRoute({ url: '/api/media/file/press-contact.jpg' }, 'Press contact')}
      >
        <Press />
      </CmsRouteProvider>,
    )

    expect(screen.getByTestId('press-contact-image')).toBeTruthy()

    rerender(
      <CmsRouteProvider value={pressRoute(undefined, '')}>
        <Press />
      </CmsRouteProvider>,
    )

    const layout = screen.getByTestId('press-contact-layout')
    expect(screen.queryByTestId('press-contact-image')).toBeNull()
    expect(layout.getAttribute('data-layout')).toBe('copy-only')
    expect(layout.style.gridTemplateColumns).toBe('1fr')
    expect(
      within(screen.getByTestId('press-contact-copy')).getByText(
        pressIndexContent.downloads.contactName,
      ),
    ).toBeTruthy()
    expect(within(layout).queryByRole('img')).toBeNull()
  })

  it('stacks copy before the selected image on mobile', () => {
    viewport.mobile = true

    render(
      <CmsRouteProvider
        value={pressRoute({ filename: 'press-contact-mobile.jpg' }, 'Mobile press contact')}
      >
        <Press />
      </CmsRouteProvider>,
    )

    const layout = screen.getByTestId('press-contact-layout')
    const copy = screen.getByTestId('press-contact-copy')
    const imageColumn = screen.getByTestId('press-contact-image')

    expect(layout.getAttribute('data-layout')).toBe('stacked')
    expect(layout.style.gridTemplateColumns).toBe('1fr')
    expect(
      within(imageColumn).getByRole('img', { name: 'Mobile press contact' }).getAttribute('src'),
    ).toBe('/api/media/file/press-contact-mobile.jpg')
    expect(
      copy.compareDocumentPosition(imageColumn) & Node.DOCUMENT_POSITION_FOLLOWING,
    ).toBeTruthy()
  })
})