// @vitest-environment jsdom
//
// `/` — the blank starter's single page. A pure static component with no
// hooks, loader, or meta; we mount it and assert its observable structure
// (the heading element + the "start building" copy + the src/pages hint).
// The heading text itself carries a `{{capProjectName}}` scaffold placeholder,
// so we assert the <h1> EXISTS rather than pinning its substituted text.

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

import Index from './page'

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

let container: HTMLDivElement
let root: Root

// The page uses <T>, so it needs an <I18nProvider>. Wrap with the real English
// catalog (the framework auto-wires this provider in the running app).
const render = (node: ReactNode): void => {
  container = document.createElement('div')
  document.body.appendChild(container)
  act(() => {
    root = createRoot(container)
    root.render(
      createElement(I18nProvider, { locale: 'en', messages: enCatalog, defaultLocale: 'en', children: node }),
    )
  })
}

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

describe('index — render', () => {
  test('renders a top-level heading inside a <main>', () => {
    render(createElement(Index))
    const main = container.querySelector('main')
    expect(main).toBeTruthy()
    expect(main!.querySelector('h1')).toBeTruthy()
  })

  test('shows the getting-started hint pointing at src/pages/index.tsx', () => {
    render(createElement(Index))
    expect(container.textContent).toContain('Edit')
    const codes = Array.from(container.querySelectorAll('code')).map((c) => c.textContent)
    expect(codes).toContain('src/pages/index.tsx')
  })
})