'use strict';

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

const root = path.resolve(__dirname, '..', '..');
const read = (file) => fs.readFileSync(path.join(root, file), 'utf8');

test('post list DOM follows the Zibll flex and multi-image contract', () => {
  const markup = read('inc/helpers/posts-renderer/markup.php');
  const data = read('inc/helpers/posts-renderer/post-data.php');
  const cardStart = markup.indexOf('function aksrt_renderer_card');
  const miniStart = markup.indexOf('function aksrt_renderer_mini');
  const card = markup.slice(cardStart, miniStart);

  assert.match(markup, /\['posts-item', 'list', 'ajax-item', 'flex'/);
  assert.match(markup, /if \(!empty\(\$data\['is_mult_thumb'\]\)\)[\s\S]*?\$thumb = '';/);
  assert.doesNotMatch(card, /item-excerpt|renderer_excerpt_markup/);
  assert.match(data, /&& \$cfg\['mode'\] === 'list'/);
  assert.match(data, /<a class=\"thumb-items contain\"/);
});

test('homepage card mode keeps the Zibll inline-block three-column flow', () => {
  const css = read('assets/css/frontend/homepage-fixed/base-2.css');
  const responsive = read('assets/css/frontend/homepage-fixed/ajax-tab-error-state.css');
  const homepageScript = read('assets/js/homepage-fixed.js');
  const scripts = read('src/Core/ScriptsPart1b.php');
  const cardModeStart = css.indexOf('.aksrt-homepage__posts[data-view="card"] {');
  const cardItemStart = css.indexOf('.aksrt-homepage__posts[data-view="card"] > .posts-item {');
  const cardMode = css.slice(cardModeStart, cardItemStart);
  const cardItem = css.slice(cardItemStart, css.indexOf('\n}', cardItemStart) + 2);
  const visibilityStart = css.indexOf('VISIBILITY LOCK');
  const visibilityEnd = css.indexOf('/* Minimal flex utilities', visibilityStart);
  const visibility = css.slice(visibilityStart, visibilityEnd);

  assert.match(cardMode, /display:\s*block/);
  assert.match(cardMode, /font-size:\s*0/);
  assert.match(cardItem, /width:\s*calc\(33\.333% - 16px\)/);
  assert.match(cardItem, /display:\s*inline-block/);
  assert.doesNotMatch(visibility, /\.posts-item[\s\S]*?display:\s*block\s*!important/);
  assert.match(scripts, /\$homepage_style_parts\s*=\s*\[/);
  assert.match(scripts, /filemtime\(\$part_path\)/);
  assert.doesNotMatch(scripts, /wp_enqueue_style\(\s*'aksrt-homepage-fixed',\s*\$base_uri\s*\.\s*'\/assets\/css\/frontend\/homepage-fixed\.css'/);

  const tabletStart = responsive.indexOf('@media (max-width: 991.98px)');
  const mobileStart = responsive.indexOf('@media (max-width: 767px)');
  const smallMobileStart = responsive.indexOf('@media (max-width: 640px)');
  const tablet = responsive.slice(tabletStart, mobileStart);
  const mobile = responsive.slice(mobileStart, smallMobileStart);
  const smallMobile = responsive.slice(smallMobileStart);

  assert.doesNotMatch(tablet, /data-view="card"/);
  assert.match(mobile, /data-view="card"[\s\S]*?width:\s*calc\(50% - 10px\)/);
  assert.match(mobile, /data-view="card"[\s\S]*?margin:\s*-5px/);
  assert.doesNotMatch(smallMobile, /data-view="card"[\s\S]*?width:\s*100%/);

  assert.match(homepageScript, /var initialMode = getViewMode\(\)/);
  assert.match(homepageScript, /var renderedMode = activePanel \? activePanel\.getAttribute\('data-view'\)/);
  assert.match(homepageScript, /renderedMode !== initialMode[\s\S]*?requestHomepagePanel\(activePanel/);
});

test('site shell has one float owner and fluid zones sit outside main', () => {
  const layout = read('assets/css/frontend/layout.css');
  const archive = read('inc/helpers/aksrt-archive.php');
  const shell = layout.slice(layout.indexOf('Site shell'), layout.indexOf('页面标题区'));

  assert.doesNotMatch(shell, /display:\s*grid/);
  assert.match(shell, /width:\s*var\(--sidebar-width, 311px\)/);
  assert.match(shell, /calc\(var\(--sidebar-width, 311px\) \+ 15px\)/);
  assert.ok(archive.indexOf("$args['top_fluid']") < archive.indexOf('<main id="main-content"'));
  assert.ok(archive.lastIndexOf("$args['bottom_fluid']") > archive.indexOf('</main>'));
});

test('widget shell uses Zibll wrappers without overriding post link colors', () => {
  const renderer = read('src/WidgetSystem/FrontendRenderer.php');
  const css = read('assets/widgets/frontend.css');

  assert.match(renderer, /'zib-widget-wrap'/);
  assert.match(renderer, /\$classes\[\] = 'zib-widget'/);
  assert.match(renderer, /aksrt-widget__inner container/);
  assert.doesNotMatch(css, /\.aksrt-widget a\s*\{[^}]*color:\s*inherit/);
  assert.match(css, /\.aksrt-widget\.zib-widget\s*\{/);
});