import { useAppSelector } from "@/app/store/hooks";
import {
  indexDisputes,
  makeAdjustment,
  messageDispute,
  respondAdjustment,
} from "@/lib/actions/orderActions";
import { checkAuthErrorGet } from "@/lib/checkAuthError";
import { useTranslations } from "next-intl";
import React, { useEffect, useState, useRef, Suspense, lazy } from "react";
import { FiSend, FiPaperclip } from "react-icons/fi";
import { IoMdClose } from "react-icons/io";
import { toast } from "react-toastify";
import Select from "react-select";
import { useSelectTheme } from "@/hooks/useSelectTheme";
import { transparentClass } from "@/hooks/useImageUrl";
import { useDispatch } from "react-redux";
import { useRouter } from "next/navigation";
import Button from "../Button";
import { AlertCircle, Check, MoreVertical, X } from "lucide-react";
import { getDateAndTimeWithLocale } from "@/lib/formTypes";
import { getStoredLocale } from "@/lib/getLocale";

// Lazy load heavy components if needed
// const LazyVideoPlayer = lazy(() => import('@/components/common/LazyVideoPlayer'));

interface MessageFile {
  file: File;
  url: string;
  type: "image" | "video";
  name: string;
}

interface ChatMessage {
  id: string;
  text: string;
  sender: "user" | "other";
  timestamp: string;
  files?: MessageFile[];
  messageBy?: string;
  messageType?: "message" | "adjustment";
  adjustment?: {
    percentage: number;
    message: string;
    responseSeller?: {
      status: string;
    };
    responseBuyer?: {
      status: string;
    };
    acceptedByBoth?: boolean;
  } | null;
  color?: string;
}

interface EvidenceItem {
  originalName: string;
  filename: string;
  mimetype: string;
  size: number;
  url: string;
}

interface RawMessageData {
  _id: string;
  action: string;
  message: string;
  actor: {
    _id: string;
    first_name: string;
    last_name: string;
    email: string;
    profile_image: string;
  };
  actorType: string;
  evidence: EvidenceItem[];
  createdAt: string;
  recipients?: string[];
  adjustment: {
    percentage: number;
    message: string;
    responseSeller?: {
      status: string;
    };
    responseBuyer?: {
      status: string;
    };
  } | null;
}

interface DisputeModalProps {
  hasActiveDispute?: boolean;
  orderId: string;
  seller?: any;
  buyer?: {
    name: string;
    imageUrl: string;
    buyerId: string;
  };
  title: string;
  description: string;
  imageUrl: string;
  open: boolean;
  onClose: () => void;
  onSend: () => void;
}

const convertToChatMessages = (
  rawData: RawMessageData[],
  currentUserId: string,
  locale: string,
): ChatMessage[] => {
  return rawData
    .filter((item) => {
      const isUser = item.actor._id === currentUserId;

      if (isUser) return true;

      if (!item.recipients || item.recipients.length === 0) return false;

      return (
        item.recipients.includes("buyer") || item.recipients.includes("seller")
      );
    })
    .map((item, index) => {
      const isUser = item.actor._id === currentUserId;

      const files: MessageFile[] = item.evidence.map((evidence) => {
        const mockFile = new File([""], evidence.originalName, {
          type: evidence.mimetype,
        });

        return {
          file: mockFile,
          url: process.env.NEXT_PUBLIC_IMAGE_BASE_URL + evidence.url,
          type: evidence.mimetype.startsWith("video") ? "video" : "image",
          name: evidence.originalName,
        };
      });

      // Format timestamp
      const date = new Date(item.createdAt);
      const timestamp = getDateAndTimeWithLocale(
        date.toDateString(),
        locale,
      ).time;

      const sender = isUser ? "user" : "other";
      return {
        id: item._id,
        text: item.message,
        sender: sender,
        timestamp: timestamp,
        files: files.length > 0 ? files : undefined,
        messageBy: item.actorType,
        messageType: item.adjustment ? "adjustment" : "message",
        adjustment: item.adjustment
          ? {
              ...item.adjustment,
              acceptedByBoth:
                item.adjustment?.responseSeller?.status === "accepted" &&
                item.adjustment?.responseBuyer?.status === "accepted",
            }
          : null,
        color:
          item.actorType === "buyer"
            ? "bg-red-700"
            : item.actorType === "seller"
              ? "bg-green-600"
              : "bg-gray-600",
      };
    });
};

const getAdjustmentUIState = (
  msg: ChatMessage,
  confirmState: {
    messageId: string | null;
    action: "accepted" | "rejected" | null;
  },
) => {
  if (!msg.adjustment) return null;

  if (msg.adjustment.acceptedByBoth) return "accepted";

  if (
    msg.adjustment.responseSeller?.status === "rejected" ||
    msg.adjustment.responseBuyer?.status === "rejected"
  )
    return "rejected";

  if (confirmState.messageId === msg.id && confirmState.action !== null) {
    return "confirm";
  }

  return "actions";
};

const DisputeModal: React.FC<DisputeModalProps> = ({
  open,
  onClose,
  orderId,
  hasActiveDispute,
  title,
  description,
  imageUrl,
  seller,
  buyer,
  onSend,
}) => {
  const t = useTranslations();
  const { user } = useAppSelector((state) => state?.auth);
  const router = useRouter();
  const dispatch = useDispatch();
  const locale = getStoredLocale();

  // Replace the hardcoded arrays with these:
  const SelectOptions = [
    {
      label: t("dispute_modal.select_options.admin"),
      value: "admin",
    },
    {
      label: t("dispute_modal.select_options.seller"),
      value: "seller",
    },
    {
      label: t("dispute_modal.select_options.buyer"),
      value: "buyer",
    },
    {
      label: t("dispute_modal.select_options.both"),
      value: "both",
    },
  ];

  const AdjustmentOptions = [
    {
      value: "message",
      label: t("dispute_modal.adjustment_options.message"),
    },
    {
      value: "adjustment",
      label: t("dispute_modal.adjustment_options.make_adjustment"),
    },
  ];

  const [message, setMessage] = useState("");
  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
  const [chatMessages, setChatMessages] = useState<ChatMessage[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [isSending, setIsSending] = useState(false);
  const [loadedImages, setLoadedImages] = useState<Set<string>>(new Set());
  const [loadedVideos, setLoadedVideos] = useState<Set<string>>(new Set());
  const [disputeId, setDisputeId] = useState<string>("");
  const [showConfirmModal, setShowConfirmModal] = useState<
    "adjustment-respond" | null
  >(null);
  const [messageTo, setMessageTo] = useState<string>(
    user.id === seller?.sellerId ? "buyer" : "seller",
  );

  const [order, setOrder] = useState<{
    totalAmount: string;
  } | null>(null);

  const [messageType, setMessageType] = useState<"message" | "adjustment">(
    "message",
  );
  const [messageId, setMessageId] = useState<string>("");

  const [adjustmentAmount, setAdjustmentAmount] = useState<string | "">("");
  const [confirmState, setConfirmState] = useState<{
    messageId: string | null;
    action: "accepted" | "rejected" | null;
  }>({
    messageId: null,
    action: null,
  });

  const fileInputRef = useRef<HTMLInputElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);
  const chatContainerRef = useRef<HTMLDivElement>(null);

  const { customStyles, themeKey } = useSelectTheme();

  // If modal closed, don't render
  if (!open) return null;

  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (!e.target.files || e.target.files.length === 0) return;
    const files = Array.from(e.target.files);
    setSelectedFiles((prev) => [...prev, ...files]);
  };

  const handleFileIconClick = () => {
    fileInputRef.current?.click();
  };

  const handleRemoveFile = (index: number) => {
    setSelectedFiles((prev) => prev.filter((_, i) => i !== index));
    if (fileInputRef.current) {
      fileInputRef.current.value = "";
    }
  };

  const createFileObjects = (files: File[]): MessageFile[] => {
    return files.map((file) => ({
      file,
      url: URL.createObjectURL(file),
      type: file.type.startsWith("video") ? "video" : "image",
      name: file.name,
    }));
  };

  const handleSend = async () => {
    try {
      if (!message.trim() && selectedFiles.length === 0) return;

      setIsSending(true);

      let newMessage: ChatMessage = {
        id: "new-message " + chatMessages.length + 1,
        text: message,
        sender: "user",
        timestamp: new Date().toLocaleTimeString([], {
          hour: "2-digit",
          minute: "2-digit",
        }),
        messageType: "message",
      };

      // Add files to message if they exist
      if (selectedFiles.length > 0) {
        newMessage.files = createFileObjects(selectedFiles);
      }

      const isSeller = user.id === seller?.sellerId;

      const BOTH_TARGETS = {
        seller: ["buyer", "admin"],
        buyer: ["seller", "admin"],
      };

      const sendTo =
        messageTo === "both"
          ? BOTH_TARGETS[isSeller ? "seller" : "buyer"]
          : [messageTo];

      let adjustmentMessage: ChatMessage | null = null;
      if (messageType === "adjustment") {
        await makeAdjustment(user?.token, {
          disputeId: disputeId,
          percentage: Number(adjustmentAmount),
          message: message,
        });
        newMessage = {
          ...newMessage,
          messageBy: isSeller ? "seller" : "buyer",
          adjustment: {
            percentage: Number(adjustmentAmount),
            message: message,
          },
        };
      } else {
        await messageDispute(user.token, {
          orderId,
          message: message,
          evidence: selectedFiles,
          sendTo: sendTo,
        });
      }

      setChatMessages((prev) => [...prev, newMessage]);

      if (adjustmentMessage) {
        setChatMessages((prev) => [...prev, adjustmentMessage]);
      }
      setMessage("");
      setAdjustmentAmount("");

      onSend();

      // Reset files after sending
      if (selectedFiles.length > 0) {
        // Clean up object URLs
        selectedFiles.forEach((file) => {
          // URLs are already stored in the message, don't revoke yet
        });
        setSelectedFiles([]);
        if (fileInputRef.current) {
          fileInputRef.current.value = "";
        }
      }
    } catch (error) {
      toast.error(t("validation.error_msg"));
    } finally {
      setIsSending(false);
    }
  };

  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault();
      if (!isSending) {
        handleSend();
      }
    }
  };

  const handleImageLoad = (url: string) => {
    setLoadedImages((prev) => new Set(prev).add(url));
  };

  const handleVideoLoad = (url: string) => {
    setLoadedVideos((prev) => new Set(prev).add(url));
  };

  const getOptions = () => {
    const isSeller = user.id === seller?.sellerId;
    if (isSeller) {
      return SelectOptions.filter((option) => option.value !== "seller");
    }

    return SelectOptions.filter((option) => {
      return option.value !== "buyer";
    });
  };

  const handleAdjustmentRespond = async (msgId: string, response: string) => {
    try {
      const res = await respondAdjustment(user?.token, {
        messageId: msgId,
        status: response,
        recepients: messageTo,
      });

      const isSeller = user.id === seller?.sellerId;

      if (!res.success) {
        toast.error(t("dispute_modal.something_wrong"));
        return;
      }
      let text = isSeller
        ? `${t("dispute_modal.seller_has")} ${response} ${t("dispute_modal.order_adjustment")}`
        : `${t("dispute_modal.buyer_has")} ${response} ${t("dispute_modal.order_adjustment")}`;
      const newMessage: ChatMessage = {
        id: "new-message-respond " + chatMessages.length + 1,
        text: text,
        sender: "user",
        timestamp: new Date().toLocaleTimeString([], {
          hour: "2-digit",
          minute: "2-digit",
        }),
        messageType: "message",
      };

      setChatMessages((prev) => [...prev, newMessage]);

      setChatMessages((prev: ChatMessage[]) => {
        return prev.map((msg): ChatMessage => {
          if (msg.id !== msgId) {
            return msg;
          }

          const adjustment = msg.adjustment ?? {
            percentage: 0,
            message: "",
          };

          const buyerStatus = isSeller
            ? adjustment.responseBuyer?.status
            : response;

          const sellerStatus = isSeller
            ? response
            : adjustment.responseSeller?.status;

          const acceptedByBoth =
            buyerStatus === "accepted" && sellerStatus === "accepted";

          return {
            ...msg,
            adjustment: {
              ...adjustment,
              responseBuyer: {
                status: buyerStatus ?? "",
              },
              responseSeller: {
                status: sellerStatus ?? "",
              },
              acceptedByBoth,
            },
          };
        });
      });

      toast.success(t("dispute_modal.adjustment_responded"));
      setConfirmState({ messageId: null, action: null });
    } catch (error: any) {
      if (checkAuthErrorGet(error, dispatch, router)) return;
      toast.error(error?.message);
    } finally {
      setShowConfirmModal(null);
      setMessageId("");
    }
  };

  // Scroll to bottom when new messages are added
  useEffect(() => {
    if (chatContainerRef.current) {
      chatContainerRef.current.scrollTop =
        chatContainerRef.current.scrollHeight;
    }
  }, [chatMessages]);

  // Focus input when modal opens
  useEffect(() => {
    if (open && inputRef.current) {
      setTimeout(() => {
        inputRef.current?.focus();
      }, 100);
    }

    const getDisputeData = async () => {
      if (!user?.token || !user?.id) return;

      setIsLoading(true);
      try {
        const response = await indexDisputes(user.token, {
          orderId,
        });

        if (response?.data?.disputeHistory) {
          setDisputeId(response?.data?._id);
          setOrder(response?.data?.order);
          const transformedData = convertToChatMessages(
            response.data.disputeHistory,
            user.id,
            locale,
          );
          setChatMessages(transformedData);
        }
      } catch (error: any) {
        if (checkAuthErrorGet(error, dispatch, router)) return;
        toast.error(
          error?.response?.data?.message || t("validation.error_msg"),
        );
      } finally {
        setIsLoading(false);
      }
    };

    if (open) {
      getDisputeData();
    }
  }, [open, user, orderId, t]);

  useEffect(() => {
    return () => {
      chatMessages.forEach((msg) => {
        if (msg.files) {
          msg.files.forEach((file) => {
            if (file.url.startsWith("blob:")) {
              try {
                URL.revokeObjectURL(file.url);
              } catch {}
            }
          });
        }
      });

      selectedFiles.forEach((file) => {
        const url = URL.createObjectURL(file);
        try {
          URL.revokeObjectURL(url);
        } catch {
          // ignore
        }
      });
    };
  }, []);

  const renderFileContent = (file: MessageFile) => {
    if (file.type === "image") {
      const isLoaded = loadedImages.has(file.url);

      return (
        <div className="relative">
          {!isLoaded && (
            <div className="absolute inset-0 flex items-center justify-center bg-gray-100 dark:bg-darkbg rounded-lg">
              <div className="w-6 h-6 border-2 border-primary500 border-t-transparent rounded-full animate-spin"></div>
            </div>
          )}
          <img
            src={file.url}
            alt={file.name}
            loading="lazy"
            onLoad={() => handleImageLoad(file.url)}
            onError={(e) => {
              e.currentTarget.onerror = null;
              e.currentTarget.src = "/default.jpg";
            }}
            className={`max-w-full max-h-48 rounded-lg object-cover transition-opacity duration-300 ${isLoaded ? "opacity-100" : "opacity-0"
              }`}
          />
        </div>
      );
    } else {
      const isLoaded = loadedVideos.has(file.url);

      return (
        <div className="relative">
          {!isLoaded && (
            <div className="absolute inset-0 flex items-center justify-center bg-gray-100 dark:bg-darkbg rounded-lg">
              <div className="w-6 h-6 border-2 border-primary500 border-t-transparent rounded-full animate-spin"></div>
            </div>
          )}
          <video
            src={file.url}
            controls
            onLoadedData={() => handleVideoLoad(file.url)}
            preload="metadata"
            className={`max-w-full max-h-48 rounded-lg transition-opacity duration-300 ${
              isLoaded ? "opacity-100" : "opacity-0"
            }`}
          >
            {t("doesnot_support_video")}
          </video>
        </div>
      );
    }
  };

  const renderFilePreview = (file: File, index: number) => {
    if (file.type.startsWith("image/")) {
      return (
        <img
          src={URL.createObjectURL(file)}
          alt={`preview-${index}`}
          loading="lazy"
          className="w-16 h-16 object-cover rounded"
        />
      );
    } else {
      return (
        <div className="flex items-center gap-2">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            className="h-5 w-5 text-gray-500"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
            />
          </svg>
          <span className="text-sm text-gray-700 dark:text-neutrals100">
            {file.name}
          </span>
        </div>
      );
    }
  };

  const renderAdjustmentActions = (msg: ChatMessage) => {
    const uiState = getAdjustmentUIState(msg, confirmState);

    switch (uiState) {
      case "accepted":
        return (
          <div className="text-xs font-medium text-green-600">
            {t("dispute_modal.accepted")}
          </div>
        );

      case "rejected":
        return (
          <div className="text-xs font-medium text-red-600">
            {t("dispute_modal.rejected")}
          </div>
        );

      case "confirm":
        return (
          <>
            <span className="text-xs flex-1">
              {t("dispute_modal.are_you_sure")}
            </span>

            <Button
              variant="outline"
              label={t("dispute_modal.yes")}
              className="!px-3 !py-1.5 !text-xs"
              onClick={() => {
                handleAdjustmentRespond(msg.id, confirmState.action as string);
              }}
            />

            <Button
              variant="secondary"
              label={t("dispute_modal.no")}
              className="!px-3 !py-1.5 !text-xs"
              onClick={() => setConfirmState({ messageId: null, action: null })}
            />
          </>
        );

      case "actions":
        return (
          <>
            <Button
              variant="outline"
              label={t("dispute_modal.accept")}
              className="!px-3 !py-1.5 !text-xs !dark:bg-primary400"
              onClick={() =>
                setConfirmState({
                  messageId: msg.id,
                  action: "accepted",
                })
              }
            />

            <Button
              variant="secondary"
              label={t("dispute_modal.reject")}
              className="!px-3 !py-1.5 !text-xs !bg-red-500 hover:!bg-red-600"
              onClick={() =>
                setConfirmState({
                  messageId: msg.id,
                  action: "rejected",
                })
              }
            />
          </>
        );

      default:
        return null;
    }
  };

  const [openMenu, setOpenMenu] = useState(false);
  const menuRef = useRef<HTMLDivElement>(null);

  // 👉 Outside click close
  useEffect(() => {
    function handleClickOutside(e: MouseEvent) {
      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
        setOpenMenu(false);
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  return (
    <div className="fixed inset-0 bg-black/40 flex justify-center items-center z-50 p-4">
      <div className="bg-gray-50 shadow-2xl rounded-2xl w-full max-w-3xl max-h-[90vh] flex flex-col relative border border-gray-200 dark:border-darkborder overflow-hidden chatbg dark:bg-darkbg dark:text-neutrals100">
        {/* Header */}
        <div className="flex items-start justify-between px-6 py-4 border-b border-t border-gray-200 dark:border-darkborder bg-gray-50 dark:bg-darkbg max-sm:px-3">
          <div className="flex items-center gap-4">
            <div className="w-12 h-12 bg-gray-200 rounded-lg flex items-center justify-center dark:bg-darkbg">
              <img
                className={`w-12 h-12 object-cover rounded-lg ${transparentClass}`}
                src={imageUrl}
                loading="lazy"
                alt={title}
                onError={(e) => {
                  e.currentTarget.onerror = null;
                  e.currentTarget.src = "/default.jpg";
                }}
              />
            </div>

            <div>
              <h2 className="text-base font-semibold dark:text-neutrals100 leading-tight">
                {title}
              </h2>
              <p className="text-sm text-gray-500 dark:text-neutrals400">
                {user.id === buyer?.buyerId
                  ? `${seller?.name} (${t("chat.seller")})`
                  : `${buyer?.name} (${t("chat.buyer")})`}{" "}
              </p>
            </div>
          </div>
          <div className="flex items-center gap-1">
            <div className="hidden md:flex items-center gap-1">
              <Select
                options={getOptions()}
                onChange={(val) => setMessageTo(val?.value || "")}
                placeholder={t("dispute_modal.message_to")}
                value={SelectOptions.find((opt) => opt.value === messageTo)}
                key={themeKey}
                styles={customStyles}
              />

              <Select
                options={AdjustmentOptions}
                onChange={(val) =>
                  setMessageType(val?.value as "message" | "adjustment")
                }
                placeholder={t("dispute_modal.want_adjustment")}
                value={AdjustmentOptions.find(
                  (opt) => opt.value === messageType,
                )}
                key={"adjustment" + themeKey}
                styles={customStyles}
              />
            </div>

            {/* ================= MOBILE ================= */}
            <div className="md:hidden relative" ref={menuRef}>
              {/* 3 Dot Button */}
              <button
                onClick={() => setOpenMenu((p) => !p)}
                className="w-5 h-5 flex items-center justify-center rounded-full hover:bg-gray-100 dark:hover:bg-darkbg"
              >
                <MoreVertical className="w-5 h-5" />
              </button>

              {/* Dropdown Panel */}
              {openMenu && (
                <div className="absolute right-0 top-8 w-56 bg-white dark:bg-zinc-900 shadow-xl rounded-xl p-3 space-y-3 z-50 border border-gray-200 dark:border-zinc-800 animate-in fade-in zoom-in-95">
                  <Select
                    options={getOptions()}
                    onChange={(val) => {
                      setMessageTo(val?.value || "");
                      setOpenMenu(false);
                    }}
                    placeholder={t("dispute_modal.message_to")}
                    value={SelectOptions.find((opt) => opt.value === messageTo)}
                    styles={customStyles}
                  />

                  <Select
                    options={AdjustmentOptions}
                    onChange={(val) => {
                      setMessageType(val?.value as "message" | "adjustment");
                      setOpenMenu(false);
                    }}
                    placeholder={t("dispute_modal.type")}
                    value={AdjustmentOptions.find(
                      (opt) => opt.value === messageType,
                    )}
                    styles={customStyles}
                  />
                </div>
              )}
            </div>

            <button
              onClick={onClose}
              disabled={isSending}
              className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 text-gray-600 hover:text-black text-xl transition-colors dark:hover:bg-darkbg dark:text-neutrals100 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              ✕
            </button>
          </div>
        </div>

        <div
          ref={chatContainerRef}
          className="flex-1 overflow-y-auto p-6 space-y-4"
        >
          {isLoading && (
            <div className="flex flex-col items-center justify-center py-8 space-y-4">
              <div className="w-12 h-12 border-4 border-primary500 border-t-transparent rounded-full animate-spin"></div>
              <p className="text-sm text-gray-500 dark:text-neutrals400">
                {t("dispute_modal.loading_messages")}
              </p>
            </div>
          )}

          {!isLoading && chatMessages.length > 0
            ? chatMessages.map((msg, index) => (
              <div
                key={msg.id + index}
                className={`flex items-start gap-3 ${
                  msg.sender === "user" ? "justify-end" : ""
                }`}
              >
                {/* Other Person Image */}
                {msg.sender === "other" && (
                  <img
                    src={
                      user.id === buyer?.buyerId
                        ? seller?.imageUrl
                        : buyer?.imageUrl
                    }
                    className="w-8 h-8 rounded-full flex-shrink-0"
                    loading="lazy"
                    alt="avatar"
                    onError={(e) => {
                      const target = e.target as HTMLImageElement;
                      if (!target.src.endsWith("/profile-avatar.png")) {
                        target.onerror = null;
                        target.src = "/profile-avatar.png";
                      }
                    }}
                  />
                )}

                <div
                  className={`flex flex-col ${
                    msg.sender === "user"
                    ? "items-end max-w-[70%]"
                    : "max-w-[70%]"
                    }`}
                >
                  {msg.files && msg.files.length > 0 && (
                    <div className={`grid grid-cols-1 gap-2 mb-2`}>
                      {msg.files.map((file, index) => (
                        <div key={index} className="relative">
                          {renderFileContent(file)}
                        </div>
                      ))}
                    </div>
                  )}

                  {msg.text && (
                    <div
                      className={`px-4 py-3 rounded-2xl shadow-sm ${msg.sender === "user"
                        ? "bg-primary500 text-white rounded-tr-none dark:bg-primary400"
                        : "bg-white border border-gray-200 text-gray-800 rounded-tl-none dark:bg-darkbg dark:border-darkborder dark:text-neutrals100"
                        }`}
                    >
                      <p className="text-sm">{msg.text}</p>
                    </div>
                  )}

                  {msg.adjustment && (
                    <div className="flex flex-col mt-1 max-w-[250px] min-w-[250px]">
                      <div
                        className={`cursor-pointer px-4 py-3 shadow-md border dark:border-gray-700 ${msg.sender === "user"
                          ? "bg-primary500/90 text-white rounded-[10px_10px_10px_10px]"
                          : "bg-white border-gray-200 text-gray-800 rounded-br-none dark:bg-gray-800 dark:border-gray-700 dark:text-white rounded-[10px_10px_0px_0px]"
                          }`}
                      >
                        <div className="flex items-center justify-between mb-1.5 gap-3">
                          <span className="text-xs font-semibold opacity-90 capitalize">
                            {msg.messageBy} {t("dispute_modal.offer")}
                          </span>
                          <span className="text-xs px-2 py-0.5 bg-blue-100 text-blue-800 rounded-full dark:bg-blue-900/50 dark:text-white">
                            {msg.adjustment.percentage}%{" "}
                            {t("dispute_modal.off")}
                          </span>
                        </div>
                        <div className="flex justify-between items-baseline mb-1">
                          <span className="text-sm text-gray-400 line-through">
                            SAR {order?.totalAmount}
                          </span>
                          <span className="text-lg font-bold">
                            SAR{" "}
                            {order
                              ? Number(order.totalAmount) *
                              (1 - Number(msg.adjustment.percentage) / 100)
                              : 0}
                          </span>
                        </div>
                      </div>

                      {msg.sender === "other" && (
                        <div className="w-full flex items-center gap-1.5 self-start p-2 bg-neutrals100 rounded-[0px_0px_10px_10px] border border-t-transparent dark:bg-darkbg dark:border-gray-700">
                          {renderAdjustmentActions(msg)}
                        </div>
                      )}
                    </div>
                  )}

                  <div className="flex items-center gap-1 mt-1">
                    {msg.timestamp && (
                      <span className="text-xs text-gray-500 dark:text-neutrals400">
                        {msg.timestamp}
                      </span>
                    )}
                    {/* Who send the Message */}
                    {msg?.messageBy && msg.sender === "other" && (
                      <div
                        className={`capitalize text-[12px] ${msg.color} text-white px-2 py-0.5 rounded-md`}
                      >
                        {msg.messageBy}
                      </div>
                    )}
                  </div>
                </div>

                {msg.sender === "user" && (
                  <img
                    src={
                      user.id === buyer?.buyerId
                        ? buyer?.imageUrl
                        : seller?.imageUrl
                    }
                    className="w-8 h-8 rounded-full flex-shrink-0"
                    loading="lazy"
                    alt="avatar"
                    onError={(e) => {
                      const target = e.target as HTMLImageElement;
                      if (!target.src.endsWith("/profile-avatar.png")) {
                        target.onerror = null;
                        target.src = "/profile-avatar.png";
                      }
                    }}
                  />
                )}
              </div>
            ))
            : !isLoading && (
              <p className="text-sm text-center text-gray-500 dark:text-neutrals400 py-8">
                {t("dispute_modal.no_messages")}
              </p>
            )}
        </div>

        <div className="w-full p-4 bg-white rounded-br-[4px] rounded-bl-[4px] dark:bg-darkbg border-t border-gray-200 dark:border-darkborder">
          <div className="w-full flex items-end">
            <div className="relative w-full">
              {selectedFiles.length > 0 && (
                <div className="mb-2 flex flex-wrap gap-2">
                  {selectedFiles.map((file, index) => (
                    <div
                      key={index}
                      className="flex items-center gap-2 p-2 border border-gray-200 rounded bg-gray-100 dark:bg-darkbg dark:border-darkborder"
                    >
                      {renderFilePreview(file, index)}
                      <button
                        onClick={() => !isSending && handleRemoveFile(index)}
                        disabled={isSending}
                        className="ml-2 text-red-500 dark:text-white opacity-90 hover:opacity-100 disabled:opacity-50"
                      >
                        <IoMdClose size={18} />
                      </button>
                    </div>
                  ))}
                </div>
              )}

              <div className="relative w-full">
                <input
                  ref={inputRef}
                  type="text"
                  placeholder={t("dispute_modal.write_message")}
                  value={message}
                  autoFocus
                  onChange={(e) => setMessage(e.target.value)}
                  onKeyDown={handleKeyPress}
                  disabled={isSending || isLoading}
                  className="w-full bg-neutrals100 px-4 py-2.5 min-h-11 pl-3 pr-[240px] border border-neutrals100 rounded-md font-normal text-sm placeholder:text-neutrals400 focus:outline-none focus:ring-1 focus:ring-primary500 dark:bg-darkbg dark:border-darkborder dark:text-neutrals100 dark:focus:ring-primary400 rtl:pl-[260px] rtl:pr-3 disabled:opacity-50 disabled:cursor-not-allowed max-sm:pr-[145px] max-sm:rtl:pl-[145px]"
                />

                {messageType === "adjustment" && (
                  <div className="counter-amount absolute right-1 top-1/2 -translate-y-1/2 rtl:left-0.5 rtl:right-auto max-sm:max-w-28">
                    <input
                      type="number"
                      placeholder={t("dispute_modal.enter_adjustment")}
                      value={adjustmentAmount}
                      onChange={(e) => {
                        const val = e.target.value;
                        if (Number(val) > 100) {
                          return;
                        }
                        setAdjustmentAmount(e.target.value);
                      }}
                      className="bg-neutrals100 py-2.5 min-h-11 px-3 border border-neutrals100 font-normal text-sm placeholder:text-neutrals400 dark:bg-darkbg dark:border-darkborder border-r-0 dark:text-neutrals100 border-l-gray-300 focus:outline-none focus:ring-1 focus:ring-primary500 dark:focus:ring-primary400 focus:rounded-md rtl:border-l-0 rtl:border-r-gray-300 rtl:border-r max-sm:w-full max-sm:px-1 disabled:opacity-50 disabled:cursor-not-allowed"
                    />
                  </div>
                )}

                <button
                  type="button"
                  onClick={handleFileIconClick}
                  disabled={isSending || isLoading}
                  className={`absolute ${
                    messageType === "adjustment"
                      ? "right-[210px] rtl:right-auto rtl:left-[210px] max-sm:!right-[125px] max-sm:rtl:!left-[125px]"
                      : "right-3 rtl:left-3 rtl:right-auto"
                  } top-1/2 -translate-y-1/2 text-neutrals500 cursor-pointer max-sm:right-[12px] max-sm:rtl:left-[12px] disabled:opacity-50 disabled:cursor-not-allowed`}
                >
                  <FiPaperclip size={18} />
                </button>
                <input
                  type="file"
                  ref={fileInputRef}
                  onChange={handleFileSelect}
                  accept="image/*,video/*"
                  multiple
                  disabled={isSending || isLoading}
                  className="hidden"
                />
              </div>
            </div>

            <button
              onClick={handleSend}
              // disabled={
              //   !hasActiveDispute ||
              //   (!message.trim() && selectedFiles.length === 0) ||
              //   isSending ||
              //   isLoading
              // }
              className="w-11 h-11 flex items-center justify-center ml-2 bg-primary500 text-white py-2.5 rounded-md hover:bg-primary600 disabled:bg-gray-300 disabled:cursor-not-allowed dark:bg-primary400 dark:hover:bg-primary500 transition-colors rtl:mr-2 rtl:ml-0"
            >
              {isSending ? (
                <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
              ) : (
                <FiSend className="w-5 h-5" />
              )}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default DisputeModal;