"use client";
import { Key, useEffect, useState } from "react";
import { FaStar } from "react-icons/fa";
import axios from "@/utils/axios-config";
import { useSelector } from "react-redux";
import { ProductSkeletonRev } from "../skeletons/skeleton-reviews";
import { useTranslations } from "next-intl";
import Image from "next/image";
import { getToken } from "@/utils/cookie-config";
import { Button, message } from "antd";

interface ReviewSectionProps {
  productId: string;
  rateAvg: string;
  rateCount: number;
  isRated: number;
  rates: any[];
  rateDetails: any[];
}

interface Review {
  created_at: string;
  description: string;
  id: number;
  user_id: number;
  user_image: string;
  user_name: string;
  value: number;
}

function ReviewSection({
  productId,
  rateAvg,
  rateCount,
  rates,
  rateDetails,
  isRated,
}: ReviewSectionProps) {
  const t = useTranslations();
  const [reviews, setReviews] = useState<Review[]>([]);
  const [loading, setLoading] = useState(true);
  const [rating, setRating] = useState<number>(0);
  const [feedback, setFeedback] = useState<string>("");
  const [productID, setProductID] = useState<string>(productId);
  const [isOpen, setIsOpen] = useState(false);
  const [rateLoading, setRateLoading] = useState(false);
  const [ratingClicked, setRatingClicked] = useState(false);
  const [hover, setHover] = useState<number>(0);
  // const { profile, idToken } = useSelector(
  //   (state: { Auth: any }) => state.Auth
  // );
  const idToken = getToken();

  const { searchValue } = useSelector((state: { Search: any }) => state.Search);

  // useEffect(() => {
  //   const fetchReviews = async () => {
  //     const params: { [key: string]: string | number } = {};
  //     try {
  //       const response = await axios.get(
  //         `/rates/${productId}?skip=${params?.skip || 0}&take=${
  //           params?.take || 10
  //         }`
  //       );
  //       const data = await response?.data;
  //       setReviews(data?.data || []);
  //     } catch (error) {
  //       console.error("Error fetching reviews:", error);
  //     } finally {
  //       setLoading(false);
  //     }
  //   };

  //   fetchReviews();
  // }, []);

  const handleSubmit = async () => {
    // if (isRated === 1) {
    //   console.error("You have already rated this product.");
    //   return;
    // }
    setRatingClicked(true);
    try {
      if (!productID || !rating || !feedback) {
        return;
      }

      setRateLoading(true);
      const response = await axios.post("/rates", {
        product_id: productID,
        value: rating || 1,
        description: feedback,
      });

      setRating(0);
      setFeedback("");
      setIsOpen(true);
      setRateLoading(false);
      setRatingClicked(false);
      localStorage.setItem(`rated_${productId}`, "true");
      message.success(response?.data?.message);
    } catch (error: any) {
      setRateLoading(false);
      message.error(error?.message);
      setRatingClicked(false);
    }
  };

  const hasRated = localStorage.getItem(`rated_${productId}`) === "true";

  return (
    <div className="py-6 grid grid-cols-1 md:grid-cols-3 gap-6">
      {/* Left Side - User Reviews */}
      <div className="md:col-span-2">
        <h2 className="text-xl font-bold mb-4">
          {t("User Review")} ({rates.length})
        </h2>
        {
          // loading ? (
          //   <ProductSkeletonRev />
          // ) :
          rates?.length === 0 ? (
            <div className="w-full flex flex-col items-center justify-center text-center p-4 my-5">
              <div className="w-64 h-auto">
                <Image
                  src={"/images/reviews.png"}
                  alt={t("No Reviews")}
                  width={240}
                  height={200}
                  className="object-contain"
                />
              </div>

              {/* Message */}
              <p className="text-lg font-semibold text-gray-600 mt-2">
                {t("No Reviews")}
              </p>
            </div>
          ) : (
            rates?.map((review) => (
              <div
                key={review.id}
                className="flex items-start space-x-4 p-4 border-b"
              >
                {/* <img
                src={review.user_image || "/images/no-image.png"}
                alt={review.user_name}
                className="w-12 h-12 min-w-12 rounded-full border"
              /> */}
                <Image
                  src={review?.user_image || "/images/no-image.png"}
                  alt={review.user_name}
                  width={50}
                  height={50}
                  className=" rounded-full border !w-[50px] !h-[50px]"
                />
                <div>
                  <div className="flex items-center space-x-2">
                    <span className="text-secondary font-bold text-lg">
                      {review.user_name}
                    </span>
                  </div>
                  <div className="flex items-center space-x-2 mb-3">
                    <StarRating rating={review.value} />
                    <span className="text-gray-400 text-sm">
                      {review.created_at}
                    </span>
                  </div>
                  <p className="text-gray-700">{review.description}</p>
                </div>
              </div>
            ))
          )
        }
      </div>

      {/* Right Side - Review Summary */}
      <div>
        <div className="p-4 bg-gray-50 rounded-lg shadow-sm mb-6">
          <h3 className="text-xl font-semibold mb-2">{t("Overall Rating")}</h3>
          <div className="flex items-center space-x-2">
            <span className="text-3xl font-bold">{rateAvg}</span>
            <StarRating rating={Number(rateAvg)} />
            <span className="text-gray-500">
              {rateCount} {t("Reviews")}
            </span>
          </div>

          <div className="mt-4">
            {rateDetails[0].map(
              (
                item: { value: number; count: number },
                index: Key | null | undefined
              ) => (
                <div key={index} className="flex items-center space-x-2 mb-2">
                  <span className="text-sm flex items-center">
                    {item.value} <FaStar className="text-yellow-400 mx-1" />
                  </span>
                  <div className="w-full bg-gray-200 h-2 rounded-lg">
                    <div
                      className="bg-green-600 h-2 rounded-lg"
                      style={{ width: `${item.count * 15}%` }}
                    ></div>
                  </div>
                </div>
              )
            )}
          </div>
        </div>
        {!hasRated && isRated !== 1 && idToken ? (
          <div className="p-6 px-8 bg-gray-50 rounded-lg shadow-sm text-center">
            {/* Rating Icons */}
            <div className="mb-4">
              <h2 className="text-lg font-semibold">
                {t("How many stars would you give to our services?")}
              </h2>
              <div className="flex justify-center mt-2 my-4">
                {[1, 2, 3, 4, 5].map((star) => (
                  <FaStar
                    key={star}
                    className={`w-8 h-8 cursor-pointer transition-all ${
                      star <= (hover || rating)
                        ? "text-yellow-400"
                        : "text-gray-300"
                    }`}
                    onMouseEnter={() => setHover(star)}
                    onMouseLeave={() => setHover(0)}
                    onClick={() => {
                      setRating(star);
                      console.log("star", star);
                    }}
                  />
                ))}
              </div>
              {ratingClicked && !rating && (
                <p className="text-custom-red ">{t("please-select-rate")}</p>
              )}
            </div>

            {/* Feedback Textarea */}
            <div className="mt-4 ">
              <label className="block font-semibold mb-2">
                {t("Can you tell us more?")}
              </label>
              <textarea
                className="w-full p-3 border rounded-md focus:ring-2 focus:ring-teal-500"
                rows={3}
                placeholder={t("Write your feedback here")}
                value={feedback}
                onChange={(e) => setFeedback(e.target.value)}
              />
              {ratingClicked && !feedback && (
                <p className="text-custom-red">{t("give-me-feedback")}</p>
              )}
            </div>

            {/* Submit Button */}
            <Button
              loading={rateLoading}
              className="mt-4 w-full !bg-primary !border-primary !text-white py-4 rounded-md font-bold hover:!bg-white hover:!text-primary transition-colors duration-500"
              onClick={handleSubmit}
            >
              {t("Rate")}
            </Button>
          </div>
        ) : null
        //   idToken&&
        // <div className="p-4 bg-gray-50 rounded-lg shadow-sm mb-6">
        //   <div className="flex justify-center my-6">
        //     <Image
        //       src="/images/waiting.png"
        //       alt="Review Illustration"
        //       width={200}
        //       height={200}
        //     />
        //   </div>
        //   <p className="text-gray-500 text-center">
        //     {t("rated-product")}
        //   </p>
        // </div>
        }
      </div>
      {isOpen && (
        <div className="z-[9999] fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
          <div className=" bg-white p-6 rounded-lg shadow-lg lg:w-99 md:w-99 w-96 mt-6 text-center relative">
            {/* Close Button */}
            <button
              onClick={() => setIsOpen(false)}
              className="absolute top-3 left-3 text-gray-500 hover:text-gray-700 text-xl"
            >
              ✕
            </button>

            {/* Image */}
            <div className="flex justify-center my-6">
              <Image
                src="/images/waiting.png"
                alt="Review Illustration"
                width={200}
                height={200}
              />
            </div>

            {/* Modal Text */}
            <h2 className="text-lg font-semibold text-gray-800 px-6">
              {t("Review-msg")}
            </h2>

            {/* Done Button */}
            <button
              onClick={() => setIsOpen(false)}
              className="bg-primary text-white px-4 py-2 rounded-lg mt-5"
            >
              {t("Done")}
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

// Star Rating Component
const StarRating = ({ rating }: { rating: number }) => {
  return (
    <div className="flex">
      {[...Array(5)].map((_, i) => (
        <span key={i}>
          {i < rating ? (
            <FaStar className="text-yellow-400 w-4 h-4" />
          ) : (
            <FaStar className="text-gray-300 w-4 h-4" />
          )}
        </span>
      ))}
    </div>
  );
};

export default ReviewSection;