// @vitest-environment jsdom
//
// `/` — the static, bilingual contact page. `renderMode='static'` +
// `interactive='islands'` (only the <ContactForm> island hydrates). We assert
// those config exports, the LOCALISED meta export (via getCatalog), and that
// the hero + contact sections render their translated copy. The page resolves
// its copy through @voltro/i18n, so we render it inside a real <I18nProvider>
// with the English catalog. The <ContactForm> island is mocked to a sentinel
// so this test covers the page shell in isolation; the island's own behavior
// (and its `labels` prop) is tested in ContactForm.island.test.tsx.

import { afterEach, describe, expect, test, vi } from 'vitest'
import { act, createElement, type ReactNode } from 'react'
import { createRoot, type Root } from 'react-dom/client'
import { I18nProvider } from '@voltro/i18n'
import en from '../locales/en'

vi.mock('../components/ContactForm.island', () => ({
  default: () => createElement('div', { 'data-testid': 'contact-form' }, 'form'),
}))

const { default: Index, meta, renderMode, interactive } = await import('./page')

;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true

let container: HTMLDivElement
let root: Root

const render = (node: ReactNode): void => {
  container = document.createElement('div')
  document.body.appendChild(container)
  act(() => {
    root = createRoot(container)
    root.render(
      createElement(I18nProvider, { locale: 'en', messages: en, defaultLocale: 'en', children: node }),
    )
  })
}

afterEach(() => {
  if (root) act(() => root.unmount())
  container?.remove()
  document.body.innerHTML = ''
})

describe('index — config + meta exports', () => {
  test('is a static, islands-hydrated page', () => {
    expect(renderMode).toBe('static')
    expect(interactive).toBe('islands')
  })

  test('declares a localised document title + description', () => {
    expect(meta({ locale: 'en' }).title).toContain('Get in touch')
    expect(meta({ locale: 'en' }).description).toBe('Static page, serverless contact form.')
    expect(meta({ locale: 'de' }).title).toContain('Kontakt')
    expect(meta({ locale: 'de' }).description).toBe('Statische Seite, Serverless-Kontaktformular.')
  })
})

describe('index — render', () => {
  test('renders the hero heading + copy and the contact section with the form island', () => {
    render(createElement(Index))
    expect(container.querySelector('.hero h1')).toBeTruthy()
    expect(container.textContent).toContain('pre-rendered')
    const contact = container.querySelector('.contact')
    expect(contact).toBeTruthy()
    expect(contact!.querySelector('h2')!.textContent).toBe('Send us a message')
    expect(container.querySelector('[data-testid="contact-form"]')).toBeTruthy()
  })
})