/**
 * VISUAL-01 / VISUAL-03: Typography normalization invariants
 *
 * Tests that page-level h2 headings use text-2xl font-semibold (not font-bold),
 * and section-level h3 headings inside cards use text-sm or text-lg font-semibold (not text-xl).
 */
import { describe, it, expect, beforeEach, vi } from 'vitest'
import { mount, flushPromises } from '@vue/test-utils'
import { setActivePinia, createPinia } from 'pinia'
import { createRouter, createMemoryHistory } from 'vue-router'

vi.mock('../../api/client.js', () => ({
  getSharedWithMe: vi.fn().mockResolvedValue([]),
  listFolders: vi.fn().mockResolvedValue({ items: [] }),
  getDocument: vi.fn().mockResolvedValue(null),
  getMyPreferences: vi.fn().mockResolvedValue({ pdf_open_mode: 'new_tab' }),
  listTopics: vi.fn().mockResolvedValue({ topics: [] }),
  getMyQuota: vi.fn().mockResolvedValue({ used_bytes: 0, limit_bytes: 104857600 }),
}))

function makeRouter(extraRoutes = []) {
  return createRouter({
    history: createMemoryHistory(),
    routes: [
      { path: '/', component: { template: '<div/>' } },
      { path: '/topics', component: { template: '<div/>' } },
      { path: '/shared', component: { template: '<div/>' } },
      { path: '/settings', component: { template: '<div/>' } },
      ...extraRoutes,
    ],
  })
}

describe('VISUAL-03: SharedView page title uses font-semibold (not font-bold)', () => {
  beforeEach(() => {
    vi.clearAllMocks()
    vi.resetModules()
  })

  it('h2 has text-2xl font-semibold and not font-bold', async () => {
    vi.doMock('../../api/client.js', () => ({
      getSharedWithMe: vi.fn().mockResolvedValue([]),
      listFolders: vi.fn().mockResolvedValue({ items: [] }),
      getDocument: vi.fn().mockResolvedValue(null),
      getMyPreferences: vi.fn().mockResolvedValue({ pdf_open_mode: 'new_tab' }),
      listTopics: vi.fn().mockResolvedValue({ topics: [] }),
      getMyQuota: vi.fn().mockResolvedValue({ used_bytes: 0, limit_bytes: 104857600 }),
    }))

    setActivePinia(createPinia())
    const router = makeRouter()
    await router.push('/shared')
    await router.isReady()

    const SharedView = (await import('../SharedView.vue')).default
    const wrapper = mount(SharedView, {
      global: {
        plugins: [router],
        stubs: { BreadcrumbBar: true, EmptyState: true, AppIcon: true },
      },
    })
    await flushPromises()

    const h2 = wrapper.find('h2')
    expect(h2.exists()).toBe(true)
    const cls = h2.attributes('class') || ''
    expect(cls).toContain('font-semibold')
    expect(cls).not.toContain('font-bold')
    expect(cls).toContain('text-2xl')

    wrapper.unmount()
  })
})

describe('VISUAL-03: TopicsView page title uses font-semibold (not font-bold)', () => {
  beforeEach(() => {
    vi.clearAllMocks()
    vi.resetModules()
  })

  it('h2 has text-2xl font-semibold and not font-bold', async () => {
    vi.doMock('../../api/client.js', () => ({
      getSharedWithMe: vi.fn().mockResolvedValue([]),
      listFolders: vi.fn().mockResolvedValue({ items: [] }),
      getDocument: vi.fn().mockResolvedValue(null),
      getMyPreferences: vi.fn().mockResolvedValue({ pdf_open_mode: 'new_tab' }),
      listTopics: vi.fn().mockResolvedValue({ topics: [] }),
      getMyQuota: vi.fn().mockResolvedValue({ used_bytes: 0, limit_bytes: 104857600 }),
    }))

    setActivePinia(createPinia())
    const router = makeRouter([
      { path: '/topics/:name?', component: { template: '<div/>' } },
    ])
    await router.push('/topics')
    await router.isReady()

    const TopicsView = (await import('../TopicsView.vue')).default
    const wrapper = mount(TopicsView, {
      global: {
        plugins: [router],
        stubs: { TopicManager: true, DocumentCard: true, BreadcrumbBar: true },
      },
    })
    await flushPromises()

    const h2 = wrapper.find('h2')
    expect(h2.exists()).toBe(true)
    const cls = h2.attributes('class') || ''
    expect(cls).toContain('font-semibold')
    expect(cls).not.toContain('font-bold')
    expect(cls).toContain('text-2xl')

    wrapper.unmount()
  })
})

describe('VISUAL-03: SettingsAccountTab section headings use text-sm font-semibold', () => {
  beforeEach(() => {
    vi.clearAllMocks()
    vi.resetModules()
  })

  it('h3 inside bg-white panel does not use text-xl or font-bold', async () => {
    vi.doMock('../../api/client.js', () => ({
      getSharedWithMe: vi.fn().mockResolvedValue([]),
      listFolders: vi.fn().mockResolvedValue({ items: [] }),
      getDocument: vi.fn().mockResolvedValue(null),
      getMyPreferences: vi.fn().mockResolvedValue({ pdf_open_mode: 'new_tab' }),
      listTopics: vi.fn().mockResolvedValue({ topics: [] }),
      getMyQuota: vi.fn().mockResolvedValue({ used_bytes: 0, limit_bytes: 104857600 }),
    }))

    setActivePinia(createPinia())

    const { useAuthStore } = await import('../../stores/auth.js')
    const authStore = useAuthStore()
    authStore.user = { email: 'test@example.com', role: 'user', totp_enabled: false, handle: 'test' }

    const router = makeRouter()
    await router.push('/settings')
    await router.isReady()

    const SettingsAccountTab = (await import('../../components/settings/SettingsAccountTab.vue')).default
    const wrapper = mount(SettingsAccountTab, {
      global: {
        plugins: [router],
        stubs: {
          TotpEnrollment: true,
          ConfirmBlock: true,
          PasswordStrengthBar: true,
          AppIcon: true,
          AppSpinner: true,
        },
      },
    })
    await flushPromises()

    const headings = wrapper.findAll('h3')
    expect(headings.length).toBeGreaterThan(0)

    for (const h of headings) {
      const cls = h.attributes('class') || ''
      expect(cls).not.toContain('text-xl')
      expect(cls).not.toContain('font-bold')
      expect(cls).toContain('font-semibold')
    }

    wrapper.unmount()
  })
})
