import React from "react";
import "./Order_return_Tracking.css";
import { OrderStatus } from "../../../features/master/masterSlice";
import { formatDateTime, ReturnStatus } from "../../../utils/common";

function Order_return_Tracking({ order }) {
  // const steps = [
  //   {
  //     title: "Return Approved",
  //     info: "Seller has approved your request 27.Apr.25, 02:15 pm",
  //     status:
  //       Number(order?.return_status_id) ===
  //       Number(ReturnStatus.ReturnRequested)
  //         ? "completed"
  //         : "pending",
  //   },
  //   {
  //     title: "Product Picked",
  //     info: "Seller has approved your request 27.Apr.25, 02:35 pm",
  //      status:
  //       Number(order?.return_status_id) ===
  //       Number(ReturnStatus.PickupScheduled)
  //         ? "completed"
  //         : "pending",
  //   //   status: "completed",
  //   },

  //   {
  //     title: "Product Picked",
  //     info: "Seller has approved your request 27.Apr.25, 02:35 pm",
  //      status:
  //       Number(order?.return_status_id) ===
  //       Number(ReturnStatus.ItemPicked)
  //         ? "completed"
  //         : "pending",
  //   //   status: "completed",
  //   },
  //   {
  //     title: "Refund Process",
  //     info: "5 - 6 Working days",
  //      status:
  //       Number(order?.return_status_id) ===
  //       Number(ReturnStatus.RefundProcess)
  //         ? "completed"
  //         : "pending",
  //   },
  // ];

  const stepsOrder = [
    ReturnStatus.ReturnRequested,
    //  ReturnStatus.ReturnRejected,
    ReturnStatus.PickupScheduled,
    ReturnStatus.ItemPicked,
    ReturnStatus.Returned,
    ReturnStatus.Refunded,
  ];

  const currentStatusIndex = stepsOrder.indexOf(
    Number(order?.return_status_id),
  );

  const steps = [
    {
      title: "Return Requested",
      // info: `Seller has approved your request ${formatDateTime(
      //   order?.updatedAt
      // )}`,
    },

    // {
    //   title: "Return Rejected",
    //   // info: `Seller has approved your request ${formatDateTime(
    //   //   order?.updatedAt
    //   // )}`,
    // },
    {
      title: "Pickup Scheduled",
      // info: `Pickup is scheduled ${formatDateTime(order?.updatedAt)}`,
    },
    {
      title: "Product Picked",
      // info: `Item picked from your ${formatDateTime(order?.updatedAt)}`,
    },

    {
      title: "Product Returned",
      // info: `Product Returned ${formatDateTime(order?.updatedAt)}`,
    },
    {
      title: "Refund Process",
      // info: "Refund will be completed in 5 - 6 Working days",
    },
  ].map((step, index) => ({
    ...step,
    status: index <= currentStatusIndex ? "completed" : "pending",
  }));

  return (
    <section className="Order_return_Tracking ">
      <h4 className="tracking-title">Order Return Tracking</h4>

      {order?.return_status_id === 7 ? (
        // Return Request Rejected
        <div className="tracking-steps">
          <div className="step rejected">
            <div className="step-content">
              <div className="step-title" style={{ color: "red" }}>
                Request Rejected
              </div>
              <div className="step-title" style={{ color: "red" }}>
                Reason: {order?.reason || "No reason provided"}
              </div>
            </div>
          </div>
        </div>
      ) : order?.return_status_id === 6 ? (
        // Refund Added to Wallet
        <div className="tracking-steps">
          <div className="step completed">
            <div className="step-icon">
              <span>✓</span>
            </div>

            <div className="step-content">
              <div className="step-title">Refund Processed Successfully</div>

              <div className="step-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 your wallet section.
              </div>
            </div>
          </div>
        </div>
      ) : (
        // Default Step Tracker
        <div className="tracking-steps">
          {steps.map((step, index) => (
            <div key={index} className={`step ${step.status}`}>
              <div className="circle">
                {step.status === "completed" ? (
                  <span>&#10003;</span>
                ) : (
                  <span className="pending-circle"></span>
                )}
              </div>

              <div className="step-content">
                <div className="step-title">{step.title}</div>
                <div className="step-info">{step.info}</div>
              </div>

              {index < steps.length - 1 && <div className="step-line" />}
            </div>
          ))}
        </div>
      )}
    </section>
  );
}

export default Order_return_Tracking;
