"use client";

import dynamic from "next/dynamic";
import { useParams, useSearchParams } from "next/navigation";
import { createContext, type ReactNode, useContext, useMemo } from "react";
import { CanvasLogoLoadingView } from "@/components/canvas/canvas-logo-loading";
import type { CanvasInitialProject } from "@/types/canvas";
import { loadCanvasEditorModule } from "./canvas-editor-loader";

const CanvasEditorLegacyPage = dynamic(loadCanvasEditorModule, {
  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 = "",
  initialSiteLogo = null,
  initialSiteLogoDark = null,
  initialSiteName = "AI Chatbot",
  initialWorkspaceType = "",
  initialProject = null,
}: {
  initialId: string;
  initialMode?: string;
  initialSiteLogo?: string | null;
  initialSiteLogoDark?: string | null;
  initialSiteName?: string | null;
  initialWorkspaceType?: string;
  initialProject?: CanvasInitialProject | null;
}) {
  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]);
  const loadingBrand = useMemo(
    () => ({
      siteLogo: initialSiteLogo,
      siteLogoDark: initialSiteLogoDark,
      siteName: initialSiteName,
    }),
    [initialSiteLogo, initialSiteLogoDark, initialSiteName]
  );

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

  if (isVideoMode) {
    return (
      <CanvasLoadingBrandProvider value={loadingBrand}>
        <LiblibVideoCanvasReplica canvasId={id} initialProject={initialProject} />
      </CanvasLoadingBrandProvider>
    );
  }

  return (
    <CanvasLoadingBrandProvider value={loadingBrand}>
      <CanvasEditorLegacyPage
        initialProject={initialProject}
        params={legacyParams}
      />
    </CanvasLoadingBrandProvider>
  );
}

type CanvasLoadingBrand = {
  siteLogo?: string | null;
  siteLogoDark?: string | null;
  siteName?: string | null;
};

const CanvasLoadingBrandContext = createContext<CanvasLoadingBrand>({});

function CanvasLoadingBrandProvider({
  children,
  value,
}: {
  children: ReactNode;
  value: CanvasLoadingBrand;
}) {
  return (
    <CanvasLoadingBrandContext.Provider value={value}>
      {children}
    </CanvasLoadingBrandContext.Provider>
  );
}

function CanvasRouteLoader({ label }: { label: string }) {
  const brand = useContext(CanvasLoadingBrandContext);

  return (
    <CanvasLogoLoadingView
      label={label}
      siteLogo={brand.siteLogo}
      siteLogoDark={brand.siteLogoDark}
      siteName={brand.siteName}
    />
  );
}