import React from "react";
import { useAppDispatch, useAppSelector } from "../hooks/useRedux";
import { closeQRModal } from "../features/popup/popupSlice";

const QRCodeModal = () => {
  const popup = useAppSelector((state) => state.popup.qrModal);
  const dispatch = useAppDispatch();
  if (popup.isOpen === false) {
    return null;
  }

  return (
    <div className="fixed inset-0 z-[150] flex items-center justify-center p-4 animate-in fade-in duration-200">
      {/* Backdrop */}
      <div
        className="absolute inset-0 bg-slate-900/60 backdrop-blur-sm"
        onClick={() => {
          dispatch(closeQRModal());
        }}
      ></div>

      {/* Modal Container */}
      <div className="relative bg-white rounded-[32px] w-full max-w-[340px] shadow-2xl transform transition-all animate-in zoom-in-95 duration-200 overflow-hidden flex flex-col">
        <div className="p-8 pb-6 text-center">
          <h3 className="text-xl md:text-2xl font-black text-slate-900 mb-8 tracking-tight">
            Mã QR eSIM
          </h3>

          <div className="bg-slate-50 p-4 rounded-[24px] mb-8 border border-slate-100">
            <div className="aspect-square w-full bg-white rounded-xl flex items-center justify-center p-3 shadow-sm">
              {/* Placeholder QR Code for demo purposes */}
              <img
                src={popup.qrData}
                alt="eSIM QR Code"
                className="w-full h-full object-contain mix-blend-multiply"
              />
            </div>
          </div>

          <button
            onClick={() => {
              dispatch(closeQRModal());
            }}
            className="w-full py-3.5 rounded-xl font-bold text-white bg-[#EE0434] hover:bg-[#EE0434] active:scale-[0.98] transition-all shadow-lg shadow-cyan-100/50 text-base md:text-lg"
          >
            Đóng
          </button>
        </div>
      </div>
    </div>
  );
};

export default QRCodeModal;
