import { describe, expect, test } from "bun:test";
import { mkdir, mkdtemp, readFile, writeFile } from "node:fs/promises";
import { join } from "node:path";
import { tmpdir } from "node:os";
import { analyzeReactComponent, astroToSpug, backportProject, cssToStcss, htmlToSpug, reactToSpug, zolaToSpug } from "../core/backport.ts";
import { shadcnIntegration } from "../integrations/shadcn.ts";
import { sassLoader } from "../views/css/sass.ts";
import { TemplateEngine } from "../views/engine/runtime.ts";

describe("backport", () => {
	test("rebuilds normalized CSS as STCSS", () => {
		const result = cssToStcss(".card { color: red; &:hover { color: blue; } }");
		expect(result).toContain(".card {");
		expect(result).toContain("color: red;");
	});

	test("turns HTML structures into indented SPUG", () => {
		const result = htmlToSpug('<main class="page"><h1>Hello</h1><img src="hero.png"></main>');
		expect(result).toContain("main.page");
		expect(result).toContain("  h1");
		expect(result).toContain('img(src="hero.png")');
	});

	test("ports Astro layouts, slots and imported components", () => {
		const page = astroToSpug(`---\nimport Layout from "../layouts/Layout.astro";\nimport Card from "../components/Card.astro";\n---\n<Layout title="Hello"><Card title={title} /><p>Body</p></Layout>`, "/site/src/pages/index.astro", "/site/src/pages");
		expect(page).toContain("extends layouts/Layout.spug");
		expect(page).toContain("block content");
		expect(page).toContain("component card");
		expect(page).toContain("title: title");
		expect(astroToSpug("<main><slot /></main>")).toContain("block content");
	});

	test("ports Zola inheritance, partials and template expressions", () => {
		const page = zolaToSpug(`{% extends "base.html" %}\n{% block content %}<h1>{{ page.title }}</h1>{% include "partials/nav.html" %}{% endblock %}`);
		expect(page).toContain("extends ./base.spug");
		expect(page).toContain("block content");
		expect(page).toContain("include ./partials/nav.spug");
		expect(page).toContain("#{ page.title }");
	});

	test("ports React JSX components through the TypeScript AST", () => {
		const component = reactToSpug('import { Button } from "./button"; export function Card({ title }) { return <section className="card"><h2>{title}</h2><Button variant="outline">Open</Button></section>; }');
		expect(component).toContain("section(class=\"card\")");
		expect(component).toContain("= title");
		expect(component).toContain("component button");
		expect(component).toContain('variant: "outline"');
	});

	test("analyzes hooks and lowers static state into a javascript block", () => {
		const source = 'function Toggle() { const [open] = useState(false); useEffect(() => {}, []); return <button>{open}</button>; }';
		expect(analyzeReactComponent(source).hooks).toEqual(["useEffect", "useState"]);
		expect(reactToSpug(source)).toContain("javascript!");
		expect(reactToSpug(source)).toContain("const open = false;");
	});

	test("creates a Muddle project from an Astro folder", async () => {
		const root = await mkdtemp(join(tmpdir(), "muddle-backport-"));
		await Bun.write(join(root, "astro.config.mjs"), "export default {}");
		await mkdir(join(root, "src/pages"), { recursive: true });
		await mkdir(join(root, "src/styles"), { recursive: true });
		await mkdir(join(root, "src/content/posts"), { recursive: true });
		await mkdir(join(root, "src/layouts"), { recursive: true });
		await mkdir(join(root, "src/components"), { recursive: true });
		await Bun.write(join(root, "src/pages/index.astro"), "<main><h1>Hi</h1></main>");
		await Bun.write(join(root, "src/pages/about.astro"), "---\nimport Shell from '../layouts/Shell.astro';\n---\n<Shell><p>About</p></Shell>");
		await Bun.write(join(root, "src/layouts/Shell.astro"), "<html><body><slot /></body></html>");
		await Bun.write(join(root, "src/components/Card.astro"), "<article><slot /></article>");
		await Bun.write(join(root, "src/styles/site.css"), ".page { color: red; }");
		await Bun.write(join(root, "src/content/posts/hello.md"), "---\ntitle: Hello\n---\n\nBody");
		const destination = join(root, "muddle");
		const result = await backportProject(root, destination);
		expect(result.source).toBe("astro");
		expect(await readFile(join(destination, "modules/app/views/index.spug"), "utf8")).toContain("main");
		expect(await readFile(join(destination, "styles/site.stcss"), "utf8")).toContain(".page");
		expect(await readFile(join(destination, "content/posts/hello.md"), "utf8")).toContain("title: Hello");
		expect(await readFile(join(destination, "ct.config.ts"), "utf8")).toContain('name: "posts"');
		const engine = new TemplateEngine({ viewsDir: join(destination, "modules/app/views") });
		expect(await engine.render("index.spug")).toContain("<main><h1>Hi</h1>");
		expect(await engine.render("about.spug")).toContain("<html><body><p>About</p>");
	});

	test("carries Zola configuration and partial templates into the Muddle project", async () => {
		const root = await mkdtemp(join(tmpdir(), "muddle-zola-"));
		await mkdir(join(root, "templates/partials"), { recursive: true });
		await mkdir(join(root, "content/posts"), { recursive: true });
		await Bun.write(join(root, "config.toml"), 'title = "Zola notes"\nbase_url = "https://notes.example"');
		await Bun.write(join(root, "templates/index.html"), '{% extends "base.html" %}{% block content %}<h1>{{ config.title }}</h1>{% endblock %}');
		await Bun.write(join(root, "templates/partials/nav.html"), "<nav>Nav</nav>");
		await Bun.write(join(root, "content/posts/first.md"), "---\ntitle: First\n---\n\nPost");
		const destination = join(root, "muddle");
		await backportProject(root, destination);
		expect(await readFile(join(destination, "modules/app/site.config.ts"), "utf8")).toContain("Zola notes");
		expect(await readFile(join(destination, "modules/app/views/partials/nav.spug"), "utf8")).toContain("nav");
		expect(await readFile(join(destination, "modules/app/views/index.spug"), "utf8")).toContain("extends ./base.spug");
	});

	test("compiles Sass before handing CSS to STCSS", async () => {
		const root = await mkdtemp(join(tmpdir(), "muddle-sass-"));
		const path = join(root, "site.scss");
		await writeFile(path, "$ink: #123456; .card { color: $ink; }");
		const loaded = await sassLoader().load({ path, relativePath: "styles/site.scss", source: await readFile(path, "utf8") });
		expect(loaded.content).toContain("color: #123456;");
	});

	test("pulls declarative ShadCN registry components into Spug and STCSS", async () => {
		const root = await mkdtemp(join(tmpdir(), "muddle-shadcn-"));
		const integration = shadcnIntegration({
			components: ["button"],
			fetch: async () => new Response(JSON.stringify({ files: [
				{ path: "button.tsx", content: "export function Button() { return <button className=\"btn\">Save</button>; }" },
				{ path: "button.css", content: ".btn { color: red; }" },
			] })),
		});
		await integration.setup?.({ config: { root } as any, route() {}, loader() {} });
		expect(await readFile(join(root, "modules/app/views/components/button.spug"), "utf8")).toContain("button");
		expect(await readFile(join(root, "styles/shadcn/button.stcss"), "utf8")).toContain(".btn");
	});
});