import { readFileSync } from 'node:fs'
import { resolve } from 'node:path'
import { describe, expect, it } from 'vitest'

function source(path: string) {
  return readFileSync(resolve(process.cwd(), path), 'utf8')
}

describe('Admin list typography baseline', () => {
  it('freezes the UnifiedOrdersView desktop hierarchy as shared tokens', () => {
    const foundation = source('src/styles/foundation.css')
    for (const token of [
      '--cc-list-page-title-font-size: 20px',
      '--cc-list-page-description-font-size: 12px',
      '--cc-list-query-font-size: 14px',
      '--cc-list-table-font-size: 12px',
      '--cc-list-primary-font-size: 12px',
      '--cc-list-secondary-font-size: 12px',
      '--cc-list-status-font-size: 11px',
      '--cc-list-action-font-size: 12px',
      '--cc-list-pagination-font-size: 12px',
      '--cc-list-page-button-font-size: 14px',
    ]) expect(foundation).toContain(token)
  })

  it('applies the tokens through shared page, query, table, status, action, empty, and pagination styles', () => {
    const shell = source('src/styles/shell.css')
    const global = source('src/styles/index.css')
    const table = source('src/shared/components/DataTable.vue')
    const query = source('src/shared/components/QueryToolbar.vue')
    expect(shell).toContain('font-size: var(--cc-list-page-title-font-size)')
    expect(shell).toContain('font-size: var(--cc-list-page-description-font-size)')
    expect(query).toContain('font-size: var(--cc-list-query-font-size)')
    expect(table).toContain('.data-table :deep(.el-table) { font-size: var(--cc-list-table-font-size); }')
    expect(table).toContain('.data-table :deep(.el-table .el-button) { font-size: var(--cc-list-action-font-size); }')
    expect(table).toContain('.data-table :deep(.el-table__empty-text) { font-size: var(--cc-list-table-font-size); }')
    expect(table).toContain('font-size: var(--cc-list-pagination-font-size)')
    expect(global).toContain('font-size: var(--cc-list-primary-font-size)')
    expect(global).toContain('font-size: var(--cc-list-secondary-font-size)')
    expect(global).toContain('font-size: var(--cc-list-status-font-size)')
  })

  it.each([
    'src/modules/ocean-bookings/pages/OceanBookingsView.vue',
    'src/modules/trucking/pages/TruckAppointmentsView.vue',
    'src/modules/customs/pages/CustomsCasesView.vue',
    'src/modules/outbound-dispatch/pages/OutboundDispatchesView.vue',
    'src/modules/port-schedules/pages/PortSchedulesView.vue',
  ])('keeps representative formal list %s on the shared components', (path) => {
    const page = source(path)
    expect(page).toContain('<ListPageLayout')
    expect(page).toContain('<QueryToolbar')
    expect(page).toContain('<DataTable')
  })
})