import Image from "next/image";
import Link from "next/link";
import { SectionHeading, EmptyState } from "@/components/ui/section";
import { buildMetadata } from "@/lib/seo";
import { formatDate } from "@/lib/utils";
import { articleService } from "@/services/catalog.service";

export const dynamic = "force-dynamic";

export const metadata = buildMetadata({
  title: "Artikel & Panduan",
  description: "Tips top up, panduan voucher, dan insight membership dari 305 Gaming.",
  path: "/blog",
});

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

export default async function BlogPage({ searchParams }: { searchParams: SearchParams }) {
  const sp = await searchParams;
  const page = Number(Array.isArray(sp.page) ? sp.page[0] : sp.page || 1);
  const q = Array.isArray(sp.q) ? sp.q[0] : sp.q;

  const result = await articleService.listPublic({
    q: q || undefined,
    page: Number.isFinite(page) && page > 0 ? page : 1,
    limit: 9,
  });

  return (
    <div className="container-shell pt-28 pb-16">
      <SectionHeading
        eyebrow="Blog"
        title="Artikel & panduan"
        description="Konten praktis untuk belanja digital yang lebih aman dan efisien."
      />

      <form className="mt-8 flex gap-3">
        <input
          name="q"
          defaultValue={q}
          placeholder="Cari artikel..."
          className="h-11 w-full max-w-md 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-11 rounded-xl bg-accent px-5 text-sm font-semibold text-black transition hover:bg-accent-dim"
        >
          Cari
        </button>
      </form>

      <div className="mt-10">
        {result.items.length ? (
          <div className="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
            {result.items.map((article) => (
              <Link
                key={article.id}
                href={`/blog/${article.slug}`}
                className="group overflow-hidden rounded-2xl border border-border bg-surface transition hover:border-accent/40"
              >
                <div className="relative aspect-[16/10] bg-surface-2">
                  {article.thumbnail ? (
                    <Image
                      src={article.thumbnail}
                      alt={article.title}
                      fill
                      className="object-cover transition duration-500 group-hover:scale-105"
                      sizes="(max-width:1024px) 100vw, 33vw"
                    />
                  ) : null}
                </div>
                <div className="space-y-2 p-5">
                  <p className="text-xs uppercase tracking-wide text-muted">
                    {article.category?.name || "Artikel"} · {article.readingTime} menit baca
                  </p>
                  <h2 className="font-[family-name:var(--font-space)] text-xl font-semibold leading-snug group-hover:text-accent">
                    {article.title}
                  </h2>
                  <p className="line-clamp-2 text-sm text-muted">{article.excerpt}</p>
                  <p className="pt-1 text-xs text-muted">
                    {article.author.name}
                    {article.publishedAt ? ` · ${formatDate(article.publishedAt)}` : ""}
                  </p>
                </div>
              </Link>
            ))}
          </div>
        ) : (
          <EmptyState title="Artikel tidak ditemukan" description="Coba kata kunci lain." />
        )}
      </div>

      {result.totalPages > 1 ? (
        <div className="mt-10 flex justify-center gap-2">
          {Array.from({ length: result.totalPages }).map((_, i) => {
            const p = i + 1;
            const params = new URLSearchParams();
            if (q) params.set("q", q);
            params.set("page", String(p));
            return (
              <Link
                key={p}
                href={`/blog?${params.toString()}`}
                className={`inline-flex h-10 min-w-10 items-center justify-center rounded-xl border px-3 text-sm font-semibold ${
                  p === result.page
                    ? "border-accent bg-accent text-black"
                    : "border-border bg-surface text-muted"
                }`}
              >
                {p}
              </Link>
            );
          })}
        </div>
      ) : null}
    </div>
  );
}