"use client";
import Footer from "@comp/Footer/page";
import Navbar from "@comp/Navbar/page";
import GalleryBox from "plugins/Gallery/page";
import { useContext, useEffect, useState } from "react";

import AddToCart from "@comp/Cards/Components/AddToCart/page";
import Image from "next/image";
import PersianNumber from "plugins/PersianNumber";
import logo from "../../../public/images/logo.png";
import moment from "jalali-moment";
import Chapar from "plugins/Chapar";
import { toast } from "react-toastify";
import { useRouter } from "next/navigation";
import InfiniteScroll from "react-infinite-scroll-component";
import BottomSheetComment from "plugins/bottomSheet/BottomSheetComment";
import AppContext from "@ctx/AppContext";

const ProductData = ({ params, data }) => {
  console.log("data", data);

  const CTX = useContext(AppContext);
  const [product, setProduct] = useState([]);
  const [review, setReview] = useState([]);
  const [specificationsHeader, setSpecificationsHeader] = useState([]);
  const [productBarDetail, setProductBarDetail] = useState(0);
  const [content, setContent] = useState("");
  const [rate, setRate] = useState(4);
  const [page, setPage] = useState(0);
  const [hasMore, setHasMore] = useState(true);

  const router = useRouter();

  const fetchPost = async (id) => {
    const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/product/${id}`);
    const post = await res.json();
    setProduct(post.product);
  };

  const fetchReview = async (id, currentPage, afterCreatReview) => {
    try {
      const res = await fetch(
        `${process.env.NEXT_PUBLIC_API_URL}/product/${id}/comment?page=${currentPage}&count=10`
      );

      if (!res.ok) {
        throw new Error(`HTTP error! status: ${res.status}`);
      }

      const data = await res.json();

      // Assuming the API returns an array of reviews and a total count or indication if more data is available
      if (data.length < 10) {
        setHasMore(false);
      }

      if (afterCreatReview) {
        setReview((prevReview) => [...prevReview, ...data]);
      } else {
        setReview(data);
      }
    } catch (error) {
      console.error("Error fetching reviews:", error);
      setHasMore(false); // Stop further fetches on error
    }
  };

  const fetchMoreData = () => {
    const nextPage = page + 1;
    fetchReview(params.id[0], nextPage);
    setPage(nextPage);
  };

  const displaySpecifications = (specs) => {
    let data = [];
    if (specs?.length > 3) {
      specs?.slice(0, 3).forEach((spec) => {
        const { title, value } = spec;

        data.push(`${title}: ${value}`);
      });
    } else {
      specs?.forEach((spec) => {
        const { title, value } = spec;

        data.push(`${title}: ${value}`);
      });
    }

    setSpecificationsHeader(data); // You can replace
  };

  const scrollToSection = (id) => {
    const element = document.getElementById(id);
    if (element) {
      const offset = -80; // Adjust this value as needed
      window.scrollTo({
        top: element.offsetTop + offset,
        behavior: "smooth",
      });
    }
  };

  const createProductReview = async () => {
    const body = {
      title: ` نظر کاربر برای محصول {" "}${data.product?.persianName}`,
      content,
      rate: 1,
      productId: params.id[0],
      rate,
    };
    try {
      const data = await Chapar.post(
        `${process.env.NEXT_PUBLIC_API_URL}/comment`,
        body
      );

      setContent("");

      fetchReview(params.id[0], 0);
    } catch ({ error, status }) {
      toast.error(`${error?.response?.data?.message}`, {
        position: "bottom-right",
        closeOnClick: true,
      });
    }
  };

  const handleCreateReview = () => {
    const token = localStorage.getItem("token");

    if (token) {
      createProductReview();
    } else {
      router.push("/login");
    }
  };

  const handleStarClick = (value) => {
    setRate(value);
  };

  useEffect(() => {
    fetchPost(params.id[0]);
    fetchReview(params.id[0], 0);
  }, []);

  useEffect(() => {
    displaySpecifications(product?.specifications);
  }, [product]);

  console.log("review", review);

  return (
    <>
      <Navbar theme={1} />
      <div className="py-10 ">
        <div className="grid gap-6 xs:grid-cols-1 lg:grid-cols-8 rtl lg:px-20">
          <div className="lg:col-span-3 ">
            <GalleryBox file={data?.product?.files} />
          </div>

          <div className="lg:col-span-3 xs:px-5 lg:px-0 ">
            <div className="text-right mt-7">
              <h1 className="text-lg font-medium ">
                {data.product?.persianName}{" "}
              </h1>
              <p className="mb-0 text-sm text-gray-400">
                {data?.product?.englishName}{" "}
              </p>
            </div>

            <div className="flex my-4">
              <div className="px-3 py-1 ml-2 rounded-full bg-primary-400">
                <p className="mb-0 text-sm text-white ">اصالت کالای </p>
              </div>

              {data?.product?.hasDiscount && (
                <div className="px-3 py-1 ml-2 rounded-full bg-danger-100">
                  <p className="mb-0 text-sm text-white ">بمب امروز </p>
                </div>
              )}

              {!data?.product?.warranty == "" && (
                <div className="px-3 py-1 ml-2 rounded-full bg-secondary-500">
                  <p className="mb-0 text-sm text-white ">
                    {product?.warranty}
                  </p>
                </div>
              )}
            </div>

            {/* <div className="flex my-5">
          <div className="w-[30px] h-[30px] rounded-full bg-red-800 border-[5px] border-white shadow mr-2 cursor-pointer "></div>
          <div className="w-[30px] h-[30px] rounded-full bg-red-700 border-[5px] border-white shadow mr-2 cursor-pointer "></div>
          <div className="w-[30px] h-[30px] rounded-full bg-red-600 border-[5px] border-white shadow mr-2 cursor-pointer "></div>
          <div className="w-[30px] h-[30px] rounded-full bg-red-500 border-[5px] border-green-300 scale-110 shadow mr-2 cursor-pointer "></div>
          <div className="w-[30px] h-[30px] rounded-full bg-red-400 border-[5px] border-white shadow mr-2 cursor-pointer "></div>
          <div className="w-[30px] h-[30px] rounded-full bg-red-300 border-[5px] border-white shadow mr-2 cursor-pointer "></div>
          <div className="w-[30px] h-[30px] rounded-full bg-red-200 border-[5px] border-white shadow mr-2 cursor-pointer "></div>
        </div> */}

            <div>
              <div className="flex justify-between mt-3 text-right">
                <h2 className="mb-0 text-sm text-gray-400">
                  {data?.product?.summery}
                </h2>
              </div>
            </div>

            <ul className="px-3 mt-3">
              {specificationsHeader.map((e, index) => (
                <li className="flex my-2 " key={index}>
                  <div className="w-[10px] h-[10px] relative rounded-full bg-primary-500 mt-1"></div>
                  <p className="w-full mx-2 mb-0 text-sm text-gray-700 ">{e}</p>
                </li>
              ))}
            </ul>
          </div>

          {/* xs:sticky lg:relative xs:top-[60px] lg:top-0  ==> sticky for price=================== */}

          <div className=" w-11/12  lg:col-span-2 sticky top-[80px] xs:hidden lg:block  ">
            <div className="p-3 h-fit border-[1px] border-gray-300 rounded-xl ">
              <div className="flex justify-center">
                <div className="w-[110px]">
                  {data?.product?.files?.length > 0 ? (
                    <Image
                      src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${
                        product?.files && product?.files[0].fileLocation
                      }`}
                      width={350}
                      height={350}
                      className=" mx-auto !object-cover"
                      onClick={() => CTX.setIsOpenLightBox(true)}
                      alt={`${product?.persianName} - ${product?.englishName}`}
                      property
                      loading="eager"
                    />
                  ) : (
                    <div className="xs:!w-[85px] lg:!w-[85px] my-10 ">
                      <Image
                        src={logo}
                        className="xs:!w-[70px] lg:!w-[70px] mx-auto !object-cover opacity-25 mt-5"
                        alt="وسمه"
                      />
                    </div>
                  )}
                </div>
              </div>
              <div className="text-center">
                <p className="my-2 mb-0 text-sm text-gray-500">
                  {data?.product?.persianName}{" "}
                </p>
              </div>
              <div className="w-6/12 mx-auto h-[1px] bg-gray-200 mt-4"></div>

              <div className="flex justify-center mt-3">
                <div>
                  <svg
                    width="15"
                    height="15"
                    viewBox="0 0 226 264"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    className="ml-1 mt-[2px]"
                  >
                    <path
                      d="M94.25 137.531L69.9687 113.25L56.75 126.469L94.25 163.969L169.25 88.9687L156.031 75.75L94.25 137.531Z"
                      fill="black"
                    />
                    <path
                      d="M113 263.25L55.1001 232.378C38.5938 223.597 24.7904 210.486 15.1712 194.454C5.552 178.421 0.48019 160.072 0.500058 141.375V19.5C0.505022 14.5287 2.48206 9.76246 5.99729 6.24723C9.51252 2.732 14.2788 0.754964 19.2501 0.75H206.75C211.721 0.754964 216.488 2.732 220.003 6.24723C223.518 9.76246 225.495 14.5287 225.5 19.5V141.375C225.52 160.072 220.448 178.421 210.829 194.454C201.21 210.486 187.406 223.597 170.9 232.378L113 263.25ZM19.2501 19.5V141.375C19.2345 156.673 23.3854 171.687 31.2572 184.804C39.129 197.922 50.4245 208.648 63.9313 215.831L113 241.997L162.069 215.841C175.577 208.656 186.873 197.929 194.745 184.81C202.617 171.69 206.767 156.675 206.75 141.375V19.5H19.2501Z"
                      fill="black"
                    />
                  </svg>
                </div>
                <p className="mb-0 text-[12px] font-bold">
                  گارانتی{" "}
                  <small className=" text-primary-500 text-[12px]">اصالت</small>{" "}
                  و{" "}
                  <small className=" text-primary-500 text-[12px]">
                    سلامت فیزیکی کالا
                  </small>
                </p>
              </div>

              <div className="w-6/12 mx-auto h-[1px] bg-gray-200 mt-4"></div>

              <div className="flex justify-between mt-4 ">
                {true ? (
                  <div className="flex justify-end">
                    <div className="mb-0 font-bold text-sm absolute mt-[-11px] ml-[0px] right-0 mr-[13px] text-red-600 flex rtl">
                      <del>
                        <PersianNumber
                          number={(data?.product?.cost / 10).toLocaleString()}
                          style={"text-[13px] opacity-40 "}
                        />
                      </del>
                    </div>
                    <div className="flex rtl mt-[8px]">
                      {" "}
                      <p className="mb-0 font-bold">
                        <PersianNumber
                          number={(
                            data?.product?.costWithDiscount / 10
                          ).toLocaleString()}
                        />
                      </p>
                      <small className="mr-1 mt-[3px]">تومان</small>
                    </div>
                  </div>
                ) : (
                  <div className="flex rtl mt-[3px]">
                    {" "}
                    <p className="mb-0 text-lg font-bold">
                      <PersianNumber
                        number={(data?.cost / 10).toLocaleString()}
                      />
                    </p>
                    <small className="mr-1 mt-[6px]">تومان</small>
                  </div>
                )}
                <AddToCart data={data?.product} theme={2} />
              </div>
            </div>
          </div>

          <div className="lg:col-span-6">
            <div className="xs:px-[15px] lg:px-[100px]">
              <div className="sticky top-0 flex bg-gray-200 rounded-full xs:p-1 lg:p-3 w-fit ">
                <div
                  className={` rounded-full xs:p-2 lg:p-3 cursor-pointer tr03 ${
                    productBarDetail == 0 ? "bg-primary-500 text-gray-100" : ""
                  }`}
                  onClick={() => {
                    setProductBarDetail(0);
                    scrollToSection("section0");
                  }}
                >
                  <p className=" xs:hidden lg:block mb-0 text-[12px] ">
                    مشخصات محصول
                  </p>
                  <p className=" xs:block lg:hidden mb-0 text-[12px]">مشخصات</p>
                </div>

                <div
                  className={` rounded-full xs:p-2 lg:p-3 cursor-pointer tr03 ${
                    productBarDetail == 2 ? "bg-primary-500 text-gray-100" : ""
                  }`}
                  onClick={() => {
                    setProductBarDetail(2);
                    scrollToSection("section2");
                  }}
                >
                  <p className="mb-0 text-[13px] ">نقد و بررسی</p>
                </div>
                <div
                  className={` rounded-full xs:p-2 lg:p-3 cursor-pointer tr03 ${
                    productBarDetail == 3 ? "bg-primary-500 text-gray-100" : ""
                  }`}
                  onClick={() => {
                    setProductBarDetail(3);
                    scrollToSection("section3");
                  }}
                >
                  <p className=" xs:hidden lg:block mb-0 text-[13px] ">
                    دیدگاه مخاطبان
                  </p>
                  <p className=" xs:block lg:hidden mb-0 text-[13px] ">
                    مخاطبان
                  </p>
                </div>
              </div>

              <div id="section0">
                <h3 className="mb-2 text-sm text-gray-400 mt-7">
                  مشخصات محصول
                </h3>
                <div className="min-w-[200px] mt-5 rounded-xl overflow-hidden border rtl ">
                  {product?.specifications?.map((e, index) => (
                    <div
                      className={
                        index % 2 === 0 ? "bg-gray-50 p-3" : "bg-gray-100 p-3"
                      }
                      key={index}
                    >
                      <p className="mb-0 text-sm text-gray-600">
                        {e.title}:
                        <small className="text-sm font-bold text-gray-800 ">
                          {" "}
                          {e.value}{" "}
                        </small>
                      </p>
                    </div>
                  ))}
                </div>
              </div>

              <div id="section2">
                <h3 className="mb-2 text-sm text-gray-400 mt-7">نقد و برسی </h3>

                {!!data?.product?.expertCheck ? (
                  <div className="p-5 border rounded-lg">
                    <div
                      dangerouslySetInnerHTML={{
                        __html: data?.product?.expertCheck,
                      }}
                    />
                  </div>
                ) : (
                  <div className="p-5 border rounded-lg">
                    <div className="flex justify-center py-5">
                      <div className="p-4 text-sm bg-white rounded-full shadow w-fit">
                        چیزی یافت نشد
                      </div>
                    </div>
                  </div>
                )}
              </div>

              <div id="section3">
                <div className="flex">
                  <h3 className="mb-2 text-sm text-gray-400 mt-7">
                    دیدگاه مخاطبان{" "}
                  </h3>
                </div>
                <div className="p-5 border rounded-lg">
                  <InfiniteScroll
                    dataLength={review.length}
                    next={fetchMoreData}
                    hasMore={hasMore}
                  >
                    {review.length > 0 ? (
                      review.map((e) => (
                        <>
                          <div key={e.id} className="mt-10">
                            <div className="relative flex">
                              <div className="xs:w-[40px] lg:w-[60px] xs:h-[40px] lg:h-[60px] relative bg-white rounded-2xl text-center">
                                {/* SVG Icon */}
                                <svg
                                  width="40"
                                  height="40"
                                  viewBox="0 0 168 183"
                                  fill="none"
                                  xmlns="http://www.w3.org/2000/svg"
                                  className="mx-auto opacity-30"
                                >
                                  {/* SVG Path */}
                                  <path
                                    fillRule="evenodd"
                                    clipRule="evenodd"
                                    d="M83.9994 0.666992C130.024 0.666992 167.333 37.9753 167.333 84.0003C167.361 103.233 160.71 121.878 148.516 136.75L148.683 136.934L147.583 137.867C139.767 147.11 130.028 154.535 119.046 159.624C108.064 164.714 96.1035 167.345 83.9994 167.334C59.4161 167.334 37.3328 156.692 22.0828 139.775L20.4161 137.859L19.3161 136.942L19.4828 136.742C7.2903 121.872 0.63933 103.23 0.666096 84.0003C0.666096 37.9753 37.9744 0.666992 83.9994 0.666992ZM83.9994 125.667C68.4994 125.667 54.4911 130.6 44.0578 137.384C55.5793 146.025 69.5975 150.687 83.9994 150.667C98.4014 150.687 112.42 146.025 123.941 137.384C112.019 129.745 98.1588 125.68 83.9994 125.667ZM83.9994 17.3337C71.4538 17.3333 59.1627 20.8729 48.5388 27.5457C37.9149 34.2185 29.3895 43.7536 23.9424 55.0551C18.4954 66.3565 16.3478 78.9656 17.7465 91.433C19.1452 103.9 24.0335 115.72 31.8494 125.534C45.3578 115.842 63.7911 109 83.9994 109C104.208 109 122.641 115.842 136.149 125.534C143.965 115.72 148.854 103.9 150.252 91.433C151.651 78.9656 149.503 66.3565 144.056 55.0551C138.609 43.7536 130.084 34.2185 119.46 27.5457C108.836 20.8729 96.5451 17.3333 83.9994 17.3337ZM83.9994 34.0003C92.84 34.0003 101.318 37.5122 107.57 43.7634C113.821 50.0146 117.333 58.4931 117.333 67.3337C117.333 76.1742 113.821 84.6527 107.57 90.9039C101.318 97.1551 92.84 100.667 83.9994 100.667C75.1589 100.667 66.6804 97.1551 60.4292 90.9039C54.178 84.6527 50.6661 76.1742 50.6661 67.3337C50.6661 58.4931 54.178 50.0146 60.4292 43.7634C66.6804 37.5122 75.1589 34.0003 83.9994 34.0003ZM83.9994 50.667C79.5791 50.667 75.3399 52.4229 72.2143 55.5485C69.0887 58.6742 67.3328 62.9134 67.3328 67.3337C67.3328 71.7539 69.0887 75.9932 72.2143 79.1188C75.3399 82.2444 79.5791 84.0003 83.9994 84.0003C88.4197 84.0003 92.6589 82.2444 95.7845 79.1188C98.9101 75.9932 100.666 71.7539 100.666 67.3337C100.666 62.9134 98.9101 58.6742 95.7845 55.5485C92.6589 52.4229 88.4197 50.667 83.9994 50.667Z"
                                    fill="black"
                                  />
                                </svg>
                              </div>

                              <div className="w-full mt-1 mr-2">
                                <h3 className="font-bold">{e?.userFullName}</h3>
                                <p className="mt-1 mb-0 text-sm text-gray-400">
                                  <PersianNumber
                                    number={moment(e?.createdAt).format(
                                      "jYYYY/jMM/jDD"
                                    )}
                                    style={"text-sm"}
                                  />
                                </p>

                                <p className="mb-0 text-sm text-gray-600">
                                  {e?.content}
                                </p>
                              </div>
                            </div>
                          </div>
                          {e?.children && e.children?.length > 0 && (
                            <div className="mt-5 lg:mr-10">
                              <div className="relative flex">
                                <div className="xs:w-[50px]  lg:w-[60px] xs:h-[50px] lg:h-[60px] relative bg-primary-300 rounded-2xl text-center">
                                  <div className="w-[35px] mx-auto mt-4 ">
                                    <Image src={logo} alt="Logo" />
                                  </div>
                                </div>

                                <div className="w-full mt-1 mr-2">
                                  <h3 className="font-bold xs:text-sm lg:text-base">
                                    پشتیبانی فروشگاه وسمه
                                  </h3>
                                  <p className="mb-0 text-sm text-gray-400">
                                    <PersianNumber
                                      number={moment(
                                        e?.children[0]?.createdAt
                                      ).format("jYYYY/jMM/jDD")}
                                      style={"!text-[12px]"}
                                    />
                                  </p>

                                  <p className="mb-0 text-sm text-gray-600">
                                    {e?.children[0]?.content}
                                  </p>
                                </div>
                              </div>
                            </div>
                          )}
                        </>
                      ))
                    ) : (
                      <div className="flex justify-center py-5">
                        <div className="p-4 text-sm bg-white rounded-full shadow w-fit">
                          چیزی یافت نشد
                        </div>
                      </div>
                    )}
                  </InfiniteScroll>

                  <div onClick={() => CTX.setBottomSheetCommentOpen(true)}>
                    باز شدن
                  </div>
                </div>
              </div>
            </div>

            <div className="sticky bottom-0 xs:block lg:hidden ">
              <div className="w-full bg-[white] p-2 border-t-[1px] border-gray-100 mt-[30px]">
                <div className="relative flex justify-between px-4 py-4 ltr">
                  {product?.hasDiscount ? (
                    <>
                      <p className="mb-0 font-bold text-sm absolute ml-[33px] opacity-30 mt-[-5px] text-red-600">
                        <del>
                          <PersianNumber
                            number={(data?.product?.cost / 10).toLocaleString()}
                            style="!text-[11px]"
                          />
                        </del>
                      </p>
                      <div className="flex rtl mt-[8px]">
                        {" "}
                        <p className="mb-0 font-bold">
                          <PersianNumber
                            number={(
                              data?.product?.costWithDiscount / 10
                            ).toLocaleString()}
                          />
                        </p>
                        <small className="mr-1 mt-[3px]">تومان</small>
                      </div>
                    </>
                  ) : (
                    <div className="flex rtl mt-[3px]">
                      {" "}
                      <p className="mb-0 text-lg font-bold">
                        <PersianNumber
                          number={(data?.product?.cost / 10).toLocaleString()}
                        />
                      </p>
                      <small className="mr-1 mt-[6px]">تومان</small>
                    </div>
                  )}
                  <AddToCart data={data?.product} theme={2} />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <BottomSheetComment
        handleCreateReview={handleCreateReview}
        name={data?.product?.persianName}
        content={content}
        setContent={setContent}
        handleStarClick={handleStarClick}
        rate={rate}
      />

      <Footer />
    </>
  );
};

export default ProductData;