import { Loader2 } from "lucide-react";
import { Suspense } from "react";
import { CanvasPageClientRouter } from "./CanvasPageClientRouter";

type CanvasEditorPageProps = {
  params: Promise<{ id: string }>;
  searchParams?: Promise<{
    mode?: string | string[];
    workspaceType?: string | string[];
  }>;
};

function getFirstParamValue(value: string | string[] | undefined) {
  return Array.isArray(value) ? value[0] || "" : value || "";
}

export default async function CanvasEditorPage({
  params,
  searchParams,
}: CanvasEditorPageProps) {
  const { id } = await params;
  const resolvedSearchParams = searchParams ? await searchParams : {};

  return (
    <Suspense fallback={<CanvasPageLoader />}>
      <CanvasPageClientRouter
        initialId={id}
        initialMode={getFirstParamValue(resolvedSearchParams.mode)}
        initialWorkspaceType={getFirstParamValue(
          resolvedSearchParams.workspaceType
        )}
      />
    </Suspense>
  );
}

function CanvasPageLoader() {
  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" />
      正在加载画布...
    </div>
  );
}