import { Link } from "@remix-run/react";
import { ChevronLeft, Store } from "lucide-react";
import { Skeleton } from "./ui/skeleton";
import { ErrorState } from "./UiProvider";

interface SellerTile {
  id?: string;
  sellerId?: string;
  sellerUsername?: string;
  sellerName?: string;
  imageUrl?: string;
  order?: number;
}

interface SellerTilesGridProps {
  sellers: SellerTile[];
  isLoading: boolean;
  isError: boolean;
  refetch: () => void;
  showViewAllButton?: boolean;
}

const SellerTilesGrid = ({
  sellers,
  isLoading,
  isError,
  refetch,
  showViewAllButton = true,
}: SellerTilesGridProps) => {
  if (isLoading) {
    return <SellerTilesSkeleton />;
  }

  if (isError) {
    return (
      <div className="px-4">
        <ErrorState onRetry={refetch} />
      </div>
    );
  }

  if (sellers.length === 0) {
    return null;
  }

  return (
    <div className="w-full flex flex-col gap-4 px-4 lg:px-0">
      {/* 2x2 on mobile, single row of 5 on desktop */}
      <div className="grid grid-cols-2 lg:grid-cols-5 gap-2 lg:gap-4">
        {sellers.slice(0, 5).map((seller, index) => (
          <Link
            key={seller.id || index}
            to={`/seller/${seller.sellerUsername}`}
            className={`relative aspect-square overflow-hidden rounded-lg group ${
              index === 4 ? "hidden lg:block" : ""
            }`}
          >
            {/* Background Image */}
            {seller.imageUrl ? (
              <img
                src={seller.imageUrl}
                alt={seller.sellerName || "فروشگاه"}
                className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
              />
            ) : (
              <div className="w-full h-full bg-gradient-to-br from-gray-200 to-gray-300 flex items-center justify-center">
                <Store size={48} className="text-gray-400" />
              </div>
            )}

          </Link>
        ))}
      </div>

      {/* View All Button */}
      {showViewAllButton && (
        <Link
          to="/sellers"
          className="flex items-center justify-center gap-2 w-full py-3 border border-black rounded-none hover:bg-black hover:text-white transition-colors duration-300"
        >
          <span className="text-B14 font-bold">مشاهده همه فروشگاه‌ها</span>
          <ChevronLeft size={18} />
        </Link>
      )}
    </div>
  );
};

const SellerTilesSkeleton = () => {
  return (
    <div className="w-full flex flex-col gap-4 px-4">
      <div className="grid grid-cols-2 gap-2">
        {Array(4)
          .fill(1)
          .map((_, index) => (
            <Skeleton key={index} className="aspect-square rounded-lg" />
          ))}
      </div>
      <Skeleton className="w-full h-12 rounded-none" />
    </div>
  );
};

export default SellerTilesGrid;