"use client";
import { useAppSelector } from "@/app/store/hooks";
import { useSelectTheme } from "@/hooks/useSelectTheme";
import { useTranslations } from "next-intl";
import { useState } from "react";
import Select from "react-select";
import Button from "../Button";
import { respondShipmentDelayRequest } from "@/lib/actions/orderActions";
import { toast } from "react-toastify";
import {
  IBuyerOrderCard,
  upsertBuyerOrders,
} from "@/app/store/slices/orders/buyerOrderSlice";
import { formatDateWithLocale } from "@/lib/formTypes";
import { getStoredLocale } from "@/lib/getLocale";
import { useDispatch } from "react-redux";
import { checkAuthErrorGet } from "@/lib/checkAuthError";
import { useRouter } from "next/navigation";

interface Props {
  orderId: string;
  closeModal: () => void;
}

export default function ShipmentRequestBuyer({ orderId, closeModal }: Props) {
  const t = useTranslations();
  const { user } = useAppSelector((state) => state?.auth);
  const order = useAppSelector((state) => state.buyerOrders.byId[orderId]);
  const locale = getStoredLocale();
  const dispatch = useDispatch();
  const router = useRouter();

  const { customStyles, themeKey } = useSelectTheme();

  // Response Status
  const [shipmentResponse, setShipmentResponse] = useState<
    "accepted" | "rejected" | null
  >(null);
  const [shipmentResponseErrorMessage, setShipmentResponseErrorMessage] =
    useState<string>("");

  // Message for Response
  const [message, setMessage] = useState<string>("");
  const [errorMessage, setErrorMessage] = useState<string>("");

  const resetModal = () => {
    setMessage("");
    setErrorMessage("");

    setShipmentResponse(null);
    setShipmentResponseErrorMessage("");

    closeModal();
  };

  const { hasDeliveryExtensionRequest, expectedDelivery } = order;

  const handleShipmentResponse = async () => {
    if (!message.trim() || !shipmentResponse) {
      if (!message.trim()) {
        setErrorMessage("Please enter a message");
      }
      if (!shipmentResponse) {
        setShipmentResponseErrorMessage("Please select a response");
      }
      return;
    }

    try {
      const response = await respondShipmentDelayRequest(user?.token, {
        orderId: orderId,
        message: message,
        action: "respond",
        response: shipmentResponse,
      });

      if (!response?.success) {
        toast.error(response.message || t("order_card.toast.something_wrong"));
      }
      let finalExpectedDelivery = expectedDelivery;

      if (expectedDelivery && hasDeliveryExtensionRequest?.additionalDays) {
        const additionalDays = Number(
          hasDeliveryExtensionRequest.additionalDays,
        );

        const date = new Date(expectedDelivery);

        if (!isNaN(date.getTime())) {
          date.setDate(date.getDate() + additionalDays);

          finalExpectedDelivery = formatDateWithLocale(date, locale);
        }
      }

      const currOrder: IBuyerOrderCard = {
        ...order,
        hasDeliveryExtensionRequest: {
          additionalDays: hasDeliveryExtensionRequest?.additionalDays ?? 0,

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

          responseBuyer: {
            status: shipmentResponse,
            message: message,
            updatedAt: new Date().toISOString(),
          },

          updatedAt: new Date().toISOString(),
        },
        ...(shipmentResponse === "rejected" && {
          status: "cancelled",
        }),
        ...(shipmentResponse === "accepted" && {
          expectedDelivery: finalExpectedDelivery,
        }),
      };

      dispatch(upsertBuyerOrders([currOrder]));

      toast.success(
        t("order_received.buyer_order.toast_messages.shipment_responded"),
      );
    } catch (error: any) {
      if (checkAuthErrorGet(error, dispatch, router)) return;
      toast.error(t("order_card.toast.something_wrong"));
    } finally {
      resetModal();
    }
  };

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-30"
      onClick={() => {
        resetModal();
      }}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        className="bg-white rounded-xl shadow-2xl p-6 w-full max-w-sm dark:bg-darkbg transition-all"
      >
        <p className="mb-1 text-[13px] text-neutrals600 dark:text-neutrals300">
          {t("order_received.buyer_order.shipment_modal.request_extend")}{" "}
          {hasDeliveryExtensionRequest?.additionalDays}{" "}
          {t("order_received.buyer_order.shipment_modal.days")}
        </p>
        <p className="mb-1 text-[13px] text-neutrals600 dark:text-neutrals300">
          {t("order_received.buyer_order.shipment_modal.reason")}{" "}
          {hasDeliveryExtensionRequest?.responseSeller.message}
        </p>

        <div className="my-4">
          <p className="text-sm text-neutrals500 mb-2 dark:text-neutrals400">
            {t("order_received.buyer_order.shipment_modal.select_response")}
          </p>
          <Select
            options={[
              {
                value: "accepted",
                label: t("order_received.buyer_order.shipment_modal.accept"),
              },
              {
                value: "rejected",
                label: t("order_received.buyer_order.shipment_modal.reject"),
              },
            ].map((s: any) => ({
              value: s.value,
              label: s.label,
            }))}
            value={(() => {
              const obj = [
                {
                  value: "accepted",
                  label: t("order_received.buyer_order.shipment_modal.accept"),
                },
                {
                  value: "rejected",
                  label: t("order_received.buyer_order.shipment_modal.reject"),
                },
              ].find((s: any) => s.value === shipmentResponse);

              return obj
                ? {
                    value: obj.value,
                    label: obj.label,
                  }
                : null;
            })()}
            onChange={(selected: any) => {
              setShipmentResponse(selected?.value || "");
              setShipmentResponseErrorMessage("");
            }}
            key={themeKey}
            styles={customStyles}
            className={`${
              shipmentResponseErrorMessage
                ? "border-red-500 dark:border-red-500"
                : "border-neutrals300 dark:border-neutrals700"
            }`}
          />
          {shipmentResponseErrorMessage && (
            <p className="text-red-500 text-sm mt-1">
              {shipmentResponseErrorMessage}
            </p>
          )}
        </div>

        <textarea
          value={message}
          onChange={(e) => {
            setMessage(e.target.value);
            setErrorMessage("");
          }}
          placeholder={t(
            "order_received.buyer_order.shipment_modal.enter_message",
          )}
          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={() => {
              resetModal();
            }}
            label={t("order_card.status_modal.cancel")}
          />
          <Button
            label={t("order_received.buyer_order.shipment_modal.submit")}
            type="button"
            onClick={handleShipmentResponse}
            variant="outline"
          />
        </div>
      </div>
    </div>
  );
}