import { Suspense } from "react";
import { CanvasLogoLoadingView } from "@/components/canvas/canvas-logo-loading";
import { auth } from "@/app/(auth)/auth";
import { db } from "@/lib/db";
import { canvasProject } from "@/lib/db/schema";
import { getSiteSettings } from "@/lib/db/queries";
import { and, eq } from "drizzle-orm";
import type { CanvasInitialProject } from "@/types/canvas";
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 || "";
}

async function getInitialCanvasProject(id: string): Promise<CanvasInitialProject | null> {
  const session = await auth();
  if (!session?.user?.id) return null;

  const [project] = await db
    .select()
    .from(canvasProject)
    .where(
      and(
        eq(canvasProject.id, id),
        eq(canvasProject.userId, session.user.id)
      )
    )
    .limit(1);

  if (!project) return null;

  return {
    ...project,
    createdAt: project.createdAt.toISOString(),
    updatedAt: project.updatedAt.toISOString(),
  };
}

export default async function CanvasEditorPage({
  params,
  searchParams,
}: CanvasEditorPageProps) {
  const { id } = await params;
  const resolvedSearchParams = searchParams ? await searchParams : {};
  const bypassLocalDatabase = process.env.CANVAS_E2E_LOCAL === "true";
  const [siteSettings, initialProject] = bypassLocalDatabase
    ? [null, null]
    : await Promise.all([
        getSiteSettings().catch(() => null),
        getInitialCanvasProject(id).catch(() => null),
      ]);
  const loadingBrand = {
    siteLogo: siteSettings?.siteLogo,
    siteLogoDark: siteSettings?.siteLogoDark,
    siteName: siteSettings?.siteName,
  };

  return (
    <Suspense fallback={<CanvasPageLoader {...loadingBrand} />}>
      <CanvasPageClientRouter
        initialId={id}
        initialMode={getFirstParamValue(resolvedSearchParams.mode)}
        initialSiteLogo={loadingBrand.siteLogo}
        initialSiteLogoDark={loadingBrand.siteLogoDark}
        initialSiteName={loadingBrand.siteName}
        initialWorkspaceType={getFirstParamValue(
          resolvedSearchParams.workspaceType
        )}
        initialProject={initialProject}
      />
    </Suspense>
  );
}

function CanvasPageLoader({
  siteLogo,
  siteLogoDark,
  siteName,
}: {
  siteLogo?: string | null;
  siteLogoDark?: string | null;
  siteName?: string | null;
}) {
  return (
    <CanvasLogoLoadingView
      label="正在加载画布..."
      siteLogo={siteLogo}
      siteLogoDark={siteLogoDark}
      siteName={siteName}
    />
  );
}