'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('featured box shows only the icon image/video buttons and no slide button', () => {
  const featured = read('templates/parts/submit/featured.php');

  // Like the reference theme, the image button also serves slide covers via
  // multi-select, so it renders whenever either capability is granted.
  assert.match(
    featured,
    /if \(\$can_image \|\| \$can_slide\) : \?>\s*\n\s*<button type="button" class="but btn-image" data-featured-action="image"\s*\n\s*title="<\?php esc_attr_e\('图片', 'aksrt'\); \?>"\s*\n\s*aria-label="<\?php esc_attr_e\('图片', 'aksrt'\); \?>">\s*\n\s*<i class="fa fas fa-image"><\/i>\s*\n\s*<\/button>/
  );

  // The dedicated slide button is gone; slide covers come from multi-select.
  assert.doesNotMatch(featured, /btn-slide|data-featured-action="slide"|幻灯片/);
});

test('image picker folds multi-select into a slide cover like the reference theme', () => {
  const js = read('assets/js/front-submit.js');

  assert.match(js, /featuredOptions = \(args && args\.options\) \|\| \{\};/);
  assert.match(js, /var slideEnabled = !!coverOptions\.slide;/);
  assert.match(js, /var imageAllowed = !!coverOptions\.image;/);
  assert.match(js, /multiple: slideEnabled,/);
  assert.match(js, /maxItems: slideEnabled \? 30 : 1,/);
  assert.match(js, /slides\.length > 1 \|\| \(slideEnabled && !imageAllowed\)/);
  assert.match(js, /self\.setFeatured\('slide', slides\)/);
  assert.match(js, /self\.setFeatured\('image', slides\[0\]\)/);

  // The standalone slide action died with its button.
  assert.doesNotMatch(js, /act === 'slide'/);
});

test('slide cover preview renders a real swiper like the reference theme', () => {
  const featured = read('templates/parts/submit/featured.php');
  const js = read('assets/js/front-submit.js');

  const swiperContract =
    /new-swiper scale-height" data-loop="true" data-autoplay="true" data-interval="2000" style="--scale-height:50%;"/;
  assert.match(featured, swiperContract);
  assert.match(js, swiperContract);

  // Server-rendered slides iterate the saved attachment list.
  assert.match(featured, /foreach \(\$data as \$slide\) : \?>/);
  assert.match(featured, /<div class="swiper-slide"><img src="<\?php echo esc_url\(\(string\) \$slide\['url'\]\); \?>"/);

  // Client-rendered slides come from the multi-select payload; the runtime
  // initializer (auto_fun -> new_swiper) must run for slide covers too.
  assert.match(js, /'<div class="swiper-slide"><img src="' \+ escapeHtml\(item\.url\) \+ '" alt=""><\/div>'/);
  assert.match(js, /t === 'video' \|\| t === 'slide'/);

  for (const control of ['swiper-wrapper', 'swiper-button-prev', 'swiper-button-next', 'swiper-pagination']) {
    assert.match(featured, new RegExp(`class="${control}"`));
    assert.match(js, new RegExp(`class="${control}"`));
  }

  // The static first-image slide preview is gone.
  assert.doesNotMatch(js, /escapeHtml\(d\[0\]\.url\)/);
});

test('featured previews carry no type badge like the reference theme', () => {
  const featured = read('templates/parts/submit/featured.php');
  const js = read('assets/js/front-submit.js');
  const css = read('assets/css/frontend/pages/submit.css');

  assert.doesNotMatch(featured, /featured-type-badge/);
  assert.doesNotMatch(js, /featured-type-badge/);
  assert.doesNotMatch(css, /featured-type-badge/);
});

test('submit.css mirrors the reference visibility matrix for the buttons row', () => {
  const css = read('assets/css/frontend/pages/submit.css');

  assert.match(
    css,
    /\.featured-edit \.btns-full \.btn-image,\s*\n\.featured-edit \.btns-full \.btn-video,\s*\n\.featured-edit \.btns-full \.btn-delete:not\(\[hidden\]\) \{\s*\n  display: inline-flex;/
  );
  assert.match(css, /\.featured-edit \.btns-full \.btn-image > \.fa,[\s\S]*?\.featured-edit \.btns-full \.btn-delete > \.fa \{\s*\n  margin-right: 0;\s*\n\}/);
  assert.match(
    css,
    /\.featured-loaded\.image \.btn-video,\s*\n\.featured-loaded\.slide \.btn-video,\s*\n\.featured-loaded\.video \.btn-image \{\s*\n  display: none;\s*\n\}/
  );
  assert.doesNotMatch(css, /btn-slide/);
});