import { expect, test } from "bun:test";
import { mkdir, mkdtemp, rm, writeFile } from "node:fs/promises";
import { join } from "node:path";
import { tmpdir } from "node:os";
import { compileStcssModule } from "../views/css/modules.ts";
import { createViews } from "../views/api.ts";

test("STCSS modules scope classes and inline relative imports", async () => {
	const root = await mkdtemp(join(tmpdir(), "muddle-stcss-module-"));
	try {
		const imported = join(root, "tokens.stcss");
		await writeFile(imported, ".token { color: red; }");
		const result = await compileStcssModule(
			'@import "./tokens.stcss"; .card { color: blue; }',
			{ filename: join(root, "card.module.stcss"), root },
		);
		expect(result.classes.card).toBeDefined();
		expect(result.classes.token).toBeDefined();
		expect(result.css).toContain(`.${result.classes.card}`);
		expect(result.css).toContain(`.${result.classes.token}`);
		expect(result.css).not.toContain(".card {");
	} finally {
		await rm(root, { recursive: true, force: true });
	}
});

test("a component automatically receives its adjacent STCSS module", async () => {
	const root = await mkdtemp(join(tmpdir(), "muddle-component-module-"));
	try {
		const components = join(root, "components");
		await mkdir(components);
		await writeFile(join(components, "badge.spug"), "span.badge badge");
		await writeFile(
			join(components, "badge.module.stcss"),
			".badge { color: rebeccapurple; }",
		);
		await writeFile(join(root, "index.spug"), "component badge");
		const html = await createViews({
			root,
			viewsDir: root,
			componentsDir: components,
		}).render("index.spug", {});
		expect(html).toContain("<style>");
		expect(html).toMatch(/class="m[^"]+"/);
	} finally {
		await rm(root, { recursive: true, force: true });
	}
});

test("components resolve an installed package and its component entry", async () => {
	const root = await mkdtemp(join(tmpdir(), "muddle-package-component-"));
	try {
		const packageRoot = join(root, "node_modules", "@muddle", "badge");
		await mkdir(packageRoot, { recursive: true });
		await writeFile(
			join(packageRoot, "package.json"),
			'{"name":"@muddle/badge"}',
		);
		await writeFile(
			join(packageRoot, "component.spug"),
			"strong.badge package badge",
		);
		await writeFile(join(root, "index.spug"), "component @muddle/badge");
		const html = await createViews({ root, viewsDir: root }).render(
			"index.spug",
			{},
		);
		expect(html).toContain("package badge");
	} finally {
		await rm(root, { recursive: true, force: true });
	}
});