// @vitest-environment jsdom
//
// `/` docs landing — a bilingual static page (Strategy B). Its links are
// locale-prefixed off the active locale via `withLocalePrefix`, so /de's
// landing points at the /de docs. We assert the render-mode config, the
// localized meta, and that the links resolve to the right locale's URLs.
// The heading carries a `{{capProjectName}}` scaffold placeholder threaded in
// as a <T> value, so we assert the localized suffix, not the substituted name.

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'

const catalogs: Record<string, Record<string, string>> = { en, de }
let currentLocale = 'en'

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,
  T: ({ id, values }: { id: string; values?: Record<string, unknown> }) =>
    fill(catalogs[currentLocale]?.[id] ?? id, values),
}))

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(node)
  })
}

const hrefs = (): Array<string | null> =>
  Array.from(container.querySelectorAll('a')).map((a) => a.getAttribute('href'))

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

describe('index — config + localized meta', () => {
  test('is a static page with no client JS', () => {
    expect(renderMode).toBe('static')
    expect(interactive).toBe('none')
  })

  test('meta() is localized per locale', () => {
    expect(meta({ locale: 'en' }).title).toBe('Documentation')
    expect(meta({ locale: 'de' }).title).toBe('Dokumentation')
    expect(meta({ locale: 'zz' }).title).toBe('Documentation')
  })
})

describe('index — localized render', () => {
  test('links to both doc pages with bare (en) URLs and English titles', () => {
    currentLocale = 'en'
    render(createElement(Index))
    expect(hrefs()).toEqual(['/docs/intro/getting-started', '/docs/guides/first-page'])
    expect(container.textContent).toContain('Getting started')
    expect(container.textContent).toContain('Your first page')
  })

  test('prefixes the doc links with /de and shows German titles for locale de', () => {
    currentLocale = 'de'
    render(createElement(Index))
    expect(hrefs()).toEqual(['/de/docs/intro/getting-started', '/de/docs/guides/first-page'])
    expect(container.textContent).toContain('Erste Schritte')
    expect(container.textContent).toContain('Deine erste Seite')
  })
})