// @vitest-environment jsdom
//
// Render smokes for the root layout (passes children through) and the
// (marketing) group layout (brand header + nav links wrapping the children).

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'

const { default: RootLayout } = await import('./layout')
const { default: MarketingLayout } = await import('./(marketing)/layout')

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

let container: HTMLDivElement
let root: Root

// MarketingLayout uses <T>/useLocale + <LocaleSwitcher>, so wrap renders in the
// framework's <I18nProvider> (auto-wired 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('root layout', () => {
  test('renders its children unchanged', () => {
    render(createElement(RootLayout, { children: createElement('p', null, 'hello') }))
    expect(container.textContent).toContain('hello')
  })
})

describe('marketing layout', () => {
  test('renders the header nav (Dashboard + Sign in) around the children', () => {
    render(createElement(MarketingLayout, { children: createElement('p', null, 'body') }))
    const hrefs = Array.from(container.querySelectorAll('a')).map((a) => a.getAttribute('href'))
    expect(hrefs).toContain('/dashboard')
    expect(hrefs).toContain('/login')
    expect(container.textContent).toContain('body')
  })
})