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

const initialTestimonials = [
  { id: 1, name: 'أحمد محمد', role: 'مدير شركة النقل الذهبي', text: 'نظام رائع ساعدنا في تتبع الباصات وإدارة السائقين بكفاءة عالية جداً.', rating: 5, avatar: 'أ' },
  { id: 2, name: 'سارة العمري', role: 'مشرفة عمليات', text: 'سهّل علينا العمل كثيراً، التقارير واضحة والواجهة سهلة الاستخدام.', rating: 5, avatar: 'س' },
  { id: 3, name: 'خالد الزهراني', role: 'مالك أسطول نقل', text: 'أفضل نظام جربته لإدارة أسطول الباصات، أنصح به بشدة.', rating: 4, avatar: 'خ' },
];

export default function TestimonialsSection({ onSave }: { onSave?: () => void }) {
  const [testimonials, setTestimonials] = useState(initialTestimonials);
  const [editing, setEditing] = useState<number | null>(null);

  const handleChange = (id: number, field: string, value: string | number) => {
    setTestimonials(testimonials.map(t => t.id === id ? { ...t, [field]: value } : t));
  };

  const addTestimonial = () => {
    const newId = Date.now();
    setTestimonials([...testimonials, { id: newId, name: 'اسم العميل', role: 'المنصب', text: 'رأي العميل هنا...', rating: 5, avatar: 'ع' }]);
    setEditing(newId);
  };

  const removeTestimonial = (id: number) => {
    setTestimonials(testimonials.filter(t => t.id !== id));
  };

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h3 className="font-black text-slate-700 text-base" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>آراء العملاء</h3>
        <button onClick={addTestimonial} className="flex items-center gap-1.5 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-add-line"></i> إضافة رأي
        </button>
      </div>

      {testimonials.map(t => (
        <div key={t.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-3">
            <div className="flex items-center gap-3">
              <div className="w-9 h-9 rounded-full flex items-center justify-center text-white font-black text-sm" style={{ background: '#3B82F6' }}>{t.avatar}</div>
              <div>
                <p className="font-bold text-slate-700 text-sm" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{t.name}</p>
                <p className="text-xs text-slate-400" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{t.role}</p>
              </div>
            </div>
            <div className="flex items-center gap-2">
              <button onClick={() => setEditing(editing === t.id ? null : t.id)} className="w-8 h-8 flex items-center justify-center rounded-lg cursor-pointer" style={{ background: '#EFF6FF', color: '#3B82F6' }}>
                <i className="ri-edit-line text-sm"></i>
              </button>
              <button onClick={() => removeTestimonial(t.id)} 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>
          </div>

          {editing === t.id ? (
            <div className="space-y-3">
              <div className="grid grid-cols-2 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={t.name} onChange={e => handleChange(t.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={t.role} onChange={e => handleChange(t.id, 'role', 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-1" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>الرأي</label>
                <textarea value={t.text} onChange={e => handleChange(t.id, 'text', e.target.value)} rows={3} className="w-full px-3 py-2 rounded-lg text-sm text-right resize-none" 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' }}>التقييم (1-5)</label>
                <div className="flex items-center gap-2">
                  {[1,2,3,4,5].map(star => (
                    <button key={star} onClick={() => handleChange(t.id, 'rating', star)} className="w-8 h-8 flex items-center justify-center cursor-pointer">
                      <i className={`ri-star-${star <= t.rating ? 'fill' : 'line'} text-xl`} style={{ color: star <= t.rating ? '#F59E0B' : '#CBD5E1' }}></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>
              <p className="text-sm text-slate-600 mb-2" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{t.text}</p>
              <div className="flex items-center gap-1">
                {[1,2,3,4,5].map(star => (
                  <i key={star} className={`ri-star-${star <= t.rating ? 'fill' : 'line'} text-sm`} style={{ color: star <= t.rating ? '#F59E0B' : '#CBD5E1' }}></i>
                ))}
              </div>
            </div>
          )}
        </div>
      ))}
    </div>
  );
}