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

const roots: string[] = [];
function conditionalBranches(html: string) {
  const reference = /data-wrn-if="(@[A-Za-z0-9-]+:[0-9]+)"/.exec(html)?.[1];
  expect(reference).toBeTruthy();
  const registry = /data-wrn-controls[^>]*>(.*?)<\/script>/s.exec(html)?.[1];
  expect(registry).toBeTruthy();
  return JSON.parse(registry!)[Number(reference!.split(":")[1])];
}
afterEach(() => roots.splice(0).forEach((root) => rmSync(root, { recursive: true, force: true })));

test("a component nested in another component's slot keeps its boundary", async () => {
  const root = mkdtempSync(join(tmpdir(), "wrnexus-component-slot-"));
  roots.push(root);
  const app = join(root, "app");
  mkdirSync(join(app, "pages"), { recursive: true });
  mkdirSync(join(app, "components"), { recursive: true });
  writeFileSync(join(app, "pages/index.ts"), "export default () => '';\n");
  writeFileSync(join(app, "components/Card.wrn"), "component Card { view { <slot /> } }\n");
  writeFileSync(join(app, "components/Badge.wrn"), "component Badge { view { <b></b> } }\n");

  const handlers = createHandlers({
    mode: "development",
    hmr: false,
    router: buildRouter(app),
    loadModule: async (file) => {
      if (basename(file) === "Card.wrn") {
        return { render: () => '<article class="card"><slot /></article>' };
      }
      if (basename(file) === "Badge.wrn") {
        return { render: (props: Record<string, string>) => `<b class="badge">${props.label}</b>` };
      }
      return {
        default: () =>
          '<div data-component="Card"><div data-component="Badge" label="x"></div></div>',
      };
    },
    getMiddleware: async () => [],
    assets: { serve: async () => null },
  } satisfies RuntimeDeps);

  const response = await handlers.fetch(new Request("https://example.test/"), {
    upgrade: () => false,
  });
  const html = await response!.text();
  expect(html).toContain('<article class="card">');
  expect(html).toContain('<b class="badge">x</b>');
  expect(html).not.toContain('data-component="Badge"');
});

test("a component in an initially hidden client branch is server-prepared for instantiation", async () => {
  const root = mkdtempSync(join(tmpdir(), "wrnexus-component-branch-"));
  roots.push(root);
  const app = join(root, "app");
  mkdirSync(join(app, "pages"), { recursive: true });
  mkdirSync(join(app, "components"), { recursive: true });
  writeFileSync(join(app, "pages/index.ts"), "export default () => '';\n");
  writeFileSync(join(app, "components/Input.wrn"), "component Input { view { <input /> } }\n");
  const definition = Buffer.from(
    JSON.stringify([{ cond: "open", body: '<div data-component="Input" value="ready"></div>' }]),
    "utf8",
  ).toString("base64");

  const handlers = createHandlers({
    mode: "development",
    hmr: false,
    router: buildRouter(app),
    loadModule: async (file) =>
      basename(file) === "Input.wrn"
        ? {
            render: (props: Record<string, string>) =>
              `<label><input value="${props.value}"></label>`,
          }
        : {
            default: () =>
              `<template data-wrn-if="${definition}"></template><template data-wrn-control-end></template>`,
          },
    getMiddleware: async () => [],
    assets: { serve: async () => null },
  } satisfies RuntimeDeps);

  const response = await handlers.fetch(new Request("https://example.test/"), {
    upgrade: () => false,
  });
  const html = await response!.text();
  const branches = conditionalBranches(html);
  expect(branches[0].body).toContain('<input value="ready">');
  expect(branches[0].body).not.toContain("data-component=");
});

test("typed components in client branches use defaults until reactive props are available", async () => {
  const root = mkdtempSync(join(tmpdir(), "wrnexus-component-reactive-branch-"));
  roots.push(root);
  const app = join(root, "app");
  mkdirSync(join(app, "pages"), { recursive: true });
  mkdirSync(join(app, "components"), { recursive: true });
  writeFileSync(join(app, "pages/index.ts"), "export default () => '';\n");
  writeFileSync(join(app, "components/Panel.wrn"), "component Panel { view { <section /> } }\n");
  const marker = "[&quot;items&quot;,&quot;{items}&quot;]";
  const definition = Buffer.from(
    JSON.stringify([
      {
        cond: "open",
        body: `<div data-component="Panel" items="{items}" visible="{true}" data-wrn-prop-bind-0="${marker}"></div>`,
      },
    ]),
    "utf8",
  ).toString("base64");
  let observed: Record<string, string> | undefined;

  const handlers = createHandlers({
    mode: "development",
    hmr: false,
    router: buildRouter(app),
    loadModule: async (file) =>
      basename(file) === "Panel.wrn"
        ? {
            render: (props: Record<string, string>) => {
              observed = props;
              return '<section data-scope="items: [], visible: false" data-wrn-scope="e30="></section>';
            },
          }
        : {
            default: () =>
              `<template data-wrn-if="${definition}"></template><template data-wrn-control-end></template>`,
          },
    getMiddleware: async () => [],
    assets: { serve: async () => null },
  } satisfies RuntimeDeps);

  const response = await handlers.fetch(new Request("https://example.test/"), {
    upgrade: () => false,
  });
  const html = await response!.text();
  expect(observed).toEqual({});
  const branches = conditionalBranches(html);
  expect(branches[0].body).toContain("<section");
  expect(branches[0].body).toContain("data-wrn-prop-bind-0");
  expect(branches[0].body).not.toContain("data-component=");
});

test("SSR carries a parent prop binding onto the rendered child scope", async () => {
  const root = mkdtempSync(join(tmpdir(), "wrnexus-component-prop-"));
  roots.push(root);
  const app = join(root, "app");
  mkdirSync(join(app, "pages"), { recursive: true });
  mkdirSync(join(app, "components"), { recursive: true });
  writeFileSync(join(app, "pages/index.ts"), "export default () => '';\n");
  writeFileSync(
    join(app, "components/Child.wrn"),
    "component Child { props { value = 0 } view { <b>{value}</b> } }\n",
  );
  const marker = "[&quot;value&quot;,&quot;{count}&quot;]";
  const locals = Buffer.from(JSON.stringify({ field: { id: "answer" } })).toString("base64");
  const childState = Buffer.from(JSON.stringify({ value: 1 })).toString("base64");
  const handlers = createHandlers({
    mode: "development",
    hmr: false,
    router: buildRouter(app),
    loadModule: async (file) =>
      basename(file) === "Child.wrn"
        ? {
            render: () =>
              `<div data-scope="value: 1" data-wrn-scope="${childState}"><b>1</b></div>`,
          }
        : {
            default: () =>
              `<div data-component="Child" value="1" data-wrn-prop-bind-0="${marker}" data-wrn-loop-locals="${locals}"></div>`,
          },
    getMiddleware: async () => [],
    assets: { serve: async () => null },
  } satisfies RuntimeDeps);
  const response = await handlers.fetch(new Request("https://example.test/"), {
    upgrade: () => false,
  });
  const html = await response!.text();
  expect(html).toContain(`data-wrn-prop-bind-0="${marker}"`);
  const child = /<div data-scope=""[^>]*>/.exec(html)?.[0];
  expect(child).toBeTruthy();
  expect(child).toContain(`data-wrn-prop-bind-0="${marker}"`);
  const registry = JSON.parse(/data-wrn-controls[^>]*>(.*?)<\/script>/s.exec(html)![1]!);
  const metadata = (attribute: string) => {
    const reference = new RegExp(`${attribute}="@[^"]+:([0-9]+)"`).exec(child!)?.[1];
    expect(reference).toBeDefined();
    return registry[Number(reference)].value;
  };
  expect(metadata("data-wrn-loop-locals")).toEqual({ field: { id: "answer" } });
  expect(metadata("data-wrn-scope")).toEqual({ value: 1 });
  expect(html).not.toContain('data-component="Child"');
});

test("translated text is present in the raw server response", async () => {
  const root = mkdtempSync(join(tmpdir(), "wrnexus-ssr-i18n-"));
  roots.push(root);
  const app = join(root, "app");
  mkdirSync(join(app, "pages"), { recursive: true });
  writeFileSync(join(app, "pages/index.ts"), "export default () => '';\n");

  const handlers = createHandlers({
    mode: "development",
    hmr: false,
    router: buildRouter(app),
    i18n: resolveI18n({ en: { nav: { title: "Navigation" } } }, { default: "en" }),
    loadModule: async () => ({
      default: () => '<nav><span data-t="nav.title"></span></nav>',
    }),
    getMiddleware: async () => [],
    assets: { serve: async () => null },
  } satisfies RuntimeDeps);

  const response = await handlers.fetch(new Request("https://example.test/"), {
    upgrade: () => false,
  });
  const html = await response!.text();
  expect(html).toContain('<span data-t="nav.title">Navigation</span>');
});

test("translated layout text survives document-template rendering", async () => {
  const root = mkdtempSync(join(tmpdir(), "wrnexus-layout-ssr-i18n-"));
  roots.push(root);
  const app = join(root, "app");
  mkdirSync(join(app, "pages"), { recursive: true });
  mkdirSync(join(app, "layouts"), { recursive: true });
  writeFileSync(join(app, "pages/index.ts"), "export default () => '';\n");
  writeFileSync(join(app, "layouts/public.wrn"), "layout Public { view { <slot /> } }\n");
  writeFileSync(
    join(app, "layouts/document.wrn"),
    "layout Document { view { <html><head></head><body><slot /></body></html> } }\n",
  );

  const handlers = createHandlers({
    mode: "development",
    hmr: false,
    router: buildRouter(app),
    i18n: resolveI18n({ en: { nav: { home: "Home" } } }, { default: "en" }),
    loadModule: async (file) => {
      if (basename(file) === "public.wrn") {
        return { render: () => '<nav><span data-t="nav.home"></span></nav>' };
      }
      if (basename(file) === "document.wrn") {
        return { render: () => "<html><head></head><body><slot /></body></html>" };
      }
      return { default: () => "<main>Page</main>", layout: "public" };
    },
    getMiddleware: async () => [],
    assets: { serve: async () => null },
  } satisfies RuntimeDeps);

  const response = await handlers.fetch(new Request("https://example.test/"), {
    upgrade: () => false,
  });
  const html = await response!.text();
  expect(html).toContain('<span data-t="nav.home">Home</span>');
  expect(html).not.toContain('<span data-t="nav.home"></span>');
});