import { expect, test } from "bun:test";
import { mkdirSync, mkdtempSync, writeFileSync, readFileSync, rmSync } from "node:fs";
import { tmpdir } from "node:os";
import { join, basename } from "node:path";
import { buildRouter } from "@wrnexus/router";
import { renderComponent } from "../../test/src/index.ts";
import { createHandlers } from "../src/runtime.ts";

test("large timezone select responds through the complete page renderer", async () => {
  const root = mkdtempSync(join(tmpdir(), "wrn-large-select-"));
  try {
    mkdirSync(join(root, "pages"));
    mkdirSync(join(root, "components"));
    writeFileSync(join(root, "pages/index.ts"), "");
    for (const name of ["AdvancedSelect", "SelectStyles", "Shell"])
      writeFileSync(
        join(root, `components/${name}.wrn`),
        `component ${name} { view { <div></div> } }`,
      );
    const select = await renderComponent(
      readFileSync(new URL("../../ui/components/AdvancedSelect.wrn", import.meta.url), "utf8"),
      {
        name: "timezone",
        value: "UTC",
        searchResultLimit: 40,
        options: Intl.supportedValuesOf("timeZone").map((value) => ({ value, label: value })),
      },
    );
    const handlers = createHandlers({
      mode: "development",
      hmr: false,
      router: buildRouter(root),
      loadModule: async (file) =>
        basename(file) === "AdvancedSelect.wrn"
          ? { render: () => select }
          : basename(file) === "SelectStyles.wrn"
            ? { render: () => "" }
            : basename(file) === "Shell.wrn"
              ? { render: () => "<main><slot></slot></main>" }
              : {
                  default: () =>
                    '<div data-component="Shell">' +
                    '<div data-component="AdvancedSelect"></div>'.repeat(4) +
                    "</div>",
                },
      getMiddleware: async () => [],
      assets: { serve: async () => null },
    });
    const response = await handlers.fetch(new Request("http://example.test/"), {
      upgrade: () => false,
    });
    expect(response?.status).toBe(200);
    const html = await response!.text();
    expect(html).toContain("Asia/Kolkata");
    // Four full lists previously exceeded 11 MB, including hydration metadata.
    expect(html.length).toBeLessThan(6_000_000);
  } finally {
    rmSync(root, { recursive: true, force: true });
  }
}, 15000);