import { lazy, Suspense, useState } from "react";
import { AppShell } from "@add-ideas/toolbox-shell-react";
import "@add-ideas/toolbox-shell-react/styles.css";
import "./styles.css";
import { manifest } from "./toolbox/manifest";
import { AppErrorBoundary } from "./app/AppErrorBoundary";
import { HelpDialog } from "./components/HelpDialog";

const Workbench = lazy(async () => {
  const module = await import("./components/Workbench");
  return { default: module.Workbench };
});

export function App() {
  const [helpOpen, setHelpOpen] = useState(false);
  return (
    <AppErrorBoundary>
      <AppShell
        app={manifest}
        manifestUrl="./toolbox-app.json"
        helpAction={{ onClick: () => setHelpOpen(true) }}
        onContextError={(error) => {
          console.warn(
            "Toolbox context unavailable; continuing standalone.",
            error,
          );
        }}
      >
        <Suspense
          fallback={
            <p className="workbench-loading" role="status">
              Preparing the local regex workbench…
            </p>
          }
        >
          <Workbench />
        </Suspense>
      </AppShell>
      <HelpDialog open={helpOpen} onClose={() => setHelpOpen(false)} />
    </AppErrorBoundary>
  );
}
