import React, { useState } from 'react';
import { ChevronRight, ChevronLeft, Check, Palette, AlertCircle, Sparkles, CheckCircle2 } from 'lucide-react';

// بيانات الاستبيان
const PERSONALITIES = [
  'احترافي ورسمي', 'مرح وحيوي', 'فاخر وأنيق', 
  'بسيط وحديث (مودرن)', 'طبيعي وصديق للبيئة', 'كلاسيكي وتقليدي',
  'جريء ومبتكر', 'هادئ وموثوق'
];

const COLORS = [
  { id: 'red', name: 'أحمر', hex: '#ef4444', meaning: 'طاقة، شغف، قوة' },
  { id: 'blue', name: 'أزرق', hex: '#3b82f6', meaning: 'ثقة، احترافية، هدوء' },
  { id: 'green', name: 'أخضر', hex: '#22c55e', meaning: 'نمو، طبيعة، صحة' },
  { id: 'yellow', name: 'أصفر', hex: '#eab308', meaning: 'تفاؤل، سعادة، دفء' },
  { id: 'purple', name: 'بنفسجي', hex: '#a855f7', meaning: 'إبداع، فخامة، حكمة' },
  { id: 'orange', name: 'برتقالي', hex: '#f97316', meaning: 'حيوية، ود، ابتكار' },
  { id: 'black', name: 'أسود', hex: '#171717', meaning: 'رقي، قوة، غموض' },
  { id: 'white', name: 'أبيض / رمادي', hex: '#e5e5e5', meaning: 'نقاء، بساطة، توازن' },
  { id: 'brown', name: 'بني', hex: '#78350f', meaning: 'أصالة، استقرار، أرضية' },
  { id: 'pink', name: 'وردي', hex: '#ec4899', meaning: 'نعومة، رعاية، حداثة' },
];

const STYLES = [
  { id: 'vibrant', title: 'ألوان ساطعة وحيوية', desc: 'تلفت الانتباه وتعطي طاقة عالية' },
  { id: 'pastel', title: 'ألوان باستيل هادئة', desc: 'ألوان ناعمة ومريحة للعين' },
  { id: 'dark', title: 'ألوان داكنة وعميقة', desc: 'تعكس الفخامة والجدية والغموض' },
  { id: 'minimalist', title: 'ألوان حيادية (أبيض، أسود، رمادي)', desc: 'بساطة مطلقة وتركيز على الشكل' }
];

export default function App() {
  const [step, setStep] = useState(0);
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [formData, setFormData] = useState({
    personalities: [],
    favoriteColors: [],
    avoidColors: [],
    colorStyle: '',
    additionalNotes: ''
  });

  const totalSteps = 5;

  const handleNext = () => {
    if (step < totalSteps) setStep(step + 1);
  };

  const handlePrev = () => {
    if (step > 0) setStep(step - 1);
  };

  const toggleSelection = (field, item) => {
    setFormData(prev => {
      const currentList = prev[field];
      if (currentList.includes(item)) {
        return { ...prev, [field]: currentList.filter(i => i !== item) };
      } else {
        return { ...prev, [field]: [...currentList, item] };
      }
    });
  };

  const handleSubmit = () => {
    // في بيئة العمل الحقيقية، هنا يتم إرسال البيانات للخادم
    console.log("تم جمع البيانات:", formData);
    setIsSubmitted(true);
  };

  // ---------------- شاشات التطبيق ----------------

  const renderWelcome = () => (
    <div className="text-center space-y-6 py-8">
      <div className="mx-auto bg-blue-100 text-blue-600 w-20 h-20 rounded-full flex items-center justify-center mb-6 shadow-sm">
        <Palette size={40} />
      </div>
      <h1 className="text-3xl font-bold text-gray-800">رحلة اكتشاف ألوان هويتك</h1>
      <p className="text-gray-600 text-lg max-w-md mx-auto leading-relaxed">
        لأن الشعار هو الوجه الأول لعلامتك التجارية، نريد أن نضمن أن ألوانه تعكس شخصيتك وقيمك بدقة. شاركنا تفضيلاتك في خطوات بسيطة.
      </p>
      <button 
        onClick={handleNext}
        className="mt-8 bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-xl font-medium text-lg transition-all shadow-md hover:shadow-lg flex items-center gap-2 mx-auto"
      >
        <span>ابدأ الاستبيان</span>
        <ChevronLeft size={20} />
      </button>
    </div>
  );

  const renderStep1 = () => (
    <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
      <div className="text-center mb-8">
        <h2 className="text-2xl font-bold text-gray-800 flex items-center justify-center gap-2">
          <Sparkles className="text-yellow-500" size={24} />
          شخصية علامتك التجارية
        </h2>
        <p className="text-gray-500 mt-2">اختر 1 إلى 3 صفات تصف مشروعك بأفضل شكل (هذا يساعدنا في تحديد سيكولوجية الألوان).</p>
      </div>
      
      <div className="grid grid-cols-2 md:grid-cols-2 gap-3">
        {PERSONALITIES.map(trait => (
          <button
            key={trait}
            onClick={() => toggleSelection('personalities', trait)}
            className={`p-4 rounded-xl border-2 text-right transition-all duration-200 flex justify-between items-center ${
              formData.personalities.includes(trait) 
                ? 'border-blue-500 bg-blue-50 text-blue-700 shadow-sm' 
                : 'border-gray-200 hover:border-blue-200 hover:bg-gray-50 text-gray-700'
            }`}
          >
            <span className="font-medium text-sm md:text-base">{trait}</span>
            {formData.personalities.includes(trait) && <Check size={18} className="text-blue-500" />}
          </button>
        ))}
      </div>
    </div>
  );

  const renderStep2 = () => (
    <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
      <div className="text-center mb-8">
        <h2 className="text-2xl font-bold text-gray-800">الألوان المفضلة</h2>
        <p className="text-gray-500 mt-2">ما هي الألوان التي تشعر أنها تمثل علامتك التجارية؟ (اختر لونين أو ثلاثة كحد أقصى)</p>
      </div>
      
      <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
        {COLORS.map(color => {
          const isSelected = formData.favoriteColors.includes(color.id);
          const isAvoided = formData.avoidColors.includes(color.id);
          
          return (
            <button
              key={color.id}
              disabled={isAvoided}
              onClick={() => toggleSelection('favoriteColors', color.id)}
              className={`flex flex-col items-center p-3 rounded-2xl transition-all ${
                isSelected ? 'bg-gray-50 ring-2 ring-blue-500 shadow-md scale-105' : 'hover:bg-gray-50'
              } ${isAvoided ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}`}
            >
              <div 
                className="w-14 h-14 rounded-full mb-3 shadow-inner relative flex items-center justify-center border border-black/10"
                style={{ backgroundColor: color.hex }}
              >
                {isSelected && <Check size={24} className={color.id === 'white' || color.id === 'yellow' ? 'text-black' : 'text-white'} />}
              </div>
              <span className="font-semibold text-gray-800 text-sm">{color.name}</span>
              <span className="text-[10px] text-gray-500 text-center mt-1 leading-tight">{color.meaning}</span>
            </button>
          );
        })}
      </div>
    </div>
  );

  const renderStep3 = () => (
    <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
      <div className="text-center mb-8">
        <h2 className="text-2xl font-bold text-gray-800 flex items-center justify-center gap-2">
          <AlertCircle className="text-red-500" size={24} />
          ألوان تود تجنبها
        </h2>
        <p className="text-gray-500 mt-2">هل هناك ألوان معينة تكرهها ولا ترغب برؤيتها في شعارك أبداً؟</p>
      </div>
      
      <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
        {COLORS.map(color => {
          const isSelected = formData.avoidColors.includes(color.id);
          const isFavorite = formData.favoriteColors.includes(color.id);
          
          return (
            <button
              key={color.id}
              disabled={isFavorite}
              onClick={() => toggleSelection('avoidColors', color.id)}
              className={`flex flex-col items-center p-3 rounded-2xl transition-all ${
                isSelected ? 'bg-red-50 ring-2 ring-red-500 shadow-md scale-105' : 'hover:bg-gray-50'
              } ${isFavorite ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}`}
            >
              <div 
                className="w-14 h-14 rounded-full mb-3 shadow-inner relative flex items-center justify-center border border-black/10"
                style={{ backgroundColor: color.hex }}
              >
                {isSelected && <span className="text-white font-bold text-xl drop-shadow-md">✕</span>}
              </div>
              <span className="font-semibold text-gray-800 text-sm">{color.name}</span>
            </button>
          );
        })}
      </div>
    </div>
  );

  const renderStep4 = () => (
    <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
      <div className="text-center mb-8">
        <h2 className="text-2xl font-bold text-gray-800">طابع الألوان المفضل</h2>
        <p className="text-gray-500 mt-2">كيف تفضل أن يكون مظهر أو "Tone" الألوان؟</p>
      </div>
      
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {STYLES.map(style => (
          <button
            key={style.id}
            onClick={() => setFormData({...formData, colorStyle: style.id})}
            className={`p-5 rounded-2xl border-2 text-right transition-all flex flex-col gap-2 ${
              formData.colorStyle === style.id 
                ? 'border-blue-500 bg-blue-50' 
                : 'border-gray-200 hover:border-blue-200 hover:bg-gray-50'
            }`}
          >
            <div className="flex justify-between items-center w-full">
              <span className="font-bold text-gray-800">{style.title}</span>
              <div className={`w-5 h-5 rounded-full border-2 flex items-center justify-center ${
                formData.colorStyle === style.id ? 'border-blue-500 bg-blue-500' : 'border-gray-300'
              }`}>
                {formData.colorStyle === style.id && <div className="w-2 h-2 bg-white rounded-full" />}
              </div>
            </div>
            <span className="text-sm text-gray-500">{style.desc}</span>
            
            {/* Visual indicator for style */}
            <div className="flex gap-1 mt-3 w-full h-2 rounded-full overflow-hidden opacity-80">
              {style.id === 'vibrant' && ['#ef4444', '#3b82f6', '#eab308'].map((c,i) => <div key={i} className="flex-1" style={{backgroundColor: c}}/>)}
              {style.id === 'pastel' && ['#fecaca', '#bfdbfe', '#fef08a'].map((c,i) => <div key={i} className="flex-1" style={{backgroundColor: c}}/>)}
              {style.id === 'dark' && ['#7f1d1d', '#1e3a8a', '#713f12'].map((c,i) => <div key={i} className="flex-1" style={{backgroundColor: c}}/>)}
              {style.id === 'minimalist' && ['#171717', '#737373', '#e5e5e5'].map((c,i) => <div key={i} className="flex-1" style={{backgroundColor: c}}/>)}
            </div>
          </button>
        ))}
      </div>
    </div>
  );

  const renderStep5 = () => (
    <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
      <div className="text-center mb-6">
        <h2 className="text-2xl font-bold text-gray-800">ملخص وتأكيد</h2>
        <p className="text-gray-500 mt-2">يرجى مراجعة اختياراتك قبل الإرسال، هل تود إضافة أي ملاحظات؟</p>
      </div>
      
      <div className="bg-gray-50 rounded-2xl p-6 border border-gray-100 space-y-4">
        
        {/* Personalities Summary */}
        <div>
          <h3 className="text-sm font-semibold text-gray-500 mb-2">شخصية العلامة التجارية:</h3>
          <div className="flex flex-wrap gap-2">
            {formData.personalities.length > 0 ? formData.personalities.map(p => (
              <span key={p} className="bg-white border border-gray-200 px-3 py-1 rounded-full text-sm text-gray-700">{p}</span>
            )) : <span className="text-sm text-gray-400">لم يتم التحديد</span>}
          </div>
        </div>

        {/* Favorite Colors Summary */}
        <div>
          <h3 className="text-sm font-semibold text-gray-500 mb-2">الألوان المفضلة:</h3>
          <div className="flex flex-wrap gap-3">
            {formData.favoriteColors.length > 0 ? formData.favoriteColors.map(colorId => {
              const color = COLORS.find(c => c.id === colorId);
              return (
                <div key={colorId} className="flex items-center gap-2 bg-white border border-gray-200 pr-1 pl-3 py-1 rounded-full">
                  <div className="w-5 h-5 rounded-full border border-gray-200" style={{ backgroundColor: color.hex }} />
                  <span className="text-sm text-gray-700">{color.name}</span>
                </div>
              );
            }) : <span className="text-sm text-gray-400">أي ألوان (متروك للمصمم)</span>}
          </div>
        </div>

        {/* Avoid Colors Summary */}
        <div>
          <h3 className="text-sm font-semibold text-gray-500 mb-2">ألوان مستبعدة:</h3>
          <div className="flex flex-wrap gap-3">
            {formData.avoidColors.length > 0 ? formData.avoidColors.map(colorId => {
              const color = COLORS.find(c => c.id === colorId);
              return (
                <div key={colorId} className="flex items-center gap-2 bg-white border border-red-100 pr-1 pl-3 py-1 rounded-full">
                  <div className="w-5 h-5 rounded-full border border-gray-200 relative flex items-center justify-center" style={{ backgroundColor: color.hex }}>
                     <span className="text-white text-[10px] font-bold drop-shadow-md leading-none">✕</span>
                  </div>
                  <span className="text-sm text-gray-700">{color.name}</span>
                </div>
              );
            }) : <span className="text-sm text-gray-400">لا يوجد</span>}
          </div>
        </div>

        {/* Style Summary */}
        <div>
          <h3 className="text-sm font-semibold text-gray-500 mb-2">طابع الألوان:</h3>
          <p className="text-sm text-gray-700 font-medium">
            {formData.colorStyle ? STYLES.find(s => s.id === formData.colorStyle).title : <span className="text-gray-400 font-normal">لم يتم التحديد</span>}
          </p>
        </div>
      </div>

      <div>
        <label className="block text-sm font-semibold text-gray-700 mb-2">ملاحظات إضافية (اختياري)</label>
        <textarea 
          className="w-full border border-gray-300 rounded-xl p-4 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all resize-none min-h-[100px] text-gray-700"
          placeholder="إذا كان لديك أمثلة لعلامات تجارية تعجبك ألوانها، أو أي تفاصيل أخرى، اكتبها هنا..."
          value={formData.additionalNotes}
          onChange={(e) => setFormData({...formData, additionalNotes: e.target.value})}
        ></textarea>
      </div>

    </div>
  );

  const renderSuccess = () => (
    <div className="text-center space-y-6 py-12 animate-in zoom-in duration-500">
      <div className="mx-auto bg-green-100 text-green-600 w-24 h-24 rounded-full flex items-center justify-center mb-6 shadow-sm">
        <CheckCircle2 size={48} />
      </div>
      <h1 className="text-3xl font-bold text-gray-800">شكراً لك!</h1>
      <p className="text-gray-600 text-lg max-w-md mx-auto leading-relaxed">
        تم استلام تفضيلاتك بنجاح. هذه المعلومات ستساعدنا كثيراً في بناء هوية بصرية رائعة تمثل علامتك التجارية بأفضل صورة.
      </p>
      <div className="pt-6">
         <p className="text-sm text-gray-400">يمكنك إغلاق هذه الصفحة الآن.</p>
      </div>
    </div>
  );

  // ---------------- مكونات رئيسية ----------------

  const renderProgressBar = () => {
    if (step === 0 || isSubmitted) return null;
    const progress = (step / totalSteps) * 100;
    
    return (
      <div className="mb-8">
        <div className="flex justify-between text-xs font-semibold text-gray-400 mb-2">
          <span>الخطوة {step} من {totalSteps}</span>
          <span>{Math.round(progress)}%</span>
        </div>
        <div className="w-full bg-gray-200 rounded-full h-2.5 overflow-hidden">
          <div 
            className="bg-blue-600 h-2.5 rounded-full transition-all duration-500 ease-out" 
            style={{ width: `${progress}%` }}
          ></div>
        </div>
      </div>
    );
  };

  return (
    <div dir="rtl" className="min-h-screen bg-[#f8fafc] flex flex-col items-center justify-center p-4 font-sans selection:bg-blue-200">
      
      <div className="w-full max-w-2xl bg-white rounded-3xl shadow-xl overflow-hidden border border-gray-100">
        
        {/* Header decoration */}
        <div className="h-2 w-full bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500"></div>

        <div className="p-6 md:p-10">
          
          {renderProgressBar()}

          <div className="min-h-[350px]">
            {isSubmitted ? renderSuccess() : (
              <>
                {step === 0 && renderWelcome()}
                {step === 1 && renderStep1()}
                {step === 2 && renderStep2()}
                {step === 3 && renderStep3()}
                {step === 4 && renderStep4()}
                {step === 5 && renderStep5()}
              </>
            )}
          </div>

          {/* Navigation Buttons */}
          {!isSubmitted && step > 0 && (
            <div className="mt-10 pt-6 border-t border-gray-100 flex items-center justify-between">
              <button 
                onClick={handlePrev}
                className="flex items-center gap-2 text-gray-500 hover:text-gray-800 font-medium px-4 py-2 rounded-lg transition-colors"
              >
                <ChevronRight size={20} />
                <span>السابق</span>
              </button>
              
              {step < totalSteps ? (
                <button 
                  onClick={handleNext}
                  className="flex items-center gap-2 bg-gray-900 hover:bg-black text-white px-6 py-2.5 rounded-xl font-medium transition-all shadow-md active:scale-95"
                >
                  <span>التالي</span>
                  <ChevronLeft size={20} />
                </button>
              ) : (
                <button 
                  onClick={handleSubmit}
                  className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-8 py-2.5 rounded-xl font-medium transition-all shadow-md shadow-blue-500/30 active:scale-95"
                >
                  <Check size={20} />
                  <span>إرسال وتأكيد</span>
                </button>
              )}
            </div>
          )}

        </div>
      </div>
      
      {/* Footer Branding (Optional) */}
      <div className="mt-8 text-center text-sm text-gray-400">
        <p>مصمم خصيصاً لابتكار هويتك البصرية ✨</p>
      </div>

    </div>
  );
}