import React, { useState } from 'react';

const ConfidenceIntervalWidget: React.FC = () => {
  const [meanA, setMeanA] = useState(46);
  const [moeA, setMoeA] = useState(4);
  const [meanB, setMeanB] = useState(52);
  const [moeB, setMoeB] = useState(5);

  const minA = meanA - moeA;
  const maxA = meanA + moeA;
  const minB = meanB - moeB;
  const maxB = meanB + moeB;

  // Overlap Logic
  const overlap = Math.max(0, Math.min(maxA, maxB) - Math.max(minA, minB));
  const isOverlapping = overlap > 0;

  // Visual Scale (Range 30 to 70)
  const scale = (val: number) => ((val - 30) / 40) * 100;

  return (
    <div className="bg-white p-6 rounded-xl shadow-lg border border-slate-200">
       <div className="mb-8 relative h-32 bg-slate-50 rounded-lg border border-slate-100">
           {/* Grid lines */}
           {[35, 40, 45, 50, 55, 60, 65].map(v => (
               <div key={v} className="absolute top-0 bottom-0 border-r border-slate-200 text-xs text-slate-300 pt-2" style={{ left: `${scale(v)}%` }}>
                   <span className="absolute -bottom-5 -translate-x-1/2">{v}</span>
               </div>
           ))}

           {/* Interval A */}
           <div className="absolute top-8 h-4 bg-indigo-500/20 border-l-2 border-r-2 border-indigo-500 rounded flex items-center justify-center group"
                style={{ left: `${scale(minA)}%`, width: `${scale(maxA) - scale(minA)}%` }}>
                <div className="w-1.5 h-1.5 bg-indigo-600 rounded-full"></div> {/* Point Estimate */}
                <div className="absolute -top-6 text-xs font-bold text-indigo-600 whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity">
                    Group A: {minA} to {maxA}
                </div>
           </div>

           {/* Interval B */}
           <div className="absolute top-20 h-4 bg-emerald-500/20 border-l-2 border-r-2 border-emerald-500 rounded flex items-center justify-center group"
                style={{ left: `${scale(minB)}%`, width: `${scale(maxB) - scale(minB)}%` }}>
                <div className="w-1.5 h-1.5 bg-emerald-600 rounded-full"></div>
                <div className="absolute -top-6 text-xs font-bold text-emerald-600 whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity">
                    Group B: {minB} to {maxB}
                </div>
           </div>
       </div>

       <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-6">
           <div className="p-4 bg-indigo-50 rounded-lg border border-indigo-100">
               <h4 className="font-bold text-indigo-900 mb-2">Group A</h4>
               <div className="space-y-3">
                   <div className="flex justify-between text-sm">
                       <span>Mean</span>
                       <input type="range" min="35" max="65" value={meanA} onChange={e => setMeanA(parseInt(e.target.value))} className="w-24 accent-indigo-600"/>
                       <span className="font-bold">{meanA}%</span>
                   </div>
                   <div className="flex justify-between text-sm">
                       <span>Margin of Error</span>
                       <input type="range" min="1" max="10" value={moeA} onChange={e => setMoeA(parseInt(e.target.value))} className="w-24 accent-indigo-600"/>
                       <span className="font-bold">±{moeA}</span>
                   </div>
               </div>
           </div>

           <div className="p-4 bg-emerald-50 rounded-lg border border-emerald-100">
               <h4 className="font-bold text-emerald-900 mb-2">Group B</h4>
               <div className="space-y-3">
                   <div className="flex justify-between text-sm">
                       <span>Mean</span>
                       <input type="range" min="35" max="65" value={meanB} onChange={e => setMeanB(parseInt(e.target.value))} className="w-24 accent-emerald-600"/>
                       <span className="font-bold">{meanB}%</span>
                   </div>
                   <div className="flex justify-between text-sm">
                       <span>Margin of Error</span>
                       <input type="range" min="1" max="10" value={moeB} onChange={e => setMoeB(parseInt(e.target.value))} className="w-24 accent-emerald-600"/>
                       <span className="font-bold">±{moeB}</span>
                   </div>
               </div>
           </div>
       </div>

       <div className={`p-4 rounded-xl border-l-4 ${isOverlapping ? 'bg-amber-50 border-amber-400 text-amber-900' : 'bg-green-50 border-green-500 text-green-900'}`}>
           <h4 className="font-bold text-lg mb-1">
               {isOverlapping ? "⚠️ Conclusion: Inconclusive" : "✅ Conclusion: Strong Evidence"}
           </h4>
           <p className="text-sm">
               {isOverlapping 
                 ? `The intervals overlap (between ${Math.max(minA, minB)} and ${Math.min(maxA, maxB)}). We cannot rule out that the true means are equal.` 
                 : "The intervals do not overlap. It is highly likely that there is a real difference between the groups."}
           </p>
       </div>
    </div>
  );
};

export default ConfidenceIntervalWidget;