import React, { useState } from 'react';

const DiscriminantWidget: React.FC = () => {
  const [a, setA] = useState(1);
  const [b, setB] = useState(-4);
  const [c, setC] = useState(3); // Default x^2 - 4x + 3 (Roots 1, 3)

  const discriminant = b*b - 4*a*c;
  const rootsCount = discriminant > 0 ? 2 : discriminant === 0 ? 1 : 0;

  // Viewport
  const range = 10;
  const size = 300;
  const scale = size / (range * 2);
  const center = size / 2;
  const toPx = (v: number, isY = false) => isY ? center - v * scale : center + v * scale;

  const generatePath = () => {
      let dStr = "";
      for (let x = -range; x <= range; x += 0.5) {
          const y = a * x*x + b*x + c;
          if (Math.abs(y) > range) continue;
          const px = toPx(x);
          const py = toPx(y, true);
          dStr += dStr ? ` L ${px} ${py}` : `M ${px} ${py}`;
      }
      return dStr;
  };

  return (
    <div className="bg-white p-6 rounded-xl shadow-lg border border-slate-200">
       <div className="flex flex-col gap-6">
           <div className="flex justify-between items-center bg-slate-50 p-4 rounded-lg border border-slate-200">
               <div className="font-mono text-lg font-bold text-slate-800">
                   Δ = b² - 4ac = <span className={discriminant > 0 ? "text-green-600" : discriminant < 0 ? "text-rose-600" : "text-amber-600"}>{discriminant}</span>
               </div>
               <div className={`px-3 py-1 rounded text-sm font-bold uppercase text-white ${discriminant > 0 ? "bg-green-500" : discriminant < 0 ? "bg-rose-500" : "bg-amber-500"}`}>
                   {rootsCount} Real Solution{rootsCount !== 1 ? 's' : ''}
               </div>
           </div>

           <div className="flex flex-col md:flex-row gap-8">
               <div className="w-full md:w-1/3 space-y-4">
                   <div>
                       <label className="text-xs font-bold text-slate-500 uppercase">a = {a}</label>
                       <input type="range" min="-3" max="3" step="0.5" value={a} onChange={e => setA(parseFloat(e.target.value) || 0.1)} className="w-full h-1 bg-slate-200 rounded accent-slate-600"/>
                   </div>
                   <div>
                       <label className="text-xs font-bold text-slate-500 uppercase">b = {b}</label>
                       <input type="range" min="-10" max="10" step="1" value={b} onChange={e => setB(parseFloat(e.target.value))} className="w-full h-1 bg-slate-200 rounded accent-slate-600"/>
                   </div>
                   <div>
                       <label className="text-xs font-bold text-slate-500 uppercase">c = {c}</label>
                       <input type="range" min="-10" max="10" step="1" value={c} onChange={e => setC(parseFloat(e.target.value))} className="w-full h-1 bg-slate-200 rounded accent-slate-600"/>
                   </div>
                   
                   <div className="text-xs text-slate-500 mt-4">
                       <p>If Δ &gt; 0: Crosses axis twice</p>
                       <p>If Δ = 0: Touches axis once (Vertex on axis)</p>
                       <p>If Δ &lt; 0: Never touches axis</p>
                   </div>
               </div>

               <div className="flex-1 flex justify-center">
                   <div className="relative w-[300px] h-[200px] bg-white border border-slate-200 rounded-xl overflow-hidden">
                       <svg width="100%" height="100%" viewBox="0 0 300 300" preserveAspectRatio="xMidYMid slice">
                           <line x1="0" y1={center} x2={size} y2={center} stroke="#cbd5e1" strokeWidth="2" />
                           <line x1={center} y1="0" x2={center} y2={size} stroke="#cbd5e1" strokeWidth="2" />
                           
                           <path d={generatePath()} fill="none" stroke="#4f46e5" strokeWidth="3" />
                       </svg>
                   </div>
               </div>
           </div>
       </div>
    </div>
  );
};

export default DiscriminantWidget;