import { IoIosArrowForward } from "react-icons/io";
import { IoIosCheckmarkCircle } from "react-icons/io";
import Button from "@/components/common/Button";
import SideDrawer from "@/components/common/SideDrawer";
import { useEffect, useMemo, useRef, useState } from "react";
import { FaCheckCircle, FaStar } from "react-icons/fa";
import OrderStepper from "@/components/order/OrderStepper";
import TrackTimeline from "@/components/TrackTimeline";
import {
  cancelOrder,
  fetchOrderDetail,
  makeDisputeClose,
  notReceivedOrder,
  orderReturn,
  releasePayment,
  respondShipmentDelayRequest,
  reviewSeller,
} from "@/lib/actions/orderActions";
import { useAppDispatch, useAppSelector } from "@/app/store/hooks";
import { getStoredLocale } from "@/lib/getLocale";
import { useTranslations } from "next-intl";
import { useRouter } from "next/navigation";
import { toast } from "react-toastify";
import { checkAuthErrorGet } from "@/lib/checkAuthError";
import Select from "react-select";

interface OptionType {
  value: string;
  label: string;
}

import {
  followUser,
  unfollowUser,
} from "@/lib/actions/followerFollowingActions";
import {
  formatDateWithLocale,
  getDateAndTimeWithLocale,
  OrderKeys,
} from "@/lib/formTypes";
import ReviewModal from "@/components/common/Modal/ReviewModal";
import CancelModal from "@/components/common/Modal/CancelConfirmModal";
import { Star } from "lucide-react";
import DisputeModal from "@/components/common/Modal/DisputeModal";
import { BsThreeDotsVertical } from "react-icons/bs";
import { BuyerActionState } from "../../../types/common-types";
import { transparentClass } from "@/hooks/useImageUrl";
import { useSelectTheme } from "@/hooks/useSelectTheme";
import {
  IBuyerOrderCard,
  upsertBuyerOrders,
} from "@/app/store/slices/orders/buyerOrderSlice";
import { getOrderStatusLabel, showButton } from "@/lib/utils/orderStatus";
import ShipmentRequestBuyer from "../common/Modal/ShipmentRequestBuyer";

interface OrderCardProps {
  productId: string;
  orderId: string;
}

function getBuyerActionState({
  isDelivered,
  isPaymentReleased,
  isReturned,
  isCompleted,
}: {
  isDelivered?: boolean;
  isPaymentReleased?: boolean;
  isReturned?: boolean;
  isCompleted?: boolean;
}): BuyerActionState {
  if (!isDelivered) return "HIDDEN";

  if (isReturned && isCompleted) return "PRODUCT_RETURNED";

  if (isPaymentReleased) return "PAYMENT_RELEASED";

  return "ACTION_MENU";
}

function getBuyerAllowedActions({
  isCompleted,
  isDisputed,
  isWithinLastThreeDays,
  isWithinLastSevenDays,
  hasActiveDispute,
  isReturned,
}: {
  isDisputed?: boolean;
  isCompleted?: boolean;
  isWithinLastThreeDays?: boolean;
  isWithinLastSevenDays?: boolean;
  hasActiveDispute?: boolean;
  isReturned?: boolean;
}) {
  return {
    canRelease: true,
    canDispute: isDisputed || (isCompleted && isWithinLastThreeDays),
    canReturn: !isReturned && isCompleted && isWithinLastSevenDays,
    canCloseDispute: hasActiveDispute && isDisputed,
  };
}

export default function BuyerOrderCard({ productId, orderId }: OrderCardProps) {
  const { user } = useAppSelector((state) => state?.auth);
  const order = useAppSelector((state) => state.buyerOrders.byId[orderId]);

  const {
    status,
    dateText,
    title,
    description,
    imageUrl,
    seller,
    buyer,
    hasBuyerRated,
    avgSellerRating,
    hasActiveDispute,
    isDisputed,
    isWithinLastThreeDays,
    isWithinLastSevenDays,

    updateOrderStatusInParent,
    isDelivered,
    isReturned,
    paymentReleaseStatus,
    isPaymentReleased = false,
    expectedDelivery,
    hasDeliveryExtensionRequest,
  } = order;

  const locale = getStoredLocale() as "en" | "ar";
  const t = useTranslations();
  const dispatch = useAppDispatch();
  const menuRef = useRef<HTMLDivElement | null>(null);
  const [openMenu, setOpenMenu] = useState(false);

  const router = useRouter();
  const [activeDrawer, setActiveDrawer] = useState<null | "orderDetails">(null);
  const closeDrawer = () => setActiveDrawer(null);

  const [cancel, setCancel] = useState<boolean>(false);
  const [showConfirmModal, setShowConfirmModal] = useState<
    | null
    | "cancel"
    | "review"
    | "status"
    | "dispute"
    | "return"
    | "return-manage"
    | "release-payment"
    | "close-dispute"
    | "not-received"
    | "increase-shipment-date"
  >(null);

  const [currentStatus, setCurrentStatus] = useState<string>(status);
  const [selectedStatus, setSelectedStatus] = useState<string>(status);
  const isCompleted = status === "delivered";
  const isCancelled = status === "cancelled";
  const isShipped = status === "shipped";
  const [rating, setRating] = useState<number>(0);
  const [review, setReview] = useState<string>("");
  const [statusMessage, setStatusMessage] = useState<string>("");
  const [errorMessage, setErrorMessage] = useState<string>("");
  const [loading, setLoading] = useState<boolean>(false);
  const [currentOrder, setCurrentOrder] = useState<any>(null);

  const [isOpen, setIsOpen] = useState<boolean>(false);
  const [activeDispute, setActiveDispute] = useState<boolean | undefined>(
    hasActiveDispute,
  );

  const [returnMessage, setReturnMessage] = useState<string>("");
  const [releasePaymentMessage, setReleasePaymentMessage] =
    useState<string>("");

  const [closeDisputeMessage, setCloseDisputeMessage] = useState<string>("");

  const [notReceivedMessage, setNotReceivedMessage] = useState<string>("");

  useEffect(() => {
    if (!activeDrawer) return;

    const getOrderDetail = async () => {
      try {
        const response = await fetchOrderDetail(user?.token, {
          orderId: orderId,
          userType: seller?.sellerId === user.id ? "seller" : "buyer",
        });

        if (response.success && response.data) {
          const orderPayload = response.data;

          const transformedOrder = {
            orderId: orderPayload._id,
            title: orderPayload.product?.title || "N/A",
            description:
              orderPayload.product?.description || "No description available",
            image: orderPayload.product?.filePath || "",
            amount: orderPayload.totalAmount,
            status: orderPayload.status,
            sellerName: `${orderPayload.seller?.first_name ?? ""} ${
              orderPayload.seller?.last_name ?? ""
            }`.trim(),
            buyerName: `${orderPayload.buyer?.first_name ?? ""} ${
              orderPayload.buyer?.last_name ?? ""
            }`.trim(),
            createdAt: new Date(orderPayload.createdAt).toLocaleString(),
            deliveryDate: orderPayload.deliveryDate || "",
            hasBuyerRated: !!orderPayload.hasBuyerRated,
            avgSellerRating: orderPayload.avgSellerRating ?? 0,
            avgBuyerRating: orderPayload.avgBuyerRating ?? 0,
            orderHistory: orderPayload.orderStatusHistory
              ? orderPayload.orderStatusHistory.map((history: any) => ({
                  status: history.status,
                  message: history.message,
                  date: getDateAndTimeWithLocale(history.updatedAt, locale)
                    .date,
                  time: getDateAndTimeWithLocale(history.updatedAt, locale)
                    .time,
                  updatedBy: history.updatedBy
                    ? {
                        id: history.updatedBy._id,
                        name: `${history.updatedBy.first_name ?? ""} ${
                          history.updatedBy.last_name ?? ""
                        }`.trim(),
                        email: history.updatedBy.email ?? "",
                      }
                    : null,
                }))
              : [],
          };

          setCurrentOrder(transformedOrder);
        }
      } catch (error) {
        if (checkAuthErrorGet(error, dispatch, router)) return;
      }
    };

    getOrderDetail();
  }, [activeDrawer]);

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
        setOpenMenu(false);
      }
    };

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

  const handleCancel = async () => {
    if (isShipped) return toast.error(t("order_card.cannot_cancel_shipped"));

    try {
      setCancel(true);

      const response = await cancelOrder(user.token, { orderId });

      if (response.success) {
        dispatch(
          upsertBuyerOrders([
            {
              ...order,
              status: "cancelled",
              hasDeliveryExtensionRequest: null,
            },
          ]),
        );
      }
    } catch (error: any) {
      if (checkAuthErrorGet(error, dispatch, router)) return;
      toast.error(error?.response?.data?.message || t("validation.error_msg"));
    } finally {
      setCancel(false);
      setShowConfirmModal(null);
    }
  };

  const handleSubmitReview = async () => {
    if (!seller?.sellerId) return;

    try {
      const response = await reviewSeller(user.token, {
        sellerId: seller.sellerId,
        rating: rating,
        orderId,
        description: review,
        productId: productId,
      });

      if (response.success) {
        toast.success(
          t("order_received.buyer_order.toast_messages.review_added"),
        );
        dispatch(
          upsertBuyerOrders([
            {
              ...order,
              hasBuyerRated: true,
              avgSellerRating: rating,
            },
          ]),
        );
      }
    } catch (error: any) {
      if (checkAuthErrorGet(error, dispatch, router)) return;
      toast.error(error?.response?.data?.message || t("validation.error_msg"));
    } finally {
      setShowConfirmModal(null);
      setRating(0);
      setReview("");
    }
  };

  const renderStars = (rating: number) => {
    const stars = [];
    for (let i = 1; i <= 5; i++) {
      stars.push(
        <Star
          key={i}
          size={18}
          fill={i <= rating ? "#f59e0b" : "none"}
          stroke={i <= rating ? "#f59e0b" : "#999"}
        />,
      );
    }
    return <div className="flex items-center gap-1">{stars}</div>;
  };

  const handleDispute: () => void = async () => {
    setShowConfirmModal("dispute");
    setIsOpen(true);
  };

  const handleCloseDispute: () => void = async () => {
    setShowConfirmModal("close-dispute");
  };

  const handleReturn: () => void = async () => {
    setShowConfirmModal("return");
    setIsOpen(true);
  };

  const closeDispute = async () => {
    try {
      const res = await makeDisputeClose(user?.token, {
        orderId,
        message: closeDisputeMessage,
      });

      if (!res || !res.success) {
        toast.error(res.message || t("order_card.toast.something_wrong"));
      }

      dispatch(
        upsertBuyerOrders([
          {
            ...order,
            hasActiveDispute: false,
          },
        ]),
      );
      setActiveDispute(false);
      toast.success(
        t("order_received.buyer_order.toast_messages.dispute_closed"),
      );
    } catch (error: any) {
      if (checkAuthErrorGet(error, dispatch, router)) return;
      toast.error(t("order_card.toast.something_wrong"));
    } finally {
      setShowConfirmModal(null);
      setCloseDisputeMessage("");
    }
  };

  const returnOrder = async () => {
    if (!returnMessage.trim()) return;
    try {
      const response = await orderReturn(user.token, {
        orderId: orderId,
        returnReason: returnMessage,
      });

      if (!response || !response.success) {
        toast.error(response.message || t("order_card.toast.something_wrong"));
      }

      dispatch(
        upsertBuyerOrders([
          {
            ...order,
            status: "returned",
          },
        ]),
      );
      toast.success(
        t("order_received.buyer_order.toast_messages.return_success"),
      );
      setShowConfirmModal(null);
      setReturnMessage("");
    } catch (error: any) {
      if (checkAuthErrorGet(error, dispatch, router)) return;
      toast.error(t("order_card.toast.something_wrong"));
    }
  };

  const handleReleasePayment = async () => {
    if (!releasePaymentMessage.trim()) {
      setErrorMessage("Please enter a message");
      return;
    }
    try {
      const response = await releasePayment(user.token, {
        orderId: orderId,
        message: releasePaymentMessage,
      });

      if (!response || !response.success) {
        toast.error(response.message || t("order_card.toast.something_wrong"));
        return;
      }
      dispatch(
        upsertBuyerOrders([
          {
            ...order,
            hasActiveDispute: false,
            isPaymentReleased: true,
            isReturned: true,
          },
        ]),
      );
      toast.success(
        t("order_received.buyer_order.toast_messages.payment_released"),
      );
    } catch (error: any) {
      if (checkAuthErrorGet(error, dispatch, router)) return;
      toast.error(t("order_card.toast.something_wrong"));
    } finally {
      setShowConfirmModal(null);
      setReleasePaymentMessage("");
    }
  };

  const buyerActionState = getBuyerActionState({
    isDelivered,
    isPaymentReleased,
    isReturned,
    isCompleted,
  });

  const buyerAllowedActions = useMemo(
    () =>
      getBuyerAllowedActions({
        isCompleted,
        isDisputed,
        isWithinLastThreeDays,
        isWithinLastSevenDays,
        hasActiveDispute: activeDispute,
        isReturned,
      }),
    [
      isCompleted,
      isDisputed,
      isWithinLastThreeDays,
      isWithinLastSevenDays,
      activeDispute,
      isReturned,
    ],
  );

  const handleNotReceived = async () => {
    if (!notReceivedMessage.trim()) {
      setErrorMessage("Please enter a message");
      return;
    }

    try {
      const response = await notReceivedOrder(user?.token, {
        orderId: orderId,
        message: notReceivedMessage,
      });

      if (response?.success) {
        toast.success(
          t("order_received.buyer_order.toast_messages.not_received_success"),
        );
        return;
      }

      toast.error(response.message || t("order_card.toast.something_wrong"));
    } catch (error: any) {
      if (checkAuthErrorGet(error, dispatch, router)) return;
      toast.error(t("order_card.toast.something_wrong"));
    } finally {
      setShowConfirmModal(null);
      setNotReceivedMessage("");
    }
  };

  return (
    <>
      <div className="bg-white border border-neutrals100 rounded-md hover:shadow-lg hover:border-primary100 p-4 mb-4 dark:bg-darkbg dark:border-darkborder dark:hover:border-neutral-600">
        <div className="flex items-start gap-4 max-sm:flex-col">
          <img
            src={imageUrl}
            alt="product"
            width={72}
            height={72}
            className={`rounded-md object-cover min-h-16 ${transparentClass}`}
            onError={(e) => {
              const target = e.target as HTMLImageElement;
              if (!target.src.endsWith("/default.jpg")) {
                target.onerror = null;
                target.src = "/default.jpg";
              }
            }}
          />
          <div className="flex-1 max-sm:w-full">
            <div className="flex items-center justify-between gap-2 mb-1">
              <div className="flex items-center gap-2">
                <span
                  className={`flex items-center justify-center gap-1 w-fit text-xs px-2 py-1 whitespace-nowrap ${
                    isCompleted
                      ? "text-kzgreen600 bg-kzgreen50"
                      : "bg-kzblue100 text-kzblue dark:bg-darkborder"
                  }`}
                >
                  {isCompleted ? (
                    <>
                      <IoIosCheckmarkCircle className="w-4 h-4" />
                      {t("order_card.completed")}
                    </>
                  ) : (
                    <>
                      <svg
                        width="16"
                        height="11"
                        viewBox="0 0 16 11"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M5.33333 9.66667C5.68696 9.66667 6.02609 9.52619 6.27614 9.27614C6.52619 9.02609 6.66667 8.68696 6.66667 8.33333C6.66667 7.97971 6.52619 7.64057 6.27614 7.39052C6.02609 7.14048 5.68696 7 5.33333 7C4.97971 7 4.64057 7.14048 4.39052 7.39052C4.14048 7.64057 4 7.97971 4 8.33333C4 8.68696 4.14048 9.02609 4.39052 9.27614C4.64057 9.52619 4.97971 9.66667 5.33333 9.66667ZM12 9.66667C12.3536 9.66667 12.6928 9.52619 12.9428 9.27614C13.1929 9.02609 13.3333 8.68696 13.3333 8.33333C13.3333 7.97971 13.1929 7.64057 12.9428 7.39052C12.6928 7.14048 12.3536 7 12 7C11.6464 7 11.3072 7.14048 11.0572 7.39052C10.8071 7.64057 10.6667 7.97971 10.6667 8.33333C10.6667 8.68696 10.8071 9.02609 11.0572 9.27614C11.3072 9.52619 11.6464 9.66667 12 9.66667Z"
                          stroke="#0672FF"
                          strokeMiterlimit="1.5"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M6.69935 8.33333H9.99935V1.4C9.99935 1.29391 9.95721 1.19217 9.88219 1.11716C9.80718 1.04214 9.70543 1 9.59935 1H0.666016M3.76602 8.33333H2.39935C2.34682 8.33333 2.29481 8.32299 2.24628 8.30289C2.19775 8.28278 2.15365 8.25332 2.11651 8.21618C2.07936 8.17903 2.0499 8.13494 2.0298 8.08641C2.0097 8.03788 1.99935 7.98586 1.99935 7.93333V4.66667"
                          stroke="#0672FF"
                          strokeLinecap="round"
                        />
                        <path
                          d="M1.33203 3H3.9987"
                          stroke="#0672FF"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                        <path
                          d="M10 3H13.74C13.8173 3.00002 13.893 3.02245 13.9578 3.06457C14.0226 3.10669 14.0739 3.1667 14.1053 3.23733L15.2987 5.92267C15.3214 5.97366 15.3332 6.02884 15.3333 6.08467V7.93333C15.3333 7.98586 15.323 8.03788 15.3029 8.08641C15.2828 8.13494 15.2533 8.17903 15.2162 8.21618C15.179 8.25332 15.1349 8.28278 15.0864 8.30289C15.0379 8.32299 14.9859 8.33333 14.9333 8.33333H13.6667M10 8.33333H10.6667"
                          stroke="#0672FF"
                          strokeLinecap="round"
                        />
                      </svg>
                      {getOrderStatusLabel(status as OrderKeys)?.[locale] || ""}
                    </>
                  )}
                </span>
              </div>

              <div className="flex items-center gap-2">
                {hasDeliveryExtensionRequest &&
                  Object.keys(hasDeliveryExtensionRequest).length > 0 &&
                  hasDeliveryExtensionRequest.responseBuyer?.status ===
                    "pending" && (
                    <button
                      onClick={() => {
                        setShowConfirmModal("increase-shipment-date");
                      }}
                      className="text-red-600 border border-red-600 whitespace-nowrap font-normal text-sm py-1 px-2 rounded-md 
                      hover:bg-red-600 hover:text-white dark:border-red-500 dark:text-red-500 dark:hover:text-white"
                    >
                      {t("order_received.buyer_order.shipment_request")}
                    </button>
                  )}

                {buyerActionState === "ACTION_MENU" && (
                  <div className="relative" ref={menuRef}>
                    <BsThreeDotsVertical
                      size={18}
                      className="text-gray-500 cursor-pointer dark:text-neutrals400"
                      onClick={() => setOpenMenu((prev) => !prev)}
                    />

                    {openMenu && (
                      <div className="absolute right-0 mt-2 min-w-28 bg-white border border-gray-100 dark:bg-background dark:border-darkborder shadow-md rounded z-50 rtl:right-auto rtl:left-0 whitespace-nowrap">
                        <button
                          className="block w-full text-left text-sm text-neutrals800 dark:text-neutrals400 px-4 py-2 hover:bg-gray-100 dark:hover:bg-darkbg whitespace-nowrap"
                          onClick={() => {
                            setOpenMenu(false);
                            setShowConfirmModal("release-payment");
                          }}
                        >
                          {t("order_received.buyer_order.release_payment")}
                        </button>

                        {buyerAllowedActions.canDispute && (
                          <button
                            className="block w-full text-left text-sm text-neutrals800 dark:text-neutrals400 px-4 py-2 hover:bg-gray-100 dark:hover:bg-darkbg"
                            onClick={() => {
                              setOpenMenu(false);
                              handleDispute();
                            }}
                          >
                            {t("order_received.buyer_order.dispute")}
                          </button>
                        )}

                        {buyerAllowedActions.canCloseDispute && (
                          <button
                            className="block w-full text-left text-sm text-neutrals800 dark:text-neutrals400 px-4 py-2 hover:bg-gray-100 dark:hover:bg-darkbg"
                            onClick={() => {
                              setOpenMenu(false);
                              handleCloseDispute();
                            }}
                          >
                            {t("order_received.buyer_order.close_dispute")}
                          </button>
                        )}

                        {buyerAllowedActions.canReturn && (
                          <button
                            className="block w-full text-left text-sm text-red-600 px-4 py-2 hover:bg-gray-100 dark:hover:bg-darkbg"
                            onClick={() => {
                              setOpenMenu(false);
                              handleReturn();
                            }}
                          >
                            {t("order_received.buyer_order.return")}
                          </button>
                        )}

                        <button
                          className="block w-full text-left text-sm text-red-600 px-4 py-2 hover:bg-gray-100 dark:hover:bg-darkbg"
                          onClick={() => {
                            setOpenMenu(false);
                            setShowConfirmModal("not-received");
                          }}
                        >
                          {t("order_received.buyer_order.didnt_receive")}
                        </button>
                      </div>
                    )}
                  </div>
                )}
              </div>
            </div>

            <p className="text-base font-semibold text-neutrals800 max-sm:text-sm dark:text-white">
              {title}
            </p>
            <p className="text-sm text-neutrals500 mb-1 dark:text-neutrals400">
              {description}
            </p>

            <div className="flex items-center gap-3 text-xs text-neutrals600 dark:text-neutrals400">
              {/* Order Date */}
              <div className="flex items-center gap-1">
                <span className="w-2 h-2 rounded-full bg-neutrals300"></span>
                <span className="font-medium text-neutrals800 dark:text-white">
                  {dateText}
                </span>
              </div>

              {/* Divider */}
              {!isCancelled && (
                <>
                  <span className="w-px h-3 bg-neutrals300"></span>

                  <div className="flex items-center gap-1">
                    <span className="text-green-600 dark:text-green-400 font-medium">
                      {t("order_received.buyer_order.expected_by")}{" "}
                      {expectedDelivery}
                    </span>
                  </div>
                </>
              )}
            </div>

            <div className="h-px w-full bg-neutrals100 my-2.5 dark:bg-darkborder"></div>

            <div
              className={`flex items-center ${
                !isCancelled ? "justify-between" : "justify-between"
              }`}
            >
              {isDelivered && (
                <div className="flex items-center gap-3">
                  <img
                    src={seller?.imageUrl}
                    alt={seller?.name}
                    width={44}
                    height={44}
                    onError={(e) => {
                      e.currentTarget.onerror = null;
                      e.currentTarget.src = "/profile-avatar.png";
                    }}
                    className="w-10 h-10 rounded-full border-2 border-primary100 dark:border-darkborder object-cover"
                  />
                  <div className="w-[calc(100%-44px)]">
                    <span className="text-xs text-neutrals500 font-normal dark:text-neutrals400">
                      {t("order_card.seller")}
                    </span>
                    <p className="text-base font-semibold text-neutrals800 max-sm:text-sm dark:text-neutrals400">
                      {seller?.name}
                    </p>
                    {hasBuyerRated ? (
                      <div className="flex items-center gap-2">
                        {renderStars(avgSellerRating || 0)}
                        <span className="text-sm text-gray-600 dark:text-gray-300">
                          ({avgSellerRating}/5)
                        </span>
                      </div>
                    ) : (
                      <p
                        onClick={() => setShowConfirmModal("review")}
                        className="text-base text-primary500 font-semibold cursor-pointer underline max-sm:text-sm dark:text-primary400"
                      >
                        {t("order_card.rate_this_seller")}
                      </p>
                    )}
                  </div>
                </div>
              )}
              <div className="flex items-center gap-2">
                {/* Only buyer can see this button */}
                {/* Only till the status is below shipped */}
                {showButton(status as OrderKeys, "shipped") && (
                  <button
                    onClick={() => setShowConfirmModal("cancel")}
                    disabled={cancel}
                    className="text-red-500 border whitespace-nowrap border-neutrals100 font-normal text-sm py-2.5 px-4 rounded-lg hover:underline dark:border-red-400"
                  >
                    {cancel
                      ? t("order_card.canceling")
                      : t("order_card.cancel_order")}
                  </button>
                )}
              </div>
              <div
                className="w-11 h-11 bg-kzblue50 text-lg font-bold rounded-lg flex items-center justify-center cursor-pointer dark:bg-background dark:hover:bg-cardfooter rtl:rotate-180"
                onClick={() => setActiveDrawer("orderDetails")}
              >
                <IoIosArrowForward className="text-primary500 dark:text-primary400" />
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* {currentOrder && ( */}
      <SideDrawer
        isOpen={activeDrawer === "orderDetails"}
        title="#224183KG"
        subtitle={t("order_card.order_details")}
        onClose={closeDrawer}
        footer={
          <div className="flex justify-end gap-2">
            <Button
              type="button"
              label={t("order_card.close")}
              onClick={closeDrawer}
              variant="cancel"
            />
          </div>
        }
      >
        <div>
          {/* Product Info */}
          <div className="flex items-start gap-4 p-2.5 bg-neutrals50 dark:bg-darkbg">
            <img
              src={imageUrl}
              alt="Headphones"
              width={64}
              height={64}
              className={`rounded min-h-[50px] object-cover ${transparentClass}`}
              onError={(e) => {
                e.currentTarget.onerror = null;
                e.currentTarget.src = "/default.jpg";
              }}
            />
            <div className="flex-1">
              <h3 className="text-sm font-bold text-neutrals800 dark:text-neutrals400">
                {title}
              </h3>
              <p className="text-sm text-neutrals500 dark:text-neutrals400">
                {description}
              </p>
            </div>
          </div>

          {/* Order Info */}
          <div className="flex items-center justify-between gap-5 text-sm py-4 max-sm:grid grid-cols-2">
            <div>
              <p className="font-medium text-sm dark:text-neutrals400">
                {t("order_card.order")}
              </p>
              <p className="text-kzgreen600 font-medium flex items-center gap-1">
                <FaCheckCircle className="w-4 h-4 text-kzgreen600" />
                {t("order_card.paid")}
              </p>
            </div>
            <div>
              <p className="font-medium text-sm dark:text-neutrals400">
                {t("order_card.amount")}
              </p>
              <p className="text-sm text-neutrals500 dark:text-neutrals400">
                {process.env.NEXT_PUBLIC_CURRENCY_TYPE} {currentOrder?.amount}
              </p>
            </div>
            <div>
              <p className="font-medium text-sm dark:text-neutrals400">
                {t("order_card.estimated_delivery")}
              </p>
              <p className="text-sm text-neutrals500 dark:text-neutrals400">
                {expectedDelivery}
              </p>
            </div>
            <span className="flex items-center justify-center gap-1 w-fit text-xs px-2 py-1 bg-kzblue100 text-kzblue dark:bg-darkbg">
              <svg
                width="16"
                height="11"
                viewBox="0 0 16 11"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M5.33333 9.66667C5.68696 9.66667 6.02609 9.52619 6.27614 9.27614C6.52619 9.02609 6.66667 8.68696 6.66667 8.33333C6.66667 7.97971 6.52619 7.64057 6.27614 7.39052C6.02609 7.14048 5.68696 7 5.33333 7C4.97971 7 4.64057 7.14048 4.39052 7.39052C4.14048 7.64057 4 7.97971 4 8.33333C4 8.68696 4.14048 9.02609 4.39052 9.27614C4.64057 9.52619 4.97971 9.66667 5.33333 9.66667ZM12 9.66667C12.3536 9.66667 12.6928 9.52619 12.9428 9.27614C13.1929 9.02609 13.3333 8.68696 13.3333 8.33333C13.3333 7.97971 13.1929 7.64057 12.9428 7.39052C12.6928 7.14048 12.3536 7 12 7C11.6464 7 11.3072 7.14048 11.0572 7.39052C10.8071 7.64057 10.6667 7.97971 10.6667 8.33333C10.6667 8.68696 10.8071 9.02609 11.0572 9.27614C11.3072 9.52619 11.6464 9.66667 12 9.66667Z"
                  stroke="#0672FF"
                  strokeMiterlimit="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                ></path>
                <path
                  d="M6.69935 8.33333H9.99935V1.4C9.99935 1.29391 9.95721 1.19217 9.88219 1.11716C9.80718 1.04214 9.70543 1 9.59935 1H0.666016M3.76602 8.33333H2.39935C2.34682 8.33333 2.29481 8.32299 2.24628 8.30289C2.19775 8.28278 2.15365 8.25332 2.11651 8.21618C2.07936 8.17903 2.0499 8.13494 2.0298 8.08641C2.0097 8.03788 1.99935 7.98586 1.99935 7.93333V4.66667"
                  stroke="#0672FF"
                  strokeLinecap="round"
                ></path>
                <path
                  d="M1.33203 3H3.9987"
                  stroke="#0672FF"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                ></path>
                <path
                  d="M10 3H13.74C13.8173 3.00002 13.893 3.02245 13.9578 3.06457C14.0226 3.10669 14.0739 3.1667 14.1053 3.23733L15.2987 5.92267C15.3214 5.97366 15.3332 6.02884 15.3333 6.08467V7.93333C15.3333 7.98586 15.323 8.03788 15.3029 8.08641C15.2828 8.13494 15.2533 8.17903 15.2162 8.21618C15.179 8.25332 15.1349 8.28278 15.0864 8.30289C15.0379 8.32299 14.9859 8.33333 14.9333 8.33333H13.6667M10 8.33333H10.6667"
                  stroke="#0672FF"
                  strokeLinecap="round"
                ></path>
              </svg>
              {currentStatus}
            </span>
          </div>

          <div className="border border-neutrals100 py-5 px-8 mt-7.5 max-sm:px-5 max-[380px]:px-2 max-[380px]:border-x-white max-[370px]:pl-0 dark:border-darkborder">
            <OrderStepper
              orderHistory={currentOrder?.orderHistory}
              isDelivered={isDelivered}
            />
          </div>

          {currentOrder?.orderHistory && (
            <TrackTimeline steps={currentOrder.orderHistory}></TrackTimeline>
          )}
        </div>
      </SideDrawer>
      {/* )} */}

      {showConfirmModal && showConfirmModal == "cancel" && (
        <CancelModal
          isOpen={showConfirmModal === "cancel"}
          onClose={() => setShowConfirmModal(null)}
          handleCancel={handleCancel}
          loading={loading}
          title={t("order_card.confirm_cancellation")}
          description={t("order_card.cancel_description")}
        />
      )}

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

      {showConfirmModal && showConfirmModal === "dispute" && (
        <DisputeModal
          imageUrl={imageUrl}
          title={title}
          description={description}
          seller={seller}
          buyer={buyer}
          hasActiveDispute={activeDispute}
          orderId={orderId}
          open={isOpen}
          onSend={() => {
            // setActiveDispute(true);
          }}
          onClose={() => {
            setIsOpen((prev) => !prev);
            setShowConfirmModal(null);
          }}
        />
      )}

      {showConfirmModal && showConfirmModal === "return" && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-30"
          onClick={() => setShowConfirmModal(null)}
        >
          <div
            onClick={(e) => e.stopPropagation()}
            className="bg-white rounded-xl shadow-2xl p-6 w-full max-w-sm dark:bg-darkbg transition-all"
          >
            <div className="flex items-start gap-3 mb-4">
              <div>
                <h2 className="text-lg font-bold text-neutrals800 dark:text-neutrals100">
                  {t("order_received.buyer_order.modals.order_return")}
                </h2>

                <p className="text-xs text-yellow-500">
                  {t("order_card.status_modal.warning")}
                </p>
              </div>
            </div>

            <hr className="mt-1 my-4 mb-3 border-t border-neutrals200 dark:border-neutrals700" />

            <p className="mb-1 text-[13px] text-neutrals600 dark:text-neutrals300">
              {t("order_card.status_modal.description")}
            </p>
            <textarea
              value={returnMessage}
              onChange={(e) => setReturnMessage(e.target.value)}
              placeholder={t("order_card.status_modal.placeholder")}
              className={`w-full border rounded-lg p-2 text-sm focus:outline-none ${
                errorMessage
                  ? "border-red-500"
                  : "border-neutrals300 dark:border-neutrals700 dark:bg-darkbg dark:text-neutrals200"
              }`}
              rows={4}
            />
            {errorMessage && (
              <p className="text-red-500 text-sm mt-1">{errorMessage}</p>
            )}

            <div className="flex justify-end gap-3 mt-4">
              <Button
                variant="outline"
                onClick={() => {
                  setSelectedStatus(currentStatus);
                  setShowConfirmModal(null);
                }}
                label={t("order_card.status_modal.cancel")}
              />
              <Button
                label={"Return"}
                type="button"
                onClick={returnOrder}
                variant="outline"
              />
            </div>
          </div>
        </div>
      )}

      {showConfirmModal && showConfirmModal === "release-payment" && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-30"
          onClick={() => setShowConfirmModal(null)}
        >
          <div
            onClick={(e) => e.stopPropagation()}
            className="bg-white rounded-xl shadow-2xl p-6 w-full max-w-sm dark:bg-darkbg transition-all"
          >
            <div className="flex items-start gap-3 mb-4">
              <div>
                <h2 className="text-lg font-bold text-neutrals800 dark:text-neutrals100">
                  {t("order_received.buyer_order.modals.release_payment")}
                </h2>

                <p className="text-xs text-yellow-500">
                  {t("order_received.buyer_order.action_messages.cannot_undo")}
                </p>
              </div>
            </div>

            <hr className="mt-1 my-4 mb-3 border-t border-neutrals200 dark:border-neutrals700" />

            <p className="mb-1 text-[13px] text-neutrals600 dark:text-neutrals300">
              {t(
                "order_received.buyer_order.action_messages.release_payment_message",
              )}
            </p>
            <textarea
              value={releasePaymentMessage}
              onChange={(e) => setReleasePaymentMessage(e.target.value)}
              placeholder={t("order_card.status_modal.placeholder")}
              className={`w-full border rounded-lg p-2 text-sm focus:outline-none ${
                errorMessage
                  ? "border-red-500"
                  : "border-neutrals300 dark:border-neutrals700 dark:bg-darkbg dark:text-neutrals200"
              }`}
              rows={4}
            />
            {errorMessage && (
              <p className="text-red-500 text-sm mt-1">{errorMessage}</p>
            )}

            <div className="flex justify-end gap-3 mt-4">
              <Button
                variant="outline"
                onClick={() => {
                  setSelectedStatus(currentStatus);
                  setShowConfirmModal(null);
                }}
                label={t("order_card.status_modal.cancel")}
              />
              <Button
                label={t("order_received.buyer_order.release_payment")}
                type="button"
                onClick={handleReleasePayment}
                variant="outline"
              />
            </div>
          </div>
        </div>
      )}

      {showConfirmModal && showConfirmModal === "close-dispute" && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-30"
          onClick={() => setShowConfirmModal(null)}
        >
          <div
            onClick={(e) => e.stopPropagation()}
            className="bg-white rounded-xl shadow-2xl p-6 w-full max-w-sm dark:bg-darkbg transition-all"
          >
            <div className="flex items-start gap-3 mb-4">
              <div>
                <h2 className="text-lg font-bold text-neutrals800 dark:text-neutrals100">
                  {t("order_received.buyer_order.modals.close_dispute")}
                </h2>

                <p className="text-xs text-yellow-500">
                  {t("order_received.buyer_order.action_messages.cannot_undo")}
                </p>
              </div>
            </div>

            <hr className="mt-1 my-4 mb-3 border-t border-neutrals200 dark:border-neutrals700" />

            <p className="mb-1 text-[13px] text-neutrals600 dark:text-neutrals300">
              {t(
                "order_received.buyer_order.action_messages.close_dispute_message",
              )}
            </p>
            <textarea
              value={closeDisputeMessage}
              onChange={(e) => setCloseDisputeMessage(e.target.value)}
              placeholder={t("order_card.status_modal.placeholder")}
              className={`w-full border rounded-lg p-2 text-sm focus:outline-none ${
                errorMessage
                  ? "border-red-500"
                  : "border-neutrals300 dark:border-neutrals700 dark:bg-darkbg dark:text-neutrals200"
              }`}
              rows={4}
            />
            {errorMessage && (
              <p className="text-red-500 text-sm mt-1">{errorMessage}</p>
            )}

            <div className="flex justify-end gap-3 mt-4">
              <Button
                variant="outline"
                onClick={() => {
                  setShowConfirmModal(null);
                  setCloseDisputeMessage("");
                }}
                label={t("order_card.status_modal.cancel")}
              />
              <Button
                label={t("order_received.buyer_order.close_dispute")}
                type="button"
                onClick={closeDispute}
                variant="outline"
              />
            </div>
          </div>
        </div>
      )}

      {showConfirmModal && showConfirmModal === "not-received" && (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-30"
          onClick={() => setShowConfirmModal(null)}
        >
          <div
            onClick={(e) => e.stopPropagation()}
            className="bg-white rounded-xl shadow-2xl p-6 w-full max-w-sm dark:bg-darkbg transition-all"
          >
            <div className="flex items-start gap-3 mb-4">
              <div>
                <h2 className="text-lg font-bold text-neutrals800 dark:text-neutrals100">
                  {t("order_received.buyer_order.modals.not_received")}
                </h2>

                <p className="text-xs text-yellow-500">
                  {t("order_received.buyer_order.action_messages.cannot_undo")}
                </p>
              </div>
            </div>

            <hr className="mt-1 my-4 mb-3 border-t border-neutrals200 dark:border-neutrals700" />

            <p className="mb-1 text-[13px] text-neutrals600 dark:text-neutrals300">
              {t(
                "order_received.buyer_order.action_messages.not_received_message",
              )}
            </p>
            <textarea
              value={notReceivedMessage}
              onChange={(e) => setNotReceivedMessage(e.target.value)}
              placeholder={t("order_card.status_modal.placeholder")}
              className={`w-full rounded-lg p-2 text-sm focus:outline-none border
                dark:bg-darkbg dark:text-neutrals200
                ${
                  errorMessage
                    ? "border-red-500 dark:border-red-500"
                    : "border-neutrals300 dark:border-neutrals700"
                }
              `}
              rows={4}
            />
            {errorMessage && (
              <p className="text-red-500 text-sm mt-1">{errorMessage}</p>
            )}

            <div className="flex justify-end gap-3 mt-4">
              <Button
                variant="outline"
                onClick={() => {
                  setShowConfirmModal(null);
                  setNotReceivedMessage("");
                }}
                label={t("order_card.status_modal.cancel")}
              />
              <Button
                label={t("button.confirm")}
                type="button"
                onClick={handleNotReceived}
                variant="outline"
              />
            </div>
          </div>
        </div>
      )}

      {showConfirmModal && showConfirmModal === "increase-shipment-date" && (
        <ShipmentRequestBuyer
          orderId={orderId}
          closeModal={() => setShowConfirmModal(null)}
        />
      )}
    </>
  );
}