"use client";

import type { Product, ProductCategory } from "@/app/[name]/(Main)/types/Types";
import { isVariablePricing } from "@/app/[name]/(Main)/types/Types";
import Button from "@/components/button/PrimaryButton";
import MenuItem from "@/components/listview/MenuItem";
import MenuItemRenderer from "@/components/listview/MenuItemRenderer";
import { toast } from "@/components/Toast";
import { Skeleton } from "@/components/ui/skeleton";
import Prompt from "@/components/utils/Prompt";
import useToggle from "@/hooks/helpers/useToggle";
import { extractErrorMessage } from "@/lib/func";
import ordersTranslations from "@/locales/fa/orders.json";
import { useQueryClient } from "@tanstack/react-query";
import clsx from "clsx";
import { Clock } from "iconsax-react";
import { useParams, useRouter } from "next/navigation";
import React from "react";
import { useCancelOrder, useConfirmOrder, useGetOrderDetail } from "../../checkout/hooks/useOrderData";
import type { OrderDetailItem } from "../../checkout/types/Types";

const orderItemToProduct = (item: OrderDetailItem): Product => {
  const { product, ...variant } = item.variant;
  const categoryId = typeof product.category === "string" ? product.category : (product.category?.id ?? "");

  return {
    ...product,
    category: (typeof product.category === "object" && product.category ? product.category : { id: categoryId }) as ProductCategory,
    variants: [
      {
        id: variant.id,
        createdAt: variant.createdAt,
        updatedAt: variant.updatedAt,
        deletedAt: variant.deletedAt,
        product: product.id,
        value: variant.value,
        price: item.unitPrice,
      },
    ],
  } as Product;
};

const getDeliveryMethodTitle = (method: string) => {
  switch (method) {
    case "deliveryCourier":
      return "ارسال توسط پیک";
    case "deliveryCar":
      return "تحویل به خودرو";
    case "pickup":
      return "تحویل حضوری";
    case "dineIn":
      return "سرو در فروشگاه";
    default:
      return "روش ارسال";
  }
};

// const getStatusPercentage = (status: string) => {
//     switch (status) {
//         case 'new':
//         case 'pendingPayment':
//             return 0;
//         case 'paid':
//         case 'confirmed':
//             return 20;
//         case 'preparing':
//             return 40;
//         case 'ready':
//             return 60;
//         case 'shipped':
//         case 'delivering':
//             return 80;
//         case 'completed':
//         case 'delivered':
//             return 100;
//         default:
//             return 0;
//     }
// };

const getStatusText = (status: string): string => {
  const statusKey = status as keyof typeof ordersTranslations.status;
  return ordersTranslations.status[statusKey] || "نامشخص";
};

const formatDate = (dateString: string): string => {
  const date = new Date(dateString);
  return date.toLocaleDateString("fa-IR", {
    year: "numeric",
    month: "long",
    day: "numeric",
  });
};

// const formatTime = (dateString: string): string => {
//     const date = new Date(dateString);
//     return date.toLocaleTimeString('fa-IR', {
//         hour: '2-digit',
//         minute: '2-digit'
//     });
// };

function OrderTrackingPage() {
  const { id, name } = useParams();
  const router = useRouter();
  const queryClient = useQueryClient();
  const { state: cancelModal, toggle: toggleCancelModal } = useToggle();
  const { data: orderDetail, isLoading } = useGetOrderDetail(id as string);
  const { mutate: cancelOrder } = useCancelOrder();
  const { mutate: payOrder, isPending: isPaying } = useConfirmOrder();

  const orderStatus = orderDetail?.data?.status;
  const showPayButton = orderStatus === "pendingPayment" || orderStatus === "needConfirmation";
  const isPayDisabled = orderStatus === "needConfirmation";

  const onPayOrder = () => {
    if (!id || isPayDisabled) return;

    payOrder(id as string, {
      onSuccess: (data) => {
        const paymentUrl = data?.data?.paymentUrl;
        if (paymentUrl) {
          toast("در حال ریدایرکت به صفحه پرداخت...", "success");
          window.location.href = paymentUrl;
        } else {
          queryClient.invalidateQueries({ queryKey: ["order-detail", id] });
          toast("پرداخت با موفقیت انجام شد", "success");
        }
      },
      onError: (error) => {
        toast(extractErrorMessage(error), "error");
      },
    });
  };

  const onCancelOrder = (e: React.MouseEvent | null) => {
    if (!e || !id) return;

    cancelOrder(id as string, {
      onSuccess: () => {
        toggleCancelModal();
        queryClient.invalidateQueries({ queryKey: ["order-detail", id] });
        toast("سفارش با موفقیت لغو شد", "success");
      },
      onError: (error) => {
        toast(extractErrorMessage(error), "error");
      },
    });
  };

  return (
    <div className="fixed inset-0 bg-container flex flex-col">
      <div className="flex-1 overflow-y-auto px-4 py-6">
        <div className="max-w-2xl mx-auto flex flex-col gap-6">
          {isLoading ? (
            <>
              <Skeleton className="h-6 w-48 mx-auto" />
              <div className="flex flex-col gap-4">
                <Skeleton className="h-5 w-full" />
                <Skeleton className="h-5 w-full" />
                <Skeleton className="h-20 w-full" />
                <Skeleton className="h-5 w-full" />
              </div>
            </>
          ) : orderDetail?.data ? (
            <>
              {orderDetail.data.status === "needConfirmation" && (
                <div className="rounded-2xl bg-red-50 px-4 py-3 text-center">
                  <p className="text-sm text-red-800 leading-6">لطفاً پس از دریافت پیامک، حداکثر تا ۲ ساعت نسبت به پرداخت اقدام کنید؛ در غیر این صورت سفارش به‌صورت خودکار لغو خواهد شد.</p>
                </div>
              )}

              <h1 className="text-lg font-semibold text-center">{getDeliveryMethodTitle(orderDetail.data.deliveryMethod.method)}</h1>

              <div className="flex flex-col">
                <div className="flex justify-between items-center h-16 border-b border-border">
                  <span className="text-sm text-muted-foreground flex items-center gap-2">
                    <Clock className="stroke-current" size={16} />
                    زمان سفارش
                  </span>
                  <div className="flex  items-end gap-0.5">
                    <span className="text-sm font-semibold">{formatDate(orderDetail.data.createdAt)}</span>
                    {/* <span className='text-xs text-muted-foreground'>{formatTime(orderDetail.data.createdAt)}</span> */}
                  </div>
                </div>
                <div className="flex justify-between items-center h-16 border-b border-border">
                  <span className="text-sm text-muted-foreground">نوع ارسال</span>
                  <span className="text-sm font-semibold">{orderDetail.data?.deliveryMethod?.description}</span>
                </div>
                {orderDetail.data.carAddress && (
                  <div className="flex justify-between items-center h-16 border-b border-border">
                    <div className="text-sm text-muted-foreground mb-1">اطلاعات خودرو</div>
                    <div className="text-sm font-semibold">
                      {orderDetail.data.carAddress.carModel} {orderDetail.data.carAddress.carColor} - پلاک: {orderDetail.data.carAddress.plateNumber}
                    </div>
                  </div>
                )}
                <div className="flex justify-between items-center h-16 border-b border-border">
                  <span className="text-sm text-muted-foreground">شماره سفارش</span>
                  <span className="text-sm font-semibold">#{orderDetail.data.orderNumber}</span>
                </div>
                <div className="flex justify-between items-center h-16 border-b border-border">
                  <span className="text-sm text-muted-foreground">وضعیت سفارش</span>
                  <span className="text-sm font-semibold">{getStatusText(orderDetail.data.status)}</span>
                </div>

                {orderDetail.data.tableNumber && (
                  <div className="flex justify-between items-center h-16 border-b border-border">
                    <span className="text-sm text-muted-foreground">شماره میز</span>
                    <span className="text-sm font-semibold">#{orderDetail.data.tableNumber}</span>
                  </div>
                )}

                {orderDetail.data.userAddress && (
                  <div className="py-3 border-b border-border">
                    <div className="text-sm text-muted-foreground mb-1">آدرس تحویل</div>
                    <div className="text-sm">{orderDetail.data.userAddress.address}</div>
                  </div>
                )}

                {orderDetail.data.items?.length > 0 && (
                  <div className="py-4 mt-7 border-b border-border">
                    <div className="text-sm font-medium mb-4">اقلام سفارش</div>
                    <div className="flex flex-col gap-4">
                      {orderDetail.data.items.map((item) => {
                        const product = orderItemToProduct(item);
                        const needsConfirmation = isVariablePricing(product) || product.needAdminAcceptance;

                        return (
                          <MenuItemRenderer key={item.id}>
                            <MenuItem
                              product={product}
                              variantId={item.variant.id}
                              variantValue={item.variant.value}
                              readOnly
                              displayQuantity={item.quantity}
                              badge={
                                needsConfirmation ? (
                                  item.status === "confirmed" ? (
                                    <span className="inline-block rounded-lg bg-green-50 dark:bg-green-950/40 px-3 py-1.5 text-xs text-green-600 dark:text-green-400">
                                      {ordersTranslations.itemStatus.confirmed}
                                    </span>
                                  ) : (
                                    <span className="inline-block rounded-lg bg-orange-50 dark:bg-orange-950/40 px-3 py-1.5 text-xs text-orange-600 dark:text-orange-400">
                                      {ordersTranslations.itemStatus.needConfirmation}
                                    </span>
                                  )
                                ) : undefined
                              }
                            />
                          </MenuItemRenderer>
                        );
                      })}
                    </div>
                  </div>
                )}

                <div className="flex justify-between items-center py-4 border-t border-border">
                  <span className="text-sm font-medium">مجموع سفارش</span>
                  <span className="text-sm font-bold ">{orderDetail.data.total.toLocaleString("fa-IR")} تومان</span>
                </div>
              </div>
            </>
          ) : (
            <div className="text-center text-muted-foreground py-12">اطلاعات سفارش یافت نشد</div>
          )}
        </div>
      </div>

      <div className="p-4 border-t border-border bg-container">
        <div className="max-w-2xl mx-auto grid grid-cols-2 gap-4">
          <Button className="bg-disabled! text-foreground!" onClick={() => router.push(`/${name}`)} type="button">
            بازگشت به منو
          </Button>
          {showPayButton ? (
            <Button
              type="button"
              onClick={onPayOrder}
              disabled={isPayDisabled}
              pending={isPaying}
            >
              پرداخت
            </Button>
          ) : (
            <Button
              type="submit"
              onClick={toggleCancelModal}
              className="bg-disabled! text-foreground!"
              disabled={orderDetail?.data?.status === "cancelled" || orderDetail?.data?.status === "delivered" || orderDetail?.data?.status === "delivering"}
            >
              لغو سفارش
            </Button>
          )}
        </div>
      </div>

      <div className={clsx("fixed inset-0 z-1001", !cancelModal && "pointer-events-none")}>
        <Prompt
          title={"لغو سفارش"}
          description={"آیا از درخواست خود اطمینان دارید؟"}
          textConfirm={"بله"}
          textCancel={"منصرف شدم"}
          onConfirm={onCancelOrder}
          visible={cancelModal}
          onClick={toggleCancelModal}
          onCancel={toggleCancelModal}
        />
      </div>
    </div>
  );
}

export default OrderTrackingPage;
