import { createRoot } from "react-dom/client";
import "./styles.css";
import { App } from "./App";
import { type Doc, looksLikeDoc } from "./model";
import { initStore, loadStoredDoc } from "./store";

const root = createRoot(document.getElementById("root")!);

function Splash({ message, error }: { message: string; error?: boolean }) {
  return (
    <div className={`splash${error ? " is-error" : ""}`} role={error ? "alert" : "status"}>
      <p>{message}</p>
      <p className="notice">Canvely is a fictional product created for UIBenchmark.</p>
    </div>
  );
}

async function boot() {
  root.render(<Splash message="Opening Hazel & Rye — Spring Menu…" />);
  try {
    const res = await fetch(`${import.meta.env.BASE_URL}data/document.json`);
    if (!res.ok) throw new Error(String(res.status));
    const original = (await res.json()) as unknown;
    if (!looksLikeDoc(original)) throw new Error("invalid");
    const stored = loadStoredDoc(looksLikeDoc);
    initStore(stored ? { ...original, children: stored.children } : original, original as Doc);
    root.render(<App />);
  } catch {
    root.render(<Splash error message="Canvely couldn’t open this file. Reload the page to try again." />);
  }
}

void boot();