frontend/components/molecules/cards/PaymentSummaryCard.tsx

"use client";

import Button from "@/components/atoms/buttons/Button";
import {
  CashPaymentModal,
  PaymentSuccessModal,
  QRPaymentModal,
} from "@/components/organisms/modals";
import type { InvoiceItem } from "@/components/organisms/modals";
import { useCart } from "@/lib/cart-context";
import Link from "next/link";
import { useState } from "react";

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

type ModalState = "none" | "cash" | "qr" | "success";

const formatPrice = (value: number) =>
  value.toLocaleString("vi-VN", { style: "currency", currency: "VND" });

export default function PaymentSummaryCard({
  cartItems,
  totalPrice,
  role,
  backHref,
}: PaymentSummaryCardProps) {
  const [openModal, setOpenModal] = useState<ModalState>("none");
  const { clearCart } = useCart();

  const isCustomer = role === "customer";

  const invoiceItems: InvoiceItem[] = cartItems.map((item) => ({
    name: item.name,
    quantity: item.quantity,
    price: item.price,
  }));

  const handlePaymentConfirm = () => setOpenModal("success");
  const handleSuccessClose = () => {
    clearCart();
    setOpenModal("none");
  };

  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">Hóa đơn</h2>

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

        <div className="mt-4 grid grid-cols-2 gap-3">
          {!isCustomer && (
            <Button
              style="payment"
              onClick={() => setOpenModal("cash")}
              icon="fa-solid fa-money-bill-wave"
              size="md"
              variant="primary"
            >
              Tiền mặt
            </Button>
          )}

          <Button
            style="payment"
            onClick={() => setOpenModal("qr")}
            icon="fa-solid fa-qrcode"
            size="md"
            variant={isCustomer ? "primary" : "secondary"}
            className={isCustomer ? "col-span-2" : ""}
          >
            QR Code
          </Button>

          <Link href={backHref || "/"} className="col-span-2">
            <Button
              style="payment"
              icon="fa-solid fa-arrow-rotate-left"
              size="md"
              variant="secondary"
              className="w-full"
            >
              Quay về
            </Button>
          </Link>
        </div>
      </div>

      <CashPaymentModal
        isOpen={openModal === "cash"}
        onClose={() => setOpenModal("none")}
        onConfirm={handlePaymentConfirm}
        items={invoiceItems}
        totalAmount={totalPrice}
      />

      <QRPaymentModal
        isOpen={openModal === "qr"}
        onClose={() => setOpenModal("none")}
        onConfirm={handlePaymentConfirm}
        items={invoiceItems}
        totalAmount={totalPrice}
      />

      <PaymentSuccessModal
        isOpen={openModal === "success"}
        onClose={handleSuccessClose}
      />
    </aside>
  );
}