const assert = require('node:assert/strict');
const fs = require('node:fs');
const net = require('node:net');
const path = require('node:path');
const { spawn } = require('node:child_process');

const RUNFILES = process.env.JS_BINARY__RUNFILES;
const WORKSPACE = process.env.JS_BINARY__WORKSPACE;
let port;
let baseUrl;
const playwrightPath = path.join(
  RUNFILES,
  WORKSPACE,
  'hg-web/e2e/node_modules/playwright-core',
);
const { chromium } = require(playwrightPath);

function stopProcess(child) {
  if (!child || child.exitCode !== null) return Promise.resolve();
  child.kill('SIGTERM');
  return new Promise(resolve => {
    const timer = setTimeout(() => {
      if (child.exitCode === null) child.kill('SIGKILL');
    }, 3000);
    child.once('exit', () => {
      clearTimeout(timer);
      resolve();
    });
  });
}

async function waitForServer(child, logs) {
  const deadline = Date.now() + 15000;
  while (Date.now() < deadline) {
    if (child.exitCode !== null) {
      throw new Error(`Server exited with ${child.exitCode}\n${logs.join('')}`);
    }
    try {
      const response = await fetch(baseUrl);
      if (response.ok) return;
    } catch {
      // Keep waiting for startup.
    }
    await new Promise(resolve => setTimeout(resolve, 100));
  }
  throw new Error(`Server startup timed out\n${logs.join('')}`);
}

function listFiles(root) {
  const files = [];
  for (const entry of fs.readdirSync(root, { withFileTypes: true })) {
    const absolute = path.join(root, entry.name);
    if (entry.isDirectory()) files.push(...listFiles(absolute));
    else files.push(absolute);
  }
  return files;
}

async function sampleTheme(browser, theme) {
  const context = await browser.newContext({ colorScheme: 'dark' });
  await context.addInitScript(value => {
    localStorage.setItem('theme-preference', value);
  }, theme);
  const page = await context.newPage();
  const errors = [];
  page.on('pageerror', error => errors.push(`pageerror: ${error.message}`));
  page.on('console', message => {
    if (message.type() === 'error') errors.push(`console: ${message.text()}`);
  });
  page.on('requestfailed', request => {
    errors.push(`requestfailed: ${request.url()} ${request.failure()?.errorText || ''}`);
  });
  page.on('response', response => {
    if (response.status() >= 400) {
      errors.push(`response: ${response.status()} ${response.url()}`);
    }
  });

  await page.goto(baseUrl, { waitUntil: 'networkidle' });
  await page.waitForFunction(() => {
    const canvas = document.querySelector('#background');
    if (!canvas) return false;
    const data = canvas.getContext('2d').getImageData(
      0,
      0,
      canvas.width,
      canvas.height,
    ).data;
    for (let index = 3; index < data.length; index += 4) {
      if (data[index] >= 20) return true;
    }
    return false;
  });

  const sample = await page.evaluate(() => {
    const canvas = document.querySelector('#background');
    const data = canvas.getContext('2d').getImageData(
      0,
      0,
      canvas.width,
      canvas.height,
    ).data;
    let count = 0;
    let luminance = 0;
    for (let index = 0; index < data.length; index += 4) {
      if (data[index + 3] < 20) continue;
      count++;
      luminance +=
        data[index] * 0.2126 +
        data[index + 1] * 0.7152 +
        data[index + 2] * 0.0722;
    }
    const channels = value => value.match(/\d+(?:\.\d+)?/g)
      .slice(0, 3)
      .map(Number);
    const colorLuminance = value => {
      const converted = channels(value).map(channel => {
        const normalized = channel / 255;
        return normalized <= 0.04045
          ? normalized / 12.92
          : ((normalized + 0.055) / 1.055) ** 2.4;
      });
      return converted[0] * 0.2126 +
        converted[1] * 0.7152 +
        converted[2] * 0.0722;
    };
    const bodyStyle = getComputedStyle(document.body);
    const foreground = colorLuminance(bodyStyle.color);
    const background = colorLuminance(
      getComputedStyle(document.querySelector('main')).backgroundColor,
    );
    return {
      cardCount: document.querySelectorAll('.site-link-grid zen-card').length,
      componentReady: Boolean(customElements.get('zen-card')),
      count,
      fontFamily: getComputedStyle(document.body).fontFamily,
      luminance: count ? luminance / count : 0,
      textContrast: (Math.max(foreground, background) + 0.05) /
        (Math.min(foreground, background) + 0.05),
      rootTheme: document.documentElement.dataset.zenTheme || 'auto',
      themeLabel: document.querySelector('#themeName')?.textContent,
    };
  });

  if (errors.length) throw new Error(`${theme}\n${errors.join('\n')}`);
  await context.close();
  return sample;
}

async function testThemeCycle(browser) {
  const context = await browser.newContext({ colorScheme: 'light' });
  const page = await context.newPage();
  await page.goto(baseUrl, { waitUntil: 'networkidle' });
  const expected = ['paper', 'ink', 'playful', 'auto'];
  for (const theme of expected) {
    await page.locator('#themeToggle').click();
    assert.equal(
      await page.evaluate(() =>
        document.documentElement.dataset.zenTheme || 'auto'
      ),
      theme,
    );
    assert.equal(
      await page.evaluate(() => localStorage.getItem('theme-preference')),
      theme,
    );
  }
  await context.close();
}

async function testHlsPlayer(browser, siteRoot) {
  const page = await browser.newPage();
  const errors = [];
  const mediaRequests = [];
  let testingExpectedFailure = false;
  let testingExpectedReload = false;
  page.on('pageerror', error => errors.push(`pageerror: ${error.message}`));
  page.on('console', message => {
    if (message.type() !== 'error') return;
    if (testingExpectedFailure &&
        message.text().startsWith('Failed to load resource:')) return;
    errors.push(`console: ${message.text()}`);
  });
  page.on('requestfailed', request => {
    if (testingExpectedReload &&
        request.failure()?.errorText === 'net::ERR_ABORTED') return;
    errors.push(`requestfailed: ${request.url()} ${request.failure()?.errorText || ''}`);
  });
  page.on('request', request => {
    if (/\.(?:m3u8|m4s|mp4)(?:\?|$)/.test(request.url())) {
      mediaRequests.push(request.url());
    }
  });

  const playlistResponse = await fetch(
    `${baseUrl}/public/hls-sample/master.m3u8`,
  );
  assert.equal(playlistResponse.status, 200);
  assert.match(
    playlistResponse.headers.get('content-type') || '',
    /^application\/vnd\.apple\.mpegurl/,
  );
  assert.match(
    await playlistResponse.text(),
    /#EXT-X-STREAM-INF:.*CODECS="vp09\.00\.10\.08,opus"/,
  );

  const variantResponse = await fetch(
    `${baseUrl}/public/hls-sample/vp9-stream.m3u8`,
  );
  assert.equal(variantResponse.status, 200);
  assert.match(
    await variantResponse.text(),
    /#EXT-X-MAP:URI="vp9-init\.mp4"/,
  );

  const segmentResponse = await fetch(
    `${baseUrl}/public/hls-sample/vp9-segment000.m4s`,
  );
  assert.equal(segmentResponse.status, 200);
  assert.match(
    segmentResponse.headers.get('content-type') || '',
    /^video\/iso\.segment/,
  );
  const transportStreamResponse = await fetch(
    `${baseUrl}/public/hls-sample/h264-ts-segment000.ts`,
  );
  assert.equal(transportStreamResponse.status, 200);
  assert.match(
    transportStreamResponse.headers.get('content-type') || '',
    /^video\/mp2t/,
  );
  assert.ok((await transportStreamResponse.arrayBuffer()).byteLength > 0);

  await page.goto(
    `${baseUrl}/tools/hls_player?url=${encodeURIComponent('/public/hls-sample/master.m3u8')}`,
    {
      waitUntil: 'networkidle',
    },
  );
  await page.getByRole('button', { name: 'Sample', exact: true }).waitFor();
  assert.equal(
    await page.locator('#hlsUrl').evaluate(input => input.defaultValue),
    '/public/hls-sample/h264-ts-stream.m3u8',
  );
  await page.waitForFunction(() => {
    const status = document.querySelector('#hlsStatus');
    return status?.dataset.state === 'ready' ||
      status?.dataset.state === 'error';
  }, null, { timeout: 15000 });
  const terminalState = await page.locator('#hlsStatus').getAttribute('data-state');
  if (terminalState !== 'ready') {
    throw new Error(
      `HLS player failed: ${await page.locator('#hlsStatus').textContent()}\n${errors.join('\n')}`,
    );
  }
  assert.match(await page.locator('#hlsStatus').textContent(), /Stream ready/);
  assert.equal(
    await page.locator('[data-detail="mode"]').textContent(),
    'hls.js',
  );
  assert.match(
    await page.locator('[data-detail="segments"]').textContent(),
    /Managed by hls\.js|adaptive levels/,
  );
  await page.waitForFunction(() => {
    const video = document.querySelector('#hlsVideo');
    return video.readyState >= HTMLMediaElement.HAVE_METADATA &&
      Number.isFinite(video.duration) &&
      video.duration >= 14;
  });
  const firstFrame = await page.locator('#hlsVideo').evaluate(video => {
    const canvas = document.createElement('canvas');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    const context = canvas.getContext('2d');
    context.drawImage(video, 0, 0);
    const pixels = context.getImageData(0, 0, canvas.width, canvas.height).data;
    let total = 0;
    for (let index = 0; index < pixels.length; index += 4) {
      total += pixels[index] + pixels[index + 1] + pixels[index + 2];
    }
    return total / (canvas.width * canvas.height * 3);
  });
  assert.ok(firstFrame > 10, `Initial HLS frame is black: ${firstFrame}`);
  await page.locator('#hlsVideo').evaluate(video => video.play());
  await page.waitForFunction(() => document.querySelector('#hlsVideo').currentTime > 0.2);
  await page.locator('#hlsVideo').evaluate(video => video.pause());
  assert.ok(mediaRequests.some(url => url.endsWith('/hls-sample/master.m3u8')));
  assert.ok(mediaRequests.some(url => url.endsWith('-stream.m3u8')));
  assert.ok(mediaRequests.some(url => url.endsWith('-init.mp4')));
  assert.ok(mediaRequests.some(url => /-segment\d+\.m4s$/.test(url)));

  await page.evaluate(() => {
    window.hlsPlayer.hls.trigger(window.Hls.Events.ERROR, {
      fatal: true,
      type: window.Hls.ErrorTypes.MEDIA_ERROR,
      details: 'testRuntimeFailure',
      error: new Error('runtime segment failed'),
    });
  });
  await page.locator('#hlsStatus[data-state="error"]').waitFor();
  assert.match(
    await page.locator('#hlsStatus').textContent(),
    /runtime segment failed/,
  );
  await page.locator('#hlsUrl').fill('/public/hls-sample/master.m3u8');
  await page.getByRole('button', { name: 'Load', exact: true }).click();
  await page.locator('#hlsStatus[data-state="ready"]').waitFor();

  let delayedSegment = true;
  await page.route('**/hls-sample/vp9-segment000.m4s', async route => {
    if (delayedSegment) {
      delayedSegment = false;
      await new Promise(resolve => setTimeout(resolve, 250));
    }
    await route.continue();
  });
  testingExpectedReload = true;
  await page.locator('#hlsUrl').fill('/public/hls-sample/master.m3u8');
  await page.getByRole('button', { name: 'Load', exact: true }).click();
  await page.waitForTimeout(25);
  await page.getByRole('button', { name: 'Load', exact: true }).click();
  await page.locator('#hlsStatus[data-state="ready"]').waitFor();
  testingExpectedReload = false;
  assert.match(await page.locator('#hlsStatus').textContent(), /Stream ready/);

  await page.evaluate(() => {
    window.__hlsObjectUrls = { created: [], revoked: [] };
    const createObjectURL = URL.createObjectURL.bind(URL);
    const revokeObjectURL = URL.revokeObjectURL.bind(URL);
    URL.createObjectURL = value => {
      const url = createObjectURL(value);
      window.__hlsObjectUrls.created.push(url);
      return url;
    };
    URL.revokeObjectURL = url => {
      window.__hlsObjectUrls.revoked.push(url);
      revokeObjectURL(url);
    };
  });
  const localFiles = listFiles(path.join(siteRoot, 'public/hls-sample'));
  await page.locator('#hlsFiles').setInputFiles(localFiles);
  await page.waitForFunction(() =>
    document.querySelector('#hlsUrl')?.value.startsWith('Local: ')
  );
  await page.locator('#hlsStatus[data-state="ready"]').waitFor();
  assert.match(await page.locator('#hlsUrl').inputValue(), /^Local: /);
  assert.equal(
    await page.locator('[data-detail="mode"]').textContent(),
    'hls.js',
  );
  await page.locator('#hlsVideo').evaluate(video => video.play());
  await page.waitForFunction(() => document.querySelector('#hlsVideo').currentTime > 0.3);
  await page.locator('#hlsVideo').evaluate(video => video.pause());
  const incompleteLocalFiles = localFiles.filter(file =>
    file.endsWith('master.m3u8') ||
    file.endsWith('vp9-stream.m3u8')
  );
  await page.locator('#hlsFiles').setInputFiles(incompleteLocalFiles);
  await page.locator('#hlsStatus[data-state="error"]').waitFor();
  assert.match(
    await page.locator('#hlsStatus').textContent(),
    /Local HLS file is missing/,
  );
  const objectUrlCounts = await page.evaluate(() => ({
    created: window.__hlsObjectUrls.created.length,
    revoked: window.__hlsObjectUrls.revoked.length,
  }));
  assert.ok(objectUrlCounts.created > 10, JSON.stringify(objectUrlCounts));
  assert.ok(
    objectUrlCounts.revoked >= objectUrlCounts.created,
    JSON.stringify(objectUrlCounts),
  );

  await page.route('**/invalid.m3u8', route => route.fulfill({
    status: 404,
    body: 'not found',
  }));
  testingExpectedFailure = true;
  await page.locator('#hlsUrl').fill(`${baseUrl}/invalid.m3u8`);
  await page.getByRole('button', { name: 'Load', exact: true }).click();
  await page.locator('#hlsStatus[data-state="error"]').waitFor();
  assert.match(
    await page.locator('#hlsStatus').textContent(),
    /404|manifestLoadError|Playlist request failed/,
  );

  if (errors.length) throw new Error(errors.join('\n'));
  await page.close();
}

function findFreePort() {
  return new Promise((resolve, reject) => {
    const socket = net.createServer();
    socket.once('error', reject);
    socket.listen(0, '127.0.0.1', () => {
      const address = socket.address();
      socket.close(error => {
        if (error) reject(error);
        else resolve(String(address.port));
      });
    });
  });
}

(async () => {
  assert.ok(RUNFILES);
  assert.ok(WORKSPACE);
  const runfilesWorkspace = path.join(RUNFILES, WORKSPACE);
  const serverBinary = path.join(
    runfilesWorkspace,
    'mrjunejune/mrjunejune_server',
  );
  const siteRoot = path.join(runfilesWorkspace, 'mrjunejune/src');
  const chromiumPath = path.resolve(process.env.CHROMIUM_PATH);
  const serverLogs = [];
  let server;
  let browser;

  try {
    port = await findFreePort();
    baseUrl = `http://127.0.0.1:${port}`;
    const pngFiles = listFiles(siteRoot).filter(file => file.endsWith('.png'));
    assert.deepEqual(pngFiles, [], `PNG files leaked into runfiles: ${pngFiles}`);

    server = spawn(serverBinary, [], {
      cwd: runfilesWorkspace,
      env: { ...process.env, MRJUNEJUNE_PORT: port },
      stdio: ['ignore', 'pipe', 'pipe'],
    });
    server.stdout.on('data', chunk => serverLogs.push(chunk.toString()));
    server.stderr.on('data', chunk => serverLogs.push(chunk.toString()));
    await waitForServer(server, serverLogs);

    const home = await (await fetch(baseUrl)).text();
    const dogGame = await (
      await fetch(`${baseUrl}/public/dog-game.js`)
    ).text();
    const manifest = await (
      await fetch(`${baseUrl}/public/manifest.json`)
    ).text();
    const serviceWorker = await (
      await fetch(`${baseUrl}/sw.js`)
    ).text();
    for (const source of [home, dogGame, manifest]) {
      assert.doesNotMatch(source, /\.png(?:["')]|$)/i);
    }
    assert.match(serviceWorker, /v5-zenbu-themes/);
    assert.match(
      await (
        await fetch(`${baseUrl}/public/pwa-register.js`)
      ).text(),
      /register\('\/sw\.js', \{ scope: '\/' \}\)/,
    );
    assert.ok(serviceWorker.includes("startsWith('/tools/hls_player')"));

    for (const asset of [
      'sprite_shiba0.webp',
      'dog-treat.webp',
      'start-large.webp',
      'icon-192.webp',
      'vscode.webp',
    ]) {
      const response = await fetch(`${baseUrl}/public/${asset}`);
      assert.equal(response.status, 200, asset);
      assert.ok((await response.arrayBuffer()).byteLength > 0, asset);
    }

    browser = await chromium.launch({
      executablePath: chromiumPath,
      headless: true,
      args: ['--no-sandbox'],
    });
    const paper = await sampleTheme(browser, 'paper');
    const ink = await sampleTheme(browser, 'ink');
    const playful = await sampleTheme(browser, 'playful');
    const automatic = await sampleTheme(browser, 'auto');
    assert.equal(paper.rootTheme, 'paper');
    assert.equal(ink.rootTheme, 'ink');
    assert.equal(playful.rootTheme, 'playful');
    assert.equal(automatic.rootTheme, 'auto');
    assert.equal(paper.themeLabel, 'Paper');
    assert.equal(ink.themeLabel, 'Ink');
    assert.equal(playful.themeLabel, 'Playful');
    assert.equal(automatic.themeLabel, 'Auto');
    for (const sample of [paper, ink, playful, automatic]) {
      assert.ok(sample.count > 0);
      assert.equal(sample.componentReady, true);
      assert.equal(sample.cardCount, 4);
      assert.match(sample.fontFamily, /More/);
      assert.ok(sample.textContrast >= 4.5, JSON.stringify(sample));
    }
    assert.ok(paper.luminance < 175, JSON.stringify(paper));
    assert.ok(playful.luminance < 175, JSON.stringify(playful));
    assert.ok(ink.luminance > 200, JSON.stringify(ink));
    await testThemeCycle(browser);
    await testHlsPlayer(browser, siteRoot);
  } finally {
    if (browser) await browser.close();
    await stopProcess(server);
  }
})().catch(error => {
  console.error(error.stack || error);
  process.exitCode = 1;
});