// @vitest-environment jsdom
//
// Home page (`/` = en, `/de` = de). Two things worth testing:
//   1. `meta({ locale })` is localized — it reads the REAL catalog via
//      getCatalog, so we assert en vs de titles/descriptions directly (no mock).
//   2. the rendered body shows localized message text. The page pulls copy from
//      @voltro/i18n (<T>, useT, useLocale); we mock those to resolve against the
//      real catalog for a controllable "current locale", so the assertions are
//      genuine localized strings, not placeholder ids.

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

// Controllable "active locale" for the i18n mock.
const catalogs: Record<string, Record<string, string>> = { en, de }
let currentLocale = 'en'

// Minimal ICU-ish interpolation: replace {key} with values[key]. Enough to
// assert the page threaded the right values into the right message.
const fill = (msg: string, values?: Record<string, unknown>): string =>
  values ? msg.replace(/\{(\w+)\}/g, (_, k: string) => String(values[k] ?? `{${k}}`)) : msg

vi.mock('@voltro/i18n', () => ({
  // The locale catalogs call these at module top-level; identity mirrors the
  // real (compile-time-only) implementations so importing them doesn't throw.
  defineCatalog: <T,>(c: T): T => c,
  defineLocale:
    () =>
    <T,>(c: T): T =>
      c,
  useLocale: () => currentLocale,
  useT: (id: string, values?: Record<string, unknown>) =>
    fill(catalogs[currentLocale]?.[id] ?? id, values),
  T: ({ id, values }: { id: string; values?: Record<string, unknown> }) =>
    fill(catalogs[currentLocale]?.[id] ?? id, values),
}))

const { default: Index, meta, renderMode } = 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(node)
  })
}

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

describe('home — config + localized meta', () => {
  test('is a static page', () => {
    expect(renderMode).toBe('static')
  })

  test('meta() returns the English catalog title/description for locale en', () => {
    const m = meta({ locale: 'en' })
    expect(m.title).toBe('Home — Voltro i18n')
    expect(m.description).toContain('bilingual')
  })

  test('meta() returns the German catalog title/description for locale de', () => {
    const m = meta({ locale: 'de' })
    expect(m.title).toBe('Start — Voltro i18n')
    expect(m.description).toContain('zweisprachige')
  })

  test('meta() falls back to the default (en) catalog for an unknown locale', () => {
    expect(meta({ locale: 'zz' }).title).toBe('Home — Voltro i18n')
  })
})

describe('home — localized render', () => {
  test('renders the English greeting + tagline when the active locale is en', () => {
    currentLocale = 'en'
    render(createElement(Index))
    expect(container.querySelector('h1')!.textContent).toBe('Hello, Voltro')
    expect(container.textContent).toContain('bilingual static site')
    expect(container.textContent).toContain('You are reading the EN version.')
  })

  test('renders the German greeting + tagline when the active locale is de', () => {
    currentLocale = 'de'
    render(createElement(Index))
    expect(container.querySelector('h1')!.textContent).toBe('Hallo, Voltro')
    expect(container.textContent).toContain('zweisprachige statische Website')
    expect(container.textContent).toContain('Du liest die DE-Version.')
  })
})