import { useState, useEffect } from "react";
import { createRoot } from "react-dom/client";
import { App } from "./app";
import "./styles/app.css";

// ghostty-web requires WASM initialisation before any Terminal is created.
// Instead of blocking the React tree on init(), we render immediately and
// show a loading screen until the WASM module is ready.
import { init } from "ghostty-web";

function Root() {
  const [wasmReady, setWasmReady] = useState(false);
  const [wasmError, setWasmError] = useState<string | null>(null);

  useEffect(() => {
    init()
      .then(() => setWasmReady(true))
      .catch((err: unknown) => {
        const msg = err instanceof Error ? err.message : String(err);
        setWasmError(msg);
      });
  }, []);

  if (wasmError) {
    return (
      <div className="flex flex-col h-full">
        <div className="flex items-center justify-center w-full h-full bg-canvas">
          <div className="flex flex-col items-center gap-4">
            <div className="text-red-400 text-sm text-center max-w-[400px] leading-relaxed">
              Failed to initialize terminal: {wasmError}
            </div>
          </div>
        </div>
      </div>
    );
  }

  if (!wasmReady) {
    return (
      <div className="flex flex-col h-full">
        <div className="flex items-center justify-center w-full h-full bg-canvas" role="status" aria-live="polite">
          <div className="flex flex-col items-center gap-4">
            <div className="size-8 rounded-full border-3 border-zinc-700 border-t-zinc-100 animate-spinner" />
            <div className="text-zinc-100 text-sm">Initializing terminal&hellip;</div>
          </div>
        </div>
      </div>
    );
  }

  return <App />;
}

const el = document.getElementById("root");
if (!el) throw new Error("Missing #root element");
createRoot(el).render(<Root />);