"use client";
import Image from "next/image";
import Link from "next/link";
import { Card, CardContent } from "@/components/ui/card";
import type { Category } from "@/lib/types/api";
import { Skeleton } from "@/components/ui/skeleton";
import { ChevronRight } from "lucide-react";

type Props = {
  categories: Category[] | undefined;
  isLoading: boolean;
  isError: boolean;
  locale: string;
  title: string;
  showAllOnMobile?: boolean;
};

export default function CategoryGrid({
  categories,
  isLoading,
  isError,
  locale,
  title,
  showAllOnMobile = false,
}: Props) {
  if (isError) {
    return (
      <section className="bg-white rounded-3xl shadow-sm border border-gray-100 p-8">
        <h2 className="text-2xl font-bold mb-6 text-gray-900">{title}</h2>
        <div className="text-center py-8">
          <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-red-50 mb-4">
            <svg
              className="w-6 h-6 text-red-600"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
              />
            </svg>
          </div>
          <p className="text-gray-900 font-semibold text-lg mb-2">
            Failed to load categories
          </p>
          <p className="text-gray-500">Please refresh the page and try again</p>
        </div>
      </section>
    );
  }

  if (isLoading) {
    return (
      <section className="bg-white rounded-3xl shadow-sm border border-gray-100 p-8">
        <Skeleton className="h-9 w-56 mb-6 rounded-xl" />
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-5">
          {Array.from({ length: 12 }).map((_, i) => (
            <div key={i} className={`space-y-3 ${!showAllOnMobile && i >= 2 ? "hidden sm:block" : ""}`}>
              <Skeleton className="w-full h-36 rounded-2xl" />
              <Skeleton className="h-4 w-full rounded-lg" />
            </div>
          ))}
        </div>
      </section>
    );
  }

  return (
    <section className="bg-white rounded-lg shadow-sm border border-gray-100 p-2 md:p-6">
      <div className="flex items-center justify-between mb-6">
        <h2 className="text-2xl font-bold text-gray-900">{title}</h2>
        {!showAllOnMobile && (
          <Link
            href={`/${locale}/categories`}
            className="sm:hidden flex items-center justify-center p-2 rounded-full hover:bg-gray-100 transition-colors text-gray-500"
          >
            <ChevronRight className="w-6 h-6" />
          </Link>
        )}
      </div>
      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-5">
        {categories?.map((cat, index) => (
          <Link
            key={cat.id}
            href={`/${locale}/category/${cat.slug}?category_id=${cat.id}`}
            className={`group ${!showAllOnMobile && index >= 2 ? "hidden sm:block" : ""}`}
          >
            <Card className="border p-2 gap-2 border-gray-100 hover:border-gray-900 hover:shadow-lg transition-all duration-300 cursor-pointer overflow-hidden rounded-lg bg-gradient-to-br from-gray-50 to-white">
              <div className="relative w-full h-40 overflow-hidden bg-gradient-to-br from-gray-50 to-gray-100">
                <Image
                  src={
                    cat.media[0]?.thumbnail || cat.media?.[0]?.images_800x800
                  }
                  alt={cat.name}
                  fill
                  className="object-cover transition-transform duration-500 group-hover:scale-110"
                />
              </div>
              <CardContent className="py-4 px-3">
                <p className="text-sm min-h-[40px] font-semibold text-gray-900 text-center group-hover:text-gray-700 transition-colors">
                  {cat.name}
                </p>
              </CardContent>
            </Card>
          </Link>
        ))}
      </div>
    </section>
  );
}