import Link from "next/link";
import { API_ENDPOINTS } from "@/lib/constants";
import type { FlutterPagedResponse, Category } from "@/types";
import { TEXT } from "@/branding";
import SafeImage from "@/components/ui/SafeImage";

async function fetchCategories(): Promise<Category[]> {
  try {
    const base =
      process.env.NEXT_PUBLIC_API_BASE_URL ||
      "https://stag.yourappname.com/yourappname/public/api/customer";

    const res = await fetch(
      `${base}${API_ENDPOINTS.CATEGORIES.GET_WITH_SUBCAT}`,
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        body: JSON.stringify({ category_id: 0, page_no: 1, page_limit: 50 }),
        next: { revalidate: 600 }, // cache for 10 min
      },
    );

    if (!res.ok) return [];
    const data: FlutterPagedResponse<Category> = await res.json();
    return data.result ?? [];
  } catch {
    return [];
  }
}

function CategoryCard({ category }: { category: Category }) {
  return (
    <Link
      href={`/categories/${category.id}/0`}
      prefetch={false}
      className="group flex flex-col items-center gap-2 cursor-pointer"
    >
      <div className="relative w-full aspect-square rounded-2xl overflow-hidden bg-[#FFF8F0] dark:bg-dm-surface2 border border-gray-100 dark:border-dm-border shadow-sm group-hover:shadow-md group-hover:scale-105 transition-all duration-200">
        <SafeImage
          src={category.image}
          alt={category.name}
          fill
          className="object-contain p-3"
          sizes="(max-width:640px) 25vw, (max-width:1024px) 12vw, 110px"
        />
      </div>
      <span className="text-xs font-semibold text-gray-700 dark:text-dm-muted text-center group-hover:text-primary-700 transition-colors line-clamp-2 leading-tight w-full px-1">
        {category.name}
      </span>
    </Link>
  );
}

export default async function CategoryGrid() {
  const categories = await fetchCategories();

  if (categories.length === 0) return null;

  return (
    <section className="p-5 pb-6">
      <h2
        className="text-xl font-black text-gray-800 dark:text-dm-text text-center mb-6"
        style={{ fontFamily: "var(--font-poppins)" }}
      >
        {TEXT.home.exploreCategories}
      </h2>
      <div className="grid grid-cols-5 sm:grid-cols-5 md:grid-cols-7 lg:grid-cols-9 gap-x-2 gap-y-5">
        {categories.map((cat) => (
          <CategoryCard key={cat.id} category={cat} />
        ))}
      </div>
    </section>
  );
}