"use client";
import React, { useState, useEffect } from "react";
import { useTranslations, useLocale,useFormatter } from "next-intl";

import { useDispatch } from "react-redux";
import { useSelector } from "react-redux";
import { useRouter } from "next/navigation";
import { TbArrowForwardUp } from "react-icons/tb";
import { FaCalendarAlt } from "react-icons/fa";
import { useMutation } from "@tanstack/react-query";
import Link from "next/link";
import { Pagination, Modal, Input, Select, Form, message, Button } from "antd";
import { FETCH_CART_SUCCESS, FETCH_CART_LENGTH } from "@/store/cart/actions";
import axios from "@/utils/axios-config";
import SkeletonAddressList from "@/components/skeletons/skeleton-addresses";
import { useForm } from "antd/lib/form/Form";
import { LuEye } from "react-icons/lu";
import Image from "next/image";
import NoItem from "@/components/no-items";

export interface DataType {
  id: number;
  date: string;
  status: number;
  payment_status: number;
  payment_method: number;
  duration: string;
  distance: string;
  delivery_method: number;
  has_prescription: number;
  total_price: number;
  is_remote_shipping: number;
}

export default function Orders() {
  const locale = useLocale();
  const [ordersType, setOrdersType] = useState("in_progress");
  const [orders, setOrders] = useState<DataType[]>([]);
  const [orderId, setOrderId] = useState<any>(undefined);
  const [ordersLoading, setOrdersLoading] = useState(true);
  const [cancelOrderOpen, setCancelOrderOpen] = useState(false);
  const [cancelReasons, setCancelReasons] = useState<
    { value: number; label: string }[]
  >([]);
  const [cancelReason, setCancelReason] = useState("");
  const [pagination, setPagination] = useState({
    pageSize: 10,
    totalCount: 0,
    currentPage: 0,
  });
  const formatter = useFormatter();
  const router = useRouter();
  const [form] = useForm();
  const { unCompletedOrders } = useSelector(
    (state: { Cart: any }) => state.Cart
  );
  const dispatch = useDispatch();
  const t = useTranslations();
  const { TextArea } = Input;
  const orderStatusObj: { [key: number]: string } = {
    1: t("prescription-checking"),
    2: t("accepted"),
    3: t("away"),
    4: t("completed"),
    5: t("canceled"),
    6: t("rejected"),
    7: t("refuneded"),
  };
  const durationObj: { [key: string]: string } = {
    day: t("day"),
    days: t("days"),
    hour: t("hour"),
    hours: t("hours"),
    mins: t('mins')
  };
  const parseNumbers = (value: string | number): number => {
  if (typeof value === 'number') return value;
  if (typeof value !== 'string') return 0;
  
  
  return parseFloat(value.replace(/,/g, '')) || 0;
};
   const formatArabicNumber = (value: number) => {
     return new Intl.NumberFormat(locale, {
      numberingSystem: locale === 'ar' ? 'arab' : 'latn'
    }).format(value);
  };
  const distanceObj: { [key: string]: string } = {
    km: t("km"),
    m: t("m"),
  };
  const formatDateTime = (dateTimeStr: string) => {
    try {
      const date = new Date(dateTimeStr.replace(" ", "T"));

      if (locale === "ar") {
        // Arabic month names
        const arabicMonths = [
          "يناير",
          "فبراير",
          "مارس",
          "أبريل",
          "مايو",
          "يونيو",
          "يوليو",
          "أغسطس",
          "سبتمبر",
          "أكتوبر",
          "نوفمبر",
          "ديسمبر",
        ];

        const day = date.getDate();
        const month = arabicMonths[date.getMonth()];
        const year = date.getFullYear();
        const hours = date.getHours();
        const minutes = date.getMinutes();
        const ampm = hours >= 12 ? "م" : "ص";
        const hours12 = hours % 12 || 12;

        // Format: "20 مايو 2025، 1:16 م"
        return `${day} ${month} ${year}، ${hours12}:${minutes
          .toString()
          .padStart(2, "0")} ${ampm}`;
      } else {
        return date.toLocaleString("en-US", {
          year: "numeric",
          month: "long",
          day: "numeric",
          hour: "numeric",
          minute: "2-digit",
          second: "2-digit",
          hour12: true,
        });
      }
    } catch (e) {
      return dateTimeStr;
    }
  };

  function isValidDateTime(datetime: string) {
    const date = new Date(datetime);
    return !isNaN(date.getTime());
  }

  const getDuration = (text: string) => {
    if (!text) return "";

    if (isValidDateTime(text)) {
      return formatDateTime(text);
    } else {
      let duration = "";
      const durationParts = text.split(" ");
      durationParts.forEach((ele) => {
        duration += Object.keys(durationObj).includes(ele)
          ? ` ${durationObj[ele]}`
          : ` ${formatArabicNumber(Number(ele))}`;
      });
      return duration.trim();
    }
  };
  const getDistance = (text: string) => {
    if (!text) return "";

    let distance = "";
    const distanceParts = text.split(" ");
    distanceParts.forEach((ele) => {
      distance += Object.keys(distanceObj).includes(ele)
        ? ` ${distanceObj[ele]}`
        : ` ${formatArabicNumber(Number(parseNumbers(ele)))}`;
    });
    return distance.trim();
  };

  const onSelectPaymentMethod = (value: string) => {
    //setPaymentMethod(value);
    //console.log(value);
    setCancelReason(value);
  };

  //// fetch orders
  const fetchOrdersData = async () => {
    setOrdersLoading(true);
    const params: { [key: string]: string | number } = {};
    if (typeof pagination.currentPage === "number") {
      params.skip = pagination.currentPage * pagination.pageSize;
      params.take = pagination.pageSize;
    }
    try {
      const response = await axios.get(
        `/orders?skip=${params?.skip}&take=${params?.take}&filter[status]=${ordersType}`
      );

      const data = await response?.data;
      setPagination((current) => ({
        ...current,
        totalCount: data?.count,
      }));
      console.log("orders", data?.data);
      setOrders([...data?.data]);
      setOrdersLoading(false);
    } catch (err: any) {
      setOrdersLoading(false);
    }
  };
  useEffect(() => {
    window.scrollTo(0, 200);
    fetchOrdersData();
  }, [pagination?.currentPage, pagination?.pageSize, ordersType]);

  useEffect(() => {
    localStorage.removeItem("paymentHtml");
    const fetchCancelReasons = async () => {
      try {
        const response = await axios.get("/cancel-reasons");
        const data = response?.data?.data;
        const arr = data?.map((item: any) => ({
          value: item?.id,
          label: item?.title,
        }));
        setCancelReasons([...arr]);
        // console.log("cancel reasons", data);
      } catch (err: any) {
        //console.error(err?.data?.message);
      }
    };
    // const fetchCartData = async () => {
    //   try {
    //     const response = await axios.get("/my-cart");
    //     const data = response?.data?.data;

    //     dispatch({ type: FETCH_CART_SUCCESS, payload: data?.products });
    //     dispatch({ type: FETCH_CART_LENGTH, payload: data?.products?.length });
    //   } catch (err: any) {
    //     //console.error(err?.data?.message);
    //   }
    // };
    fetchCancelReasons();
    //fetchCartData();
  }, []);

  const cancelOrderMutation = useMutation({
    mutationFn: (values) => axios["post"]("orders/cancel", values),
    onSuccess: (res) => {
      message.success(res?.data?.message);
      setOrdersType("in_progress");
      form.resetFields();
      fetchOrdersData();
      setCancelOrderOpen(false);
    },
    onError: (err) => {
      message.error(err?.message);
    },
  });
  const onFinish = (values: any) => {
    values["order_id"] = orderId;
    //console.log(values);
    cancelOrderMutation.mutate(values);
  };

  /////complete order

  // const confirmPayment = async (id: string, paymentTab: Window | null) => {
  //   try {
  //     const response = await axios.post(`confirm-payment/${id}`);
  //     const { payment_id, html } = response?.data?.data;

  //     if (payment_id && html) {
  //       sessionStorage.setItem("paymentHtml", html);

  //       if (paymentTab) { 
  //         paymentTab.location.href = `/payment?checkoutId=${payment_id}`;
  //       }
  //     }

  //     message.success(response?.data?.message);
  //   } catch (err) {
  //     if (paymentTab) {
  //       paymentTab.close();
  //     }
  //   }
  // };
  const confirmPayment = async (id: string, paymentTab: Window | null) => {
    try {
      const response = await axios.post(`confirm-payment/${id}`);
      const { payment_id, html } = await response?.data?.data;

      if (payment_id && html) {
        localStorage.setItem("paymentHtml", html);

        if (paymentTab) {
          paymentTab.location.href = `/payment?checkoutId=${payment_id}`;
        }
      }

      message.success(response?.data?.message);
      router.push(`/${locale}/`);
    } catch (err) {
      if (paymentTab) {
        paymentTab.close();
      }
    }
  };

  // // ///// checkout function
  const checkoutMutation = useMutation({
    mutationFn: (values: FormData) =>
      axios.post("orders", values, {
        // headers: {
        //   "Accept-Language": `${locale === "en" ? "en-US" : "ar-SA"}`,
        // },
      }),
  });

  // Checkout Function
  const checkoutFunc = (id: any) => {
    const paymentTab = window.open("", "_blank");
    if (paymentTab) {
      paymentTab.document.write("<h3>Loading payment, please wait.... </h3>");
    } else {
      alert("Popup blocked! Please allow popups for this site.");
      return;
    }
    confirmPayment(id, paymentTab);
    // if (!paymentTab) {
    //   alert("Popup blocked! Please allow popups for this site.");
    //   return;
    // }

    // checkoutMutation.mutate(formData, {
    //   onSuccess: (res) => {
    //     console.log("checkout", res.data);
    //     const data = res?.data?.data;
    //     if (data?.confirm_payment !== 3) {
    //       confirmPayment(data?.order_id, paymentTab); // Pass the tab here
    //     } else {
    //       router.push("/orders");
    //     }
    //     message.success(res.data.message);

    //   },
    // });
  };
  if (ordersLoading) {
    return (
      <div className="container   pt-[3rem] mx-auto px-4">
        <SkeletonAddressList />
      </div>
    );
  }
  return (
    <>
      <div className="container mx-auto px-4    pt-[2rem]">
        <div className="w-full mx-auto md:w-[60%]">
          <div className=" flex justify-center">
            <p
              className={`p-4 w-[50%] border-solid border-b-[1px] cursor-pointer ${
                ordersType === "in_progress"
                  ? "border-primary text-primary"
                  : " border-gray-300"
              } text-center`}
              onClick={() => setOrdersType("in_progress")}
            >
              {t("in-progress")}
            </p>
            <p
              className={`p-4 w-[50%] border-solid border-b-[1px] cursor-pointer ${
                ordersType === "history"
                  ? "border-primary text-primary"
                  : " border-gray-300"
              } text-center`}
              onClick={() => setOrdersType("history")}
            >
              {t("history")}
            </p>
          </div>
          {
            // ordersLoading ? (
            //   <SkeletonAddressList />
            // ) :
            orders.length === 0 ? (
              <NoItem />
            ) : (
              orders?.map((item, index) => (
                <div
                  key={index}
                  className="border-solid border-[1px] border-gray-300 rounded-[10px] mt-4 p-4"
                >
                  <div className="flex justify-between items-center py-2">
                    <p className="text-[16px] md:text-[18px] font-semibold">
                      <span className="text-[#EBAB0F]">#</span>
                      {item?.id}
                    </p>
                    <div className="relative w-fit py-1 px-2 bg-gray-200 rounded-md">
                      <Link
                        href={`/${locale}/orders/${item.id}`}
                        locale={false}
                        className="absolute w-full h-full top-0 left-0"
                      />
                      <LuEye className="text-[20px] text-gray-500" />
                    </div>
                    {/* <button className="py-1 px-3 font-semibold flex justify-center items-center rounded-[5px] border-solid border-[1px] border-primary text-primary">
                <TbArrowForwardUp className="me-1 text-[20px]" /> {t("return")}
              </button> */}
                  </div>
                  <div className="flex justify-between items-center py-2">
                    <p className="text-[15px] md:text-[16px] font-semibold text-primary">
                      {t("total")}
                    </p>
                    <p className="flex text-[15px] md:text-[16px] font-semibold text-primary">
                      {(+item?.total_price).toFixed(2)}
                      {/* <sup className="mx-1">{t("sar")}</sup> */}
                      {/* <sup className=" inline-block"> */}
                        <Image
                          src={"/images/ryial.svg"}
                          alt="currancy icon"
                          width={12}
                          height={12}
                          className="ms-1"
                        />
                      {/* </sup> */}
                    </p>
                  </div>
                  <div className="flex justify-between items-center py-2">
                    <div className="flex items-center">
                      <FaCalendarAlt className="text-gray-300 text-[16px] me-1" />{" "}
                      <p className="text-[15px] text-gray-500 md:text-[16px] font-semibold flex items-center">
                        {item?.date}
                      </p>
                    </div>
                    <p
                      className={`text-[14px] md:text-[16px] py-1 px-2 ${
                        item?.status === 2 || item?.status === 4
                          ? "bg-[#d9fffb] text-primary"
                          : "bg-[#FFF6E1] text-[#EBAB0F]"
                      }  rounded-[5px]`}
                    >
                      {orderStatusObj[item?.status]}
                    </p>
                  </div>
                  <hr className="text-gray-300 w-full my-4" />
                  <div className="flex justify-center items-center">
                    {/* {
                      item?.payment_status !== 1 && */}
                    <div className="relative min-h-[40px] mx-2 flex-grow">
                      <Link
                        href={`/${locale}/orders/${item.id}`}
                        locale={false}
                        className="absolute w-full h-full top-0 left-0"
                      />
                      <button
                        //onClick={()=>router.push(`/${locale}/orders/${item.id}`)}
                        className="!text-primary min-h-[40px]  w-full !bg-white border-solid border-[1px] !border-primary !outline-none flex justify-center items-center text-[14px] lg:text-[16px] font-semibold !rounded-[12px]"
                      >
                        {t("view-order")}{" "}
                      </button>
                    </div>
                    {/* } */}
                    {/* {ordersType === "history" && item?.status === 4 && (
                    <button className="!text-white !bg-primary  !border-none !outline-none flex justify-center items-center text-[14px] lg:text-[16px] font-semibold mx-2  min-h-[40px] w-[48%]  !rounded-[12px]">
                      {t("refund")}
                    </button>
                  )} */}
                    {ordersType === "in_progress" &&
                      // (item?.status === 1 || item?.status === 2) 
                      (item?.payment_method === 3 ||
                      item?.payment_status === 1)
                      && (
                        <button
                          className="!text-custom-red !bg-white border-solid border-[1px] !border-custom-red !outline-none flex justify-center items-center text-[14px] lg:text-[16px] font-semibold mx-2  min-h-[40px] flex-grow  !rounded-[12px]"
                          onClick={() => {
                            setOrderId(item.id);
                            setCancelOrderOpen(true);
                          }}
                        >
                          {t("cancel-order")}
                        </button>
                      )}

                    {item?.payment_method !== 3 &&
                      item?.payment_status === 1 &&
                      item?.status === 2 && (
                        <button
                          className="!bg-primary !text-white border-solid border-[1px]  !outline-none flex justify-center items-center text-[14px] lg:text-[16px] font-semibold   min-h-[40px] flex-grow mx-2 !rounded-[12px]"
                          onClick={() => router.push(`/${locale}/reorder?order_id=${item.id}`)}
                        >
                          {t("complete-order")}
                        </button>
                      )}
                  </div>
                  <div className="flex justify-between items-center">

                  {(item?.delivery_method===2&&(item?.duration||item?.distance)&&item?.is_remote_shipping===1)&&
                  <div className="flex items-center gap-2 w-fit justify-center rounded-[5px] pt-2 pb-1 px-2">
                    <div className="flex items-center justify-center ">
                      <Image
                        src={"/images/time.svg"}
                        alt="time icon"
                        width={16}
                        height={16}
                      />
                      <p
                        // dir="ltr"
                        className="rounded-[5px] p-1 text-center text-gray-500"
                      >
                        {/* {getDuration(item?.duration)} */}
                        {t('within-three-five-days')}
                      </p>
                    </div>
                    
                  </div>
                  }
                   {(item?.delivery_method===2&&(item?.duration||item?.distance)&&item?.is_remote_shipping===0)&&
                  <div className="flex items-center gap-2 w-fit justify-center rounded-[5px] pt-2 pb-1 px-2">
                    
                    <div className="flex items-center justify-center ">
                       <Image
                        src={"/images/time.svg"}
                        alt="time icon"
                        width={16}
                        height={16}
                      />
                      <p className="rounded-[5px] p-1 text-gray-500 text-center">
                        {t('within-two-hours')}
                      </p>
                    </div>
                  </div>
                  }
                  {
                    (item?.delivery_method===1||((item?.duration||item?.distance)&&item?.is_remote_shipping===0))&&
                  <div className="flex items-center justify-center ">
                      <Image
                        src={"/images/distance.svg"}
                        alt="time icon"
                        width={16}
                        height={16}
                      />
                      <p className="rounded-[5px] p-1 text-gray-500 text-center">
                        {getDistance(item?.distance)}
                      </p>
                    </div>
                  }
                  </div>
                </div>
              ))
            )
          }
        </div>

        {orders?.length > 0 && (
          <Pagination
            //defaultCurrent={1}
            total={pagination.totalCount}
            current={pagination.currentPage + 1}
            pageSize={pagination.pageSize}
            onChange={(page, pageSize) => {
              setPagination((current) => ({
                ...current,
                pageSize,
                currentPage: page - 1,
              }));
            }}
            className={locale === "ar" ? "rtl-pagination" : ""}
          />
        )}
      </div>
      {/*****cancel order**** */}
      <Modal
        open={cancelOrderOpen}
        onCancel={() => setCancelOrderOpen(false)}
        title={t("cancel-order")}
        footer={null}
      >
        <Form
          className=" flex flex-col w-full"
          layout="vertical"
          form={form}
          //initialValues={{ remember: true }}
          onFinish={onFinish}
          autoComplete="off"
        >
          <div className="pt-10">
            <Form.Item
              // label={<FormattedMessage id="email" />}
              name="reason_id"
              rules={[
                {
                  required: true,
                  message: t("reason-required"),
                },
              ]}
            >
              <Select
                showSearch
                //value={cancelReason}
                //disabled={governorateLoading}
                placeholder={t("select-cancel-reason")}
                optionFilterProp="label"
                onChange={onSelectPaymentMethod}
                //onSearch={onPaymentMethodSearch}
                // className="my-2 w-full"
                options={cancelReasons}
              />
            </Form.Item>
            <Form.Item
              // label={<FormattedMessage id="email" />}
              name="reason"
              rules={[
                {
                  required: true,
                  message: t("reason-txt-required"),
                },
                {
                  pattern: /^.{2,500}$/,
                  message: t("reason-invalid"),
                },
              ]}
            >
              <TextArea
                onChange={(e: any) => setCancelReason(e.target.value)}
                //className="my-2"
                rows={4}
                placeholder={t("write-your-reason-details")}
              />
            </Form.Item>

            <div className="flex justify-end items-center pt-[30px]">
              <Button
                onClick={() => setCancelOrderOpen(false)}
                className="py-2 px-3 me-2 rounded-[10px] !shadow-none !border-none !outline-none !bg-gray-300 !text-gray-800"
              >
                {t("cancel")}
              </Button>{" "}
              <Button
                htmlType="submit"
                loading={cancelOrderMutation.isPending}
                className="py-2 !shadow-none px-3 me-2 rounded-[10px] !border-none !outline-none !bg-primary !text-white"
              >
                {t("confirm")}
              </Button>
            </div>
          </div>
        </Form>
      </Modal>
    </>
  );
}