import React, { useEffect, useState } from "react";
import Header from "../../components/Header";
import IconTruck from "../../components/Icon/IconTruck";
import IconWallet from "../../components/Icon/IconWallet";
import { useAppStore } from "../../store/appStore";
import IconLocation from "../../components/Icon/IconLocation";
import { useNavigate, useParams } from "react-router-dom";
import { useOrderStore } from "../../store/orderStore";
import { formatPriceOrContact } from "../../utils";
import ProductDefaultImage from "../../assets/icons/photo.svg";
import IconMoney from "../../components/Icon/IconMoney";
import { formatDate } from "../../utils/date";
import { Drawer, Radio } from "antd";
import IconWarning from "../../components/Icon/IconWarning";
import Button from "../../components/common/Button";
import { Button as ButtonAnt } from "antd";

const statusReasons = [
  {
    id: 1,
    reason: "Muốn thay đổi địa chỉ giao hàng",
  },
  {
    id: 2,
    reason: "Muốn nhập/thay đổi mã Voucher",
  },
  {
    id: 3,
    reason:
      "Muốn thay đổi sản phẩm trong đơn hàng(size, màu sắc, số lượng,...)",
  },
  {
    id: 4,
    reason: "Thủ tục thanh toán quá rắc rối",
  },
  {
    id: 5,
    reason: "Tìm thấy giá rẻ hơn chỗ khác",
  },
  {
    id: 6,
    reason: "Đổi ý không muốn mua nữa",
  },
];

export default function OrderDetail() {
  const navigate = useNavigate();
  const { appTheme } = useAppStore((state) => state);
  const {
    order,
    getOrdersDetail,
    getRecordsOrder,
    cancelOrder,
    loadingCancel,
    recordsOder,
  } = useOrderStore((state) => state);

  const { orderCode } = useParams();
  const [showModalCancelOrder, setShowModalCancelOrder] = useState(false);
  const [reason, setReason] = useState("");

  const handleSelectedReason = (statusReason) => {
    setReason(statusReason.reason);
  };

  const handleCancelOrder = () => {
    if (reason) {
      cancelOrder(
        {
          order_code: orderCode,
          note: reason,
        },
        () => {
          navigate("/orders");
          setShowModalCancelOrder(false);
        }
      );
    } else {
      setShowModalCancelOrder(false);
    }
  };

  useEffect(() => {
    if (orderCode) {
      getOrdersDetail(orderCode);
    }
  }, [orderCode]);
  useEffect(() => {
    if (order.id) {
      getRecordsOrder(order.id);
    }
  }, [order.id]);

  return (
    <div>
      <Header
        title="Thông tin đơn hàng"
        goBack={() => {
          navigate("/cart");
        }}
      ></Header>
      <div className="overflow-y-scroll h-[100vh]">
        <main className="bg-gray-100 mb-[60px]">
          <div className="px-[10px] py-2 bg-[#03b391] text-[#fff] flex items-center justify-between border-b border-[#04bb96]">
            <div className="font-semibold flex gap-x-1">
              <span>Trạng thái đơn hàng:</span>
              <span>{order.order_status_name}</span>
            </div>
            <div>
              <IconTruck className="w-6 h-6 text-[#fff]"></IconTruck>
            </div>
          </div>
          <div className="px-[10px] py-2 bg-[#03b391] text-[#fff] flex items-center justify-between">
            <div className="font-semibold flex gap-x-1">
              <span>Trạng thái thanh toán:</span>
              <span>{order.payment_status_name}</span>
            </div>
            <div>
              <IconWallet className="w-5 h-5 text-[#fff]"></IconWallet>
            </div>
          </div>
          <div className="bg-[#fff]">
            <div className="px-[10px] py-2 flex gap-x-3 border-b border-[#ececec]">
              <div
                className="mt-1"
                style={{
                  color: appTheme.color_main_1,
                }}
              >
                <IconTruck className="w-5 h-5"></IconTruck>
              </div>
              <div className="flex flex-col gap-y-1 text-sm">
                <div className="flex gap-x-1">
                  <span>Đơn vị giao vận:</span>
                  <span>
                    {order.partner_shipper_name
                      ? order.partner_shipper_name
                      : "Chưa có đơn vị vận chuyển"}
                  </span>
                </div>
                <div className="flex gap-x-1">
                  <span>Phí giao hàng:</span>
                  <span>{formatPriceOrContact(order.total_shipping_fee)}</span>
                </div>
              </div>
            </div>
            <div className="px-[10px] py-2 flex gap-x-3">
              <div
                className="mt-1"
                style={{
                  color: appTheme.color_main_1,
                }}
              >
                <IconLocation className="w-4 h-4"></IconLocation>
              </div>
              <div className="flex flex-col text-sm">
                <div>Địa chỉ nhận hàng của khách:</div>
                <div>
                  {`${order.customer_name ? `${order.customer_name} | ` : ""}${
                    order.customer_phone ? order.customer_phone : ""
                  }`}
                </div>
                <div>
                  {order.customer_address_detail
                    ? order.customer_address_detail
                    : ""}
                </div>
                <div className="text-gray-500 text-xs">
                  {`${order.customer_wards_name}, ${order.customer_district_name}, ${order.customer_province_name}`}
                </div>
              </div>
            </div>
          </div>
          <div className="bg-[#fff] mt-2">
            {order.line_items_at_time?.length > 0
              ? order.line_items_at_time?.map((product) => (
                  <div
                    key={product.id}
                    className="flex gap-x-2 py-2 border-b border-[#ececec] px-[10px]"
                  >
                    <div className="w-[70px] h-[70px] flex-shrink-0">
                      <img
                        className="w-full h-full rounded-[4px] mt-0 object-cover"
                        src={
                          product?.image_url
                            ? product?.image_url
                            : ProductDefaultImage
                        }
                        alt={order.order_code}
                        loading="lazy"
                      />
                    </div>
                    <div className="flex flex-col flex-1 gap-y-1">
                      <div className="line-clamp-1">{product?.name}</div>
                      <div className="flex justify-between items-center">
                        <div className="text-gray-500 text-xs">
                          {product.distributes_selected?.length > 0
                            ? `${product.distributes_selected[0].value}${
                                product.distributes_selected[0]
                                  ?.sub_element_distributes
                                  ? `, ${product.distributes_selected[0].sub_element_distributes}`
                                  : ""
                              }`
                            : null}
                        </div>
                        <div>x{product.quantity}</div>
                      </div>
                      <div className="flex justify-end gap-x-[6px] items-center">
                        {product.before_discount_price !==
                        product.after_discount ? (
                          <div className="line-through font-medium">
                            {formatPriceOrContact(
                              product.before_discount_price
                            )}
                          </div>
                        ) : null}
                        <div
                          className="font-medium"
                          style={{
                            color: appTheme.color_main_1,
                          }}
                        >
                          {formatPriceOrContact(product.after_discount)}
                        </div>
                      </div>
                    </div>
                  </div>
                ))
              : null}
            <div className="px-[10px] py-2 flex flex-col gap-y-1">
              <div className="flex items-center justify-between text-gray-500">
                <span>Tổng tiền hàng:</span>
                <span>{formatPriceOrContact(order.total_before_discount)}</span>
              </div>
              <div className="flex items-center justify-between text-gray-500">
                <span>Phí vận chuyển:</span>
                <span>+ {formatPriceOrContact(order.total_shipping_fee)}</span>
              </div>
              {order.product_discount_amount > 0 ? (
                <div className="flex items-center justify-between text-gray-500">
                  <span>Giảm giá sản phẩm:</span>
                  <span>
                    - {formatPriceOrContact(order.product_discount_amount)}
                  </span>
                </div>
              ) : null}
              {order.combo_discount_amount > 0 ? (
                <div className="flex items-center justify-between text-gray-500">
                  <span>Giảm combo:</span>
                  <span>
                    - {formatPriceOrContact(order.combo_discount_amount)}
                  </span>
                </div>
              ) : null}
              {order.voucher_discount_amount > 0 ? (
                <div className="flex items-center justify-between text-gray-500">
                  <span>Giảm voucher:</span>
                  <span>
                    - {formatPriceOrContact(order.voucher_discount_amount)}
                  </span>
                </div>
              ) : null}
              {order.bonus_points_amount_used > 0 ? (
                <div className="flex items-center justify-between text-gray-500">
                  <span>Sử dụng xu:</span>
                  <span>
                    - {formatPriceOrContact(order.bonus_points_amount_used)}
                  </span>
                </div>
              ) : null}

              <div className="flex items-center justify-between">
                <span>Thành tiền:</span>
                <span>
                  {formatPriceOrContact(order.product_discount_amount)}
                </span>
              </div>
            </div>
          </div>
          {order.payment_partner_name ? (
            <div className="px-[10px] py-2 flex gap-x-3 bg-[#fff] mt-2">
              <div
                className="flex items-center"
                style={{
                  color: appTheme.color_main_1,
                }}
              >
                <IconMoney className="w-4 h-4"></IconMoney>
              </div>
              <div className="flex flex-col gap-y-1 text-sm">
                <div>Phương thức thanh toán:</div>
                <div>{order.payment_partner_name}</div>
              </div>
            </div>
          ) : null}
          <div className="bg-[#fff] mt-2 px-[10px] py-2 flex flex-col gap-y-1">
            <div className="flex items-center justify-between">
              <span>Mã đơn hàng</span>
              <span>{order.order_code}</span>
            </div>
            <div className="flex items-center justify-between text-gray-500">
              <span>Thời gian đặt hàng</span>
              <span>{formatDate(order.created_at, "DD-MM-YYYY HH:mm")}</span>
            </div>
            {recordsOder.length > 0 ? (
              <div className="flex flex-col gap-y-1 mt-1">
                {recordsOder.map((record) => (
                  <div
                    key={record.id}
                    className="flex items-center justify-between text-gray-500 gap-x-2"
                  >
                    <div>{record.note}</div>
                    <div className="flex-shrink-0">
                      {formatDate(order.updated_at, "DD-MM-YYYY HH:mm")}
                    </div>
                  </div>
                ))}
              </div>
            ) : null}
          </div>
          {order.order_status_code === "WAITING_FOR_PROGRESSING" ? (
            <div className="bg-[#fff] mt-2 px-[10px] py-2 ">
              <div
                className="w-full border border-[#cecece] flex justify-center items-center py-[6px] text-sm bg-gray-100"
                onClick={() => setShowModalCancelOrder(true)}
              >
                Hủy đơn hàng
              </div>
            </div>
          ) : null}
        </main>
        <div className="fixed bottom-0 left-0 w-full bg-[#fff] px-[10px] py-2 flex flex-col gap-y-1 shadow-inner pb-[16px]">
          <div className="flex justify-between items-center">
            <span>Tổng tiền</span>
            <span
              className="font-medium"
              style={{
                color: appTheme.color_main_1,
              }}
            >
              {formatPriceOrContact(order.product_discount_amount)}
            </span>
          </div>
          <div className="flex justify-between items-center">
            <span>Mã đơn hàng</span>
            <span>{order.order_code}</span>
          </div>
        </div>
      </div>
      {showModalCancelOrder ? (
        <Drawer
          placement={"bottom"}
          open={showModalCancelOrder}
          height={"fit-content"}
          onClose={() => setShowModalCancelOrder(false)}
          title="Chọn lý do hủy"
          bodyStyle={{ padding: 0 }}
        >
          <div>
            <div className="flex gap-x-2 px-3 py-2 bg-yellow-50">
              <div
                className="flex items-center"
                style={{
                  color: appTheme.color_main_1,
                }}
              >
                <IconWarning className={"w-4 h-4"}></IconWarning>
              </div>
              <div
                style={{
                  color: appTheme.color_main_1,
                }}
              >
                Vui lòng chọn lý do hủy đơn hàng. Lưu ý thao tác này sẽ hủy tất
                cả các sản phẩm có trong đơn hàng và không thể hoàn tác
              </div>
            </div>
            <div className="py-2 px-3">
              <Radio.Group className="flex flex-col gap-y-2" value={reason}>
                {statusReasons.map((statusReason) => (
                  <Radio
                    key={statusReason.id}
                    value={statusReason.reason}
                    onChange={() => handleSelectedReason(statusReason)}
                  >
                    {statusReason.reason}
                  </Radio>
                ))}
              </Radio.Group>
            </div>
            {loadingCancel ? (
              <ButtonAnt
                className="w-[90%] mx-auto flex items-center justify-center py-4 mb-4 mt-2"
                type="primary"
                style={{
                  backgroundColor: appTheme.color_main_1,
                }}
                loading
              >
                Đồng ý
              </ButtonAnt>
            ) : (
              <Button
                className="w-[90%] mx-auto flex items-center justify-center py-4 mb-4 mt-2"
                type="primary"
                style={{
                  backgroundColor: appTheme.color_main_1,
                }}
                onClick={handleCancelOrder}
              >
                Đồng ý
              </Button>
            )}
          </div>
        </Drawer>
      ) : null}
    </div>
  );
}
