import React from 'react';
import { motion } from 'motion/react';
import { Zap, ShieldCheck, Activity, CheckCircle2, ArrowLeft, Wifi } from 'lucide-react';
import type { Product } from '../types';
import { formatPrice, toPersianDigits } from '../utils/formatters';
import { useCart } from '../context/CartContext';

interface WireguardSectionProps {
  products: Product[];
  onViewProduct: (product: Product) => void;
}

export const WireguardSection: React.FC<WireguardSectionProps> = ({ products, onViewProduct }) => {
  const { addToCart } = useCart();
  const plans = products.filter(p => p.categoryId === 'cat_gaming_service');

  const handleBuy = (product: Product) => {
    addToCart(product, 1);
  };

  return (
    <section className="py-14 sm:py-20 relative overflow-hidden">
      <div className="absolute top-1/3 right-0 w-96 h-96 bg-purple-600/10 rounded-full blur-3xl pointer-events-none" />
      <div className="absolute bottom-0 left-0 w-80 h-80 bg-indigo-600/10 rounded-full blur-3xl pointer-events-none" />

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 14 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, amount: 0.2 }}
          transition={{ duration: 0.45 }}
          className="relative rounded-[30px] border border-purple-500/20 bg-[#0b0714]/95 p-5 sm:p-8 lg:p-10 shadow-2xl overflow-hidden"
        >
          <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-purple-500 to-transparent" />

          <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-center">
            <div className="lg:col-span-7 text-right">
              <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-purple-500/10 border border-purple-500/20 text-purple-200 text-xs font-bold">
                <Wifi className="w-4 h-4 text-purple-400" />
                سرویس تخصصی WireGuard زانا‌شاپ
              </div>

              <h2 className="mt-5 text-3xl sm:text-4xl lg:text-5xl font-black text-white leading-tight tracking-tight">
                اینترنت پایدارتر،
                <span className="block text-gradient-neon">گیم روان‌تر.</span>
              </h2>

              <p className="mt-4 text-sm sm:text-base text-zinc-400 leading-8 max-w-2xl mr-0">
                سرویس‌های WireGuard برای یک کاربر، با پلن‌های حجمی مشخص و اعتبار زمانی شفاف. کانفیگ پس از ثبت و تأیید سفارش از طریق ایمیل یا پشتیبانی تلگرام تحویل می‌شود.
              </p>

              <div className="mt-7 grid grid-cols-1 sm:grid-cols-3 gap-3 text-right">
                {[
                  ['یک کاربر', 'سرویس اختصاصی'],
                  ['WireGuard', 'پروتکل سریع و سبک'],
                  ['تحویل دستی', 'پس از تأیید سفارش'],
                ].map(([title, sub]) => (
                  <div key={title} className="rounded-2xl bg-white/[0.025] border border-white/[0.06] p-4">
                    <div className="flex items-center gap-2 text-sm font-bold text-zinc-100">
                      <CheckCircle2 className="w-4 h-4 text-emerald-400" />
                      {title}
                    </div>
                    <div className="text-[11px] text-zinc-500 mt-1 mr-6">{sub}</div>
                  </div>
                ))}
              </div>
            </div>

            <div className="lg:col-span-5 space-y-3">
              {plans.length === 0 ? (
                <div className="rounded-2xl border border-purple-500/20 bg-black/20 p-6 text-center text-zinc-400">
                  فعلاً پلنی برای فروش فعال نشده است.
                </div>
              ) : (
                plans.map((plan, index) => (
                  <motion.div
                    key={plan.id}
                    initial={{ opacity: 0, x: 12 }}
                    whileInView={{ opacity: 1, x: 0 }}
                    viewport={{ once: true }}
                    transition={{ duration: 0.35, delay: index * 0.08 }}
                    className="group rounded-2xl border border-purple-500/15 bg-[#100a1d] p-4 sm:p-5 hover:border-purple-500/40 hover:bg-[#130c23] transition-all"
                  >
                    <div className="flex items-start justify-between gap-4">
                      <div className="text-right min-w-0">
                        <div className="flex items-center gap-2 flex-wrap">
                          {plan.badge && (
                            <span className="px-2 py-1 rounded-lg bg-purple-500/10 border border-purple-500/15 text-[10px] font-bold text-purple-300">
                              {plan.badge}
                            </span>
                          )}
                          <span className="text-[11px] text-zinc-500">یک کاربر</span>
                        </div>
                        <h3 className="mt-2 text-base sm:text-lg font-black text-white">{plan.title}</h3>
                        <p className="mt-1 text-xs text-zinc-500 line-clamp-2">{plan.description}</p>
                      </div>
                      <div className="w-11 h-11 shrink-0 rounded-xl bg-purple-500/10 border border-purple-500/20 flex items-center justify-center text-purple-300">
                        <Activity className="w-5 h-5" />
                      </div>
                    </div>

                    <div className="mt-4 flex items-end justify-between gap-3 border-t border-white/[0.06] pt-4">
                      <div>
                        <div className="text-[10px] text-zinc-500 mb-1">قیمت</div>
                        <div className="text-xl font-black text-purple-200">{formatPrice(plan.price)}</div>
                      </div>
                      <div className="flex gap-2">
                        <button
                          onClick={() => onViewProduct(plan)}
                          className="px-3 py-2.5 rounded-xl border border-purple-500/20 text-xs font-bold text-zinc-300 hover:text-white hover:border-purple-500/40 transition-colors"
                        >
                          جزئیات
                        </button>
                        <button
                          onClick={() => handleBuy(plan)}
                          className="px-4 py-2.5 rounded-xl bg-purple-600 hover:bg-purple-500 text-white text-xs font-bold shadow-lg shadow-purple-900/20 transition-all active:scale-95 flex items-center gap-1.5"
                        >
                          خرید
                          <ArrowLeft className="w-3.5 h-3.5" />
                        </button>
                      </div>
                    </div>
                  </motion.div>
                ))
              )}

              <div className="flex items-center gap-2 justify-end text-[11px] text-zinc-500 pt-1">
                <ShieldCheck className="w-4 h-4 text-emerald-400" />
                قیمت و موجودی هر پلن از پنل مدیریت قابل تغییر است.
              </div>
            </div>
          </div>
        </motion.div>
      </div>
    </section>
  );
};
