'use client';

import { useRouter } from 'next/navigation';

interface Package {
  id: string;
  name: string;
  duration: string;
  price: number;
  originalPrice?: number;
  badge?: string;
  badgeColor?: string;
  features: string[];
  popular?: boolean;
}

const packages: Package[] = [
  {
    id: 'monthly',
    name: 'شهري',
    duration: 'شهر واحد',
    price: 250,
    features: ['اشتراك لمدة شهر', 'إلغاء مجاني', 'دعم فني'],
  },
  {
    id: 'quarterly',
    name: 'ربع سنوي',
    duration: '3 أشهر',
    price: 680,
    originalPrice: 750,
    badge: 'وفري 9%',
    badgeColor: '#f59e0b',
    features: ['اشتراك لمدة 3 أشهر', 'توفير 70 ر.س', 'دعم فني مميز'],
    popular: true,
  },
  {
    id: 'semester',
    name: 'فصل دراسي',
    duration: '5 أشهر',
    price: 1050,
    originalPrice: 1250,
    badge: 'وفري 16%',
    badgeColor: '#059669',
    features: ['اشتراك لمدة 5 أشهر', 'توفير 200 ر.س', 'أولوية في الحجز'],
  },
  {
    id: 'yearly',
    name: 'سنوي',
    duration: '12 شهر',
    price: 2400,
    originalPrice: 3000,
    badge: 'وفري 20%',
    badgeColor: '#7c3aed',
    features: ['اشتراك لمدة سنة كاملة', 'توفير 600 ر.س', 'أولوية قصوى + هدايا'],
  },
];

interface PackagesSheetProps {
  busId: string;
  onClose: () => void;
}

export default function PackagesSheet({ busId, onClose }: PackagesSheetProps) {
  const router = useRouter();

  const handleSelect = (pkg: Package) => {
    onClose();
    router.push(`/mobile/subscribe/${busId}?package=${pkg.id}&price=${pkg.price}`);
  };

  return (
    <div className="fixed inset-0 z-50 flex flex-col justify-end" dir="rtl" style={{ maxWidth: '390px', margin: '0 auto' }}>
      <div className="absolute inset-0 bg-black/40 backdrop-blur-sm" onClick={onClose}></div>
      <div className="relative bg-white rounded-t-3xl shadow-2xl z-10 max-h-[85vh] overflow-y-auto">
        <div className="sticky top-0 bg-white rounded-t-3xl pt-4 pb-3 px-5 border-b border-slate-100 z-10">
          <div className="w-10 h-1 bg-slate-200 rounded-full mx-auto mb-4"></div>
          <div className="flex items-center justify-between">
            <div>
              <h2 className="text-lg font-bold text-slate-900">اختاري الباقة</h2>
              <p className="text-xs text-slate-400 mt-0.5">كل الباقات تشمل نفس الخدمة</p>
            </div>
            <button onClick={onClose} className="w-9 h-9 bg-slate-100 rounded-xl flex items-center justify-center cursor-pointer">
              <i className="ri-close-line text-slate-600 text-lg"></i>
            </button>
          </div>
        </div>

        <div className="px-4 py-4 space-y-3 pb-8">
          {packages.map((pkg) => (
            <button
              key={pkg.id}
              onClick={() => handleSelect(pkg)}
              className={`w-full rounded-2xl p-4 border-2 text-right cursor-pointer transition-all active:scale-95 ${
                pkg.popular ? 'border-emerald-500 bg-emerald-50/60' : 'border-slate-200 bg-white'
              }`}
            >
              <div className="flex items-start justify-between mb-2">
                <div className="flex items-center gap-2">
                  <div className={`w-10 h-10 rounded-xl flex items-center justify-center ${pkg.popular ? 'bg-emerald-100' : 'bg-slate-100'}`}>
                    <i className={`ri-calendar-2-line text-lg ${pkg.popular ? 'text-emerald-600' : 'text-slate-500'}`}></i>
                  </div>
                  <div>
                    <p className="text-base font-bold text-slate-900">{pkg.name}</p>
                    <p className="text-xs text-slate-400">{pkg.duration}</p>
                  </div>
                </div>
                <div className="flex flex-col items-end gap-1">
                  {pkg.badge && (
                    <span className="text-[10px] font-bold px-2 py-0.5 rounded-full text-white" style={{ background: pkg.badgeColor }}>
                      {pkg.badge}
                    </span>
                  )}
                  <div className="flex items-baseline gap-1">
                    <span className="text-xl font-bold text-emerald-600">{pkg.price}</span>
                    <span className="text-xs text-slate-400">ر.س</span>
                  </div>
                  {pkg.originalPrice && (
                    <span className="text-xs text-slate-400 line-through">{pkg.originalPrice} ر.س</span>
                  )}
                </div>
              </div>
              <div className="flex flex-wrap gap-1.5 mt-2">
                {pkg.features.map((f) => (
                  <span key={f} className="flex items-center gap-1 text-[11px] text-slate-500">
                    <i className="ri-check-line text-emerald-500 text-xs"></i>
                    {f}
                  </span>
                ))}
              </div>
              {pkg.popular && (
                <div className="mt-2.5 flex items-center gap-1.5">
                  <div className="w-4 h-4 bg-emerald-500 rounded-full flex items-center justify-center">
                    <i className="ri-fire-fill text-white text-[10px]"></i>
                  </div>
                  <span className="text-xs font-bold text-emerald-600">الأكثر اختياراً</span>
                </div>
              )}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}