import React from 'react';

interface UpgradeModalProps {
  isOpen: boolean;
  onClose: () => void;
  onUpgrade: () => void;
  resetDate?: number;
  mode?: 'limit' | 'feature'; // 'limit' for credits, 'feature' for custom model creation
}

const UpgradeModal: React.FC<UpgradeModalProps> = ({ isOpen, onClose, onUpgrade, resetDate, mode = 'limit' }) => {
  if (!isOpen) return null;

  const isFeatureMode = mode === 'feature';

  // Calculate formatted date for reset if available
  const resetDateStr = resetDate 
    ? new Date(resetDate * 1000).toLocaleString('fa-IR', { weekday: 'long', hour: '2-digit', minute: '2-digit' })
    : 'فردا';

  // --- RENDER FEATURE GATE (DARK DESIGN) ---
  if (isFeatureMode) {
    return (
      <div className="fixed inset-0 z-[100] flex items-center justify-center p-2 sm:p-4">
        <div 
          className="absolute inset-0 bg-black/80 backdrop-blur-xl transition-opacity animate-[fadeIn_0.5s_ease-out]"
          onClick={onClose}
        ></div>

        <div className="relative bg-[#0f172a] rounded-[2rem] sm:rounded-[2.5rem] w-full max-w-[380px] max-h-[92vh] flex flex-col p-5 sm:p-8 shadow-[0_0_50px_rgba(139,92,246,0.3)] animate-[scaleIn_0.5s_cubic-bezier(0.34,1.56,0.64,1)] overflow-hidden border border-white/10">
          
          <div className="absolute -top-24 -right-24 w-64 h-64 bg-purple-600/20 rounded-full blur-[80px] animate-pulse pointer-events-none"></div>
          <div className="absolute -bottom-24 -left-24 w-64 h-64 bg-blue-600/20 rounded-full blur-[80px] animate-pulse pointer-events-none"></div>
          
          <div className="relative z-10 overflow-y-auto custom-scrollbar pr-1 flex flex-col items-center">
              <div className="relative mb-5 sm:mb-6 text-center">
                  <div className="relative inline-block">
                      <div className="absolute inset-0 bg-gradient-to-tr from-amber-400 to-purple-600 blur-2xl opacity-40 rounded-full animate-pulse"></div>
                      <div className="w-16 h-16 sm:w-20 sm:h-20 bg-gradient-to-tr from-[#1e293b] to-[#334155] rounded-[1.5rem] sm:rounded-[2rem] flex items-center justify-center shadow-2xl relative z-10 border border-white/20 transform hover:rotate-6 transition-transform">
                          <i className="fas fa-wand-sparkles text-2xl sm:text-3xl text-transparent bg-clip-text bg-gradient-to-br from-amber-300 via-yellow-400 to-amber-600"></i>
                      </div>
                  </div>
              </div>

              <div className="text-center w-full">
                  <h3 className="text-lg sm:text-xl font-black text-white mb-3 sm:mb-4 leading-tight text-center">
                      استودیوی اختصاصی خودت رو بساز
                  </h3>
                  
                  <div className="bg-white/5 backdrop-blur-md rounded-2xl sm:rounded-3xl p-4 sm:p-5 mb-5 sm:mb-6 border border-white/10 text-right">
                      <div className="space-y-3 sm:space-y-4">
                          <p className="text-gray-300 text-[12px] sm:text-[13px] leading-[1.8] font-medium">
                              برای ساخت مدل تغییر صدا با هوش مصنوعی آلفا باید اشتراک برنامه رو داشته باشید. 
                              <span className="text-amber-400 font-black mx-1">مدل‌های اختصاصی شما</span> 
                              مثل بقیه مدل‌ها در این صفحه برای همیشه ذخیره میشن.
                          </p>
                          <div className="flex flex-col gap-1.5 pt-1">
                              <div className="flex items-center gap-2 text-[10px] sm:text-[11px] text-gray-400 bg-white/5 p-2 rounded-xl">
                                  <i className="fas fa-check-circle text-green-500"></i>
                                  <span>شبیه‌سازی دقیق هر صدایی (حتی خودت)</span>
                              </div>
                              <div className="flex items-center gap-2 text-[10px] sm:text-[11px] text-gray-400 bg-white/5 p-2 rounded-xl">
                                  <i className="fas fa-check-circle text-green-500"></i>
                                  <span>بالاترین کیفیت + جدیدترین تکنولوژی</span>
                              </div>
                              <div className="flex items-center gap-2 text-[10px] sm:text-[11px] text-gray-400 bg-white/5 p-2 rounded-xl">
                                  <i className="fas fa-check-circle text-green-500"></i>
                                  <span>ذخیره دائمی در لیست گویندگان اصلی</span>
                              </div>
                              <div className="flex items-center gap-2 text-[10px] sm:text-[11px] text-gray-400 bg-white/5 p-2 rounded-xl">
                                  <i className="fas fa-check-circle text-green-500"></i>
                                  <span>تولید نامحدود تا آخرین روز اشتراک</span>
                              </div>
                              <div className="flex items-center gap-2 text-[10px] sm:text-[11px] text-gray-400 bg-white/5 p-2 rounded-xl">
                                  <i className="fas fa-check-circle text-green-500"></i>
                                  <span>فعال شدن تمام بخش های برنامه</span>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>

              <div className="space-y-3 w-full">
                  <button 
                      onClick={onUpgrade}
                      className="w-full py-3.5 sm:py-4 rounded-xl sm:rounded-2xl font-black text-sm sm:text-base text-gray-900 bg-gradient-to-r from-amber-300 via-yellow-400 to-amber-600 hover:from-amber-400 hover:to-amber-700 shadow-[0_0_20px_rgba(245,158,11,0.2)] transition-all transform hover:-translate-y-1 active:scale-95 flex items-center justify-center gap-2 group"
                  >
                      <span>تهیه اشتراک برنامه</span>
                      <i className="fas fa-bolt-lightning text-lg group-hover:animate-bounce"></i>
                  </button>
                  
                  <button 
                      onClick={onClose}
                      className="w-full py-2 rounded-lg font-bold text-[11px] sm:text-xs text-gray-500 hover:text-white transition-colors"
                  >
                      فعلاً نه، برمی‌گردم
                  </button>
              </div>
          </div>
        </div>
      </div>
    );
  }

  // --- RENDER CREDIT LIMIT (WHITE DESIGN) ---
  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
      <div 
        className="absolute inset-0 bg-black/60 backdrop-blur-md transition-opacity animate-[fadeIn_0.5s_ease-out]"
        onClick={onClose}
      ></div>

      <div className="relative bg-white rounded-[2rem] w-full max-w-[380px] p-8 shadow-2xl animate-[scaleIn_0.4s_cubic-bezier(0.34,1.56,0.64,1)] overflow-hidden text-center border-4 border-amber-100">
        
        {/* Animated Icon Background */}
        <div className="absolute top-0 left-0 w-full h-32 bg-gradient-to-b from-amber-50 to-transparent -z-10"></div>

        {/* Floating Crown Icon */}
        <div className="relative mb-6 inline-block">
             <div className="absolute inset-0 bg-amber-400 blur-xl opacity-20 rounded-full animate-pulse"></div>
             <div className="w-24 h-24 bg-gradient-to-tr from-amber-300 to-yellow-500 rounded-full flex items-center justify-center shadow-lg shadow-amber-500/30 animate-[bounce_3s_infinite]">
                <i className="fas fa-crown text-4xl text-white drop-shadow-md"></i>
             </div>
             <div className="absolute -top-2 -right-2 w-8 h-8 bg-white rounded-full flex items-center justify-center shadow-md animate-[spin_10s_linear_infinite]">
                <i className="fas fa-star text-amber-500 text-xs"></i>
             </div>
        </div>

        <h3 className="text-2xl font-black text-gray-800 mb-2">اعتبار شما تمام شد!</h3>
        
        <div className="bg-amber-50 rounded-xl p-3 border border-amber-100 mb-6">
             <p className="text-gray-600 text-[11px] leading-relaxed">
                شما از ۱ اعتبار رایگان خود برای این مدل در امروز استفاده کردید. از مدل دیگری استفاده کنید و یا با تهیه اشتراک نامحدود تولید کنید.
                <br/>
                <span className="text-[10px] text-amber-700 font-bold mt-2 block">
                    زمان شارژ مجدد: {resetDateStr}
                </span>
             </p>
        </div>

        <div className="space-y-3">
          <button 
            onClick={onUpgrade}
            className="w-full py-4 rounded-xl font-bold text-base text-gray-900 bg-gradient-to-r from-amber-300 via-yellow-400 to-amber-500 hover:from-amber-400 hover:to-amber-600 shadow-xl shadow-amber-500/20 transition-all transform hover:-translate-y-1 active:scale-95 flex items-center justify-center gap-2 group"
          >
            <span>ارتقا به نسخه نامحدود</span>
            <i className="fas fa-rocket group-hover:animate-ping"></i>
          </button>
          
          <button 
            onClick={onClose}
            className="w-full py-3 rounded-xl font-bold text-sm text-gray-500 hover:bg-gray-50 transition-colors"
          >
            متوجه شدم، فعلا نه
          </button>
        </div>
        
        <div className="mt-4 flex items-center justify-center gap-2 opacity-60">
            <i className="fas fa-infinity text-amber-500"></i>
            <span className="text-[10px] text-gray-400">دسترسی نامحدود با ارتقای حساب</span>
        </div>

      </div>
    </div>
  );
};

export default UpgradeModal;