import { describe, expect, it } from 'vitest'
import { mount } from '@vue/test-utils'

import BreadcrumbPage from '../playground/docs/pages/BreadcrumbPage.vue'
import FormItemPage from '../playground/docs/pages/FormItemPage.vue'
import InputNumberPage from '../playground/docs/pages/InputNumberPage.vue'
import NotificationPage from '../playground/docs/pages/NotificationPage.vue'
import PaginationPage from '../playground/docs/pages/PaginationPage.vue'
import PromptMessagePage from '../playground/docs/pages/PromptMessagePage.vue'
import ProgressPage from '../playground/docs/pages/ProgressPage.vue'
import RatingPage from '../playground/docs/pages/RatingPage.vue'
import SliderPage from '../playground/docs/pages/SliderPage.vue'
import StepsPage from '../playground/docs/pages/StepsPage.vue'
import TablePage from '../playground/docs/pages/TablePage.vue'
import TabsPage from '../playground/docs/pages/TabsPage.vue'
import TopBarPage from '../playground/docs/pages/TopBarPage.vue'
import TooltipPage from '../playground/docs/pages/TooltipPage.vue'

describe('Remaining canonical docs pages', () => {
  it('renders InputNumberPage with Figma-first family coverage and API sections', () => {
    const wrapper = mount(InputNumberPage, {
      props: {
        locale: 'en-US',
      },
    })

    expect(wrapper.text()).toContain('Figma Coverage')
    expect(wrapper.text()).toContain('source=InputNumber')
    expect(wrapper.text()).toContain('variant count=4')
    expect(wrapper.text()).toContain('Real Figma Members')
    expect(wrapper.text()).toContain('4684:7158')
    expect(wrapper.html()).toContain('data-figma-component="InputNumber"')
    expect(wrapper.text()).toContain('InputNumber API')
  })

  it('renders FormItemPage with Figma-first family coverage and API sections', () => {
    const wrapper = mount(FormItemPage, {
      props: {
        locale: 'en-US',
      },
    })

    expect(wrapper.text()).toContain('Figma Coverage')
    expect(wrapper.text()).toContain('source=Form Item')
    expect(wrapper.text()).toContain('variant count=64')
    expect(wrapper.text()).toContain('Composition Usage')
    expect(wrapper.text()).toContain('Design Spec: Figma Type Axis')
    expect(wrapper.text()).toContain('FormItem + InputBoxFilled')
    expect(wrapper.html()).toContain('data-figma-component="FormItem"')
    expect(wrapper.text()).toContain('FormItem API')
  })

  it('renders ProgressPage with canonical coverage and API sections', () => {
    const wrapper = mount(ProgressPage, {
      props: {
        locale: 'en-US',
      },
    })

    expect(wrapper.text()).toContain('Figma Coverage')
    expect(wrapper.text()).toContain('source=Progress')
    expect(wrapper.text()).toContain('variant count=8')
    expect(wrapper.text()).toContain('Family Matrix')
    expect(wrapper.text()).toContain('Runtime Value')
    expect(wrapper.text()).toContain('Progress API')
  })

  it('renders RatingPage with canonical coverage and API sections', () => {
    const wrapper = mount(RatingPage, {
      props: {
        locale: 'en-US',
      },
    })

    expect(wrapper.text()).toContain('Figma Coverage')
    expect(wrapper.text()).toContain('source=Rating')
    expect(wrapper.text()).toContain('variant count=5')
    expect(wrapper.text()).toContain('Value Buttons')
    expect(wrapper.text()).toContain('Rating API')
  })

  it('renders SliderPage with canonical coverage and API sections', () => {
    const wrapper = mount(SliderPage, {
      props: {
        locale: 'en-US',
      },
    })

    expect(wrapper.text()).toContain('Figma Coverage')
    expect(wrapper.text()).toContain('source=Slider')
    expect(wrapper.text()).toContain('variant count=4')
    expect(wrapper.text()).toContain('Theme × Size')
    expect(wrapper.text()).toContain('Slider API')
  })

  it('renders TooltipPage with canonical coverage and API sections', () => {
    const wrapper = mount(TooltipPage, {
      props: {
        locale: 'en-US',
      },
    })

    expect(wrapper.text()).toContain('Figma Coverage')
    expect(wrapper.text()).toContain('source=Tooltip')
    expect(wrapper.text()).toContain('variant count=6')
    expect(wrapper.text()).toContain('Tooltip API')
  })

  it('renders NotificationPage from the canonical source', () => {
    const wrapper = mount(NotificationPage, {
      props: {
        locale: 'en-US',
      },
    })

    expect(wrapper.text()).toContain('variant count=7')
    expect(wrapper.text()).toContain('secondary warning')
    expect(wrapper.html()).toContain('data-figma-component="Notification"')
  })

  it('renders PromptMessagePage from the canonical source', () => {
    const wrapper = mount(PromptMessagePage, {
      props: {
        locale: 'en-US',
      },
    })

    expect(wrapper.text()).toContain('variant count=8')
    expect(wrapper.text()).toContain('Click Close')
    expect(wrapper.html()).toContain('data-figma-component="prompt message"')
  })

  it('renders PaginationPage from the canonical source', () => {
    const wrapper = mount(PaginationPage, {
      props: {
        locale: 'en-US',
      },
    })

    expect(wrapper.text()).toContain('Type=Classic')
    expect(wrapper.html()).toContain('data-figma-component="Pagination"')
  })

  it('renders TablePage from the canonical source', () => {
    const wrapper = mount(TablePage, {
      props: {
        locale: 'en-US',
      },
    })

    expect(wrapper.text()).toContain('variant count=6')
    expect(wrapper.html()).toContain('data-figma-component="Table"')
  })

  it('renders TabsPage with Figma-first family coverage and API sections', () => {
    const wrapper = mount(TabsPage, {
      props: {
        locale: 'en-US',
      },
    })

    expect(wrapper.text()).toContain('Figma Coverage')
    expect(wrapper.text()).toContain('source=Tab List')
    expect(wrapper.text()).toContain('variant count=3')
    expect(wrapper.text()).toContain('source=Tab/Item')
    expect(wrapper.text()).toContain('variant count=6')
    expect(wrapper.text()).toContain('Composition Modes')
    expect(wrapper.html()).toContain('data-figma-component="TabList"')
    expect(wrapper.html()).toContain('data-figma-component="TabItem"')
    expect(wrapper.text()).toContain('Tabs API')
  })

  it('renders StepsPage with Figma-first family coverage and API sections', () => {
    const wrapper = mount(StepsPage, {
      props: {
        locale: 'en-US',
      },
    })

    expect(wrapper.text()).toContain('Figma Coverage')
    expect(wrapper.text()).toContain('source=Step/Item')
    expect(wrapper.text()).toContain('variant count=9')
    expect(wrapper.text()).toContain('Steps Capability')
    expect(wrapper.html()).toContain('data-figma-component="Step/Item"')
    expect(wrapper.text()).toContain('Steps API')
  })

  it('renders BreadcrumbPage with Figma-first family coverage and API sections', () => {
    const wrapper = mount(BreadcrumbPage, {
      props: {
        locale: 'en-US',
      },
    })

    expect(wrapper.text()).toContain('Figma Coverage')
    expect(wrapper.text()).toContain('source=Breadcrumb/Item')
    expect(wrapper.text()).toContain('variant count=4')
    expect(wrapper.text()).toContain('Breadcrumb Capability')
    expect(wrapper.html()).toContain('data-figma-component="Breadcrumb/Item"')
    expect(wrapper.text()).toContain('Breadcrumb API')
  })

  it('renders TopBarPage from the canonical source', () => {
    const wrapper = mount(TopBarPage, {
      props: {
        locale: 'en-US',
      },
    })

    expect(wrapper.text()).toContain('Tag=After Login')
    expect(wrapper.html()).toContain('data-figma-component="TopBar"')
  })
})