import { ProductCard } from "@/components/store/product-card";
import { EmptyState, SectionHeading } from "@/components/ui/section";
import { buildMetadata } from "@/lib/seo";
import { productService, articleService } from "@/services/catalog.service";
import Link from "next/link";
import { formatDate } from "@/lib/utils";

export const dynamic = "force-dynamic";

export const metadata = buildMetadata({
  title: "Pencarian",
  description: "Cari produk dan artikel di 305 Gaming.",
  path: "/search",
  noIndex: true,
});

type SearchParams = Promise<Record<string, string | string[] | undefined>>;

export default async function SearchPage({ searchParams }: { searchParams: SearchParams }) {
  const sp = await searchParams;
  const q = (Array.isArray(sp.q) ? sp.q[0] : sp.q)?.trim() || "";

  const [products, articles] = q
    ? await Promise.all([
        productService.listPublic({ q, limit: 12, sort: "popular" }),
        articleService.listPublic({ q, limit: 6 }),
      ])
    : [{ items: [], total: 0 }, { items: [], total: 0 }];

  return (
    <div className="container-shell pt-28 pb-16">
      <SectionHeading
        eyebrow="Search"
        title={q ? `Hasil untuk “${q}”` : "Cari produk & artikel"}
        description={q ? `${products.total} produk · ${articles.total} artikel` : "Ketik kata kunci di kolom pencarian."}
      />

      <form action="/search" className="mt-8">
        <div className="flex max-w-xl gap-3">
          <input
            name="q"
            defaultValue={q}
            placeholder="Steam, MLBB, Netflix..."
            className="h-12 w-full rounded-xl border border-border bg-surface px-4 text-sm outline-none focus:ring-2 focus:ring-accent/40"
          />
          <button
            type="submit"
            className="h-12 rounded-xl bg-accent px-6 text-sm font-semibold text-black transition hover:bg-accent-dim"
          >
            Cari
          </button>
        </div>
      </form>

      {!q ? (
        <div className="mt-10">
          <EmptyState title="Mulai pencarian" description="Masukkan nama produk, game, atau topik artikel." />
        </div>
      ) : (
        <>
          <section className="mt-12">
            <h2 className="font-[family-name:var(--font-space)] text-2xl font-bold">Produk</h2>
            <div className="mt-6">
              {products.items.length ? (
                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
                  {products.items.map((product) => (
                    <ProductCard key={product.id} product={product} />
                  ))}
                </div>
              ) : (
                <EmptyState title="Tidak ada produk" description="Coba kata kunci lain." />
              )}
            </div>
          </section>

          <section className="mt-14">
            <h2 className="font-[family-name:var(--font-space)] text-2xl font-bold">Artikel</h2>
            <div className="mt-6 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
              {articles.items.length ? (
                articles.items.map((article) => (
                  <Link
                    key={article.id}
                    href={`/blog/${article.slug}`}
                    className="rounded-2xl border border-border bg-surface p-5 transition hover:border-accent/40"
                  >
                    <p className="text-xs text-muted">
                      {article.publishedAt ? formatDate(article.publishedAt) : "Artikel"}
                    </p>
                    <h3 className="mt-2 font-semibold">{article.title}</h3>
                    <p className="mt-2 line-clamp-2 text-sm text-muted">{article.excerpt}</p>
                  </Link>
                ))
              ) : (
                <EmptyState title="Tidak ada artikel" />
              )}
            </div>
          </section>
        </>
      )}
    </div>
  );
}