import { PageContainer } from "@/components/layout/page-container";
import { ArchiveShell } from "@/components/sections/archive/archive-shell";
import { getArchivePage, getHeaderNavigation } from "@/lib/starter-data";

function parseParam(value: string | string[] | undefined) {
  const normalized = Array.isArray(value) ? value[0] : value;

  if (!normalized) {
    return [];
  }

  return normalized
    .split(",")
    .map((item) => item.trim())
    .filter(Boolean);
}

export default async function ShopPage({
  searchParams,
}: {
  searchParams: Promise<{
    page?: string;
    category?: string;
    brand?: string;
    q?: string;
    sort?: string;
    min_price?: string;
    max_price?: string;
    on_sale?: string;
  }>;
}) {
  const resolvedSearchParams = await searchParams;
  const selectedCategories = parseParam(resolvedSearchParams.category);
  const selectedCategory = selectedCategories[0] || "";
  const selectedBrands = parseParam(resolvedSearchParams.brand);
  const query = (resolvedSearchParams.q ?? "").trim();
  const selectedSort =
    resolvedSearchParams.sort === "price-desc" ? "price-desc" : "price-asc";
  const selectedMinPrice = Number.isFinite(Number(resolvedSearchParams.min_price))
    ? Math.max(0, Number(resolvedSearchParams.min_price))
    : undefined;
  const selectedMaxPrice = Number.isFinite(Number(resolvedSearchParams.max_price))
    ? Math.max(0, Number(resolvedSearchParams.max_price))
    : undefined;
  const isOnSaleOnly =
    resolvedSearchParams.on_sale === "1" ||
    resolvedSearchParams.on_sale === "true";
  const currentPage = Math.max(1, Number(resolvedSearchParams.page ?? "1") || 1);
  const [archive, headerCategories] = await Promise.all([
    getArchivePage({
      page: currentPage,
      perPage: 15,
      query,
      categories: selectedCategory ? [selectedCategory] : [],
      brands: selectedBrands,
      sort: selectedSort,
      minPrice: selectedMinPrice,
      maxPrice: selectedMaxPrice,
      onSale: isOnSaleOnly,
    }),
    getHeaderNavigation(),
  ]);
  const activeMainCategory =
    headerCategories.find((category) => category.slug === selectedCategory) ?? null;
  const categoryChildren = activeMainCategory?.children ?? [];
  const selectedCategoryLabel =
    activeMainCategory?.name ||
    headerCategories
      .flatMap((category) => category.children)
      .find((category) => category.slug === selectedCategory)?.name ||
    "";

  return (
    <section className="bg-muted-surface">
      <PageContainer className="space-y-10 pb-20 pt-[60px]">
        <header>
          <h1 className="text-[38px] font-bold leading-[1.2] tracking-[-0.03em] text-primary">
            {selectedCategoryLabel || archive.title}
          </h1>
        </header>

        <ArchiveShell
          key={`${selectedCategory}|${selectedBrands.join(",")}|${query}|${selectedSort}|${selectedMinPrice ?? ""}|${selectedMaxPrice ?? ""}|${isOnSaleOnly ? "sale" : ""}`}
          archive={archive}
          query={query}
          selectedCategory={selectedCategory}
          selectedBrands={selectedBrands}
          selectedSort={selectedSort}
          selectedMinPrice={selectedMinPrice}
          selectedMaxPrice={selectedMaxPrice}
          isOnSaleOnly={isOnSaleOnly}
          categoryChildren={categoryChildren}
        />
      </PageContainer>
    </section>
  );
}