"use client";

import { useCallback } from "react";
import { X, ExternalLink } from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";

interface PaymentGatewayModalProps {
  isOpen: boolean;
  onClose: () => void;
  gatewayUrl: string;
  isAr?: boolean;
}

export default function PaymentGatewayModal({
  isOpen,
  onClose,
  gatewayUrl,
  isAr = true,
}: PaymentGatewayModalProps) {
  const t = {
    title: isAr ? "بوابة الدفع الإلكتروني" : "Payment Gateway",
    description: isAr
      ? "سيتم نقلك الآن إلى صفحة بوابة الدفع لإتمام العملية. بعد الانتهاء سيتم إعادتك تلقائياً إلى هذه الصفحة."
      : "You will be redirected to the payment gateway to complete your payment. After finishing, you'll be returned here automatically.",
    open_new_window: isAr
      ? "الانتقال إلى بوابة الدفع"
      : "Continue to payment gateway",
    close: isAr ? "إغلاق" : "Close",
    payment_note: isAr
      ? "بعد إتمام الدفع، سيتم تحديث الصفحة تلقائياً"
      : "After completing payment, the page will refresh automatically",
  };

  // Same-tab handoff to Telr. Gateway meta + return_path are saved when the session was created (parent).
  const openInNewWindow = useCallback(() => {
    window.location.href = gatewayUrl;
    onClose();
  }, [gatewayUrl, onClose]);

  if (!isOpen) return null;

  return (
    <AnimatePresence>
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/60 backdrop-blur-sm p-4"
        onClick={(e) => {
          if (e.target === e.currentTarget) onClose();
        }}
      >
        <motion.div
          initial={{ scale: 0.95, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          exit={{ scale: 0.95, opacity: 0 }}
          className="w-full max-w-4xl h-[85vh] bg-white rounded-2xl shadow-2xl overflow-hidden flex flex-col"
        >
          <header className="flex items-center justify-between px-5 py-4 border-b bg-gradient-to-r from-[#0f5132] to-[#1a7f5a]">
            <h2 className="text-lg font-bold text-white flex items-center gap-2">
              <span className="w-8 h-8 rounded-lg bg-white/20 flex items-center justify-center">
                💳
              </span>
              {t.title}
            </h2>
            <button
              onClick={onClose}
              className="w-9 h-9 rounded-lg bg-white/20 hover:bg-white/30 flex items-center justify-center text-white transition"
            >
              <X size={20} />
            </button>
          </header>

          <div className="flex-1 bg-slate-50 flex flex-col items-center justify-center px-6 py-10 text-center">
            <div className="w-20 h-20 rounded-2xl bg-emerald-50 flex items-center justify-center mb-4">
              <span className="text-3xl">💳</span>
            </div>
            <p className="text-sm text-slate-700 max-w-md mb-3 leading-7">
              {t.description}
            </p>
            <p className="text-xs text-slate-500 max-w-md mb-6">
              {t.payment_note}
            </p>

            {/* Primary CTA buttons */}
            <div className="flex flex-col sm:flex-row items-center justify-center gap-3 mt-2">
              <button
                type="button"
                onClick={openInNewWindow}
                className="px-6 py-2.5 rounded-xl bg-[#0f5132] hover:bg-[#0d4429] text-white text-sm font-bold shadow-sm flex items-center gap-2 min-w-[200px] justify-center"
              >
                <ExternalLink size={16} />
                {t.open_new_window}
              </button>
              <button
                type="button"
                onClick={onClose}
                className="px-5 py-2.5 rounded-xl border border-slate-300 text-slate-700 text-xs font-medium hover:bg-white bg-slate-50"
              >
                {t.close}
              </button>
            </div>
          </div>

          {/* Footer (ثانوي فقط للمعلومة) */}
          <footer className="px-5 py-3 border-t bg-slate-50 flex items-center justify-between">
            <p className="text-[11px] text-slate-500">{t.payment_note}</p>
            <button
              type="button"
              onClick={openInNewWindow}
              className="hidden sm:inline-flex text-[11px] text-emerald-700 hover:text-emerald-800 font-medium items-center gap-1"
            >
              <ExternalLink size={13} />
              {t.open_new_window}
            </button>
          </footer>
        </motion.div>
      </motion.div>
    </AnimatePresence>
  );
}