"use client";

import React, { useEffect, useState } from "react";
import { motion } from "framer-motion";
import { useTheme } from "next-themes";

interface SubscriptionPlan {
  duration: "1month" | "3month" | "1year";
  label: string;
  price: number;
  discount?: number;
}

interface SubscriptionCardProps {
  benefits: string[];
  plans: SubscriptionPlan[];
  currency?: string;
  onPurchase?: (plan: SubscriptionPlan) => void;
}

const SubscriptionCard: React.FC<SubscriptionCardProps> = ({
    benefits,
    plans,
    currency = "تومان",
    onPurchase,
  }) => {
    const [selectedPlan, setSelectedPlan] = useState(plans[0].duration);
    const [isDark, setIsDark] = useState(false);
  
    // تشخیص تم از کلاس html
    useEffect(() => {
      const checkTheme = () => {
        const isDarkMode = document.documentElement.classList.contains("dark");
        setIsDark(isDarkMode);
      };
  
      checkTheme();
  
      //监听 تم تغییرات
      const observer = new MutationObserver(checkTheme);
      observer.observe(document.documentElement, {
        attributes: true,
        attributeFilter: ["class"],
      });
  
      return () => observer.disconnect();
    }, []);

  const planCardClasses = (plan: string) =>
    `flex-1 p-5 rounded-xl cursor-pointer transition-all duration-300 relative ${
      selectedPlan === plan
        ? isDark
          ? "bg-blue-600/80 scale-105 shadow-lg border border-blue-400"
          : "bg-cyan-50 border-2 border-cyan-500 scale-105 shadow-lg"
        : isDark
        ? "bg-gray-700/50 hover:bg-gray-600 border border-gray-600"
        : "bg-gray-50 hover:bg-gray-100 border"
    }`;

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5 }}
      className={`max-w-4xl mx-auto p-6 rounded-2xl border ${
        isDark 
          ? "bg-neutral-900 text-white shadow-xl shadow-neutral-950/25 border-neutral-700" 
          : "bg-white text-gray-800 shadow-xl border-gray-200"
      }`}
    >
      {/* هدر */}
      <div className="text-center mb-8">
        <h2 className={`text-3xl md:text-4xl font-bold ${
          isDark ? "text-cyan-400" : "text-cyan-600"
        }`}>
          اشتراک پلاس
        </h2>
        <p className={`mt-2 text-sm md:text-base ${
          isDark ? "text-gray-400" : "text-gray-600"
        }`}>
         با تهیه اشتراک پلاس پکیج آموزشی خود را جذابتر نمایش دهید.
        </p>
      </div>

      {/* مزایا */}
      <div className="mb-10">
        <h3 className={`text-xl font-semibold mb-4 ${
          isDark ? "text-gray-100" : "text-gray-800"
        }`}>
          چرا اشتراک پلاس؟
        </h3>
        <ul className="grid grid-cols-1 gap-3">
          {benefits.map((benefit, index) => (
            <motion.li
              key={index}
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: index * 0.1 }}
              className={`flex items-center gap-3 p-3 rounded-lg ${
                isDark ? "bg-neutral-800" : "bg-gray-100"
              }`}
            >
              <svg
                className="w-6 h-6 text-green-500 dark:text-green-400"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2"
                  d="M5 13l4 4L19 7"
                />
              </svg>
              <span className={isDark ? "text-gray-300" : "text-gray-700"}>
                {benefit}
              </span>
            </motion.li>
          ))}
        </ul>
      </div>

   

      {/* دکمه خرید */}
      <div className="text-center">
        <motion.button
          whileHover={{ scale: 1.05 }}
          whileTap={{ scale: 0.95 }}
          onClick={() =>
            onPurchase?.(plans.find((p) => p.duration === selectedPlan)!)
          }
          className="w-full md:w-1/2 py-3 px-6 rounded-lg font-semibold transition-all duration-300 bg-cyan-500 hover:bg-cyan-600 text-white shadow-md"
        >
          خرید اشتراک
        </motion.button>
        <p className={`text-xs mt-3 ${
          isDark ? "text-gray-400" : "text-gray-500"
        }`}>
          با خرید اشتراک، پکیج خود را متفاوت به کاربران نمایش دهید
        </p>
      </div>
    </motion.div>
  );
};

export default SubscriptionCard;