frontend/components/organisms/modals/QRPaymentModal.tsx

"use client";

import { QRCodeSVG } from "qrcode.react";
import { useEffect, useState } from "react";

import type { QRPaymentModalProps } from "./Modal.types";

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

const COUNTDOWN_SECONDS = 5;

export default function QRPaymentModal({
  isOpen,
  onClose,
  onConfirm,
  items,
  totalAmount,
}: QRPaymentModalProps) {
  const [qrValue, setQrValue] = useState("");
  const [timeLeft, setTimeLeft] = useState(COUNTDOWN_SECONDS);

  useEffect(() => {
    if (!isOpen) return;

    setQrValue(`payment:${totalAmount}:${Date.now()}`);
    setTimeLeft(COUNTDOWN_SECONDS);

    const interval = setInterval(() => {
      setTimeLeft((prev) => {
        if (prev <= 1) {
          clearInterval(interval);
          return 0;
        }
        return prev - 1;
      });
    }, 1000);

    return () => clearInterval(interval);
  }, [isOpen, totalAmount]);

  useEffect(() => {
    if (timeLeft === 0 && isOpen) {
      onConfirm();
    }
  }, [timeLeft, isOpen, onConfirm]);

  if (!isOpen) return null;

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center p-4"
      role="dialog"
      aria-modal="true"
      aria-labelledby="qr-modal-title"
    >
      <div
        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
        aria-hidden="true"
        onClick={onClose}
      />
      <div className="relative w-full max-w-lg rounded-2xl border border-(--color-border-light) bg-white p-6 shadow-xl">
        <h2
          id="qr-modal-title"
          className="text-foreground mb-4 text-xl font-bold"
        >
          Thanh toán QR Code
        </h2>

        {/* Invoice list */}
        <div className="mb-4">
          <h3 className="mb-2 text-sm font-semibold tracking-wide text-(--color-text-secondary) uppercase">
            Hóa đơn
          </h3>
          <div className="overflow-hidden rounded-xl border border-(--color-border-light)">
            {items.map((item, index) => (
              <div
                key={index}
                className="flex items-center justify-between border-b border-(--color-border-light) px-4 py-2.5 last:border-b-0"
              >
                <span className="text-foreground font-medium">{item.name}</span>
                <div className="flex items-center gap-3">
                  <span className="text-sm text-(--color-text-muted)">
                    x{item.quantity}
                  </span>
                  <span className="font-semibold text-(--color-primary)">
                    {formatPrice(item.price * item.quantity)}
                  </span>
                </div>
              </div>
            ))}
            <div className="flex items-center justify-between bg-(--color-border-light)/30 px-4 py-3">
              <span className="text-foreground font-bold">Tổng cộng</span>
              <span className="text-lg font-bold text-(--color-primary)">
                {formatPrice(totalAmount)}
              </span>
            </div>
          </div>
        </div>

        {/* QR code section */}
        <div className="flex flex-col items-center gap-3 rounded-xl border border-(--color-border-light) px-4 py-5">
          <p className="text-sm font-medium text-(--color-text-secondary)">
            Quét mã QR để thanh toán
          </p>
          {qrValue && <QRCodeSVG value={qrValue} size={180} />}
          <p className="text-sm text-(--color-text-muted)">
            Tự động xác nhận sau{" "}
            <span className="font-bold text-(--color-primary)">{timeLeft}</span>{" "}
            giây...
          </p>
        </div>
      </div>
    </div>
  );
}