import { setupI18n } from "@lingui/core";
import { I18nProvider } from "@lingui/react";
import { useState } from "react";
import { createRoot } from "react-dom/client";
import { BrandKitView } from "../../src/pages/media/BrandKitView";
import { EditorView } from "../../src/pages/media/EditorView";
import type { MediaView } from "../../src/pages/media/nav";
import { ProjectView } from "../../src/pages/media/ProjectView";
import { ReviewView } from "../../src/pages/media/ReviewView";
import "../../src/styles.css";

/*
 * Mounts the Media Studio editor-side views on their own, starting at the view
 * named in the query string, so specs reach them without the library flow.
 * Views the editor side does not own render as a marker the spec can assert.
 */

const params = new URLSearchParams(location.search);
const i18n = setupI18n({ locale: "en", messages: { en: {} } });

function initialView(): MediaView {
  const projectId = params.get("projectId") ?? "";
  switch (params.get("view")) {
    case "editor":
      return { name: "editor", projectId, planId: params.get("planId") ?? "" };
    case "review":
      return { name: "review", projectId, renderId: params.get("renderId") ?? "" };
    case "brandKit":
      return { name: "brandKit", brandKitId: params.get("brandKitId") ?? undefined };
    default:
      return { name: "project", projectId };
  }
}

function Harness() {
  const [view, setView] = useState<MediaView>(initialView);
  const props = { navigate: setView, onClose: () => undefined };
  switch (view.name) {
    case "project":
      return <ProjectView {...props} projectId={view.projectId} />;
    case "editor":
      return <EditorView {...props} projectId={view.projectId} planId={view.planId} />;
    case "review":
      return <ReviewView {...props} projectId={view.projectId} renderId={view.renderId} />;
    case "brandKit":
      return <BrandKitView {...props} brandKitId={view.brandKitId} />;
    default:
      return <div data-testid="media-other-view" data-view={view.name} />;
  }
}

createRoot(document.getElementById("root")!).render(
  <I18nProvider i18n={i18n}>
    <main className="min-h-screen bg-background text-foreground">
      <Harness />
    </main>
  </I18nProvider>,
);