"use client";

import { IoLocationOutline } from "react-icons/io5";
import { CiCalendar } from "react-icons/ci";
import { AiOutlineUserAdd } from "react-icons/ai";
import { BsThreeDotsVertical } from "react-icons/bs";
import Link from "next/link";
import { FaStar } from "react-icons/fa";
import React, { useEffect, useRef, useState } from "react";
import MiddleDrawer from "@/components/common/MiddleDrawer";
import { FiPaperclip } from "react-icons/fi";
import Image from "next/image";
import Button from "@/components/common/Button";
import MobilePageHeader from "@/components/common/MobilePageHeader";
import { useTranslations } from "next-intl";
import {
  deleteReview,
  getReviews,
  updateReview,
} from "@/lib/actions/orderActions";
import { useAppDispatch, useAppSelector } from "@/app/store/hooks";
import Pagination from "@/components/Pagination/Paginate";
import ReviewDescription from "@/components/ReadMore/ReviewDescription";
import { checkAuthErrorGet } from "@/lib/checkAuthError";
import { useRouter } from "next/navigation";
import { toast } from "react-toastify";
import ReviewModal from "@/components/common/Modal/ReviewModal";
import DataNotFound from "@/components/common/DataNotFound";
import RouteLoader from "@/components/common/RouteLoader";
import Loader from "@/components/common/Loader";

export default function RatingReviews() {
  const [activeDrawer, setActiveDrawer] = useState<null | "addreview">(null);
  const closeDrawer = () => setActiveDrawer(null);
  const [rating, setRating] = useState(1);
  const [open, setOpen] = useState(false);
  const menuRef = useRef(null);
  const t = useTranslations();
  const [openMenuId, setOpenMenuId] = useState<number | null>(null);
  const menuRefs = useRef<{ [key: number]: HTMLDivElement | null }>({});
  const [reviews, setReviews] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const { user } = useAppSelector((state) => state?.auth);
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);
  const [totalReviews, setTotalReviews] = useState(0);
  const dispatch = useAppDispatch();
  const router = useRouter();

  const [review, setReview] = useState<string>("");
  const [seller, setSeller] = useState<any>();
  const [orderId, setOrderId] = useState<string>("");
  const [productId, setProductId] = useState<string>("");
  const [reviewId, setReviewId] = useState<string>("");

  const [showConfirmModal, setShowConfirmModal] = useState<
    null | "cancel" | "review" | "status"
  >(null);

  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      const isOutside = Object.entries(menuRefs.current).every(([key, ref]) => {
        return ref && !ref.contains(e.target as Node);
      });
      if (isOutside) {
        setOpenMenuId(null);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  const inputRef = useRef<HTMLInputElement>(null);

  const handleCopy = () => {
    if (inputRef.current) {
      navigator.clipboard.writeText(inputRef.current.value);
    }
  };

  const handleBack = () => {
    window.history.back();
  };

  useEffect(() => {
    if (!user?.token) return;

    const transformReviewCards = (data: any) => {
      return data?.map((item: any) => {
        const seller = item?.seller;
        const sellerObj = {
          name:
            [seller?.first_name, seller?.middle_name, seller?.last_name]
              .filter(Boolean)
              .join(" ") || t("rating_review.unknown_seller"),
          imageUrl: seller?.profileImage
            ? `${process.env.NEXT_PUBLIC_API}/${seller.profileImage}`
            : "/default-user.png",
          sellerId: seller?._id,
          sellerAverageRating: seller.sellerAverageRating || 0,
        };
        return {
          ...item,
          seller: sellerObj,
        };
      });
    };

    const fetchReviews = async () => {
      try {
        setLoading(true);
        const response = await getReviews(user?.token, {
          page: currentPage,
          limit: 5,
        });
        if (response.success && Array.isArray(response?.data?.reviews)) {
          const transformedData = transformReviewCards(response?.data?.reviews);
          setReviews(transformedData);
          const pagination = response?.data?.pagination;
          setTotalPages(pagination?.totalPages || 1);
          setCurrentPage(pagination?.page || 1);
          setTotalReviews(pagination?.total || 0);
        } else {
          setReviews([]);
          setTotalPages(1);
          setTotalReviews(0);
        }
      } catch (err: any) {
        if (checkAuthErrorGet(error, dispatch, router)) return;
        setError(t("failed_to_fetch_Reviews"));
      } finally {
        setLoading(false);
      }
    };
    fetchReviews();
  }, [user?.token, currentPage]);

  const handleDelete = async (id: string) => {
    try {
      const updatedReviews = reviews.filter((rev) => rev.id !== id);

      const response = await deleteReview(user.token, id);
      if (response?.success) {
        if (updatedReviews.length === 0) {
          if (currentPage === 1) {
            setReviews(updatedReviews);
          } else {
            setCurrentPage((prev) => prev - 1);
          }
        } else {
          setReviews(updatedReviews);
          // setCurrentPage(1);
        }
        toast.success(t("review_deleted_successfully"));
      } else {
        toast.error(t("validation.error_msg"));
      }
    } catch (error: any) {

      if (checkAuthErrorGet(error, dispatch, router)) return;

      const errorMsg =
        error?.response?.data?.message || t("validation.error_msg");
      toast.error(errorMsg);
    } finally {
    }
  };

  const handleSubmitReview = async () => {
    try {
      const response = await updateReview(user.token, {
        description: review,
        rating: rating.toString(),
        orderId: orderId,
        sellerId: seller.id,
        productId: productId,
        reviewId: reviewId,
      });

      if (response.success) {
        setShowConfirmModal(null);
        const updatedReviews = reviews.map((rev) => {
          if (rev.id === reviewId) {
            rev.description = review;
            rev.rating = rating;
          }

          return rev;
        });

        setReviews(updatedReviews);
        toast.success(t("review_updated"));
      }
    } catch (error: any) {
      if (checkAuthErrorGet(error, dispatch, router)) return;
    } finally {
    }
  };

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <Loader />
      </div>
    );
  }

  return (
    <RouteLoader>
      <MobilePageHeader
        title={t("menuItems.rating_reviews.title")}
        onBack={handleBack}
      />
      <main className="flex-1 max-md:px-0">
        <h1 className="text-lg font-bold text-neutrals900 mb-6 dark:text-white max-md:hidden">
          {t("menuItems.rating_reviews.title")}
        </h1>
        <section className="rounded-lg">
          {reviews?.length > 0 ? (
            reviews.map((review: any) => (
              <div
                key={review?.id}
                className="bg-white border border-neutrals100 rounded-md p-4 mb-4 hover:shadow-lg hover:border-primary100 transition-all dark:bg-darkbg dark:border-darkborder max-md:p-3"
              >
                <div className="flex items-start justify-between">
                  <div className="flex items-start gap-3">
                    <img
                      src={review.seller.imageUrl || "/default.jpg"}
                      alt={`${review?.seller?.first_name || "User"}`}
                      className="w-10 h-10 rounded-full border-2 border-primary100 object-cover"
                      onError={(e) => {
                        e.currentTarget.onerror = null;
                        e.currentTarget.src = "/default.jpg";
                      }}
                    />
                    <div>
                      <h5 className="font-semibold text-gray-900 dark:text-neutral-300">
                        {`${review.seller.name}`}
                      </h5>
                      <h5 className="font-semibold text-gray-900 dark:text-neutral-300">
                        {`${t("review_rating.product")}: ${
                          review?.order?.productSnapshot?.title || ""
                        }`}
                      </h5>
                      <div className="text-sm text-gray-800 flex items-center gap-1 mb-0.5 dark:text-neutrals400">
                        {Array.from({ length: 5 }).map((_, index) => (
                          <FaStar
                            key={index}
                            className={
                              index < review.rating
                                ? "text-kzyellow"
                                : "text-neutrals300 dark:text-neutrals500"
                            }
                          />
                        ))}
                        <span className="ml-1">{review?.rating}/5</span>
                      </div>

                      <div>
                        <ReviewDescription
                          description={review?.description || "N/A"}
                        />
                      </div>
                      {/* <p
                        className="text-sm text-primary500 font-medium mt-1 cursor-pointer dark:text-primary400"
                        onClick={() => setActiveDrawer("addreview")}
                      >
                        {t("review_rating.read_more")}

                      </p> */}
                    </div>
                  </div>

                  {/* Menu */}
                  <div
                    className="relative inline-block"
                    ref={(el: any) => (menuRefs.current[review.id] = el)}
                  >
                    <div className="flex items-center gap-2.5">
                      {/* <Link
                        href="#"
                        className="flex items-center text-primary500 font-medium text-sm gap-1 max-sm:text-neutrals500 hover:text-primary500 dark:text-primary400"
                      >
                        <AiOutlineUserAdd size={20} />
                        <span className="max-sm:hidden">
                          {t("review_rating.follow_seller")}
                        </span>
                      </Link> */}

                      <BsThreeDotsVertical
                        className="text-gray-500 cursor-pointer dark:text-neutrals400"
                        size={18}
                        onClick={() =>
                          setOpenMenuId(
                            openMenuId === review.id ? null : review.id
                          )
                        }
                      />
                    </div>

                    {openMenuId === review.id && (
                      <div className="absolute right-0 p-2 mt-2 w-24 bg-white border border-neutrals100 rounded-md shadow-lg z-50 dark:bg-background dark:border-darkborder rtl:right-auto rtl:left-0">
                        <button
                          onClick={() => {
                            setReview(review.description);
                            setSeller(review.seller);
                            setRating(review.rating);
                            setOrderId(review.orderId);
                            setProductId(review?.product?.id);
                            setReviewId(review.id);
                            setShowConfirmModal("review");
                          }}
                          className="w-full text-left px-4 py-2 text-sm rounded text-neutrals800 hover:bg-neutrals100 hover:text-primary500 dark:text-neutrals400 dark:hover:bg-darkbg dark:hover:text-primary400"
                        >
                          {t("dashboard.edit")}
                        </button>
                        <button
                          onClick={() => handleDelete(review.id)}
                          className="w-full text-left px-4 py-2 text-sm rounded text-neutrals800 hover:bg-neutrals100 hover:text-primary500 dark:text-neutrals400 dark:hover:bg-darkbg dark:hover:text-primary400"
                        >
                          {t("dashboard.delete")}
                        </button>
                      </div>
                    )}
                  </div>
                </div>

                <div className="flex items-center justify-between text-sm text-neutrals500 mt-3 pl-12 rtl:pr-12 rtl:pl-0 dark:text-neutrals400">
                  <div className="flex items-center gap-1">
                    <CiCalendar className="text-neutrals500 text-lg dark:text-neutrals400" />
                    <span className="max-md:text-xs">
                      {new Date(review.createdAt).toLocaleDateString()}
                    </span>
                  </div>
                  {/* <div className="flex items-center gap-1">
                    <IoLocationOutline className="text-neutrals500 text-lg dark:text-neutrals400" />
                    <span className="max-md:text-xs">
                      {review?.country || "Saudi Arabia"}
                     </span>
                  </div> */}
                </div>
              </div>
            ))
          ) : (
            <DataNotFound />
          )}
          {reviews.length > 0 && totalReviews > 0 && totalPages > 1 && (
            <div className="!mt-10 flex justify-center">
              <Pagination
                pageCount={totalPages}
                currentPage={currentPage}
                onPageChange={({ selected }) => setCurrentPage(selected + 1)}
              />
            </div>
          )}
        </section>
      </main>

      <MiddleDrawer
        isOpen={activeDrawer === "addreview"}
        onClose={closeDrawer}
        title="Give Review"
        footer={
          <div className="flex justify-end gap-2">
            <Button
              label="Not Now"
              onClick={closeDrawer}
              variant="fadoutline"
            />
            <Button type="submit" label="Submit" variant="secondary" />
          </div>
        }
      >
        <div className="text-center">
          <h2 className="text-lg font-bold text-neutrals900 mb-4 max-sm:text-base">
            {t("review_rating.experience_seller")}
          </h2>

          <div className="flex items-center w-fit mx-auto justify-center gap-3 bg-neutrals50 p-3 px-4 rounded-md mb-5 dark:bg-cardfooter">
            <Image
              src="/user-img.png"
              alt="Seller"
              width={40}
              height={40}
              className="w-10 h-10 rounded-full border-2 border-primary100 object-cover dark:border-neutral-800"
            />
            <div className="text-left">
              <p className="font-bold text-neutrals900 text-base dark:text-white">
                William J.
              </p>
              <p className="text-xs text-gray-500 flex items-center gap-1 dark:text-neutrals400">
                <FaStar size={12} className="text-kzyellow" /> 4.1/5
              </p>
            </div>
          </div>

          <p className="text-sm text-gray-500 mb-5 dark:text-neutrals400">
            {" "}
            {t("review_rating.review_moment")}
          </p>

          <div className="flex justify-center gap-1 mb-5">
            {[1, 2, 3, 4, 5].map((num) => (
              <FaStar
                key={num}
                size={24}
                className={
                  num <= rating
                    ? "text-kzyellow"
                    : "text-neutrals200 dark:text-neutrals400"
                }
                onClick={() => setRating(num)}
                role="button"
              />
            ))}
          </div>

          <div className="relative mb-6">
            <input
              type="text"
              ref={inputRef}
              placeholder="Add a comment"
              className="w-full px-4 py-2.5 pl-4 pr-10 border border-neutrals100 rounded-md font-normal text-sm placeholder:text-neutrals400 focus:outline-none focus:ring-1 focus:ring-primary500 dark:bg-darkbg dark:border-darkborder dark:text-neutrals400 dark:placeholder:text-neutrals500 dark:focus:ring-primary400 rtl:pl-10 rtl:pr-4"
            />
            <FiPaperclip
              onClick={handleCopy}
              className="absolute right-3 top-1/2 -translate-y-1/2 text-neutrals500 cursor-pointer dark:text-neutrals400 rtl:left-3 rtl:right-auto"
              size={18}
            />
          </div>
        </div>
      </MiddleDrawer>

      {showConfirmModal && showConfirmModal === "review" && (
        <ReviewModal
          isOpen={showConfirmModal === "review"}
          onClose={() => setShowConfirmModal(null)}
          rating={rating}
          setRating={setRating}
          review={review}
          setReview={setReview}
          handleSubmitReview={handleSubmitReview}
          seller={seller}
        />
      )}
    </RouteLoader>
  );
}