// Checks web/static/studio.html: the script parses, forms are built from the catalog, job cards escape what users typed.
//   node tests/modules/ui_studio_test.js
const fs = require('fs');
const html = fs.readFileSync(__dirname + '/../../web/static/studio.html', 'utf8');
const src = html.match(/<script>([\s\S]*?)<\/script>/)[1];
const cat = JSON.parse(fs.readFileSync(__dirname + '/../../catalog/modules.json', 'utf8'));
let failed = 0;
const ok = (n, v) => { console.log(v ? 'ok  ' : 'FAIL', n); if (!v) failed++; };
try { new Function(src); ok('the page script parses', true); } catch (e) { ok('the page script parses: ' + e.message, false); }

// run only the pure helpers: cut from "const I18N" to "const FILE", and the field/job renderers
const pick = (a, b) => src.slice(src.indexOf(a), src.indexOf(b));
const code = pick('const I18N', 'document.documentElement.dataset.theme') + '\nconst FILE = { image: "image/*", video: "video/*", audio: "audio/*,video/*" };\nlet caps = [];\n' +
  pick('function fieldHtml', 'function renderForm') + pick('// 4 min 12 s', 'function renderJobs');
const store = { get() { return null; }, set() {} };
const env = new Function('store', 'navigator', 'document', 'setInterval', 'fetch', code + '\nreturn { fieldHtml, jobHtml, setCaps: c => { caps = c; } };')(store, { language: 'en' }, { documentElement: { dataset: {} }, getElementById: () => ({}), addEventListener() {}, visibilityState: 'visible' }, () => 0, () => Promise.resolve());
env.setCaps(cat.capabilities);
const gen = cat.capabilities.find(c => c.id === 'image.generate');
const form = gen.inputs.map(env.fieldHtml).join('');
ok('a prompt box, a size list, a number and a seed are made from the catalog', /<textarea id="f_prompt"/.test(form) && /<select id="f_size"/.test(form) && /id="f_count" type="number" step="1" min="1" max="4"/.test(form) && /id="f_seed"/.test(form));
const ve = cat.capabilities.find(c => c.id === 'video.edit');
const vform = ve.inputs.map(env.fieldHtml).join('');
ok('a video file field only accepts video, and fields that depend on the operation say so', /type="file" accept="video\/\*"/.test(vform) && /data-name="scale" data-show="upscale"/.test(vform) && /data-name="multiplier" data-show="interpolate"/.test(vform));
const job = { id: 'a1', capability: 'image.generate', status: 'done', created: 1, input: { prompt: '<img src=x onerror=alert(1)>' }, outputs: [{ name: 'o.png', mime: 'image/png', size: 2e6 }, { name: 'c.mp4', mime: 'video/mp4', size: 3e6 }], text: '<b>hi</b>' };
const h = env.jobHtml(job);
ok('what a user typed is escaped', !/<img src=x/.test(h) && /&lt;img src=x/.test(h) && !/<b>hi<\/b>/.test(h));
ok('an image result is shown, a video result is playable, both can be downloaded', /<img src="\/studio\/api\/jobs\/a1\/out\/o\.png"/.test(h) && /<video src="\/studio\/api\/jobs\/a1\/out\/c\.mp4" controls/.test(h) && /out\/o\.png\?dl=1/.test(h));
ok('a running job shows a progress bar', /<progress max="1" value="0.4">/.test(env.jobHtml({ id: 'b', capability: 'image.edit', status: 'running', pct: 0.4, detail: 'running', created: 1, input: {} })));
ok('a job waiting for the owner says why and for how long', /owner is using the machine/.test(env.jobHtml({ id: 'd', capability: 'image.edit', status: 'queued', why: 'owner', why_kind: 'desktop', retry_s: 120, created: 1, input: {} })) && /about 2 minutes/.test(env.jobHtml({ id: 'd', capability: 'image.edit', status: 'queued', why: 'owner', why_kind: 'desktop', retry_s: 120, created: 1, input: {} })));
ok('a wait caused by another program on the GPU is named as such, in seconds', /another program is using the machine/.test(env.jobHtml({ id: 'e', capability: 'image.edit', status: 'queued', why: 'owner', why_kind: 'gpu', retry_s: 40, created: 1, input: {} })) && /about 40 seconds/.test(env.jobHtml({ id: 'e', capability: 'image.edit', status: 'queued', why: 'owner', why_kind: 'gpu', retry_s: 40, created: 1, input: {} })));
const sc = cat.capabilities.find(c => c.id === 'video.generate').inputs.find(f => f.type === 'scenes');
const sh = env.fieldHtml(sc);
ok('the story field starts with two scenes, each with a text box and a length', (sh.match(/class="scenerow"/g) || []).length === 2 && (sh.match(/data-scenePrompt/g) || []).length === 2 && /data-sceneSecs/.test(sh));
ok('the story field can add scenes up to the catalog limit and belongs to the story mode only', /data-max="12"/.test(sh) && /data-addscene/.test(sh) && /data-show="story"/.test(sh));
const sj = env.jobHtml({ id: 's1', capability: 'video.generate', status: 'queued', created: 1, input: { operation: 'story', scenes: [{ prompt: '<b>hall</b>', seconds: 4 }, { prompt: 'garden', seconds: 5 }], style: 'pastel <i>' } });
ok('a story job lists its scenes in order, with their lengths, and escapes what was typed', /1\. &lt;b&gt;hall&lt;\/b&gt;/.test(sj) && /2\. garden/.test(sj) && /\(4 s\)/.test(sj) && /pastel &lt;i&gt;/.test(sj) && !/<b>hall/.test(sj));
ok('a finished job shows how long it took', /took 4 min 12 s/.test(env.jobHtml({ id: 'f', capability: 'video.generate', status: 'done', started: 1000, ended: 1252, created: 990, input: {}, outputs: [] })));
ok('a long job shows hours and minutes', /took 1 h 3 min/.test(env.jobHtml({ id: 'g', capability: 'video.generate', status: 'failed', started: 0 + 100, ended: 100 + 3780, created: 90, input: {}, err: 'x' })));
ok('a job that has not run shows no duration', !/took/.test(env.jobHtml({ id: 'h', capability: 'video.generate', status: 'queued', created: 1, input: {} })));
ok('a queued job says what it waits for', /waiting for the owner/.test(env.jobHtml({ id: 'c', capability: 'image.edit', status: 'queued', why: 'owner', created: 1, input: {} })));
if (failed) process.exit(1);
// the footnote about memory (users must not wonder where the machine's RAM went)
{
  const ok2 = (n, v) => { console.log(v ? 'ok  ' : 'FAIL', n); if (!v) process.exitCode = 1; };
  ok2('each service shows the memory it uses, marked with an asterisk, and the footnote explains it', html.includes("c.mem_bytes") && html.includes("*</div>`") && html.includes("* ${t('memNote')}"));
  ok2('the footnote says the engine is started in advance and stops by itself, in both languages', /engine ล่วงหน้า|รอไว้ก่อน/.test(html) && /in advance/.test(html) && /10 นาที/.test(html) && /10 minutes/.test(html));
}