manoon-headless/src/components/cart/CartDrawer.tsx

"use client";

import { useEffect, useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import Image from "next/image";
import Link from "next/link";
import { X, Minus, Plus, Trash2, ShoppingBag } from "lucide-react";
import { useTranslations, useLocale } from "next-intl";
import { useSaleorCheckoutStore } from "@/stores/saleorCheckoutStore";
import { formatPrice } from "@/lib/saleor";

export default function CartDrawer() {
  const t = useTranslations("Cart");
  const locale = useLocale();
  const {
    checkout,
    isOpen,
    isLoading,
    error,
    closeCart,
    removeLine,
    updateLine,
    getTotal,
    getLineCount,
    getLines,
    initCheckout,
    clearError,
  } = useSaleorCheckoutStore();

  const lines = getLines();
  const total = getTotal();
  const lineCount = getLineCount();
  const [initialized, setInitialized] = useState(false);

  useEffect(() => {
    if (!initialized) {
      initCheckout();
      setInitialized(true);
    }
  }, [initialized]);

  useEffect(() => {
    if (isOpen) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "";
    }
    return () => {
      document.body.style.overflow = "";
    };
  }, [isOpen]);

  return (
    <AnimatePresence>
      {isOpen && (
        <>
          <motion.div
            className="fixed inset-0 bg-black/40 backdrop-blur-sm z-50"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            onClick={closeCart}
          />

          <motion.div
            className="fixed top-0 right-0 bottom-0 w-full max-w-[420px] bg-white z-50 shadow-2xl flex flex-col"
            initial={{ x: "100%" }}
            animate={{ x: 0 }}
            exit={{ x: "100%" }}
            transition={{ type: "tween", duration: 0.3, ease: [0.4, 0, 0.2, 1] }}
          >
            <div className="flex items-center justify-between px-6 py-5 border-b border-[#e5e5e5]">
              <h2 className="text-sm uppercase tracking-[0.1em] font-medium">
                {t("yourCart")} ({lineCount})
              </h2>
              <button
                onClick={closeCart}
                className="p-2 -mr-2 hover:bg-black/5 rounded-full transition-colors"
                aria-label={t("closeCart")}
              >
                <X className="w-5 h-5" strokeWidth={1.5} />
              </button>
            </div>

            <AnimatePresence>
              {error && (
                <motion.div
                  initial={{ height: 0, opacity: 0 }}
                  animate={{ height: "auto", opacity: 1 }}
                  exit={{ height: 0, opacity: 0 }}
                  className="overflow-hidden"
                >
                  <div className="p-4 bg-red-50 border-b border-red-100">
                    <p className="text-red-600 text-sm">{error}</p>
                    <button
                      onClick={clearError}
                      className="text-red-600 text-xs underline mt-1 hover:no-underline"
                    >
                      {t("dismiss")}
                    </button>
                  </div>
                </motion.div>
              )}
            </AnimatePresence>

            <div className="flex-1 overflow-y-auto">
              {lines.length === 0 ? (
                <div className="flex flex-col items-center justify-center h-full px-6">
                  <div className="w-16 h-16 rounded-full bg-[#f8f9fa] flex items-center justify-center mb-6">
                    <ShoppingBag className="w-8 h-8 text-[#999999]" strokeWidth={1.5} />
                  </div>
                  <p className="text-[#666666] mb-2">{t("yourCartEmpty")}</p>
                  <p className="text-sm text-[#999999] mb-8 text-center">
                    {t("looksLikeEmpty")}
                  </p>
                  <Link
                    href={`/${locale}/products`}
                    onClick={closeCart}
                    className="inline-block px-8 py-3 bg-black text-white text-sm uppercase tracking-[0.1em] hover:bg-[#333333] transition-colors"
                  >
                    {t("startShopping")}
                  </Link>
                </div>
              ) : (
                <div className="p-6 space-y-6">
                  {lines.map((line) => (
                    <div key={line.id} className="flex gap-4">
                      <div className="w-24 h-24 bg-[#f8f9fa] relative flex-shrink-0 overflow-hidden">
                        {line.variant.product.media[0]?.url ? (
                          <Image
                            src={line.variant.product.media[0].url}
                            alt={line.variant.product.name}
                            fill
                            className="object-cover"
                            sizes="96px"
                          />
                        ) : (
                          <div className="absolute inset-0 flex items-center justify-center text-[#999999]">
                            <ShoppingBag className="w-6 h-6" strokeWidth={1.5} />
                          </div>
                        )}
                      </div>

                      <div className="flex-1 min-w-0">
                        <h3 className="text-sm font-medium truncate">
                          {line.variant.product.name}
                        </h3>
                        {line.variant.name !== "Default" && (
                          <p className="text-[#999999] text-xs mt-0.5">
                            {line.variant.name}
                          </p>
                        )}
                        <p className="text-[#666666] text-sm mt-2">
                          {formatPrice(
                            line.variant.pricing?.price?.gross?.amount || 0,
                            line.variant.pricing?.price?.gross?.currency
                          )}
                        </p>

                        <div className="flex items-center justify-between mt-3">
                          <div className="flex items-center border border-[#e5e5e5]">
                            <button
                              onClick={() => updateLine(line.id, line.quantity - 1)}
                              disabled={isLoading || line.quantity <= 1}
                              className="w-8 h-8 flex items-center justify-center hover:bg-[#f8f9fa] transition-colors disabled:opacity-50"
                            >
                              <Minus className="w-3 h-3" />
                            </button>
                            <span className="w-10 text-center text-sm font-medium">
                              {line.quantity}
                            </span>
                            <button
                              onClick={() => updateLine(line.id, line.quantity + 1)}
                              disabled={isLoading}
                              className="w-8 h-8 flex items-center justify-center hover:bg-[#f8f9fa] transition-colors disabled:opacity-50"
                            >
                              <Plus className="w-3 h-3" />
                            </button>
                          </div>

                          <button
                            onClick={() => removeLine(line.id)}
                            disabled={isLoading}
                            className="p-2 text-[#999999] hover:text-red-500 transition-colors"
                            aria-label={t("removeItem")}
                          >
                            <Trash2 className="w-4 h-4" strokeWidth={1.5} />
                          </button>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>

            {lines.length > 0 && (
              <div className="border-t border-[#e5e5e5] bg-white">
                <div className="p-6 space-y-3">
                  <div className="flex items-center justify-between text-sm">
                    <span className="text-[#666666]">{t("subtotal")}</span>
                    <span className="font-medium">
                      {formatPrice(checkout?.subtotalPrice?.gross?.amount || 0)}
                    </span>
                  </div>

                  <div className="flex items-center justify-between text-sm">
                    <span className="text-[#666666]">{t("shipping")}</span>
                    <span className="text-[#666666]">
                      {checkout?.shippingPrice?.gross?.amount
                        ? formatPrice(checkout.shippingPrice.gross.amount)
                        : t("calculatedAtCheckout")
                      }
                    </span>
                  </div>

                  <div className="border-t border-[#e5e5e5] my-4" />

                  <div className="flex items-center justify-between">
                    <span className="text-sm uppercase tracking-[0.05em] font-medium">{t("total")}</span>
                    <span className="text-lg font-medium">
                      {formatPrice(total)}
                    </span>
                  </div>

                  {(checkout?.subtotalPrice?.gross?.amount || 0) < 5000 && (
                    <p className="text-xs text-[#666666] text-center">
                      {t("freeShippingOver", { amount: formatPrice(5000) })}
                    </p>
                  )}
                </div>

                <div className="px-6 pb-6 space-y-3">
                  <Link
                    href={`/${locale}/checkout`}
                    onClick={closeCart}
                    className="block w-full py-4 bg-black text-white text-center text-sm uppercase tracking-[0.1em] font-medium hover:bg-[#333333] transition-colors"
                  >
                    {isLoading ? t("processing") : t("checkout")}
                  </Link>

                  <button
                    onClick={closeCart}
                    className="block w-full py-3 text-center text-sm text-[#666666] hover:text-black transition-colors"
                  >
                    {t("continueShopping")}
                  </button>
                </div>
              </div>
            )}
          </motion.div>
        </>
      )}
    </AnimatePresence>
  );
}