import { Button, Card, Divider } from "antd";
import EmptyOrdersIcon from "components/Icons/EmptyOrdersIcon";
import RateIcon from "components/Icons/RateIcon";
import ReOrderIcon from "components/Icons/ReOrderIcon";
import LoadingSpinner from "components/LoadingSpinner";
import ProText from "components/ProText";
import ProTitle from "components/ProTitle";
import { useTranslation } from "react-i18next";
import { useGetOrdersQuery } from "redux/api/others";
import { colors } from "ThemeConstants";
import styles from "./orders.module.css";

// Utility function to format date
const formatDate = (dateString: string): string => {
  const date = new Date(dateString);

  // Format: "14 December 2022 18:45"
  const options: Intl.DateTimeFormatOptions = {
    day: "numeric",
    month: "long",
    year: "numeric",
    hour: "2-digit",
    minute: "2-digit",
    hour12: false,
  };

  return date.toLocaleDateString("en-GB", options);
};

export default function OrdersList() {
  const { data: orders = [], isLoading, error, refetch } = useGetOrdersQuery();

  const { t } = useTranslation();

  if (isLoading) {
    return <LoadingSpinner />;
  }

  if (error) {
    return (
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center",
          height: "90vh",
        }}
      >
        <ProTitle level={4}>{t("orders.errorLoadingOrders")}</ProTitle>
        <Button onClick={refetch}>{t("orders.retry")}</Button>
      </div>
    );
  }

  return (
    <>
      {orders.length === 0 ? (
        // Empty state
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center",
            height: "90vh",
            padding: "1rem"
          }}
        >
          <EmptyOrdersIcon />
          <ProTitle level={4}>{t("orders.noOrdersFound")}</ProTitle>
          <ProText>
            {t("orders.youHavenTPlacedAnyOrdersYet")}
          </ProText>
        </div>
      ) : (
        // Orders list
        <div style={{ padding: "16px" }}>
          {orders.map((order: any) => (
            <Card
              key={order.id}
              style={{
                borderRadius: "12px",
                boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)",
                marginBottom: 12,
              }}
            >
              <div
                style={{
                  display: "flex",
                  flexDirection: "row",
                  justifyContent: "flex-start",
                  gap: "1rem",
                }}
              >
                <Button
                  type="text"
                  shape="circle"
                  style={{
                    backgroundColor: "rgba(255, 183, 0, 0.08)",
                  }}
                >
                  {order.restaurant_name[0]}
                </Button>
                <div
                  style={{ display: "flex", flexDirection: "column", gap: 8 }}
                >
                  <ProText style={{ fontSize: "1rem" }}>
                    {order.restaurant_name}
                  </ProText>
                  <ProText type="secondary">
                    {formatDate(order?.created_at)}
                  </ProText>
                  <ProText type="secondary">
                    {t("orders.orderID")} {order.id}
                  </ProText>
                  <Button
                    style={{
                      borderRadius: 888,
                      height: 24,
                      border: "none",
                      backgroundColor: colors.primary,
                      color: "white",
                      padding: "0 8px",
                      width: "fit-content",
                    }}
                  >
                    {order.status}
                  </Button>
                </div>
              </div>
              <Divider style={{ margin: "15px 0 10px 0" }} />
              <div
                style={{
                  display: "flex",
                  flexDirection: "row",
                  justifyContent: "space-around",
                }}
              >
                <div>
                  <ProText style={{ fontSize: "1rem", color: colors.primary }}>
                    <RateIcon className={styles.rateIcon} />
                    {t("orders.rateOrder")}
                  </ProText>{" "}
                </div>

                <div>
                  <ProText style={{ fontSize: "1rem", color: colors.primary }}>
                    <ReOrderIcon className={styles.reorderIcon} />
                    {t("orders.reOrder")}
                  </ProText>
                </div>
              </div>
            </Card>
          ))}
        </div>
      )}
    </>
  );
}
