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

function loadRegionRenderer(regionType, dataKey, data) {
  let renderer;
  const window = {
    placeholderUtils: {},
    pulsePlayerRegionTypes: {
      register: function (_type, module) {
        renderer = module;
      }
    },
    pulsePlayerRenderingShared: {
      normalizeRegionValue: function (value) {
        return String(value || '');
      }
    }
  };
  const context = {
    window,
    initialData: { [dataKey]: data },
    escapeHtml: String,
    sanitizeFontFamily: String,
    sanitizeFontSize: function (value) { return Number(value) || 16; },
    sanitizeTextColor: String,
    sanitizeRichText: String,
    renderEditorJsContent: String
  };
  vm.runInNewContext(fs.readFileSync(path.join(__dirname, '../src/web/public/js/shared/placeholder-utils.js'), 'utf8'), context);
  vm.runInNewContext(fs.readFileSync(path.join(__dirname, '../src/player/regions', regionType + '.js'), 'utf8'), context);
  return renderer;
}

test('image placeholders align inline with text in player API and RSS regions', function () {
  const sourceUrl = 'https://example.com/image.png';
  const api = loadRegionRenderer('api', 'apiSources', [{
    id: 1,
    responseJson: { image: sourceUrl }
  }]);
  const rss = loadRegionRenderer('rss', 'rssFeeds', [{
    id: 1,
    items: [{ image: sourceUrl }]
  }]);
  const region = { pixelWidth: 400, pixelHeight: 100, canvasScale: 1, baseStyle: '' };

  for (const [renderer, contentKey] of [[api, 'source_id'], [rss, 'feed_id']]) {
    const content = { [contentKey]: 1, value: 'Before {{image.image(120,80,bottom)}} after' };
    const rendered = renderer.renderRegion(region, content);
    assert.match(rendered, /vertical-align:bottom/);
    assert.match(rendered, /width:120px;height:80px/);

    const legacy = renderer.renderRegion(region, { [contentKey]: 1, value: 'Before {{image.image(120,80)}} after' });
    assert.doesNotMatch(legacy, /vertical-align:/);
    assert.match(legacy, /width:120px;height:80px/);
  }
});