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, 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,
  manageReturn,
  orderReturn,
  reviewSeller,
  shipmentDelayRequest,
  updateOrderStatus,
} 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 { StylesConfig } from "react-select";
import Select from "react-select";

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

import {
  followUser,
  unfollowUser,
} from "@/lib/actions/followerFollowingActions";
import {
  formatDateWithLocale,
  getDateAndTimeWithLocale,
  ORDER_STATUS,
  OrderKeys,
  RETURN_STATUS,
} from "@/lib/formTypes";
import StatusModal from "@/components/common/Modal/StatusModal";
import { Star } from "lucide-react";
import DisputeModal from "@/components/common/Modal/DisputeModal";
import { useSelectTheme } from "@/hooks/useSelectTheme";
import { transparentClass } from "@/hooks/useImageUrl";
import EvidenceModal from "../common/Modal/EvidenceModal";
import { upsertSellerOrders } from "@/app/store/slices/orders/sellerOrderSlice";
import {
  getOrderStatusLabel,
  showButton,
  showButtonOnFixStatus,
} from "@/lib/utils/orderStatus";

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

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

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

    isDelivered,
    isReturned,
    expectedDelivery,
    hasDeliveryExtensionRequest,
    evidenceInfo,
  } = order;

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

  const [cancel, setCancel] = useState<boolean>(false);
  const [showConfirmModal, setShowConfirmModal] = useState<
    | null
    | "cancel"
    | "review"
    | "status"
    | "dispute"
    | "return"
    | "return-manage"
    | "increase-shipment-date"
    | "evidence"
  >(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 [statusMessage, setStatusMessage] = useState<string>("");
  const [errorMessage, setErrorMessage] = useState<string>("");
  const [loading, setLoading] = useState<boolean>(false);
  const [currentOrder, setCurrentOrder] = useState<any>(null);

  const [evidenceFile, setEvidenceFile] = useState<File | null>(null);

  const [shipmentIncreaseInfo, setShipmentIncreaseInfo] = useState<{
    days: string;
    message: string;
    daysError?: boolean;
    messageError?: boolean;
  }>({ days: "1", message: "", daysError: false, messageError: false });
  const [isOpen, setIsOpen] = useState<boolean>(false);
  const [activeDispute, setActiveDispute] = useState<boolean | undefined>(
    hasActiveDispute,
  );

  const currentStep = 2;

  const { themeKey, isDarkMode, customStyles } = useSelectTheme();

  const [returnMessage, setReturnMessage] = useState<string>("");
  const [returnAction, setReturnAction] = useState<
    (typeof RETURN_STATUS)[number]["value"] | ""
  >("");

  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 handleStatusUpdate = async () => {
    if (seller?.sellerId != user.id) return;

    if (!statusMessage.trim()) {
      setErrorMessage(t("order_card.validation.message_required"));
      return;
    }

    setErrorMessage("");
    setLoading(true);
    try {
      // optimistic update (instant UI feedback)
      const previousStatus = currentStatus;
      setCurrentStatus(selectedStatus);

      const response = await updateOrderStatus(user?.token, {
        orderId,
        newStatus: selectedStatus,
        message: statusMessage,
      });

      if (response?.success) {
        toast.success(response.message || t("order_card.toast.status_updated"));
        setCurrentStatus(selectedStatus);

        dispatch(
          upsertSellerOrders([
            {
              ...order,
              status: selectedStatus,
              isDelivered: selectedStatus === "delivered" ? true : false,
            },
          ]),
        );

        // ✅ Reset only after success
        setStatusMessage("");
        setShowConfirmModal(null);
      } else {
        // ✅ Handle API errors properly
        setCurrentStatus(previousStatus);
        toast.error(
          response?.message || t("order_card.toast.failed_status_update"),
        );
      }
    } catch (error: any) {
      toast.error(t("order_card.toast.something_wrong"));
      if (checkAuthErrorGet(error, dispatch, router)) return;
      setSelectedStatus(currentStatus);
    } finally {
      setLoading(false);
      setStatusMessage("");
      setShowConfirmModal(null);
    }
  };

  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 getAvailableStatusOptions = (currentStatus: string) => {
    const statusHierarchy = ORDER_STATUS.map((s) => s.value);
    const currentIndex = statusHierarchy.indexOf(currentStatus);

    if (currentIndex === -1 || currentIndex === statusHierarchy.length - 1) {
      return [];
    }

    let nextStatuses = ORDER_STATUS.filter((_, index) => index > currentIndex);

    const noCancelStatuses = ["shipped", "out_for_delivery", "delivered"];
    if (noCancelStatuses.includes(currentStatus)) {
      nextStatuses = nextStatuses.filter((s) => s.value !== "cancelled");
    }

    return nextStatuses;
  };

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

  const handleReturnAction: () => void = async () => {
    try {
      const response = await manageReturn(user.token, {
        orderId: orderId,
        action: returnAction,
        message: "Temp one",
      });

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

      toast.success(t("order_return_success"));
      setReturnAction("");
      setShowConfirmModal(null);
      setReturnMessage("");
    } catch (error: any) {
      if (checkAuthErrorGet(error, dispatch, router)) return;
      toast.error(t("order_card.toast.something_wrong"));
      setShowConfirmModal(null);
    }
  };

  const handleShipment: () => void = async () => {
    let flag = false;
    if (!shipmentIncreaseInfo.days || Number(shipmentIncreaseInfo.days) <= 0) {
      setShipmentIncreaseInfo((prev) => ({
        ...prev,
        days: "",
        daysError: true,
      }));
      flag = true;
    }
    if (!shipmentIncreaseInfo.message.trim()) {
      setShipmentIncreaseInfo((prev) => ({
        ...prev,
        messageError: true,
      }));
      flag = true;
    }

    if (flag) {
      return;
    }

    try {
      const response = await shipmentDelayRequest(user?.token, {
        orderId,
        additionalDays: Number(shipmentIncreaseInfo.days),
        message: shipmentIncreaseInfo.message,
      });

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

      dispatch(
        upsertSellerOrders([
          {
            ...order,
            hasDeliveryExtensionRequest: {
              additionalDays: Number(shipmentIncreaseInfo.days),

              responseSeller: {
                status: "accepted",
                message: shipmentIncreaseInfo.message,
                updatedAt: new Date().toISOString(),
              },

              responseBuyer: hasDeliveryExtensionRequest?.responseBuyer ?? {
                status: "",
                message: "",
                updatedAt: "",
              },

              updatedAt: new Date().toISOString(),
            },
          },
        ]),
      );

      setShowConfirmModal(null);
      setShipmentIncreaseInfo({
        days: "",
        message: "",
        daysError: false,
        messageError: false,
      });

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

  const renderSellerActions = () => {
    if (isDelivered && !isReturned) {
      // Rating
      return (
        <div className="flex items-center justify-between max-[360px]:flex-wrap gap-4">
          <div className="flex items-center gap-3">
            <img
              src={buyer?.imageUrl}
              alt={buyer?.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.buyer")}
              </span>
              <p className="text-base font-semibold text-neutrals800 max-sm:text-sm dark:text-neutrals400">
                {buyer?.name}
              </p>

              {avgSellerRating ? (
                <div className="flex items-center gap-2">
                  {renderStars(avgSellerRating)}
                  <span className="text-sm text-gray-600 dark:text-gray-300">
                    ({avgSellerRating}/5)
                  </span>
                </div>
              ) : (
                <p className="text-sm text-gray-500 dark:text-gray-400 italic">
                  {t("order_card.no_reviews_yet")}
                </p>
              )}
            </div>
          </div>

          <div className="flex items-center gap-2">
            <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>
      );
    }

    if (isDelivered && isReturned) {
      // Return Status Change
      return (
        <div>
          <p className="text-sm text-neutrals500 mb-2 dark:text-neutrals400">
            {t("order_received.seller_order.change_return_status")}
          </p>
          <Select
            options={RETURN_STATUS.map((s: any) => ({
              value: s.value,
              label: s.label[locale],
            }))}
            value={(() => {
              const obj = RETURN_STATUS.find(
                (s: any) => s.value === returnAction,
              );

              return obj
                ? {
                    value: obj.value,
                    label: (obj as any).label[locale],
                  }
                : null;
            })()}
            onChange={(selected) => {
              setShowConfirmModal("return-manage");
              setReturnAction(selected?.value || "");
            }}
            key={themeKey}
            styles={customStyles}
          />
        </div>
      );
    }

    if (!isDelivered && !isCancelled) {
      // Change Order Status
      return (
        <div className={`flex items-center justify-between`}>
          <div className="flex items-center gap-2">
            {/* Manage Order Status */}
            <div>
              <p className="text-sm text-neutrals500 mb-2 dark:text-neutrals400">
                {t("order_card.change_order_status")}
              </p>
              <Select
                options={getAvailableStatusOptions(currentStatus).map(
                  (s: any) => ({
                    value: s.value,
                    label: s.label[locale],
                  }),
                )}
                value={(() => {
                  const obj = ORDER_STATUS.find(
                    (o) => o.value === currentStatus,
                  );
                  return obj
                    ? {
                        value: obj.value,
                        label: (obj as any).label[locale],
                      }
                    : null;
                })()}
                onChange={(selected) => {
                  setShowConfirmModal("status");
                  setSelectedStatus(selected?.value || "");
                }}
                key={themeKey}
                styles={customStyles}
              />
            </div>
          </div>
        </div>
      );
    }
  };

  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">
                {showButton(status as OrderKeys, "shipped") &&
                  !hasDeliveryExtensionRequest && (
                    <div>
                      <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.seller_order.increase_shipment_date",
                        )}
                      </button>
                    </div>
                  )}
                {isDisputed && (
                  <button
                    onClick={handleDispute}
                    disabled={cancel}
                    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.seller_order.dispute")}
                  </button>
                )}

                {showButtonOnFixStatus(status as OrderKeys, "delivered") &&
                  (!evidenceInfo.status ||
                    (evidenceInfo.status !== "pending" &&
                      evidenceInfo.status !== "approved")) && (
                    <button
                      onClick={() => setShowConfirmModal("evidence")}
                      disabled={cancel}
                      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.seller_order.evidence_required")}
                    </button>
                  )}
              </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-2 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.seller_order.expected_by")}{" "}
                      {expectedDelivery}
                    </span>
                  </div>
                </>
              )}
            </div>

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

            {renderSellerActions()}
          </div>
        </div>
      </div>

      {/* {currentOrder && ( */}
      <SideDrawer
        isOpen={activeDrawer === "orderDetails"}
        title={orderId}
        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>
              {getOrderStatusLabel(status as OrderKeys)?.[locale] || ""}
            </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 === "status" && (
        <StatusModal
          isOpen={showConfirmModal === "status"}
          onClose={() => setShowConfirmModal(null)}
          currentStatus={currentStatus}
          selectedStatus={selectedStatus}
          setSelectedStatus={setSelectedStatus}
          statusMessage={statusMessage}
          setStatusMessage={setStatusMessage}
          errorMessage={errorMessage}
          loading={loading}
          handleStatusUpdate={handleStatusUpdate}
        />
      )}

      {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-manage" && (
        <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.seller_order.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={t("order_received.seller_order.return")}
                type="button"
                onClick={handleReturnAction}
                variant="outline"
              />
            </div>
          </div>
        </div>
      )}

      {showConfirmModal && showConfirmModal === "increase-shipment-date" && (
        <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.seller_order.increase_shipment_date")}
                </h2>

                <p className="text-xs text-yellow-500">
                  {t("order_received.seller_order.cant_be_undone")}
                </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.seller_order.shipment_notification")}
            </p>
            <label htmlFor="days">
              <p className="mb-1 text-[13px] text-neutrals600 dark:text-neutrals300">
                {t("order_received.seller_order.number_of_days")}
              </p>
              <input
                type={"number"}
                value={shipmentIncreaseInfo.days}
                onChange={(e) => {
                  const rawValue = e.target.value;

                  if (rawValue === "") {
                    setShipmentIncreaseInfo({
                      ...shipmentIncreaseInfo,
                      days: "",
                      daysError: false,
                    });
                    return;
                  }

                  const value = Number(rawValue);

                  if (value > 30) {
                    return;
                  }

                  if (value < 0) {
                    setShipmentIncreaseInfo({
                      ...shipmentIncreaseInfo,
                      days: "0",
                      daysError: true,
                    });
                  } else {
                    setShipmentIncreaseInfo({
                      ...shipmentIncreaseInfo,
                      days: rawValue,
                      daysError: false,
                    });
                  }
                }}
                placeholder={t(
                  "order_received.seller_order.enter_days_placeholder",
                )}
                className={`w-full px-2 py-3 pe-9 rounded-lg text-sm leading-5 outline-none
                  border placeholder:text-neutrals400
                  bg-white text-neutrals800
                  focus:border-primary500
                  dark:text-neutrals400 dark:bg-background dark:focus:border-primary600
                  ${
                    shipmentIncreaseInfo.daysError
                      ? "border-red-500 dark:border-red-500"
                      : "border-neutrals300 dark:border-neutrals700"
                  }
                `}
              />
              {shipmentIncreaseInfo.daysError && (
                <p className="text-red-500 text-sm mt-1">
                  {t("order_received.seller_order.valid_days_error")}
                </p>
              )}
            </label>

            <label htmlFor="">
              <p className="mb-1 mt-4 text-[13px] text-neutrals600 dark:text-neutrals300">
                {t("order_received.seller_order.message_to_buyer")}
              </p>
              <textarea
                name="message"
                value={shipmentIncreaseInfo.message}
                onChange={(e) =>
                  setShipmentIncreaseInfo({
                    ...shipmentIncreaseInfo,
                    message: e.target.value,
                  })
                }
                placeholder={t(
                  "order_received.seller_order.message_placeholder",
                )}
                className={`w-full rounded-lg p-2 text-sm focus:outline-none border
                    dark:bg-darkbg dark:text-neutrals200
                    ${
                      shipmentIncreaseInfo.messageError
                        ? "border-red-500"
                        : "border-neutrals300 dark:border-neutrals700"
                    }
                  `}
                rows={4}
              />

              {shipmentIncreaseInfo.messageError && (
                <p className="text-red-500 text-sm mt-1">
                  {t("order_received.seller_order.message_error")}
                </p>
              )}
            </label>

            <div className="flex justify-end gap-3 mt-4">
              <Button
                variant="outline"
                onClick={() => {
                  setShipmentIncreaseInfo({
                    days: "",
                    message: "",
                    daysError: false,
                    messageError: false,
                  });

                  setShowConfirmModal(null);
                }}
                label={t("button.cancel")}
              />
              <Button
                label={t("button.confirm")}
                type="button"
                onClick={handleShipment}
                variant="outline"
              />
            </div>
          </div>
        </div>
      )}

      {showConfirmModal && showConfirmModal === "evidence" && (
        <EvidenceModal
          isOpen={showConfirmModal === "evidence"}
          onClose={() => setShowConfirmModal(null)}
          orderId={orderId}
        />
      )}
    </>
  );
}