"use client";

import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
import { Separator } from "@/components/ui/separator";
import Link from "next/link";
import { Button, buttonVariants } from "@/components/ui/button";
import Image from "next/image";
import CartItem from "./CartItem";
import { useEffect, useState } from "react";
import { ShoppingBagIcon, X } from "lucide-react";
import { useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "../../store/store";
import {
  clearMessageOrError,
  fetchCart,
  getLocalCartItems,
} from "../../store/cartSlice";
import Logo from "@/public/New_Spraykaro.svg";
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
import MainComponent from "@/app/(auth)/signin/OtpInput";
import { cn } from "@/components/lib/utils";
import { toast } from "react-toastify";
import { PaymentPageData } from "../NavBar/NavbarRightIcons";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { getUserCart } from "@/components/utils/queryFunctions";
import Loading from "@/app/loading";
import ErrorPage from "../ErrorPage";

const CartComponent = ({
  paymentData,
  isNavButton = true,
}: {
  paymentData: PaymentPageData;
  isNavButton: boolean;
}) => {
  const [open, setOpen] = useState(false);
  const user = useSelector((state: RootState) => state.user);

  // const dispatch: AppDispatch = useDispatch();

  // const cart = useSelector((state: RootState) => state?.cart);

  // const cart_env =
  //   process.env.NODE_ENV === "production"
  //     ? "cart_spraykaro"
  //     : "cart_spraykaro_dev";

  const queryClient = useQueryClient();

  const getLocalCartItems = () => {
    const queryData = queryClient.getQueryData(["cart"]);

    console.log("queryData", queryData);

    return Array.isArray(queryData) ? queryData : [];
  };

  const {
    data: userCartData,
    isLoading,
    isError,
  } = useQuery({
    queryKey: ["cart"],
    queryFn: async () => {
      const persistedData = queryClient.getQueryData(["cart"]);
      console.log("persistedData", persistedData);
      if (persistedData) return persistedData;
      if (user?.accessToken) {
        console.log("user.accessToken", user.accessToken);
        const response = await getUserCart(user.accessToken);

        if (response?.statusMessage) {
          toast.warning(response?.statusMessage, {
            autoClose: 2500,
          });
        }

        return response?.data;
      } else {
        return getLocalCartItems();
      }
    },
    staleTime: 3600000,
    refetchOnMount: false,
  });

  console.log("userCartData", userCartData);

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

  // useEffect(() => {
  //   if (cart?.isError) {
  //     toast.error(cart?.Message, {
  //       autoClose: 2500,
  //     });
  //     dispatch(clearMessageOrError());
  //   } else {
  //     if (cart?.Message) {
  //       toast.warning(cart?.Message, {
  //         autoClose: 2500,
  //       });
  //     }
  //   }
  // }, [cart?.Message, cart?.isError, dispatch]);

  // useEffect(() => {
  //   if (user?.id == null) {
  //     dispatch(getLocalCartItems());
  //   } else {
  //     dispatch(fetchCart());
  //   }
  // }, [dispatch, user]);

  // useEffect(() => {
  //   if (user.id === null || user.id === undefined) {
  //     const handleStorageChange = (event: StorageEvent) => {
  //       if (event.key === cart_env) {
  //         dispatch(getLocalCartItems());
  //       }
  //     };

  //     window.addEventListener("storage", handleStorageChange);
  //     return () => {
  //       window.removeEventListener("storage", handleStorageChange);
  //     };
  //   }
  // }, [cart_env, dispatch, user.id]);

  // const closeMessage = () => {
  //   dispatch(clearMessageOrError());
  // };

  const itemCount = userCartData?.Items?.length || 0;
  const items = userCartData?.Items || [];
  const cartTotal = userCartData?.Total || 0;

  const isShippingFee = paymentData?.ShippingFeeBeforePrice > cartTotal;

  return (
    <Sheet open={open} onOpenChange={setOpen}>
      {isNavButton ? (
        <SheetTrigger className="group -m-2 flex items-center p-2">
          <div className="navBtn w-[38px] mbl:w-[48px] h-[40px]  border-2 flex border-muted rounded-md hover:bg-muted transition-all items-center justify-center">
            <ShoppingBagIcon className="navBtnIcon" />
            <span
              className={cn(
                " text-sm font-medium text-gray-700 group-hover:text-gray-800",
                {
                  "ml-1 mbl:ml-2": itemCount !== 0,
                }
              )}
            >
              {itemCount !== 0 ? itemCount : ""}
            </span>
          </div>
        </SheetTrigger>
      ) : (
        <button
          className={cn(
            "bg-primary text-white max-sm:text-[14px] font-medium sm:font-semibold px-4 py-3 sm:px-6 rounded-xl h-full"
          )}
        >
          View in Cart
        </button>
      )}

      <SheetContent className="flex w-full flex-col sm:pr-0 max-sm:px-3 sm:max-w-lg">
        <SheetHeader className="space-y-2.5 pr-2 sm:pr-6 ">
          <div className="flex justify-between ">
            <SheetTitle>Cart ({itemCount})</SheetTitle>
            <SheetClose asChild>
              <X size="28" className="cursor-pointer" />
            </SheetClose>
          </div>
        </SheetHeader>
        {/* 
        {cart?.Message && (
          <div className="bg-destructive text-white mr-[24px] p-3 text-center rounded-sm text-sm">
            <span>{cart.Message}</span>
            <X
              size="20"
              className="cursor-pointer float-right"
              onClick={closeMessage}
            />
          </div>
        )} */}

        {itemCount > 0 ? (
          <div className="overflow-y-auto">
            <div className="flex w-full flex-col pr-3 sm:pr-6">
              <div className="">
                {items?.map((item: any, index: number) => (
                  <CartItem item={item} key={index} />
                ))}
              </div>
            </div>
            <div className="space-y-4 pr-3 sm:pr-6">
              <Separator />
              <div className="space-y-1.5 text-sm">
                {isShippingFee && (
                  <div className="flex">
                    <span className="flex-1">Cart Total</span>
                    <span>₹ {cartTotal}</span>
                  </div>
                )}
                {paymentData?.ShippingFeeBeforePrice &&
                  paymentData?.ShippingFee && (
                    <div className="flex">
                      <span className="flex-1">Shipping</span>
                      {!isShippingFee ? (
                        <span className="text-primary font-semibold">Free</span>
                      ) : (
                        <span className="">₹ {paymentData?.ShippingFee}</span>
                      )}
                    </div>
                  )}
                <div className="flex">
                  <span className="flex-1">
                    {isShippingFee ? "Final Total" : "Total"}
                  </span>
                  <span>
                    ₹{" "}
                    {isShippingFee
                      ? cartTotal + paymentData?.ShippingFee
                      : cartTotal}
                  </span>
                </div>
              </div>

              <SheetFooter>
                <div className="w-full">
                  {isShippingFee && (
                    <p className="text-xs text-destructive text-center tracking-wide mb-1">
                      Add Items worth ₹{" "}
                      {paymentData?.ShippingFeeBeforePrice - cartTotal} more to
                      get free shipping
                    </p>
                  )}
                  {user && user.id ? (
                    <Link
                      href="/checkout/address"
                      className={buttonVariants({
                        className: "w-full",
                      })}
                      onClick={() => setOpen(false)}
                    >
                      Continue to Checkout
                    </Link>
                  ) : (
                    <Dialog>
                      <DialogTrigger
                        className={buttonVariants({
                          className: "w-full",
                        })}
                      >
                        Login to Continue
                      </DialogTrigger>
                      <DialogContent className="">
                        <h1 className="text-center text-xl font-bold mb-6 max-mbl:text-lg">
                          Please <span className="text-primary">Login</span>{" "}
                          before Checkout
                        </h1>
                        <div className="flex justify-center text-center">
                          <MainComponent
                            hrefLink="/checkout/address"
                            setOpen={setOpen}
                          />
                        </div>
                      </DialogContent>
                    </Dialog>
                  )}
                </div>
              </SheetFooter>
            </div>
          </div>
        ) : (
          <div className="flex h-full flex-col items-center justify-center space-y-1">
            <div
              aria-hidden="true"
              className="relative mb-4 h-60 w-60 text-muted-foreground"
            >
              <Image
                src={Logo}
                alt="Spraykaro Logo"
                fill
                className="object-cover"
              />
            </div>
            <div className="text-xl font-semibold">Your cart is empty</div>
            <SheetTrigger asChild>
              <Link
                href="/products"
                className={buttonVariants({
                  variant: "link",
                  size: "sm",
                  className: "text-sm text-muted-foreground",
                })}
              >
                Add items to your cart to checkout
              </Link>
            </SheetTrigger>
          </div>
        )}
      </SheetContent>
    </Sheet>
  );
};

export default CartComponent;