import LabsFilters from "@/components/labs/labs-filters";
import { LabsLabsList } from "@/components/labs/labs-list";
import LabsListLayout from "@/components/pages/labs-list/layout";
import { buttonVariants } from "@/components/ui/button";
import {
  Drawer,
  DrawerContent,
  DrawerDescription,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer";
import { ScrollArea } from "@/components/ui/scroll-area";
import { getLabs } from "@/lib/api/labs";
import { assertIsPathLocale, getLocaleFromLangString } from "@/lib/locale";
import { getAlternateUrls } from "@/lib/seo";
import { cn } from "@/lib/utils";
import { t } from "@/locales";
import { FilterIcon } from "lucide-react";
import type { Metadata } from "next";
import { connection } from "next/server";

export default async function LabsListPage(props: {
  params: Promise<{ lang?: string }>;
}) {
  const params = await props.params;
  await connection();

  assertIsPathLocale(params.lang);

  const labs = await getLabs();

  return (
    <LabsListLayout
      sideClassName="h-content overflow-y-auto"
      side={<LabsFilters initialLabs={labs} />}
    >
      <Drawer>
        <LabsLabsList
          initialLabs={labs}
          drawerTrigger={
            <DrawerTrigger
              className={cn(
                buttonVariants({ variant: "outline", size: "icon" }),
                "md:hidden"
              )}
            >
              <FilterIcon />
            </DrawerTrigger>
          }
        />
        <DrawerContent>
          <DrawerHeader className="sr-only">
            <DrawerTitle />
            <DrawerDescription />
          </DrawerHeader>
          <div className="p-4">
            <ScrollArea className="h-[60vh] w-full">
              <LabsFilters compact initialLabs={labs} />
            </ScrollArea>
          </div>
        </DrawerContent>
      </Drawer>
    </LabsListLayout>
  );
}

export async function generateMetadata(props: {
  params: Promise<{ lang?: string }>;
}): Promise<Metadata> {
  const { lang } = await props.params;
  const locale = getLocaleFromLangString(lang);

  return {
    title: `Labs | ${t(locale, "home.seo.title")}`,
    description: t(locale, "home.seo.description"),
    keywords: t(locale, "home.seo.keywords"),
    openGraph: {
      title: `Labs | ${t(locale, "home.seo.title")}`,
      description: t(locale, "home.seo.description"),
      tags: t(locale, "home.seo.keywords"),
    },
    alternates: getAlternateUrls(locale, "/labs"),
  };
}

export { generateStaticParams } from "@/components/pages/localed-pages";