"use client";
import Image from "next/image";
import { Icons } from "../icons";
import { useRouter, useSearchParams } from "next/navigation";
import { BUCKET_ROOT } from "@/utils/apis";
import { Dot } from "lucide-react";
import { getValidImage } from "@/lib/utils";
import { Skeleton } from "@/components/ui/skeleton";

const RestroCard = ({ image, title, data, isDineOut }: any) => {
  const router = useRouter();

  const handleClick = () => {
    const storeId = data?._id || data?.store?._id;
    const storeType = data?.type || data?.store?.type;

    if (isDineOut === "true") {
      router.push(`/dineout/${storeId}`);
    } else if (storeType === "food") {
      router.push(`/restaurant?id=${storeId}`);
    } else {
      router.push(`/grocery/${storeId}?type=${storeType || 'grocery'}`);
    }
  };

  return (
    <div
      className="bg-white cursor-pointer rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow w-64"
      onClick={handleClick}
    >
      {/* Image container with favorite icon */}
      <div className="relative w-[250px] h-[200px] flex items-center justify-center p-4">
        <Image
          src={image}
          alt={title}
          width={250}
          height={200}
          className="object-cover rounded-lg w-full h-full"
        />

        {data?.is_fav && (
          <div className="absolute top-5 right-5 bg-white rounded-full p-1 shadow-sm">
            <Icons.Heart />
          </div>
        )}
      </div>

      {/* Content */}
      <div className="p-3 mt-2">
        <h3 className="font-medium text-base">{title}</h3>

        <div className="flex items-center mt-1 text-sm gap-2">
          {data?.rating > 0 && (
            <>
              <div className="flex w-[20px] h-[20px] items-center bg-primary text-white justify-center rounded-full">
                <Icons.Star />
              </div>
              <span>{data?.rating} ({data?.rating_count || 0})</span>
              <Dot color="#847f7f" />
            </>
          )}
          <span className="text-gray-500 text-xs">
            {data?.average_preparing_time
              ? `${data.average_preparing_time - 5}-${data.average_preparing_time} mins`
              : "N/A"}
          </span>
        </div>

        <div className="text-xs text-gray-500 mt-1">
          {data?.category?.length > 0 &&
            data.category
              .slice(0, 2)
              .map((c: any, idx: number) => (
                <span key={idx}>
                  {c.category_name}
                  {idx === 0 && data.category.length > 1 ? " • " : ""}
                </span>
              ))}
        </div>
      </div>
    </div>
  );
};

const RestroSkeleton = () => {
  return (
    <div className="bg-white rounded-xl overflow-hidden shadow-sm w-64 p-3">
      <Skeleton className="w-full h-[200px] rounded-lg" />
      <div className="mt-4 flex flex-col gap-3">
        <Skeleton className="h-5 w-3/4" />
        <Skeleton className="h-4 w-1/2" />
        <Skeleton className="h-4 w-full" />
      </div>
    </div>
  );
};

const Restros = ({ data, loading }: any) => {
  const searchParams = useSearchParams();
  const isDineOut = searchParams.get("isDineOut");

  return (
    <div className="w-full mt-4 flex flex-wrap justify-center gap-6 px-4">
      {loading ? (
        [1, 2, 3, 4].map((i) => <RestroSkeleton key={i} />)
      ) : data?.length > 0 ? (
        data.map((item: any) => (
          <RestroCard
            key={item._id}
            image={getValidImage(item.image)}
            title={item.restaurant_name}
            data={item}
            isDineOut={isDineOut}
          />
        ))
      ) : (
        <div className="w-full h-full flex items-center justify-center text-lg font-medium text-gray-500">
          No Restaurants Found!
        </div>
      )}
    </div>
  );
};

export default Restros;