"use client";

import React, { useEffect } from "react";
import { createPortal } from "react-dom";
import Image from "next/image";
import { X } from "lucide-react";
import { AnimatePresence, motion } from "framer-motion";

interface SubscriptionRequiredModalProps {
  isOpen: boolean;
  onClose: () => void;
  onViewPlans?: () => void;
  title?: string;
  description?: React.ReactNode;
}

const DEFAULT_DESCRIPTION = (
  <>
    <span className="text-neutral-500 font-normal">
      To ask a question, you need an active subscription.{" "}
    </span>
    <span className="text-black font-semibold">Subscribe to a plan</span>
    <span className="text-neutral-500 font-normal">
      {" "}
      and get full access to our expert Q&amp;A community.
    </span>
  </>
);

const SubscriptionRequiredModal: React.FC<SubscriptionRequiredModalProps> = ({
  isOpen,
  onClose,
  onViewPlans,
  title = "Subscription Required",
  description = DEFAULT_DESCRIPTION,
}) => {
  useEffect(() => {
    if (!isOpen) return;

    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };

    const originalOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    document.addEventListener("keydown", handleKeyDown);

    return () => {
      document.body.style.overflow = originalOverflow;
      document.removeEventListener("keydown", handleKeyDown);
    };
  }, [isOpen, onClose]);

  if (typeof document === "undefined") return null;

  return createPortal(
    <AnimatePresence>
      {isOpen && (
        <motion.div
          role="dialog"
          aria-modal="true"
          aria-labelledby="subscription-required-title"
          onClick={onClose}
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.2 }}
          className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 px-4 backdrop-blur-sm"
        >
          <motion.div
            onClick={(e) => e.stopPropagation()}
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.95 }}
            transition={{ duration: 0.2 }}
            className="relative w-full max-w-[534px] bg-white rounded-[19px] shadow-xl"
          >
        {/* Close button */}
        <button
          onClick={onClose}
          aria-label="Close"
          className="absolute top-[11px] right-[12px] w-[29px] h-[29px] bg-white rounded-full border border-[#DBDBDB] flex items-center justify-center hover:bg-neutral-50 transition-colors cursor-pointer z-10"
        >
          <X size={16} className="text-[#737373]" strokeWidth={1.5} />
        </button>

        {/* Content */}
        <div className="flex flex-col items-center gap-[14px] px-[25px] pt-[35px] pb-[32px]">
          {/* Lock icon badge */}
          <div className="relative w-[59px] h-[59px] rounded-full bg-[#FDF6EB] flex items-center justify-center shrink-0">
            <Image
              src="/assets/icons/lock.svg"
              alt=""
              width={28}
              height={28}
            />
          </div>

          {/* Title + Description */}
          <div className="w-full flex flex-col items-center gap-1.5">
            <h2
              id="subscription-required-title"
              className="self-stretch text-center font-sans text-[28px] font-bold leading-[46px] tracking-[-0.02em] text-black"
            >
              {title}
            </h2>
            <p className="max-w-[448px] text-center font-serif text-[20px] leading-[29px] tracking-[-0.01em]">
              {description}
            </p>
          </div>

          {/* Actions */}
          <div className="flex flex-col items-center gap-2.5">
            <button
              onClick={onViewPlans}
              className="h-11 px-[23px] py-[7px] bg-[#08A1EE] rounded-[37px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.03)] flex items-center justify-center gap-[3px] font-sans text-[18px] font-semibold leading-[120%] tracking-[-0.01em] text-white hover:bg-[#0791d4] transition-colors cursor-pointer"
            >
              View Subscription Plans
            </button>
            <button
              onClick={onClose}
              className="opacity-50 font-sans text-[14px] font-semibold leading-[120%] tracking-[-0.01em] text-[#737373] hover:opacity-70 transition-opacity cursor-pointer"
            >
              Maybe Later
            </button>
          </div>
        </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>,
    document.body,
  );
};

export default SubscriptionRequiredModal;