import { mount } from '@vue/test-utils'
import { describe, expect, it } from 'vitest'
import AdminPage from './AdminPage.vue'
import DetailPageLayout from './DetailPageLayout.vue'
import FormSection from './FormSection.vue'
import ListPageLayout from './ListPageLayout.vue'
import PageToolbar from './PageToolbar.vue'

describe('admin page layout components', () => {
  it('renders a semantic page root with stable layout classes', () => {
    const wrapper = mount(AdminPage, {
      props: { width: 'comfortable', spacing: 'compact' },
      slots: { default: '<p>内容</p>' },
    })
    expect(wrapper.element.tagName).toBe('MAIN')
    expect(wrapper.classes()).toEqual(expect.arrayContaining(['is-width-comfortable', 'is-spacing-compact']))
    expect(wrapper.text()).toBe('内容')
  })

  it('keeps page title and actions in separate regions', () => {
    const wrapper = mount(PageToolbar, {
      props: { title: '客户管理', description: '维护客户资料' },
      slots: { actions: '<button>新增</button>' },
    })
    expect(wrapper.get('h1').text()).toBe('客户管理')
    expect(wrapper.get('.page-toolbar__description').text()).toBe('维护客户资料')
    expect(wrapper.get('.page-toolbar__actions').text()).toBe('新增')
  })

  it('renders optional list regions only when supplied', () => {
    const wrapper = mount(ListPageLayout, {
      slots: { toolbar: '<div>筛选</div>', default: '<div>表格</div>' },
    })
    expect(wrapper.find('.list-page-layout__toolbar').exists()).toBe(true)
    expect(wrapper.find('.list-page-layout__metrics').exists()).toBe(false)
    expect(wrapper.text()).toContain('筛选')
    expect(wrapper.text()).toContain('表格')
  })

  it('removes registered but empty list regions from flex layout', () => {
    const wrapper = mount(ListPageLayout, {
      slots: {
        toolbar: '<div>筛选</div>',
        state: '<template v-if="false"><div>错误</div></template>',
        default: '<div>表格</div>',
      },
    })
    expect(wrapper.find('.list-page-layout__state').exists()).toBe(false)
    expect(wrapper.text()).toBe('筛选表格')
  })

  it('keeps plain-text list regions visible', () => {
    const wrapper = mount(ListPageLayout, {
      slots: { state: '正在同步', default: '表格内容' },
    })

    expect(wrapper.get('.list-page-layout__state').text()).toBe('正在同步')
    expect(wrapper.get('.list-page-layout__content').text()).toBe('表格内容')
  })

  it('supports detail regions and form section descriptions', () => {
    const detail = mount(DetailPageLayout, {
      slots: { header: '<h1>详情</h1>', default: '<p>正文</p>', footer: '<button>保存</button>' },
    })
    expect(detail.find('.detail-page-layout__header').exists()).toBe(true)
    expect(detail.find('.detail-page-layout__footer').text()).toBe('保存')

    const form = mount(FormSection, {
      props: { title: '基础信息', description: '填写必填字段' },
      slots: { default: '<input aria-label="名称" />' },
    })
    expect(form.get('h2').text()).toBe('基础信息')
    expect(form.get('.form-section__heading p').text()).toBe('填写必填字段')
    expect(form.find('input').exists()).toBe(true)
  })
})