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

function loadScript(scriptPath, sandbox) {
  const source = fs.readFileSync(scriptPath, 'utf8');
  vm.runInNewContext(source, sandbox, { filename: scriptPath });
}

function createStyleStore() {
  const values = Object.create(null);
  return {
    values,
    getPropertyValue(name) {
      return values[name] || '';
    },
    setProperty(name, value) {
      values[name] = String(value || '');
    },
    removeProperty(name) {
      delete values[name];
    }
  };
}

test('primeSlideMarkup restores the current canvas dimensions', () => {
  const style = createStyleStore();
  style.setProperty('--player-canvas-width', '1920px');
  style.setProperty('--player-canvas-height', '1080px');

  const sandbox = {
    window: null,
    document: {
      documentElement: { style }
    },
    Date,
    JSON,
    Math,
    Number,
    String,
    Boolean,
    Array,
    Object,
    Promise,
    currentPlaylistSignature: 'signature',
    currentPlaylistEtag: '',
    currentPlaylistFadeBetweenSlides: false,
    currentPlaylistSkipUnavailableRtmp: false,
    videoRegionRenderVersion: 0,
    lastRenderedSlide: { id: 1 },
    slideMarkupCache: Object.create(null),
    templateLayoutCache: Object.create(null),
    templateRenderPlanCache: Object.create(null),
    renderCacheViewportKey: '',
    window: null,
    innerWidth: 1280,
    innerHeight: 720,
    pulsePlayerRegionTypes: {
      get() {
        return null;
      }
    },
    syncRenderCacheViewport() {},
    syncBlackoutState() {},
    setPlayerCanvasDimensions() {},
    escapeHtml(value) {
      return String(value || '');
    }
  };
  sandbox.window = sandbox;

  const renderingPath = path.join(__dirname, '..', 'src', 'player', 'public', 'js', 'player-page-rendering.js');
  loadScript(renderingPath, sandbox);

  const slide = {
    id: 2,
    kind: 'image',
    media_url: 'https://example.com/next.jpg',
    modified_at: '2026-08-07T00:00:00.000Z'
  };

  const markup = sandbox.primeSlideMarkup(slide);

  assert.match(markup, /<img src="https:\/\/example\.com\/next\.jpg"/);
  assert.equal(style.getPropertyValue('--player-canvas-width'), '1920px');
  assert.equal(style.getPropertyValue('--player-canvas-height'), '1080px');
  assert.deepEqual(sandbox.lastRenderedSlide, { id: 1 });
});

test('scheduleSlideMarkupPreload warms the next slide only', () => {
  const timers = [];
  const calls = [];
  const sandbox = {
    window: null,
    document: {
      documentElement: { style: createStyleStore() }
    },
    Date,
    JSON,
    Math,
    Number,
    String,
    Boolean,
    Array,
    Object,
    Promise,
    currentPlaylistSignature: 'signature',
    currentPlaylistEtag: '',
    currentPlaylistFadeBetweenSlides: false,
    currentPlaylistSkipUnavailableRtmp: false,
    videoRegionRenderVersion: 0,
    innerWidth: 1280,
    innerHeight: 720,
    slideMarkupCache: Object.create(null),
    templateLayoutCache: Object.create(null),
    templateRenderPlanCache: Object.create(null),
    renderCacheViewportKey: '',
    escapeHtml(value) {
      return String(value || '');
    },
    syncRenderCacheViewport() {},
    syncBlackoutState() {},
    setPlayerCanvasDimensions() {},
    primeSlideMarkup(slide) {
      calls.push(slide.id);
      return 'markup:' + slide.id;
    },
    setTimeout(fn) {
      timers.push(fn);
      return timers.length;
    }
  };
  sandbox.window = sandbox;

  const playlistPath = path.join(__dirname, '..', 'src', 'player', 'public', 'js', 'player-page-playlist.js');
  loadScript(playlistPath, sandbox);

  const current = { id: 1 };
  const next = { id: 2 };
  const later = { id: 3 };

  sandbox.scheduleSlideMarkupPreload([current, next, later], 0);
  assert.equal(timers.length, 1);
  timers.shift()();
  assert.deepEqual(calls, [2]);
});