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

import { CmsRouteProvider, type CmsRouteData, type CmsRouteDoc } from '@/spa/cmsRoute'
import { netzwerkContent } from '@/spa/netzwerkContent'
import Netzwerk from '@/spa/pages/Netzwerk'

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

const homePage = (videoUrl: string): CmsRouteDoc => ({
  id: `home-${videoUrl}`,
  slug: 'startseite',
  spaPath: '/',
  home: {
    hero: { videoLabel: 'Homepage film' },
    videoModal: {
      video: { url: videoUrl },
      title: 'Homepage video',
      closeLabel: 'Homepage video close',
    },
  },
})

const networkRoute = (video?: { url: string; label: string; title: string }): CmsRouteData => ({
  collection: 'pages',
  doc: {
    id: 'network-page',
    slug: 'netzwerk',
    spaPath: '/netzwerk',
    netzwerk: {
      patronage: {
        ...(video
          ? {
              greetingVideo: { url: video.url },
              greetingVideoButtonLabel: video.label,
              greetingVideoTitle: video.title,
              greetingVideoDescription: `${video.title} description`,
              greetingVideoCloseLabel: `${video.title} close`,
            }
          : {}),
      },
    },
  },
  lists: {
    pages: [homePage('/api/media/file/homepage.mp4')],
    partners: [],
    'jury-mitglieder': [],
  },
})

describe('Netzwerk greeting video', () => {
  beforeAll(() => {
    Object.defineProperty(window, 'matchMedia', {
      configurable: true,
      value: vi.fn().mockImplementation((query: string) => ({
        addEventListener: vi.fn(),
        matches: false,
        media: query,
        removeEventListener: vi.fn(),
      })),
    })
    vi.spyOn(HTMLMediaElement.prototype, 'play').mockResolvedValue(undefined)
  })

  afterEach(() => cleanup())

  it('does not fall back to the homepage video when Netzwerk media is empty', () => {
    render(
      <CmsRouteProvider value={networkRoute()}>
        <Netzwerk />
      </CmsRouteProvider>,
    )

    expect(screen.queryByRole('button', { name: netzwerkContent.patronage.greetingVideoButtonLabel })).toBeNull()
    expect(screen.queryByLabelText('Homepage video')).toBeNull()
  })

  it('resolves the page-owned Netzwerk media independently of homepage changes', () => {
    const firstNetworkVideo = {
      url: '/api/media/file/network-first.mp4',
      label: 'Play Netzwerk greeting',
      title: 'Netzwerk greeting one',
    }
    const secondNetworkVideo = {
      url: '/api/media/file/network-second.mp4',
      label: 'Play second Netzwerk greeting',
      title: 'Netzwerk greeting two',
    }
    const { rerender } = render(
      <CmsRouteProvider value={networkRoute(firstNetworkVideo)}>
        <Netzwerk />
      </CmsRouteProvider>,
    )

    fireEvent.click(screen.getByRole('button', { name: firstNetworkVideo.label }))
    expect(screen.getByRole('dialog').querySelector('video')?.getAttribute('src')).toBe(firstNetworkVideo.url)

    const homeChanged = networkRoute(firstNetworkVideo)
    homeChanged.lists = {
      ...homeChanged.lists,
      pages: [homePage('/api/media/file/homepage-changed.mp4')],
    }
    rerender(
      <CmsRouteProvider value={homeChanged}>
        <Netzwerk />
      </CmsRouteProvider>,
    )
    expect(screen.getByRole('dialog').querySelector('video')?.getAttribute('src')).toBe(firstNetworkVideo.url)

    rerender(
      <CmsRouteProvider value={networkRoute(secondNetworkVideo)}>
        <Netzwerk />
      </CmsRouteProvider>,
    )
    expect(screen.getByRole('dialog').querySelector('video')?.getAttribute('src')).toBe(secondNetworkVideo.url)
  })
})