import { Button, Card, Form, Image, Layout } from "antd";
import LocationIcon from "components/Icons/LocationIcon";
import PaymentDetails from "components/PaymentDetails/PaymentDetails";
import ProText from "components/ProText";
import dayjs from "dayjs";
import { useTranslation } from "react-i18next";
import { useGetOrderDetailsQuery } from "redux/api/others";
import { useAppSelector } from "redux/hooks";
import styles from "./OrderDetails.module.css";
import ProInputCard from "components/ProInputCard/ProInputCard";
import ProHeader from "components/ProHeader/ProHeader";
import { useState } from "react";
import { RateBottomSheet } from "components/CustomBottomSheet/RateBottomSheet";

export default function OrderDetails({ orderId }: { orderId: string }) {
  const { t } = useTranslation();
  const { isRTL } = useAppSelector((state) => state.locale);
  const [isRateBottomSheetOpen, setIsRateBottomSheetOpen] = useState(false);
  const { data: orderDetails } = useGetOrderDetailsQuery(
    {
      orderID: orderId || "",
      restaurantID: localStorage.getItem("restaurantID") || "",
    },
    {
      skip: !orderId,
    },
  );

  // Determine button styles based on order status
  const getStatusButtonStyles = () => {
    const status = orderDetails?.order.status?.toLowerCase() || "";

    if (status.includes("close") || status === "closed") {
      return {
        backgroundColor: "var(--color-error-12, #EA1F221F)",
        color: "#EA1F22",
      };
    } else if (status.includes("completed") || status === "complete") {
      return {
        backgroundColor: "var(--color-success-12, #28A7451F)",
        color: "#28A745",
      };
    } else if (status.includes("preparing") || status.includes("prepare")) {
      return {
        backgroundColor: "var(--Color-Primary-100, #FFB7001F)",
        color: "#FFB700",
      };
    }

    // Default fallback
    return {
      backgroundColor: "var(--color-success-12, #28A7451F)",
      color: "#28A745",
    };
  };

  const statusButtonStyles = getStatusButtonStyles();

  return (
    <Form layout="vertical">
      <Layout>
        <ProHeader>{t("orders.title")}</ProHeader>
        <Layout.Content className={styles.orderDetailsContainer}>
          <Card className={styles.orderCard}>
            <div
              style={{
                display: "flex",
                flexDirection: "row",
                gap: "1rem",
                borderRadius: "16px",
                padding: 16,
              }}
            >
              <Button type="text" shape="circle" style={{}}>
                <Image
                  src={orderDetails?.restaurant_iimage}
                  className={styles.profileImage}
                  width={50}
                  height={50}
                  preview={false}
                />
              </Button>
              <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                <ProText
                  type="secondary"
                  style={{
                    fontWeight: 500,
                    fontStyle: "Medium",
                    fontSize: "16px",
                    lineHeight: "140%",
                    letterSpacing: "0%",
                    color: "#333333",
                  }}
                >
                  {/* <LocationIcon className={styles.locationIcon} />{" "} */}
                  {isRTL
                    ? orderDetails?.restaurantAR
                    : orderDetails?.restaurant}
                </ProText>
                <ProText
                  type="secondary"
                  style={{
                    fontSize: "14px",
                    color: "#5F6C7B",
                    fontWeight: 400,
                    fontStyle: "Regular",
                    lineHeight: "140%",
                    letterSpacing: "0%",
                  }}
                >
                  {dayjs(orderDetails?.order.created_at).format(
                    "YYYY-MM-DD h:mm A",
                  )}
                </ProText>
                <ProText
                  type="secondary"
                  style={{
                    fontSize: "14px",
                    color: "#5F6C7B",
                    fontWeight: 400,
                    fontStyle: "Regular",
                    lineHeight: "140%",
                    letterSpacing: "0%",
                  }}
                >
                  Order ID: #{orderDetails?.order.id}
                </ProText>
                <Button
                  style={{
                    height: 28,
                    gap: 10,
                    opacity: 1,
                    borderRadius: "Spacing/4XL",
                    padding: "4px 8px",
                    border: "none",
                    width: "fit-content",
                    ...statusButtonStyles,
                  }}
                >
                  {orderDetails?.order.status}
                </Button>
              </div>
            </div>
          </Card>

          <ProInputCard
            title={
              <div style={{ marginBottom: 7 }}>
                <ProText style={{ fontSize: "1rem" }}>
                  {t("order.yourOrderFrom")}
                </ProText>
                <br />
                <ProText type="secondary">
                  <LocationIcon className={styles.locationIcon} />
                  {t("order.muscat")}
                </ProText>
              </div>
            }
          >
            <div
              style={{ display: "flex", flexDirection: "column", gap: "1rem" }}
            >
              {orderDetails?.orderItems.map((item, index) => (
                <div key={item.id}>
                  <div
                    style={{
                      display: "flex",
                      flexDirection: "row",
                      justifyContent: "flex-start",
                      gap: "1rem",
                    }}
                  >
                    <Button
                      type="text"
                      shape="circle"
                      style={{
                        backgroundColor: "rgba(255, 183, 0, 0.08)",
                      }}
                    >
                      {index + 1}X
                    </Button>
                    <div>
                      <ProText
                        style={{
                          fontSize: "1rem",
                          position: "relative",
                          top: 8,
                        }}
                      >
                        {item.name}
                      </ProText>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </ProInputCard>

          <PaymentDetails order={orderDetails?.order} />

          {/* <CancelOrderBottomSheet /> */}
        </Layout.Content>

        <Layout.Footer className={styles.orderDetailsButtonContainer}>
          <Button
            className={styles.button}
            onClick={() => {
              setIsRateBottomSheetOpen(true);
            }}
            style={{
              border: "1px solid #333333",
            }}
          >
            {t("orders.rateOrder")}
          </Button>

          <Button
            type="primary"
            shape="round"
            className={styles.button}
            onClick={() => {}}
          >
            {t("orders.reOrder")}
          </Button>
        </Layout.Footer>
        
        <RateBottomSheet
          isOpen={isRateBottomSheetOpen}
          onClose={() => setIsRateBottomSheetOpen(false)}
        />
      </Layout>
    </Form>
  );
}
