import React, { useState } from 'react';

const RatioVisualizerWidget: React.FC = () => {
  const [partA, setPartA] = useState(3);
  const [partB, setPartB] = useState(2);
  const [scale, setScale] = useState(1);

  const totalParts = partA + partB;
  const scaledA = partA * scale;
  const scaledB = partB * scale;
  const scaledTotal = totalParts * scale;

  return (
    <div className="bg-white p-6 rounded-xl shadow-lg border border-slate-200">
      <div className="flex flex-col md:flex-row gap-8 mb-8">
         <div className="w-full md:w-1/3 space-y-6">
             <div>
                 <label className="text-xs font-bold text-indigo-600 uppercase">Part A (Indigo)</label>
                 <input 
                   type="range" min="1" max="10" value={partA} 
                   onChange={e => setPartA(parseInt(e.target.value))}
                   className="w-full h-2 bg-indigo-100 rounded-lg appearance-none cursor-pointer accent-indigo-600 mt-2"
                 />
                 <div className="text-right font-mono font-bold text-indigo-700">{partA} parts</div>
             </div>
             <div>
                 <label className="text-xs font-bold text-rose-600 uppercase">Part B (Rose)</label>
                 <input 
                   type="range" min="1" max="10" value={partB} 
                   onChange={e => setPartB(parseInt(e.target.value))}
                   className="w-full h-2 bg-rose-100 rounded-lg appearance-none cursor-pointer accent-rose-600 mt-2"
                 />
                 <div className="text-right font-mono font-bold text-rose-700">{partB} parts</div>
             </div>
             <div className="pt-4 border-t border-slate-200">
                 <label className="text-xs font-bold text-slate-500 uppercase">Multiplier (k)</label>
                 <input 
                   type="range" min="1" max="5" value={scale} 
                   onChange={e => setScale(parseInt(e.target.value))}
                   className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-slate-600 mt-2"
                 />
                 <div className="text-right font-mono font-bold text-slate-700">k = {scale}</div>
             </div>
         </div>

         <div className="flex-1 flex flex-col justify-center">
             <div className="bg-slate-50 p-4 rounded-xl border border-slate-200 mb-4">
                 <div className="flex flex-wrap gap-2 justify-center content-start min-h-[100px]">
                     {Array.from({ length: scaledA }).map((_, i) => (
                         <div key={`a-${i}`} className="w-6 h-6 rounded-full bg-indigo-500 shadow-sm animate-fade-in"></div>
                     ))}
                     {Array.from({ length: scaledB }).map((_, i) => (
                         <div key={`b-${i}`} className="w-6 h-6 rounded-full bg-rose-500 shadow-sm animate-fade-in"></div>
                     ))}
                 </div>
             </div>
             
             <div className="grid grid-cols-2 gap-4 text-center">
                 <div className="p-3 bg-white border border-slate-200 rounded-lg shadow-sm">
                     <p className="text-xs font-bold text-slate-400 uppercase">Part-to-Part Ratio</p>
                     <p className="text-lg font-bold text-slate-800">
                         <span className="text-indigo-600">{scaledA}</span> : <span className="text-rose-600">{scaledB}</span>
                     </p>
                     <p className="text-xs text-slate-400 mt-1">({partA}k : {partB}k)</p>
                 </div>
                 <div className="p-3 bg-white border border-slate-200 rounded-lg shadow-sm">
                     <p className="text-xs font-bold text-slate-400 uppercase">Part-to-Whole (Indigo)</p>
                     <p className="text-lg font-bold text-slate-800">
                         <span className="text-indigo-600">{scaledA}</span> / {scaledTotal}
                     </p>
                     <p className="text-xs text-slate-400 mt-1">({partA}k / {totalParts}k)</p>
                 </div>
             </div>
         </div>
      </div>
    </div>
  );
};

export default RatioVisualizerWidget;