const fs = require('fs')
const path = require('path')

const root = path.resolve(__dirname, '..')

function readPage(page, ext, name = 'index') {
  return fs.readFileSync(path.join(root, 'pages', page, `${name}.${ext}`), 'utf8')
}

function readPageFile(page, name, ext) {
  return fs.readFileSync(path.join(root, 'pages', page, `${name}.${ext}`), 'utf8')
}

function selectorExists(wxss, selector) {
  return new RegExp(`${selector.replace('.', '\\.')}\\s*[{,]`).test(wxss)
}

describe('miniapp page styling', () => {
  const pageStyleExpectations = [
    ['home', 'index', ['.home-hero', '.service-grid', '.banner-card', '.content-card']],
    ['products', 'index', ['.page-heading', '.product-card', '.product-thumb', '.category-item']],
    ['express', 'create', ['.page-heading', '.form-card', '.fee-panel', '.field-label']],
    ['group-buy', 'index', ['.page-heading', '.group-card', '.group-cover', '.stock-line']],
    ['second-hand', 'index', ['.page-heading', '.second-card', '.second-cover', '.publish-button']],
    ['notices', 'index', ['.page-heading', '.notice-card', '.notice-content']],
    ['orders', 'index', ['.page-heading', '.order-card', '.order-meta']],
    ['profile', 'index', ['.profile-hero', '.menu-card', '.menu-icon']],
    ['address', 'index', ['.page-heading', '.address-card', '.address-form']]
  ]

  test.each(pageStyleExpectations)('%s page has dedicated visual styles', (page, name, selectors) => {
    const wxss = readPage(page, 'wxss', name)

    expect(wxss.length).toBeGreaterThan(300)
    selectors.forEach((selector) => {
      expect(selectorExists(wxss, selector)).toBe(true)
    })
  })

  test('detail pages have order and purchase layouts', () => {
    const productDetail = readPageFile('products', 'detail', 'wxss')
    const groupDetail = readPageFile('group-buy', 'detail', 'wxss')
    const orderDetail = readPageFile('orders', 'detail', 'wxss')

    expect(selectorExists(productDetail, '.detail-hero')).toBe(true)
    expect(selectorExists(productDetail, '.purchase-card')).toBe(true)
    expect(selectorExists(groupDetail, '.detail-hero')).toBe(true)
    expect(selectorExists(groupDetail, '.purchase-card')).toBe(true)
    expect(selectorExists(orderDetail, '.summary-card')).toBe(true)
    expect(selectorExists(orderDetail, '.detail-line')).toBe(true)
  })

  test('global stylesheet provides shared design primitives', () => {
    const appWxss = fs.readFileSync(path.join(root, 'app.wxss'), 'utf8')

    ;[
      '.page-heading',
      '.card-title',
      '.empty-state',
      '.form-card',
      '.action-button',
      '.pill',
      '.media-placeholder'
    ].forEach((selector) => {
      expect(selectorExists(appWxss, selector)).toBe(true)
    })
  })
})