import React, { useEffect, useState } from "react";
import "./Receiver_info_holder.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faLocationDot, faPhone } from "@fortawesome/free-solid-svg-icons";
import Cancel_Order_btn from "../../../common-components/common_btn/cancel_Order_btn/Cancel_Order_btn";

import { encodeId } from "../../../../utils/common";

import { useDispatch, useSelector } from "react-redux";
import { useRouter } from "next/navigation";

function Receiver_info_holder_return({ order }) {
  const navigate = useRouter();

  const handleClick = (id) => {
    navigate.push(`/cancel-order/${encodeId(id)}`);
  };
  const handleClickReturn = (id) => {
    navigate.push(`/return-order/${encodeId(id)}`);
  };
  const dispatch = useDispatch();
  const appSetupdata = useSelector((state) => state.master.app_setup);
  // useEffect(() => {
  //   // Ensure ID is valid before dispatching
  //   dispatch(appSetup());
  // }, [dispatch]);

  const [errorMessage, setErrorMessage] = useState("");

  const isReturnPeriodValid = (updatedAt, returnPeriod) => {
    const updatedDate = new Date(updatedAt);
    const today = new Date();
    const diffInDays = Math.floor(
      (today - updatedDate) / (1000 * 60 * 60 * 24),
    );
    return diffInDays <= Number(returnPeriod);
  };

  const handleReturnClick = () => {
    const returnPeriod = appSetupdata?.return_period;
    const updatedAt = order?.updatedAt;

    const isValid = isReturnPeriodValid(updatedAt, returnPeriod);

    if (!isValid) {
      setErrorMessage(
        "Return period has expired. You can't return this order.",
      );
    } else {
      setErrorMessage("");
      navigate.push(`/return-order/${encodeId(order?.id)}`);
    }
  };

  return (
    <>
      <section className="Receiver_info_holder">
        <div className="text_holder">
          <h4>{order?.Product_Order?.User_Address?.first_name}</h4>
          <div className="name_holder">
            <div>
              <div className="icon_holder">
                <FontAwesomeIcon className="info_icon" icon={faPhone} />
              </div>
            </div>
            <p> +91 {order?.Product_Order?.User_Address?.contact_no}</p>
          </div>

          <p>Apartment</p>
          <div className="name_holder">
            <div>
              <div className="icon_holder">
                <FontAwesomeIcon className="info_icon" icon={faLocationDot} />
              </div>
            </div>
            <p>
              {" "}
              {order?.Product_Order?.User_Address?.building},
              {order?.User_Address?.street},
              {
                order?.Product_Order?.User_Address?.Users_Address_Detail?.City
                  ?.name
              }
              ,{" "}
              {
                order?.Product_Order?.User_Address?.Users_Address_Detail?.State
                  ?.name
              }
              ,–{" "}
              {
                order?.Product_Order?.User_Address?.Users_Address_Detail
                  ?.Pincode?.name
              }
              ,{" "}
              {
                order?.Product_Order?.User_Address?.Users_Address_Detail
                  ?.Country?.name
              }
              .
            </p>
          </div>

          {order?.Product_Order?.order_status_id === 11 && (
            <div className="refund_success_box">
              <div className="refund_success_content">
                <div className="refund_success_title">
                  💸 Refund Processed Successfully
                </div>

                <div className="refund_success_info">
                  The refund amount has been{" "}
                  <strong>added to your wallet balance</strong>.
                  <br />
                  You can use it for your next purchase or{" "}
                  <strong>withdraw it anytime</strong> from the wallet section.
                  💳
                  <br />
                  <span className="refund_note">
                    💡 <em>Note:</em> If you selected{" "}
                    <strong>Cash on Delivery (COD)</strong>, no refund is
                    applicable.
                  </span>
                </div>
              </div>
            </div>
          )}

          {order?.order_status_id === 2 && (
            <Cancel_Order_btn
              order={order}
              btnText={"Cancel Order"}
              onClick={() => handleClick(order?.id)}
            />
          )}
          {order?.order_status_id === 6 && (
            <Cancel_Order_btn
              order={order}
              btnText={"Return Order"}
              // onClick={handleReturnClick}
              onClick={() => handleClickReturn(order?.id)}
            />
          )}

          {errorMessage && (
            <p style={{ color: "red", marginTop: "8px" }}>{errorMessage}</p>
          )}
        </div>
      </section>
    </>
  );
}

export default Receiver_info_holder_return;
