import { redirect } from "next/navigation";

import { ApiKeyGate } from "@/components/ApiKeyGate";
import { AppHeader } from "@/components/AppHeader";
import { MobileSidebar, Sidebar, SidebarOffset } from "@/components/Sidebar";
import { TabBar } from "@/components/TabBar";
import { UploadScreen } from "@/components/UploadScreen";

export const metadata = {
  title: "New deck",
};

export default async function CreatePage({
  searchParams,
}: {
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}) {
  const { mode } = await searchParams;
  // The library's quick actions (and the mode switch) deep-link into a mode;
  // a link that points at the other side is handed to the page that owns it.
  if (mode === "homework") redirect("/homework?mode=homework");

  return (
    <ApiKeyGate>
      <div className="flex min-h-dvh">
        <Sidebar />
        <SidebarOffset />
        <MobileSidebar />
        <main className="flex min-h-dvh min-w-0 flex-1 flex-col">
          <AppHeader />
          <div className="mx-auto w-full max-w-3xl flex-1 px-4 pb-cta lg:px-10 lg:pb-20">
            <UploadScreen />
          </div>
          <TabBar />
        </main>
      </div>
    </ApiKeyGate>
  );
}