import { expect, test } from '@playwright/experimental-ct-vue'
import SanityButtonHarness from './SanityButtonHarness.vue'

// B2 sanity — proves the full provider stack from playwright/index.ts
// is wired:
//   - Vuetify renders v-btn with theme tokens applied
//   - Click events propagate via Vue's reactivity (counter ref updates)
//   - Vuetify CSS variables resolve in computed style
//
// TEMPORARY VUETIFY: this test is replaced by a PrimeVue equivalent
// in F3. Do not extend or generalise — F3 rewrites it. See
// dev-docs/ARCH-TESTING.md §6.
//
// Why a .vue harness file: Playwright CT runs the test orchestrator
// in Node and the component in a Vite-bundled browser context. Vue
// components that pull in CSS-side-effect imports (Vuetify) cannot be
// loaded directly into the test's Node module graph; they must live
// in a .vue / Vite-compilable file. This is a structural divergence
// from Vitest, which uses jsdom and one module graph for both.

test.describe('B2 sanity: provider stack', () => {
  test('mounts a Vuetify v-btn and propagates clicks', async ({ mount }) => {
    const component = await mount(SanityButtonHarness)
    const btn = component.locator('[data-test="btn"]')

    await expect(btn).toBeVisible()
    await expect(btn).toContainText('Clicks: 0')

    await btn.click()
    await expect(btn).toContainText('Clicks: 1')

    await btn.click()
    await expect(btn).toContainText('Clicks: 2')
  })

  test('Vuetify primary theme color resolves on rendered button', async ({ mount, page }) => {
    await mount(SanityButtonHarness)

    // Vuetify exposes theme primary as "R, G, B" decimals on
    // --v-theme-primary (e.g. "31, 122, 209" for #1f7ad1).
    const themePrimary = await page.evaluate(() => {
      const root = document.documentElement

      return getComputedStyle(root).getPropertyValue('--v-theme-primary').trim()
    })

    expect(themePrimary).not.toBe('')
    expect(themePrimary.split(',')).toHaveLength(3)
  })
})