frontend/components/molecules/cards/PaymentSummaryCard.tsx

import { formatPrice } from "@/app/(main)/payment/page";
import Button from "@/components/atoms/buttons/Button";
import { ReviewModal } from "@/components/organisms/modals";
import { cartClient } from "@/lib/apollo-clients";
import { useCart } from "@/lib/cart-context";
import { gql } from "@apollo/client";
import { useMutation } from "@apollo/client/react";
import Link from "next/link";
import { useState } from "react";

import type { PaymentSummaryCardProps } from "./Card.types";

export default function PaymentSummaryCard({
  totalPrice,
  isCustomer = false,
  backHref,
  eateryId,
}: PaymentSummaryCardProps) {
  const { cart, removeCart } = useCart();
  const [isReviewOpen, setIsReviewOpen] = useState(false);
  const [isQrModalOpen, setIsQrModalOpen] = useState(false);
  const handlePayment = () => {
    if (isCustomer) {
      setIsReviewOpen(true);
    }
  };
  return (
    <aside className="shrink-0 xl:w-85">
      <div className="bg-card sticky top-[calc(var(--spacing-header-height)+1rem)] rounded-2xl border border-(--color-border-light) p-4 md:p-5">
        <h2 className="mb-4 text-lg font-bold">Bill</h2>

        <div className="flex items-center justify-between border-b border-(--color-border-light) pb-4">
          <span className="text-(--color-text-muted)">Total</span>
          <span className="text-xl font-bold text-(--color-primary)">
            {formatPrice(totalPrice)}
          </span>
        </div>

        <div className="mt-4 grid grid-cols-2 gap-3">
          <Button
            style="payment"
            onClick={handlePayment}
            icon="fa-solid fa-money-bill-wave"
            size="md"
            variant="primary"
          >
            Cash
          </Button>

          <Button
            style="payment"
            onClick={() => {
              setIsQrModalOpen(true);
            }}
            icon="fa-solid fa-qrcode"
            size="md"
            variant="secondary"
          >
            QR Code
          </Button>

          <Link href={backHref || "/"} className={"col-span-2"}>
            <Button
              style="payment"
              onClick={() => setIsReviewOpen(false)}
              icon="fa-solid fa-arrow-rotate-left"
              size="md"
              variant="secondary"
              className="w-full"
            >
              Return
            </Button>
          </Link>
        </div>
      </div>

      <ReviewModal
        isOpen={isReviewOpen}
        onClose={() => {
          setIsReviewOpen(false);

          removeCart();
        }}
        eateryId={eateryId}
      />

      {isQrModalOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm">
          <div className="animate-in fade-in zoom-in w-full max-w-sm rounded-3xl bg-white p-6 text-center shadow-2xl duration-300">
            <h2 className="mb-4 text-xl font-bold">Scan to Pay</h2>

            {cart.paymentQrUrl ? (
              <div className="mb-4 rounded-2xl bg-gray-100 p-4">
                <img
                  src={cart.paymentQrUrl}
                  alt="Payment QR Code"
                  className="mx-auto h-auto w-full"
                />
              </div>
            ) : (
              <div className="p-10 text-gray-400">QR Code not available</div>
            )}

            <p className="mb-6 text-sm text-gray-500">
              Total:{" "}
              <span className="font-bold text-black">
                {formatPrice(totalPrice)}
              </span>
            </p>

            <Button
              onClick={() => {
                setIsQrModalOpen(false);
                setIsReviewOpen(true);
              }}
              variant="secondary"
              className="w-full"
            >
              Close
            </Button>
          </div>
        </div>
      )}
    </aside>
  );
}