import Image from "next/image";
import Link from "next/link";
import { listStoreItems } from "@/lib/meshkee/api";
import {
  formatPrice,
  storeItemName,
  storeItemPrice,
} from "@/lib/meshkee/format";
import { storeItemHref } from "@/lib/meshkee/urls";

type SearchParams = Promise<{
  categoryId?: string;
  page?: string;
}>;

export const metadata = {
  title: "فروشگاه | مبلمان هومت",
  description: "لیست محصولات قابل خرید فروشگاه مبلمان هومت",
};

export default async function StorePage({
  searchParams,
}: {
  searchParams: SearchParams;
}) {
  const params = await searchParams;
  const page = Math.max(1, Number(params.page) || 1);
  const data = await listStoreItems({
    page,
    pageSize: 24,
    categoryId: params.categoryId,
  });

  return (
    <main className="container">
      <section className="page-hero">
        <p className="eyebrow">Store</p>
        <h1>فروشــــــــگاه هومــــــــت</h1>
        <p>محصولات قابل سفارش را مشاهده کنید و به سبد خرید اضافه کنید.</p>
      </section>

      <section className="section store-grid-section">
        {data.items.length === 0 ? (
          <p className="empty-note">در حال حاضر محصول فروشگاهی فعالی وجود ندارد.</p>
        ) : (
          <div className="store-grid">
            {data.items.map((item) => {
              const name = storeItemName(item);
              const href = storeItemHref(item.id, name);
              const price = storeItemPrice(item);
              return (
                <Link key={item.id} href={href} className="store-card">
                  <div className="store-card-media">
                    {item.productImage ? (
                      <Image
                        src={item.productImage}
                        alt={name}
                        width={480}
                        height={480}
                      />
                    ) : (
                      <div className="store-card-fallback" />
                    )}
                  </div>
                  <div className="store-card-body">
                    {item.label ? <p className="eyebrow">{item.label}</p> : null}
                    <h2>{name}</h2>
                    <strong className="ltr-number" dir="ltr" lang="en">
                      {formatPrice(price)}
                    </strong>
                  </div>
                </Link>
              );
            })}
          </div>
        )}

        {data.total > data.pageSize ? (
          <div className="pager">
            {page > 1 ? (
              <Link
                href={`/store?page=${page - 1}${
                  params.categoryId
                    ? `&categoryId=${encodeURIComponent(params.categoryId)}`
                    : ""
                }`}
              >
                قبلی
              </Link>
            ) : null}
            <span className="ltr-number" dir="ltr" lang="en">
              {page}
            </span>
            {page * data.pageSize < data.total ? (
              <Link
                href={`/store?page=${page + 1}${
                  params.categoryId
                    ? `&categoryId=${encodeURIComponent(params.categoryId)}`
                    : ""
                }`}
              >
                بعدی
              </Link>
            ) : null}
          </div>
        ) : null}
      </section>
    </main>
  );
}