import test from 'node:test';
import assert from 'node:assert/strict';
import { createServer } from 'node:http';
import { readFile } from 'node:fs/promises';
import { createRequire } from 'node:module';
import { join } from 'node:path';
const { chromium } = createRequire(import.meta.url)('playwright');

const stamp = minute => new Date(Date.UTC(2026, 9, 6, 10, minute)).toISOString();
const state = {
  checkedAt: stamp(0), controlledTrialAuthorized: true, fresh: true, settings: { revision: 2, family: '3', trainingCadence: 'daily' },
  families: [{ key: '3', label: 'Testfamilie' }],
  plan: {
    planId: 'test-plan', sourceFamily: '3', configRevision: 2, status: 'optimal', runMode: 'shadow', generatedAt: stamp(0), validUntil: stamp(60), forecastUntil: stamp(120), pricesKnownUntil: stamp(60),
    inputQuality: { loadBasis: 'base_load' },
    forecastPoints: Array.from({ length: 24 }, (_, index) => ({
      time: stamp(index * 5), validUntil: stamp((index + 1) * 5), pvW: 1200 + index * 150, loadW: 2400, externalW: index === 4 ? null : 200
    })),
    points: Array.from({ length: 12 }, (_, index) => ({
      time: stamp(index * 5), validUntil: stamp((index + 1) * 5), pvW: 1200 + index * 150, loadW: 2400,
      externalW: index === 4 ? null : 200, gridTargetW: index * -50 + 400, baselineGridW: 1400 - index * 150,
      batteryTargetW: index * 100 - 800, socEndPercent: { battery: 50 + index },
      importPriceChfKwh: .2512, exportPriceChfKwh: .0801,
      cumulativeCashCostChf: index * .15, cumulativeBaselineCashCostChf: index * .25
    }))
  }
};

test('embedded planner: responsive charts, keyboard/pointer inspection, toggles and lifecycle', async () => {
  const errors = [], requests = [];
  const html = '<!doctype html><html><head><meta name="viewport" content="width=device-width,initial-scale=1"><style>.forecast-chart{display:block;width:100%;height:320px}.forecast-chart-legend{border-bottom:1px solid black}</style><link rel="stylesheet" href="/netplan-v4.css"></head><body style="margin:16px"><svg id="legacy-chart" class="forecast-chart"></svg><div id="legacy-legend" class="forecast-chart-legend">Legacy</div><div id="host"></div><script type="module">import {mountPlanner} from "/netplan-v4.js"; window.mountPlanner=mountPlanner; window.planner=mountPlanner(document.querySelector("#host"),{plantId:"test",session:{csrfToken:"test-only"}});</script></body></html>';
  const server = createServer(async (request, response) => {
    try {
      if (request.url === '/') { response.setHeader('Content-Type', 'text/html'); response.end(html); return; }
      if (!['/netplan-v4.js', '/forecast-chart.js', '/netplan-v4.css'].includes(request.url)) { response.writeHead(404); response.end(); return; }
      response.setHeader('Content-Type', request.url.endsWith('.css') ? 'text/css' : 'text/javascript');
      response.end(await readFile(new URL('.' + request.url, import.meta.url)));
    } catch { response.writeHead(500); response.end(); }
  });
  await new Promise(resolve => server.listen(0, '127.0.0.1', resolve));
  let browser;
  try {
    browser = await chromium.launch({ headless: true, ...(process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH ? { executablePath: process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH } : {}) });
    const page = await browser.newPage({ viewport: { width: 1280, height: 900 } });
    page.on('pageerror', error => errors.push(error.message));
    await page.route('**/api/**', async route => {
      const request = route.request(); requests.push({ url: request.url(), method: request.method(), csrf: request.headers()['x-csrf-token'] });
      if (request.url().includes('/slow/')) await new Promise(resolve => setTimeout(resolve, 150));
      const result = structuredClone(state);
      if (request.url().includes('/legacy/')) delete result.plan.forecastPoints;
      if (request.url().includes('/house-total/')) {
        result.plan.inputQuality.loadBasis = 'house_total';
        result.plan.forecastPoints.forEach(point => { point.externalW = null; });
      }
      await route.fulfill({ contentType: 'application/json', body: JSON.stringify(request.method() === 'PUT' ? { revision: 3 } : result) });
    });
    await page.goto(`http://127.0.0.1:${server.address().port}/`);
    await page.waitForSelector('.forecast-chart svg');
    assert.equal(await page.locator('.forecast-planner .forecast-chart').count(), 6);
    assert.equal(await page.locator('#legacy-chart').evaluate(node => getComputedStyle(node).height), '320px');
    assert.equal(await page.locator('#legacy-legend').evaluate(node => getComputedStyle(node).borderBottomWidth), '1px');
    assert.equal(await page.locator('select#plants').count(), 0);
    assert.equal(requests.length, 1);
    assert.match(await page.locator('#host').innerText(), /tatsaechliche Anlagenbetrieb wird hier nicht bestaetigt/);
    assert.match(await page.locator('#host').innerText(), /Vorhanden; lokale Schutzpruefung/);
    const chart = page.locator('.forecast-planner .forecast-chart').first();
    const slider = chart.locator('input[type=range]');
    assert.equal(await slider.getAttribute('max'), '23');
    assert.equal(await page.locator('.forecast-planner .forecast-chart').nth(1).locator('input[type=range]').getAttribute('max'), '11');
    assert.match(await chart.locator('.forecast-chart-caption').innerText(), /Vollstaendige/);
    await slider.focus(); await slider.press('ArrowRight');
    assert.equal(await slider.inputValue(), '1');
    assert.match(await slider.getAttribute('aria-valuetext'), /1.350 W/);
    await chart.getByLabel('PV-Prognose', { exact: true }).uncheck();
    assert.equal(await chart.locator('dt').count(), 2);
    await chart.getByLabel('PV-Prognose', { exact: true }).check();
    await chart.locator('svg').scrollIntoViewIfNeeded();
    const bounds = await chart.locator('svg').boundingBox();
    await page.mouse.move(bounds.x + bounds.width - 20, bounds.y + 70);
    assert.equal(await slider.inputValue(), '23');
    for (const width of [1280, 390, 320]) {
      await page.setViewportSize({ width, height: 900 });
      await chart.scrollIntoViewIfNeeded();
      await page.waitForTimeout(60);
      assert.equal(await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth), true, `no horizontal overflow at ${width}`);
      assert.ok((await chart.boundingBox()).height > 320, 'legacy SVG height must not constrain new chart sections');
      assert.ok(await chart.locator('polyline').count() >= 3);
      if (process.env.FORECAST_SCREENSHOT_DIR) await chart.screenshot({ path: join(process.env.FORECAST_SCREENSHOT_DIR, `forecast-chart-${width}.png`) });
    }
    await page.locator('summary').click();
    await page.getByRole('button', { name: 'Speichern und neu berechnen', exact: true }).click();
    await page.getByRole('status').filter({ hasText: 'Revision 3 gespeichert' }).waitFor();
    assert.equal(requests.at(-1).csrf, 'test-only');
    assert.equal(requests.some(request => /trial|arm|live/.test(request.url)), false);
    await page.evaluate(async () => {
      window.planner.dispose();
      window.planner = window.mountPlanner(document.querySelector('#host'), { plantId: 'legacy', session: {} });
      await window.planner.ready;
    });
    assert.equal(await slider.getAttribute('max'), '11');
    assert.match(await chart.locator('.forecast-chart-caption').innerText(), /Aelterer Plan/);
    await page.evaluate(async () => {
      window.planner.dispose();
      window.planner = window.mountPlanner(document.querySelector('#host'), { plantId: 'house-total', session: {} });
      await window.planner.ready;
    });
    assert.equal(await chart.locator('dd').nth(2).innerText(), 'nicht vorhanden');
    await page.evaluate(async () => {
      window.planner.dispose();
      window.planner = window.mountPlanner(document.querySelector('#host'), { plantId: 'slow', session: {} });
      window.planner.dispose();
      await window.planner.ready;
    });
    assert.equal(await page.locator('.forecast-planner .forecast-chart').count(), 0);
    assert.deepEqual(errors, []);
  } finally {
    await browser?.close(); await new Promise(resolve => server.close(resolve));
  }
});