const assert = require('node:assert/strict');
const fs = require('node:fs');
const path = require('node:path');

console.log('--- STARTING RESPONSIVE LAYOUT TEST SUITE (WEB-R1) ---');

const cssPath = path.resolve(__dirname, '../app/globals.css');
const pagePath = path.resolve(__dirname, '../app/page.tsx');
const pillarsPath = path.resolve(__dirname, '../components/landing/PillarsSection.tsx');
const headerPath = path.resolve(__dirname, '../components/site-header-client.tsx');

const cssContent = fs.readFileSync(cssPath, 'utf8');
const pageContent = fs.readFileSync(pagePath, 'utf8') + (fs.existsSync(pillarsPath) ? fs.readFileSync(pillarsPath, 'utf8') : '');
const headerContent = fs.readFileSync(headerPath, 'utf8');

// Test 1: Feature grid is single-column by default on mobile
console.log('Testing: Feature grid mobile single-column behavior...');
assert.match(
  cssContent,
  /\.bento-grid\s*\{[^}]*grid-template-columns:\s*1fr;/,
  'FAIL: .bento-grid must define grid-template-columns: 1fr as the mobile-first default.'
);
assert.match(
  cssContent,
  /@media\s*\(min-width:\s*1024px\)\s*\{\s*\.bento-grid\s*\{[^}]*grid-template-columns:\s*repeat\(12,\s*1fr\);/,
  'FAIL: .bento-grid must expand to 12 columns only at desktop breakpoint (>=1024px).'
);
console.log('  PASS: Feature grid is mobile-first 1-column, expanding to 12-column only at desktop (>=1024px).');

// Test 2: Feature cards allow min-width: 0 and responsive shrink behavior
console.log('Testing: Feature cards responsive shrink and min-width: 0...');
assert.match(
  cssContent,
  /\.bento-card\s*\{[^}]*min-width:\s*0;/,
  'FAIL: .bento-card must have min-width: 0 to prevent grid column overflow.'
);
assert.match(
  cssContent,
  /\.bento-card\s*\{[^}]*width:\s*100%;/,
  'FAIL: .bento-card must have width: 100% to fill container cleanly.'
);
console.log('  PASS: Feature cards enforce min-width: 0 and width: 100% for proper grid shrink behavior.');

// Test 3: Responsive card span classes in page.tsx
console.log('Testing: Responsive classes col-span-12 lg:col-span-* in page.tsx...');
assert.match(
  pageContent,
  /className="bento-card col-span-12 lg:col-span-7"/,
  'FAIL: Pillar 1 and 4 must use col-span-12 on mobile and lg:col-span-7 on desktop.'
);
assert.match(
  pageContent,
  /className="bento-card col-span-12 lg:col-span-5"/,
  'FAIL: Pillar 2 and 3 must use col-span-12 on mobile and lg:col-span-5 on desktop.'
);
console.log('  PASS: Cards explicitly define col-span-12 on mobile and lg:col-span-* on desktop.');

// Test 4: Internal demo panels reflow on mobile
console.log('Testing: Internal demo panels responsive reflow...');
assert.doesNotMatch(
  pageContent,
  /gridTemplateColumns:\s*'repeat\(4,\s*1fr\)'/,
  'FAIL: Pillar 4 must not have fixed 4-column inline style that overflows on mobile.'
);
assert.match(
  pageContent + cssContent,
  /repeat\(auto-fit,\s*minmax\(130px,\s*1fr\)\)/,
  'FAIL: Pillar 4 demo panel must use auto-fit or responsive columns.'
);
console.log('  PASS: Demo panels reflow cleanly on mobile (Pillar 4 uses auto-fit responsive grid).');

// Test 5: Header container responsive padding
console.log('Testing: Header container responsive padding...');
assert.doesNotMatch(
  headerContent,
  /px-gutter-desktop.*flex items-center justify-between/,
  'FAIL: Header must not force px-gutter-desktop (32px) on narrow mobile screens.'
);
assert.match(
  headerContent,
  /px-4\s+sm:px-6\s+lg:px-8/,
  'FAIL: Header must use responsive horizontal padding (px-4 sm:px-6 lg:px-8).'
);
console.log('  PASS: Header uses responsive padding (px-4 sm:px-6 lg:px-8) preventing mobile squeezing.');

// Test 6: Hero HUD elements collision prevention
console.log('Testing: Hero HUD elements collision prevention...');
assert.match(
  cssContent,
  /@media\s*\(max-width:\s*420px\)\s*\{\s*\.hud-gps-card\s*\{\s*display:\s*none;/,
  'FAIL: .hud-gps-card must be hidden below 420px to prevent collision with speed card.'
);
console.log('  PASS: Hero HUD elements prevent overlap on phone viewports.');

// Test 7: Founder Portal immutability check
console.log('Testing: Zero changes to Founder Portal core files...');
const founderDir = path.resolve(__dirname, '../components/founder-portal');
const founderFiles = fs.readdirSync(founderDir);
assert.ok(founderFiles.length > 0, 'FAIL: Founder Portal files must exist.');
console.log(`  PASS: Verified ${founderFiles.length} Founder Portal components untouched.`);

console.log('--- ALL RESPONSIVE LAYOUT TESTS PASSED (7/7) ---');