import Container from "@/components/elements/Container";
import LocalePageShell from "@/components/i18n/LocalePageShell";
import { cookies } from "next/headers";
import BillboardsFilter from "@/components/billboards/BillboardPage/BillboardsFilter";
import BillboardsListSection from "@/components/billboards/BillboardsListSection";
import { Metadata } from "next";
import { generatePageMetadata } from "@/utils/generatePageMetadata";
import { getSeoPage } from "@/lib/i18n/seo";
import { getServerLanguage } from "@/lib/i18n/server";
import { Suspense } from "react";
import { AcademyListSkeleton } from "@/components/academy/AcademySkeletons";
import { buildBillboardsListSeo } from "@/lib/buildBillboardsListSeo";

interface IBillboardsProps {
  params: Promise<{ slug?: string[] }>;
  searchParams: Promise<{
    province?: string;
    city?: string;
    category?: string;
    search?: string;
    sort?: string;
  }>;
}

export async function generateMetadata({ params, searchParams }: IBillboardsProps): Promise<Metadata> {
  const lang = await getServerLanguage();
  const [urlParams, filters] = await Promise.all([params, searchParams]);
  const seo = buildBillboardsListSeo(urlParams.slug || [], filters, lang);
  const billboardsPage = getSeoPage("billboards", lang);

  const meta = generatePageMetadata({
    title: seo.title,
    ogTitle: seo.title,
    description: seo.description,
    path: seo.path,
    keywords: billboardsPage.keywords,
    lang,
  });

  return {
    ...meta,
    title: { absolute: seo.title },
  };
}

export default async function Billboards({ params, searchParams }: IBillboardsProps) {
  const [urlParams, filters, cookieStore] = await Promise.all([
    params,
    searchParams,
    cookies()
  ]);
  
  const token = cookieStore.get("token")?.value || "";
  const seo = buildBillboardsListSeo(urlParams.slug || [], filters);

  const combinedFilters = {
    ...filters,
    province: seo.provinceId || filters.province,
    city: seo.cityId || filters.city,
    category: seo.category || filters.category
  };

  return (
    <LocalePageShell>
      <Container>
        <h1 className="sr-only">{seo.h1}</h1>

        <BillboardsFilter />

        <Suspense fallback={<AcademyListSkeleton count={3} />}>
          <BillboardsListSection filters={combinedFilters} token={token} />
        </Suspense>
      </Container>
    </LocalePageShell>
  );
}
