import { test } from "node:test";
import assert from "node:assert/strict";
import * as React from "react";
import { renderToStaticMarkup } from "react-dom/server";
import { ChartView } from "./ChartView";
import { newChart, type ChartConfig } from "../../lib/chartConfig";
import type { ChartData } from "../../lib/chartAggregate";
import { seriesColor } from "../../lib/homepageChart";

// ChartView's colours (release 13, slice W2): a series' colour — and a pie
// slice's — is seriesColor(i), so the sixth reaches --chart-6 instead of
// wrapping back to --chart-1 (the old `i % 5`). What a server render can see
// is the ChartContainer's <style>: one `--color-<id>: <colour>;` per series,
// which every Line/Area/Bar then paints with. The marks themselves need a
// measured container, which a static render does not have.

// common's tsconfig has `jsx: "preserve"` (Next compiles it), so tsx falls
// back to the classic transform — `React.createElement` on a free `React`.
(globalThis as { React?: typeof React }).React = React;

function data(n: number): ChartData {
  const categories = ["2026-01", "2026-02"];
  return {
    categories,
    series: Array.from({ length: n }, (_, i) => ({
      key: `channel ${i + 1}`,
      points: categories.map((x, j) => ({ x, y: i + j + 1 })),
    })),
  };
}

function render(d: ChartData, config: ChartConfig): string {
  return renderToStaticMarkup(React.createElement(ChartView, { data: d, config }));
}

// The declarations of the light-theme block (ChartStyle writes the same list
// once per theme), as [id, colour] pairs.
function colourDecls(html: string): [string, string][] {
  const block = html.match(/\[data-chart=[^\]]+\] \{([^}]*)\}/);
  assert.ok(block, "the chart's <style> block is rendered");
  return [...block[1].matchAll(/--color-([\w-]+): ([^;]+);/g)].map((m) => [m[1], m[2]]);
}

test("a grouped chart's sixth series is --chart-6, and the first five are unchanged", () => {
  for (const type of ["line", "area", "bar", "stackedBar"] as const) {
    const html = render(data(7), newChart({ type, groupBy: "channel" }));
    assert.deepEqual(colourDecls(html), [
      ["s0", "var(--chart-1)"],
      ["s1", "var(--chart-2)"],
      ["s2", "var(--chart-3)"],
      ["s3", "var(--chart-4)"],
      ["s4", "var(--chart-5)"],
      ["s5", "var(--chart-6)"],
      // Past the six validated slots: the hub chart's golden-angle hue, not
      // a repeat of --chart-2.
      ["s6", seriesColor(6)],
    ], type);
    assert.notEqual(seriesColor(6), "var(--chart-2)");
  }
});

test("a pie's sixth slice is --chart-6", () => {
  const d: ChartData = {
    categories: ["a", "b", "c", "d", "e", "f", "g"],
    series: [{ key: "all", points: "abcdefg".split("").map((x, i) => ({ x, y: i + 1 })) }],
  };
  const html = render(d, newChart({ type: "pie" }));
  assert.deepEqual(
    colourDecls(html).map(([id, c]) => `${id}=${c}`),
    Array.from({ length: 7 }, (_, i) => `p${i}=${seriesColor(i)}`),
  );
  assert.ok(html.includes("--color-p5: var(--chart-6);"));
});