#!/usr/bin/env bun

import { readFile, writeFile, readdir } from "node:fs/promises";
import { join } from "node:path";

const COMPONENTS_DIR = "src/components";
const OUTPUT_DIR = "dist";
const REACT_OUTPUT = "custom-elements-jsx.ts";
const SVELTE_OUTPUT = "custom-elements-svelte.ts";
const VUE_OUTPUT = "custom-elements-vue.ts";
const TYPESCRIPT_OUTPUT = "custom-elements.ts";

interface ComponentInfo {
	tagName: string;
	attributes: string[];
	events: string[];
}

function convertEventName(eventName: string): string {
	// Convert kebab-case events to React camelCase handlers
	const words = eventName.split("-");
	const camelCase = words
		.map((word, index) =>
			index === 0 ? word : word.charAt(0).toUpperCase() + word.slice(1),
		)
		.join("");
	return "on" + camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
}

async function parseComponent(filePath: string): Promise<ComponentInfo | null> {
	const content = await readFile(filePath, "utf-8");

	// Extract tag name from customElements.define()
	const tagNameMatch = content.match(
		/customElements\.define\(['"`]([^'"`]+)['"`]/,
	);
	if (!tagNameMatch || !tagNameMatch[1]) return null;

	const tagName = tagNameMatch[1];

	// Extract attributes from observedAttributes
	const attributesMatch = content.match(
		/static get observedAttributes\(\)\s*\{\s*return\s*\[([\s\S]*?)\]/,
	);
	const attributes: string[] = [];
	if (attributesMatch && attributesMatch[1]) {
		const attributesStr = attributesMatch[1];
		const attrMatches = attributesStr.match(/['"`]([^'"`]+)['"`]/g);
		if (attrMatches) {
			attributes.push(...attrMatches.map((attr) => attr.slice(1, -1)));
		}
	}

	// Extract events from dispatchEvent calls
	const eventMatches = content.match(/new CustomEvent\(['"`]([^'"`]+)['"`]/g);
	const events: string[] = [];
	if (eventMatches) {
		for (const match of eventMatches) {
			const eventMatch = match.match(/['"`]([^'"`]+)['"`]/);
			if (eventMatch && eventMatch[1]) {
				events.push(eventMatch[1]);
			}
		}
	}

	// Remove duplicates
	const uniqueEvents = [...new Set(events)];

	return {
		tagName,
		attributes,
		events: uniqueEvents,
	};
}

function generateReactTypes(components: ComponentInfo[]): string {
	const intrinsicElements = components
		.map((comp) => {
			const attributeProps = comp.attributes
				.map((attr) => `    '${attr}'?: string;`)
				.join("\n");

			const eventHandlers = comp.events
				.map((event) => {
					const handlerName = convertEventName(event);
					return `    ${handlerName}?: (event: CustomEvent) => void;`;
				})
				.join("\n");

			return `  '${comp.tagName}': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & {
${attributeProps}
${eventHandlers}
  }, HTMLElement>;`;
		})
		.join("\n");

	// Common CSS properties for EVM components
	const cssProperties = `  '--color-background'?: string;
  '--color-foreground'?: string;
  '--color-primary'?: string;
  '--color-secondary'?: string;
  '--border-radius'?: string;`;

	return `import type React from 'react';

declare module 'react' {
  namespace JSX {
    interface IntrinsicElements {
${intrinsicElements}
    }
  }

  interface CSSProperties {
    // Norns UI CSS Custom Properties
${cssProperties}
  }
}

export interface CustomElements {
${intrinsicElements}
}

export interface CustomCssProperties {
${cssProperties}
}
`;
}

function generateSvelteTypes(components: ComponentInfo[]): string {
	const svelteHTMLElements = components
		.map((comp) => {
			const attributeProps = comp.attributes
				.map((attr) => `      '${attr}'?: string;`)
				.join("\n");

			const eventHandlers = comp.events
				.map((event) => {
					return `      'on:${event}'?: (event: CustomEvent) => void;`;
				})
				.join("\n");

			const allProps = [attributeProps, eventHandlers]
				.filter((p) => p)
				.join("\n");

			return `    '${comp.tagName}': {\n${allProps}\n    };`;
		})
		.join("\n");

	return `declare module 'svelte/elements' {
  export interface SvelteHTMLElements {
${svelteHTMLElements}
  }
}

export {};
`;
}

function generateTypeScriptTypes(components: ComponentInfo[]): string {
	const elementInterfaces = components
		.map((comp) => {
			const attributeProps = comp.attributes
				.map((attr) => `  setAttribute('${attr}', value: string): void;`)
				.join("\n");

			const eventHandlers = comp.events
				.map((event) => {
					return `  addEventListener(type: '${event}', listener: (event: CustomEvent) => void): void;`;
				})
				.join("\n");

			return `interface ${toPascalCase(comp.tagName)}Element extends HTMLElement {
${attributeProps}
${eventHandlers}
}`;
		})
		.join("\n\n");

	const htmlElementTagMap = components
		.map((comp) => {
			return `  '${comp.tagName}': ${toPascalCase(comp.tagName)}Element;`;
		})
		.join("\n");

	return `${elementInterfaces}

declare global {
  interface HTMLElementTagNameMap {
${htmlElementTagMap}
  }
}

export {};
`;
}

function generateVueTypes(components: ComponentInfo[]): string {
	const globalComponents = components
		.map((comp) => {
			const attributeProps = comp.attributes
				.map((attr) => `      '${attr}'?: string;`)
				.join("\n");

			const eventHandlers = comp.events
				.map((event) => {
					// Convert to camelCase for Vue's @event syntax
					const camelEvent = event
						.split("-")
						.map((word, i) =>
							i === 0 ? word : word.charAt(0).toUpperCase() + word.slice(1),
						)
						.join("");
					return `      'on${camelEvent.charAt(0).toUpperCase() + camelEvent.slice(1)}'?: (event: CustomEvent) => void;`;
				})
				.join("\n");

			const allProps = [attributeProps, eventHandlers]
				.filter((p) => p)
				.join("\n");

			return `    '${comp.tagName}': {\n${allProps}\n    };`;
		})
		.join("\n");

	return `declare module 'vue' {
  export interface GlobalComponents {
${globalComponents}
  }
}

export {};
`;
}

function toPascalCase(str: string): string {
	return str
		.split("-")
		.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
		.join("");
}

async function main() {
	try {
		console.log("🔧 Building type definitions...");

		// Read component files
		const files = await readdir(COMPONENTS_DIR);
		const jsFiles = files.filter((file) => file.endsWith(".js"));

		const components: ComponentInfo[] = [];

		for (const file of jsFiles) {
			const filePath = join(COMPONENTS_DIR, file);
			const componentInfo = await parseComponent(filePath);
			if (componentInfo) {
				components.push(componentInfo);
			}
		}

		console.log(`📦 Found ${components.length} custom elements`);

		// Generate React types
		const reactTypesCode = generateReactTypes(components);
		await writeFile(join(OUTPUT_DIR, REACT_OUTPUT), reactTypesCode);
		console.log(`✅ Generated React types: ${REACT_OUTPUT}`);

		// Generate Svelte types
		const svelteTypesCode = generateSvelteTypes(components);
		await writeFile(join(OUTPUT_DIR, SVELTE_OUTPUT), svelteTypesCode);
		console.log(`✅ Generated Svelte types: ${SVELTE_OUTPUT}`);

		// Generate Vue types
		const vueTypesCode = generateVueTypes(components);
		await writeFile(join(OUTPUT_DIR, VUE_OUTPUT), vueTypesCode);
		console.log(`✅ Generated Vue types: ${VUE_OUTPUT}`);

		// Generate TypeScript types
		const tsTypesCode = generateTypeScriptTypes(components);
		await writeFile(join(OUTPUT_DIR, TYPESCRIPT_OUTPUT), tsTypesCode);
		console.log(`✅ Generated TypeScript types: ${TYPESCRIPT_OUTPUT}`);

		console.log("🎉 Type definitions generated successfully!");
	} catch (error) {
		console.error("❌ Error generating type definitions:", error);
		process.exit(1);
	}
}

if (import.meta.main) {
	main();
}