import assert from 'node:assert/strict'
import { readFileSync } from 'node:fs'
import test from 'node:test'
import { fileURLToPath } from 'node:url'

const responsiveStyles = readFileSync(
  fileURLToPath(new URL('../src/assets/styles/components/personal-workbench-responsive.css', import.meta.url)),
  'utf8'
)

test('personal workbench compacts trend chart and capability cards on laptop screens', () => {
  assert.match(
    responsiveStyles,
    /@media \(min-width: 961px\) and \(max-width: 1440px\),\s*\n\s*\(min-width: 961px\) and \(max-height: 820px\)/
  )
  assert.match(responsiveStyles, /--hero-title-size:\s*30px;/)
  assert.match(responsiveStyles, /--trend-card-min-height:\s*232px;/)
  assert.match(responsiveStyles, /--capability-row-height:\s*102px;/)
  assert.match(responsiveStyles, /\.workbench-trend-hero\s*\{[\s\S]*padding:\s*24px 18px 10px 18px;/)
  assert.match(responsiveStyles, /\.trend-summary-panel h1\s*\{[\s\S]*font-size:\s*var\(--hero-title-size\);/)
  assert.match(responsiveStyles, /\.workbench-trend-card\s*\{[\s\S]*min-height:\s*0;/)
  assert.match(responsiveStyles, /\.trend-chart-panel\s*\{[\s\S]*min-height:\s*0;/)
  assert.match(responsiveStyles, /\.trend-total\s*\{[\s\S]*font-size:\s*42px;/)
  assert.match(responsiveStyles, /\.trend-chart-head strong\s*\{[\s\S]*font-size:\s*14px;/)
  assert.match(responsiveStyles, /\.trend-summary-panel small\s*\{[\s\S]*display:\s*none;/)
  assert.doesNotMatch(responsiveStyles, /\.assistant-hero/)
  assert.doesNotMatch(responsiveStyles, /--assistant-bg-position/)
  assert.match(responsiveStyles, /\.capability-card\s*\{[\s\S]*grid-template-columns:\s*40px minmax\(0,\s*1fr\) 16px;[\s\S]*padding:\s*15px 14px 15px 18px;/)
  assert.doesNotMatch(responsiveStyles, /--composer-min-height/)
  assert.match(responsiveStyles, /@media \(max-width: 760px\)[\s\S]*\.workbench\s*\{[\s\S]*height:\s*auto;/)
  assert.match(responsiveStyles, /@media \(max-width: 760px\)[\s\S]*\.trend-summary-panel\s*\{[\s\S]*transform:\s*none;/)
  assert.doesNotMatch(responsiveStyles, /grid-template-rows:\s*auto var\(--capability-row-height\)/)
})