"use client";

import { Loader2 } from "lucide-react";
import dynamic from "next/dynamic";
import { useParams, useSearchParams } from "next/navigation";
import { useMemo } from "react";

const CanvasEditorLegacyPage = dynamic(() => import("./CanvasEditorLegacyPageClient"), {
  loading: () => <CanvasRouteLoader label="正在加载画布..." />,
  ssr: false,
});

const LiblibVideoCanvasReplica = dynamic(
  () => import("@/components/canvas/LiblibVideoCanvasReplica").then((module) => module.LiblibVideoCanvasReplica),
  {
    loading: () => <CanvasRouteLoader label="正在加载视频画布..." />,
    ssr: false,
  }
);

export function CanvasPageClientRouter({
  initialId,
  initialMode = "",
  initialWorkspaceType = "",
}: {
  initialId: string;
  initialMode?: string;
  initialWorkspaceType?: string;
}) {
  const routeParams = useParams();
  const searchParams = useSearchParams();
  const routeId = routeParams?.id;
  const id = Array.isArray(routeId) ? routeId[0] || initialId : typeof routeId === "string" ? routeId : initialId;
  const mode = searchParams.get("mode") || initialMode;
  const requestedWorkspaceType =
    searchParams.get("workspaceType") || initialWorkspaceType;
  const requestedAgentMode = mode === "agent";
  const isVideoMode = !requestedAgentMode && (mode === "video" || requestedWorkspaceType === "video");
  const legacyParams = useMemo(() => Promise.resolve({ id }), [id]);

  if (!id) {
    return <CanvasRouteLoader label="正在加载画布..." />;
  }

  if (isVideoMode) {
    return <LiblibVideoCanvasReplica canvasId={id} />;
  }

  return <CanvasEditorLegacyPage params={legacyParams} />;
}

function CanvasRouteLoader({ label }: { label: string }) {
  return (
    <div className="flex h-dvh w-full items-center justify-center bg-[#151515] text-white/70">
      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
      {label}
    </div>
  );
}