import { useState, useEffect } from "react";
import useAnalyzer from "../hooks/useAnalyzer";
import { FIELDS } from "../data/responses";

export default function CompatibilityAnalyzer() {
  const [fieldA, setFieldA] = useState(FIELDS[0].id);
  const [fieldB, setFieldB] = useState(FIELDS[1].id);
  const { isAnalyzing, compatResult, analyzeCompat } = useAnalyzer();
  const [celebrate, setCelebrate] = useState(false);

  useEffect(() => {
    if (compatResult && compatResult.score >= 90 && !isAnalyzing) {
      setCelebrate(true);
      const timer = setTimeout(() => setCelebrate(false), 4000);
      return () => clearTimeout(timer);
    }
  }, [compatResult, isAnalyzing]);

  return (
    <div className="w-full relative" style={{ animation: "fadeUp 0.4s ease both" }}>
      
      {celebrate && (
        <div className="absolute inset-0 pointer-events-none overflow-hidden z-50">
          {[...Array(20)].map((_, i) => {
            const randomX = Math.random() * 100;
            const randomDelay = Math.random() * 2;
            const randomColor = compatResult.color || '#22c55e';
            return (
              <div
                key={i}
                className="absolute w-2 h-4 rounded-sm opacity-80 animate-confetti-fall"
                style={{
                  left: `${randomX}%`,
                  top: `-20px`,
                  backgroundColor: i % 2 === 0 ? randomColor : '#ffffff',
                  animationDelay: `${randomDelay}s`,
                  transform: `rotate(${Math.random() * 360}deg)`
                }}
              />
            );
          })}
        </div>
      )}

      <div className="glass-card mb-6">
        <label className="block text-[11px] font-mono text-neutral-500 uppercase tracking-widest mb-4">
          [02] نظام فحص التوافق الثنائي
        </label>
        
        <div className="flex flex-col sm:flex-row gap-4 items-center mb-6">
          <div className="w-full relative">
            <select 
              value={fieldA} 
              onChange={(e) => setFieldA(e.target.value)}
              className="w-full p-3 bg-white/[0.02] text-white border border-white/10 rounded-xl font-medium text-sm outline-none appearance-none focus:border-white/20 transition-colors text-center sm:text-right"
            >
              {FIELDS.map(f => <option key={f.id} value={f.id} className="bg-neutral-900">{f.label}</option>)}
            </select>
          </div>

          {/* القلب النابض الاحترافي بين التخصصين */}
          <div className="flex items-center justify-center px-2">
            <svg 
              xmlns="http://www.w3.org/2000/svg" 
              viewBox="0 0 24 24" 
              fill="currentColor" 
              className="w-6 h-6 text-rose-500/80 drop-shadow-[0_0_10px_rgba(244,63,94,0.5)] animate-real-beat"
            >
              <path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z" />
            </svg>
          </div>

          <div className="w-full relative">
            <select 
              value={fieldB} 
              onChange={(e) => setFieldB(e.target.value)}
              className="w-full p-3 bg-white/[0.02] text-white border border-white/10 rounded-xl font-medium text-sm outline-none appearance-none focus:border-white/20 transition-colors text-center sm:text-right"
            >
              {FIELDS.map(f => <option key={f.id} value={f.id} className="bg-neutral-900">{f.label}</option>)}
            </select>
          </div>
        </div>

        <button 
          className="w-full py-3.5 bg-white text-black font-bold rounded-xl text-sm transition-all hover:bg-neutral-200 active:scale-[0.99] disabled:opacity-40"
          onClick={() => analyzeCompat(fieldA, fieldB)}
          disabled={isAnalyzing}
        >
          {isAnalyzing ? "جاري احتساب النِسَب..." : "تحليل مؤشر التوافق"}
        </button>
      </div>

      {compatResult && !isAnalyzing && (
        <div 
          className={`glass-card text-center overflow-hidden transition-all duration-500 ${
            compatResult.score >= 90 ? "animate-heart-pulse border-emerald-500/30" : ""
          }`}
          style={{ animation: "fadeUp 0.5s ease both" }}
        >
          <div 
            className={`absolute -top-24 left-1/2 -translate-x-1/2 w-42 h-42 rounded-full blur-[60px] pointer-events-none transition-all duration-1000 ${
              compatResult.score >= 90 ? "opacity-40 scale-125 animate-glow-pulse" : "opacity-25"
            }`}
            style={{ background: compatResult.color || '#ffffff' }}
          />
          
          <div className="relative z-10">
            <div className="text-6xl font-extrabold tracking-tight mb-1 font-mono" style={{ color: compatResult.color || '#fff' }}>
              {compatResult.score}%
            </div>
            {/* التعديل هنا: تغيير النص إلى نسبة التوافق */}
            <div className="text-xs font-bold text-neutral-400 mb-6 font-arabic">
              نسبة التوافق
            </div>
            
            <p className="text-base font-medium text-neutral-200 mb-6 px-4 leading-relaxed">
              "{compatResult.joke}"
            </p>
            
            <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/[0.03] border border-white/5 text-xs text-neutral-300">
              <span 
                className={`w-1.5 h-1.5 rounded-full ${compatResult.score >= 90 ? "animate-ping" : ""}`} 
                style={{ background: compatResult.color || '#fff' }} 
              />
              <span>{compatResult.verdict}</span>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}