"use client";

import { useEffect, useState } from "react";
import dynamic from "next/dynamic";
import { loadAllWasm } from "@/utils/wasmLoader";

const Playground = dynamic(() => import("@/components/Playground"), {
	ssr: false,
	loading: () => (
		<div
			style={{
				position: "absolute",
				left: 0,
				top: 0,
				bottom: 0,
				right: 0,
				padding: "8px",
				display: "flex",
				alignItems: "center",
				justifyContent: "center",
			}}
		>
			<div>
				Loading WASM...
			</div>
		</div>
	),
});

export default function Home() {
	const [isClient, setIsClient] = useState(false);
	const [isWasmLoaded, setIsWasmLoaded] = useState(false);

	useEffect(() => {
		setIsClient(true);

		// Load all WASM modules
		loadAllWasm()
			.then(() => {
				setIsWasmLoaded(true);
			})
			.catch((error) => {
				console.error('Failed to load WASM modules:', error);
				// Still allow the app to load, but WASM features may not work
				setIsWasmLoaded(true);
			});
	}, []);

	if (!isClient || !isWasmLoaded) {
		return (
			<div
				id="loading"
				style={{
					position: "absolute",
					left: 0,
					top: 0,
					bottom: 0,
					right: 0,
					padding: "8px",
					display: "flex",
					alignItems: "center",
					justifyContent: "center",
				}}
			>
				<div>
					Loading WASM...
				</div>
			</div>
		);
	}

	return (
		<main>
			<Playground />
		</main>
	);
}