import React from "react";
import { useAppDispatch, useAppSelector } from "../hooks/useRedux";
import { closePopup } from "../features/popup/popupSlice";
import { useNavigate } from "react-router-dom";

const Popup = () => {
  const popup = useAppSelector((state) => state.popup.notification);
  const dispatch = useAppDispatch();
  const navigate = useNavigate();
  if (!popup.isOpen) return null;
  return (
    <div className="fixed inset-0 z-[100] 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 transition-opacity"
        onClick={() => {
          dispatch(closePopup());
        }}
      ></div>

      {/* Modal Content */}
      <div className="relative bg-white rounded-[40px] p-8 md:p-10 w-full max-w-sm shadow-2xl transform transition-all animate-in zoom-in-95 duration-200 scale-100 flex flex-col items-center text-center">
        {/* Icon */}
        <div
          className={`w-20 h-20 rounded-full flex items-center justify-center mb-6 shadow-lg ${
            popup.isSuccess
              ? "bg-green-50 text-[#00c087]"
              : "bg-red-50 text-[#EE0434]"
          }`}
        >
          {popup.isSuccess ? (
            <svg
              className="w-10 h-10"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={3}
                d="M5 13l4 4L19 7"
              />
            </svg>
          ) : (
            <svg
              className="w-10 h-10"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={3}
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          )}
        </div>

        {/* Text */}
        <h3
          className={`text-2xl font-black mb-3 tracking-tight ${
            popup.isSuccess ? "text-slate-900" : "text-[#EE0434]"
          }`}
        >
          {popup.title}
        </h3>
        <p className="text-slate-500 font-medium leading-relaxed mb-8">
          {popup.message}
        </p>

        {/* Button */}
        <div className="w-full flex flex-col md:flex-row gap-1 md:gap-1">
          {popup.hasRightButton && (
            <button
              onClick={() => {
                if (popup.rightButtonAction == "OPEN_ORDER_HISTORY") {
                  navigate("/order-history");
                }
                dispatch(closePopup());
              }}
              className="mr-4 w-full py-4 rounded-2xl font-black text-xm shadow-lg active:scale-95 transition-all bg-[#EE0434] hover:bg-[#d10029] text-white shadow-red-200 p-2"
            >
              {popup.rightButtonText}
            </button>
          )}
          <button
            onClick={() => {
              dispatch(closePopup());
            }}
            className={`w-full py-4 rounded-2xl font-black text-xm shadow-lg active:scale-95 transition-all p-2 ${
              popup.isSuccess
                ? "bg-[#00c087] hover:bg-[#00a876] text-white shadow-green-200"
                : "bg-[#EE0434] hover:bg-[#d10029] text-white shadow-red-200"
            }`}
          >
            {popup.buttonText}
          </button>
        </div>
      </div>
    </div>
  );
};

export default Popup;
