import React, { useEffect, useState } from "react";
import "./Customer_Feedbacks.css";
import { Form } from "react-bootstrap";
import Select from "react-select";
import Customer_Feedbacks_cards from "./customer_Feedbacks_cards/Customer_Feedbacks_cards";
import { formatDateTime } from "../../../../utils/common";
import { useDispatch, useSelector } from "react-redux";
import { allReviewRating } from "../../../../features/review_rating/review_ratingSlice";

function Customer_Feedbacks({ product, }) {
  const options = [
    { value: "Most Recent", label: "Most Recent" },
    { value: "Highest Rating", label: "Highest Rating" },
    { value: "Lowest Rating", label: "Lowest Rating" },
    { value: "Most Liked", label: "Most Liked" },
    { value: "Most Replied", label: "Most Replied" },
    { value: "Newest First", label: "Newest First" },
    { value: "Oldest First", label: "Oldest First" },
    { value: "Picture First", label: "Picture First" },
    { value: "Videos First", label: "ideos First" },
  ];

  const feedbackData = [
    {
      nameText: "Prathamesh Raut",
      imgSrc: "/assets/images/header/new_ekansi_logo.png",
      dateText: "04/30/2025",
      productName: "Bilona Cow Ghee – A2 Desi Gir Cow:",
      boldText: "Best product",
    },

    {
      nameText: "Prathamesh Raut",
      imgSrc: "/assets/images/header/new_ekansi_logo.png",
      dateText: "04/30/2025",
      productName: "Bilona Cow Ghee – A2 Desi Gir Cow:",
      boldText: "Best product",
    },

    {
      nameText: "Prathamesh Raut",
      imgSrc: "/assets/images/header/new_ekansi_logo.png",
      dateText: "04/30/2025",
      productName: "Bilona Cow Ghee – A2 Desi Gir Cow:",
      boldText: "Best product",
    },

    {
      nameText: "Prathamesh Raut",
      imgSrc: "/assets/images/header/new_ekansi_logo.png",
      dateText: "04/30/2025",
      productName: "Bilona Cow Ghee – A2 Desi Gir Cow:",
      boldText: "Best product",
    },

    {
      nameText: "Prathamesh Raut",
      imgSrc: "/assets/images/header/new_ekansi_logo.png",
      dateText: "04/30/2025",
      productName: "Bilona Cow Ghee – A2 Desi Gir Cow:",
      boldText: "Best product",
    },

    {
      nameText: "Prathamesh Raut",
      imgSrc: "/assets/images/header/new_ekansi_logo.png",
      dateText: "04/30/2025",
      productName: "Bilona Cow Ghee – A2 Desi Gir Cow:",
      boldText: "Best product",
    },

    {
      nameText: "Prathamesh Raut",
      imgSrc: "/assets/images/header/new_ekansi_logo.png",
      dateText: "04/30/2025",
      productName: "Bilona Cow Ghee – A2 Desi Gir Cow:",
      boldText: "Best product",
    },

    {
      nameText: "Prathamesh Raut",
      imgSrc: "/assets/images/header/new_ekansi_logo.png",
      dateText: "04/30/2025",
      productName: "Bilona Cow Ghee – A2 Desi Gir Cow:",
      boldText: "Best product",
    },

    {
      nameText: "Prathamesh Raut",
      imgSrc: "/assets/images/header/new_ekansi_logo.png",
      dateText: "04/30/2025",
      productName: "Bilona Cow Ghee – A2 Desi Gir Cow:",
      boldText: "Best product",
    },

    {
      nameText: "Prathamesh Raut",
      imgSrc: "/assets/images/header/new_ekansi_logo.png",
      dateText: "04/30/2025",
      productName: "Bilona Cow Ghee – A2 Desi Gir Cow:",
      boldText: "Best product",
    },

    {
      nameText: "Prathamesh Raut",
      imgSrc: "/assets/images/header/new_ekansi_logo.png",
      dateText: "04/30/2025",
      productName: "Bilona Cow Ghee – A2 Desi Gir Cow:",
      boldText: "Best product",
    },

    {
      nameText: "Prathamesh Raut",
      imgSrc: "/assets/images/header/new_ekansi_logo.png",
      dateText: "04/30/2025",
      productName: "Bilona Cow Ghee – A2 Desi Gir Cow:",
      boldText: "Best product",
    },

    {
      nameText: "Prathamesh Raut",
      imgSrc: "/assets/images/header/new_ekansi_logo.png",
      dateText: "04/30/2025",
      productName: "Bilona Cow Ghee – A2 Desi Gir Cow:",
      boldText: "Best product",
    },

    {
      nameText: "Prathamesh Raut",
      imgSrc: "/assets/images/header/new_ekansi_logo.png",
      dateText: "04/30/2025",
      productName: "Bilona Cow Ghee – A2 Desi Gir Cow:",
      boldText: "Best product",
    },

    {
      nameText: "Prathamesh Raut",
      imgSrc: "/assets/images/header/new_ekansi_logo.png",
      dateText: "04/30/2025",
      productName: "Bilona Cow Ghee – A2 Desi Gir Cow:",
      boldText: "Best product",
    },

    {
      nameText: "Prathamesh Raut",
      imgSrc: "/assets/images/header/new_ekansi_logo.png",
      dateText: "04/30/2025",
      productName: "Bilona Cow Ghee – A2 Desi Gir Cow:",
      boldText: "Best product",
    },

    {
      nameText: "Prathamesh Raut",
      imgSrc: "/assets/images/header/new_ekansi_logo.png",
      dateText: "04/30/2025",
      productName: "Bilona Cow Ghee – A2 Desi Gir Cow:",
      boldText: "Best product",
    },

    {
      nameText: "Prathamesh Raut",
      imgSrc: "/assets/images/header/new_ekansi_logo.png",
      dateText: "04/30/2025",
      productName: "Bilona Cow Ghee – A2 Desi Gir Cow:",
      boldText: "Best product",
    },
    // Add more feedback entries here as needed
  ];

  // const itemsPerPage = all_rating?.per_page;
  const [currentPage, setCurrentPage] = useState(1);
  // const totalPages = Math.ceil(all_rating?.total_pages);

  const dispatch = useDispatch();

  const handlePageChange = (pageNum) => {
    if (pageNum >= 1 && pageNum <= totalPages) {
      setCurrentPage(pageNum);
    }
  };

  const all_rating = useSelector((state) => state.reviewRating.all_rating);

  // console.log(all_rating," All rating ")


  useEffect(() => {
    dispatch(
      allReviewRating({
        product_id: product.id, page: currentPage
      })
    );
  }, [dispatch, product, currentPage]);

  // const paginatedData = feedbackData.slice(
  //   (currentPage - 1) * itemsPerPage,
  //   currentPage * itemsPerPage
  // );
  const itemsPerPage = all_rating?.per_page || 3;
  // const itemsPerPage = 3;
  const totalItems = all_rating?.total || all_rating?.data?.length;
  const totalPages = Math.ceil(totalItems / itemsPerPage);

  const getVisiblePages = () => {
    const visiblePages = [];

    // Always show 1 and last page
    if (totalPages <= 3) {
      for (let i = 1; i <= totalPages; i++) visiblePages.push(i);
    } else {
      visiblePages.push(1);

      if (currentPage > 2) visiblePages.push(currentPage - 1);
      if (currentPage !== 1 && currentPage !== totalPages)
        visiblePages.push(currentPage);
      if (currentPage < totalPages - 1) visiblePages.push(currentPage + 1);

      visiblePages.push(totalPages);
    }

    return [...new Set(visiblePages)].sort((a, b) => a - b); // remove duplicates and sort
  };




  // const paginatedData = all_rating?.data?.slice(
  //   (currentPage - 1) * itemsPerPage,
  //   currentPage * itemsPerPage
  // );



  return (
    <div>
      <section className="Customer_Feedbacks">
        <div className="heading_holder">
          <h4>Customer Feedbacks</h4>
        </div>

        {/* <div className="dropdown_holder">
          <Form>
            <Form.Group className="input_group">
              <Select options={options} />
            </Form.Group>
          </Form>
        </div> */}

        <div className="Customer_Feedbacks_cards_holder row">
          {all_rating?.data?.map((feedback, index) => (
         
            <div key={index}>
              <Customer_Feedbacks_cards
                nameText={feedback?.User?.name}
                rating={feedback?.ratings}
                // imgSrc={feedback.}
                dateText={formatDateTime(feedback.createdAt)}
                productName={feedback?.Product?.name}
                boldText={feedback?.review}
                images={feedback?.Rating_Images}
              />
            </div>
          ))}
        </div>

        {/* Pagination UI */}
        <div className="pagination pagination_holder mt-4 d-flex justify-content-center align-items-center gap-2">
          <button
            onClick={() => handlePageChange(1)}
            disabled={currentPage === 1}
          >
            &laquo;
          </button>
          <button
            onClick={() => handlePageChange(currentPage - 1)}
            disabled={currentPage === 1}
          >
            &lsaquo;
          </button>

          {getVisiblePages().map((page, idx, arr) => (
            <>
              {/* Show dots between jumps */}
              {idx > 0 && page - arr[idx - 1] > 1 && (
                <span key={`dot-${idx}`}>...</span>
              )}
              <button
                key={page}
                onClick={() => handlePageChange(page)}
                className={page === currentPage ? "active" : ""}
              >
                {page}
              </button>
            </>
          ))}

          <button
            onClick={() => handlePageChange(currentPage + 1)}
            disabled={currentPage === totalPages}
          >
            &rsaquo;
          </button>
          <button
            onClick={() => handlePageChange(totalPages)}
            disabled={currentPage === totalPages}
          >
            &raquo;
          </button>
        </div>

        {/* <div className="pagination pagination_holder mt-4 d-flex justify-content-center align-items-center gap-2">
          <button
            onClick={() => handlePageChange(1)}
            disabled={currentPage === 1}
          >
            &laquo;
          </button>
          <button
            onClick={() => handlePageChange(currentPage - 1)}
            disabled={currentPage === 1}
          >
            &lsaquo;
          </button>

          {[1, 2].map((page) => (
            <button
              key={page}
              onClick={() => handlePageChange(page)}
              className={page === currentPage ? "active" : ""}
            >
              {page}
            </button>
          ))}

          {totalPages > 3 && (
            <>
              <span>...</span>
              <button
                onClick={() => handlePageChange(totalPages)}
                className={currentPage === totalPages ? "active" : ""}
              >
                {totalPages}
              </button>
            </>
          )}

          <button
            onClick={() => handlePageChange(currentPage + 1)}
            disabled={currentPage === totalPages}
          >
            &rsaquo;
          </button>
          <button
            onClick={() => handlePageChange(totalPages)}
            disabled={currentPage === totalPages}
          >
            &raquo;
          </button>
        </div> */}
      </section>
    </div>
  );
}

export default Customer_Feedbacks;
