import type { Metadata } from "next";
import { PageHeader } from "@/components/PageHeader";
import { EntityCard } from "@/components/catalog/EntityCard";
import { EmptyState } from "@/components/catalog/EmptyState";
import { normalizeImage, pickText, slugify } from "@/lib/meshkee/format";
import { safe } from "@/lib/meshkee/client";
import { getStoreItems } from "@/lib/meshkee/store-items";
import type { StoreItemListResponse } from "@/lib/meshkee/types";

export const metadata: Metadata = {
  title: "فروشگاه",
  description: "خرید بسته‌ها و کالاهای آموزشی استاد علی عالمی.",
};

export default async function StorePage() {
  const { items } = await safe<StoreItemListResponse>(getStoreItems({ pageSize: 24 }), {
    items: [],
    total: 0,
    page: 1,
    pageSize: 24,
  });

  return (
    <>
      <PageHeader title="فروشگاه" current="فروشگاه" />
      <section className="boxed py-16">
        {items.length === 0 ? (
          <EmptyState title="در حال حاضر کالایی برای فروش ثبت نشده است" text="به‌زودی محصولات فروشگاه در این صفحه نمایش داده می‌شوند." />
        ) : (
          <div className="grid grid-cols-2 gap-5 sm:grid-cols-3 lg:grid-cols-4">
            {items.map((item) => {
              const name = pickText(item.product?.nameFa, item.nameFa, item.product?.name, item.name);
              const image = normalizeImage(item.product?.titleImageUrl ?? item.product?.imageUrl ?? item.variants?.[0]?.images?.[0]);
              const firstVariant = item.variants?.[0];
              const productId = item.productId ?? item.product?.id ?? item.id;
              return (
                <EntityCard
                  key={item.id}
                  href={`/store/${productId}/${slugify(name)}`}
                  image={image}
                  title={name}
                  price={firstVariant?.discountedPrice ?? firstVariant?.price}
                  originalPrice={firstVariant?.discountedPrice ? firstVariant.price : undefined}
                />
              );
            })}
          </div>
        )}
      </section>
    </>
  );
}