import { describe, expect, it } from 'vitest'
import { mount } from '@vue/test-utils'
import { createPinia } from 'pinia'
import AppShellV2 from '@/layouts/components/AppShellV2.vue'

describe('AppShellV2 (skeleton)', () => {
  it('renders the grid regions and default slot content', () => {
    const wrapper = mount(AppShellV2, {
      global: { plugins: [createPinia()] },
      slots: {
        sidebar: '<nav data-testid="sb">SB</nav>',
        topbar: '<header data-testid="tb">TB</header>',
        default: '<main data-testid="content">CONTENT</main>',
        drawer: '<aside data-testid="dr">DR</aside>',
      },
    })

    expect(wrapper.find('[data-testid="appshell-v2"]').exists()).toBe(true)
    expect(wrapper.find('[data-testid="sb"]').exists()).toBe(true)
    expect(wrapper.find('[data-testid="tb"]').exists()).toBe(true)
    expect(wrapper.find('[data-testid="content"]').text()).toBe('CONTENT')
    expect(wrapper.find('[data-testid="dr"]').exists()).toBe(true)
  })

  it('applies the collapsed modifier from useShellUiStore', async () => {
    const pinia = createPinia()
    const wrapper = mount(AppShellV2, { global: { plugins: [pinia] } })
    const { useShellUiStore } = await import('@/stores/useShellUiStore')

    useShellUiStore().toggleSidebar()
    await wrapper.vm.$nextTick()
    expect(wrapper.find('[data-testid="appshell-v2"]').classes()).toContain('is-collapsed')
  })
})