import { Metadata } from "next";
import { Suspense } from "react";
import { cookies } from "next/headers";
import { auth } from "@/app/(auth)/auth";
import { TopNavbar } from "@/components/top-navbar";
import { getSiteSettings, getNavLinks, getTutorialVideos } from "@/lib/db/queries";

export const metadata: Metadata = {
  title: "无限画布",
  description: "AI 驱动的无限画布创作工具",
};

export default function CanvasEditorLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <Suspense fallback={<div className="h-screen w-screen bg-background" />}>
      <CanvasLayoutWrapper>{children}</CanvasLayoutWrapper>
    </Suspense>
  );
}

async function CanvasLayoutWrapper({ children }: { children: React.ReactNode }) {
  const [session, siteSettings, navLinks, tutorialVideos] = await Promise.all([
    auth(),
    getSiteSettings(),
    getNavLinks(),
    getTutorialVideos(),
  ]);

  return (
    <div className="h-screen w-screen overflow-hidden bg-background">
      <TopNavbar
        siteName={siteSettings.siteName}
        siteLogo={siteSettings.siteLogo || undefined}
        siteLogoDark={siteSettings.siteLogoDark || undefined}
        isAdmin={session?.user?.type === "admin"}
        customLinks={navLinks.map(link => ({
          id: link.id,
          name: link.name,
          url: link.url,
          order: link.order,
          toolboxGroup: link.toolboxGroup || 1,
        }))}
        toolbox1Name={siteSettings.toolbox1Name || "工具箱"}
        toolbox1Enabled={siteSettings.toolbox1Enabled ?? true}
        toolbox2Name={siteSettings.toolbox2Name || "工具箱2"}
        toolbox2Enabled={siteSettings.toolbox2Enabled ?? false}
        tutorialVideos={tutorialVideos.map(v => ({
          id: v.id,
          title: v.title,
          videoUrl: v.videoUrl,
          coverUrl: v.coverUrl,
          description: v.description,
          order: v.order,
        }))}
        tutorialEnabled={siteSettings.tutorialEnabled ?? false}
        rankingEnabled={siteSettings.rankingEnabled ?? true}
      />
      <div className="h-full pl-16">
        {children}
      </div>
    </div>
  );
}