"use client";

import { useGetFoods } from "@/app/[name]/(Main)/hooks/useMenuData";
import { useGetProfile } from "@/app/[name]/(Profile)/profile/hooks/userProfileData";
import Button from "@/components/button/PrimaryButton";
import { glassSurfaceNav } from "@/lib/styles/glassSurface";
import Link from "next/link";
import { useParams, usePathname, useRouter } from "next/navigation";
import React from "react";
import { useTranslation } from "react-i18next";
import { useCart } from "../hook/useCart";
import { useGetCartItems } from "../hooks/useCartData";
import { guestCartItemsToFoods } from "../lib/cartUtils";
import { useCartStore } from "../store/Store";

interface CartSummaryProps {
  isPremium: boolean;
  hasItems: boolean;
}

const CartSummary = ({ isPremium, hasItems }: CartSummaryProps) => {
  const params = useParams();
  const router = useRouter();
  const pathname = usePathname();
  const name = params.name as string;
  const { isSuccess } = useGetProfile();
  const { data: foodsResponse } = useGetFoods();
  const { items } = useCart();
  const { data: cartData } = useGetCartItems(isSuccess);
  const { t } = useTranslation("parallels", { keyPrefix: "Cart" });
  const { description, setDescription } = useCartStore();

  const totalPrice = React.useMemo(() => {
    if (isSuccess && cartData?.data?.total !== undefined) {
      return cartData.data.total;
    }

    const foods = foodsResponse?.data ?? [];
    const cartFoods = guestCartItemsToFoods(items, foods);
    return cartFoods.reduce((sum, food) => {
      const qty = items[String(food.id)]?.quantity ?? 0;
      const basePrice = food.price ?? 0;
      const discount = food.discount ?? 0;
      const priceAfterDiscount = basePrice * (1 - discount / 100);
      return sum + priceAfterDiscount * qty;
    }, 0);
  }, [isSuccess, cartData?.data?.total, foodsResponse?.data, items]);

  const formatPrice = React.useCallback((value: number) => value.toLocaleString("fa-IR"), []);

  if (!hasItems) {
    return null;
  }

  return (
    <>
      {isPremium && (
        <div className="mt-2 mb-4">
          <div className="relative">
            <h3 className="text-sm">{t("InputDescription.Label")}</h3>
            <textarea
              className="w-full px-4 py-2.5 mt-4 text-sm2 leading-6 outline-0 border border-white rounded-normal bg-white/50 resize-none focus:ring-0"
              placeholder={t("InputDescription.Placeholder")}
              id="description"
              name="description"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
            ></textarea>
            <span className="absolute top-4 right-2 px-2 bg-background text-foreground text-xs"></span>
          </div>
        </div>
      )}

      <div className={glassSurfaceNav("fixed bottom-0 left-0 right-0 z-50 border-t border-border p-4 w-full")}>
        <div className="flex justify-between items-center gap-4">
          <div className="flex flex-col">
            <div className="text-xs text-gray-400 dark:text-disabled-text">{t("PayableAmountLabel")}</div>
            {isPremium && <div className="text-sm mt-2 font-semibold dark:text-foreground">{formatPrice(totalPrice)} تومان</div>}
          </div>

          {isPremium && (
            <Link
              href={"order/checkout/0"}
              onClick={(event) => {
                if (!isSuccess) {
                  event.preventDefault();
                  const redirectUrl = encodeURIComponent(pathname);
                  router.replace(`/${name}/auth?redirect=${redirectUrl}`);
                  return;
                }
              }}
            >
              <Button className="w-fit! px-10 dark:bg-white dark:text-black! dark:hover:bg-gray-100">{t("ButtonCheckout")}</Button>
            </Link>
          )}
          {!isPremium && <div className="text-sm mt-2 font-semibold dark:text-foreground">{formatPrice(totalPrice)} تومان</div>}
        </div>
      </div>
    </>
  );
};

export default CartSummary;
