'use client';
import { useState } from 'react';

const initialPlans = [
  { id: 1, name: 'الباقة الأساسية', price: '99', period: 'شهرياً', features: ['5 باصات', '2 سائق', 'تتبع مباشر', 'دعم فني'], color: '#3B82F6', badge: '' },
  { id: 2, name: 'الباقة المتوسطة', price: '199', period: 'شهرياً', features: ['15 باص', '10 سائقين', 'تتبع مباشر', 'تقارير متقدمة', 'دعم أولوية'], color: '#8B5CF6', badge: 'الأكثر طلباً' },
  { id: 3, name: 'الباقة المتقدمة', price: '399', period: 'شهرياً', features: ['باصات غير محدودة', 'سائقين غير محدودين', 'تتبع مباشر', 'تقارير كاملة', 'دعم 24/7', 'API مخصص'], color: '#059669', badge: '' },
];

export default function PricingSection({ onSave }: { onSave?: () => void }) {
  const [plans, setPlans] = useState(initialPlans);
  const [editing, setEditing] = useState<number | null>(null);

  const handleChange = (id: number, field: string, value: string) => {
    setPlans(plans.map(p => p.id === id ? { ...p, [field]: value } : p));
  };

  const handleFeatureChange = (id: number, idx: number, value: string) => {
    setPlans(plans.map(p => {
      if (p.id !== id) return p;
      const f = [...p.features];
      f[idx] = value;
      return { ...p, features: f };
    }));
  };

  const addFeature = (id: number) => {
    setPlans(plans.map(p => p.id === id ? { ...p, features: [...p.features, ''] } : p));
  };

  const removeFeature = (id: number, idx: number) => {
    setPlans(plans.map(p => p.id === id ? { ...p, features: p.features.filter((_, i) => i !== idx) } : p));
  };

  return (
    <div className="space-y-4">
      {plans.map(plan => (
        <div key={plan.id} className="bg-white rounded-2xl p-5" style={{ border: '1px solid #E2E8F0', boxShadow: '0 1px 6px rgba(0,0,0,0.05)' }}>
          <div className="flex items-center justify-between mb-4">
            <div className="flex items-center gap-3">
              <div className="w-9 h-9 rounded-xl flex items-center justify-center" style={{ background: plan.color + '18' }}>
                <i className="ri-price-tag-3-line text-lg" style={{ color: plan.color }}></i>
              </div>
              <span className="font-bold text-slate-700 text-sm" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{plan.name}</span>
              {plan.badge && <span className="text-xs px-2 py-0.5 rounded-full text-white font-bold" style={{ background: plan.color, fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{plan.badge}</span>}
            </div>
            <button onClick={() => setEditing(editing === plan.id ? null : plan.id)} className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-bold cursor-pointer whitespace-nowrap" style={{ background: editing === plan.id ? '#EFF6FF' : '#F8FAFC', color: editing === plan.id ? '#3B82F6' : '#64748b', fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
              <i className={editing === plan.id ? 'ri-eye-line' : 'ri-edit-line'}></i>
              {editing === plan.id ? 'إغلاق' : 'تعديل'}
            </button>
          </div>

          {editing === plan.id ? (
            <div className="space-y-3">
              <div className="grid grid-cols-3 gap-3">
                <div>
                  <label className="block text-xs font-bold text-slate-500 mb-1" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>اسم الباقة</label>
                  <input value={plan.name} onChange={e => handleChange(plan.id, 'name', e.target.value)} className="w-full px-3 py-2 rounded-lg text-sm text-right" style={{ border: '1px solid #E2E8F0', fontFamily: '"IBM Plex Sans Arabic", sans-serif', outline: 'none' }} />
                </div>
                <div>
                  <label className="block text-xs font-bold text-slate-500 mb-1" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>السعر</label>
                  <input value={plan.price} onChange={e => handleChange(plan.id, 'price', e.target.value)} className="w-full px-3 py-2 rounded-lg text-sm text-right" style={{ border: '1px solid #E2E8F0', fontFamily: '"IBM Plex Sans Arabic", sans-serif', outline: 'none' }} />
                </div>
                <div>
                  <label className="block text-xs font-bold text-slate-500 mb-1" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>الشارة (اختياري)</label>
                  <input value={plan.badge} onChange={e => handleChange(plan.id, 'badge', e.target.value)} className="w-full px-3 py-2 rounded-lg text-sm text-right" style={{ border: '1px solid #E2E8F0', fontFamily: '"IBM Plex Sans Arabic", sans-serif', outline: 'none' }} />
                </div>
              </div>
              <div>
                <label className="block text-xs font-bold text-slate-500 mb-2" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>المميزات</label>
                <div className="space-y-2">
                  {plan.features.map((f, idx) => (
                    <div key={idx} className="flex items-center gap-2">
                      <input value={f} onChange={e => handleFeatureChange(plan.id, idx, e.target.value)} className="flex-1 px-3 py-2 rounded-lg text-sm text-right" style={{ border: '1px solid #E2E8F0', fontFamily: '"IBM Plex Sans Arabic", sans-serif', outline: 'none' }} />
                      <button onClick={() => removeFeature(plan.id, idx)} className="w-8 h-8 flex items-center justify-center rounded-lg cursor-pointer" style={{ background: '#FEF2F2', color: '#EF4444' }}>
                        <i className="ri-delete-bin-line text-sm"></i>
                      </button>
                    </div>
                  ))}
                  <button onClick={() => addFeature(plan.id)} className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-bold cursor-pointer whitespace-nowrap" style={{ background: '#F0FDF4', color: '#059669', fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
                    <i className="ri-add-line"></i> إضافة ميزة
                  </button>
                </div>
              </div>
              <button onClick={onSave} className="flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-bold cursor-pointer whitespace-nowrap text-white" style={{ background: '#3B82F6', fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
                <i className="ri-save-line"></i> حفظ
              </button>
            </div>
          ) : (
            <div className="flex items-center gap-6">
              <div className="text-2xl font-black" style={{ color: plan.color, fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{plan.price} ر.س <span className="text-sm font-bold text-slate-400">{plan.period}</span></div>
              <div className="flex flex-wrap gap-2">
                {plan.features.map((f, i) => (
                  <span key={i} className="text-xs px-2 py-1 rounded-full" style={{ background: plan.color + '12', color: plan.color, fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{f}</span>
                ))}
              </div>
            </div>
          )}
        </div>
      ))}
    </div>
  );
}