import { render } from '@testing-library/react'
import { describe, expect, it, beforeEach } from 'vitest'

import { CoreAppChrome } from './core-app-chrome'

describe('CoreAppChrome React wrapper', () => {
  beforeEach(() => {
    localStorage.clear()
    window.history.replaceState({}, '', '/app')
  })

  it('mounts the vanilla native core chrome inside React host elements', () => {
    const { container } = render(
      <CoreAppChrome
        basePath="/app"
        pathname="/app/jobs"
        scope={{
          label: 'Tenant',
          value: 'all',
          options: [{ id: 'all', label: 'All Tenants' }],
        }}
      />
    )

    const sidebar = container.querySelector<HTMLElement>('.sidebar')
    const topbar = container.querySelector<HTMLElement>('.cmm-topbar')
    const active = container.querySelector<HTMLElement>('[data-item-id="jobs"]')

    expect(container.querySelector('[data-slot="core-app-chrome"]')).toBeTruthy()
    expect(sidebar?.classList.contains('sidebar--product')).toBe(true)
    expect(sidebar?.getAttribute('data-sidebar')).toBe('cm')
    expect(active?.classList.contains('sidebar__item--active')).toBe(true)
    expect(topbar?.querySelector('.cmm-topbar__product')?.textContent).toBe('CounterMeasure Core')
    expect(topbar?.querySelector('.cmm-topbar__current')?.textContent).toBe('Jobs')
    expect(container.querySelector('.sidebar__scope-current')?.textContent).toBe('All Tenants')
  })

  it('remounts through the vanilla API when route props change', () => {
    const { container, rerender } = render(<CoreAppChrome basePath="/app" pathname="/app/jobs" />)

    expect(container.querySelector('.cmm-topbar__current')?.textContent).toBe('Jobs')
    expect(
      container.querySelector('[data-item-id="jobs"]')?.classList.contains('sidebar__item--active')
    ).toBe(true)

    rerender(<CoreAppChrome basePath="/app" pathname="/app/runners" />)

    expect(container.querySelector('.cmm-topbar__current')?.textContent).toBe('Runners')
    expect(
      container
        .querySelector('[data-item-id="runners"]')
        ?.classList.contains('sidebar__item--active')
    ).toBe(true)
    expect(container.querySelectorAll('.sidebar')).toHaveLength(1)
    expect(container.querySelectorAll('.cmm-topbar')).toHaveLength(1)
  })

  it('supports sidebar-only mounts and host class names', () => {
    const { container } = render(
      <CoreAppChrome
        className="chrome-host"
        sidebarClassName="sidebar-host"
        topbar={false}
        basePath="/app"
        pathname="/app"
      />
    )

    expect(
      container.querySelector('[data-slot="core-app-chrome"]')?.classList.contains('chrome-host')
    ).toBe(true)
    expect(
      container.querySelector('[data-slot="core-app-sidebar"]')?.classList.contains('sidebar-host')
    ).toBe(true)
    expect(container.querySelector('.sidebar')).toBeTruthy()
    expect(container.querySelector('.cmm-topbar')).toBeNull()
  })

  it('passes custom vanilla mount options through without duplicating behavior in React', () => {
    const customAction = {
      id: 'custom',
      label: 'Custom Action',
      attributes: { 'data-custom-action': true },
    }

    const { container } = render(
      <CoreAppChrome
        basePath="/app"
        pathname="/app/custom"
        preserveTopbarActions={false}
        topbarActionSelector="[data-preserve-me]"
        clearContainers={false}
        sidebar={{
          sections: [
            {
              id: 'custom',
              items: [{ id: 'custom-item', label: 'Custom Item', href: '/app/custom' }],
            },
          ],
          activeItemId: 'custom-item',
          collapsible: false,
          mobileBackdrop: false,
        }}
        topbar={{
          product: 'Core React',
          current: 'Custom Current',
          actions: [customAction],
        }}
      />
    )

    expect(container.querySelector('[data-item-id="custom-item"]')?.textContent).toContain(
      'Custom Item'
    )
    expect(
      container
        .querySelector('[data-item-id="custom-item"]')
        ?.classList.contains('sidebar__item--active')
    ).toBe(true)
    expect(container.querySelector('.cmm-topbar__product')?.textContent).toBe('Core React')
    expect(container.querySelector('.cmm-topbar__current')?.textContent).toBe('Custom Current')
    expect(container.querySelector('[data-custom-action]')).toBeTruthy()
  })
})
