import React, { useState } from 'react';

const LinearQuadraticSystemWidget: React.FC = () => {
  // Parabola: y = x^2
  // Line: y = mx + b
  const [m, setM] = useState(1);
  const [b, setB] = useState(-2);

  // System: x^2 = mx + b  =>  x^2 - mx - b = 0
  // Discriminant: D = (-m)^2 - 4(1)(-b) = m^2 + 4b
  const disc = m*m + 4*b;
  const numSolutions = disc > 0 ? 2 : disc === 0 ? 1 : 0;

  // Visualization
  const width = 300;
  const height = 300;
  const range = 5;
  const scale = width / (range * 2);
  const center = width / 2;

  const toPx = (v: number, isY = false) => isY ? center - v * scale : center + v * scale;

  const generateParabola = () => {
      let d = "";
      for (let x = -range; x <= range; x += 0.1) {
          const y = x * x;
          if (y > range) continue;
          const px = toPx(x);
          const py = toPx(y, true);
          d += d ? ` L ${px} ${py}` : `M ${px} ${py}`;
      }
      return d;
  };

  const generateLine = () => {
      const x1 = -range;
      const y1 = m * x1 + b;
      const x2 = range;
      const y2 = m * x2 + b;
      return `M ${toPx(x1)} ${toPx(y1, true)} L ${toPx(x2)} ${toPx(y2, true)}`;
  };

  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">
            <div className="w-full md:w-1/3 space-y-6">
                <div className="bg-slate-50 p-4 rounded-xl border border-slate-200">
                    <div className="text-xs font-bold text-slate-400 uppercase mb-2">System</div>
                    <div className="font-mono text-lg font-bold text-slate-800">
                        y = x² <br/>
                        y = {m}x {b >= 0 ? '+' : ''}{b}
                    </div>
                </div>

                <div className="space-y-4">
                    <div>
                        <label className="text-xs font-bold text-indigo-600 uppercase">Slope (m) = {m}</label>
                        <input type="range" min="-4" max="4" step="0.5" value={m} onChange={e => setM(parseFloat(e.target.value))} className="w-full h-2 bg-indigo-100 rounded-lg accent-indigo-600"/>
                    </div>
                    <div>
                        <label className="text-xs font-bold text-rose-600 uppercase">Intercept (b) = {b}</label>
                        <input type="range" min="-5" max="5" step="0.5" value={b} onChange={e => setB(parseFloat(e.target.value))} className="w-full h-2 bg-rose-100 rounded-lg accent-rose-600"/>
                    </div>
                </div>

                <div className={`p-4 rounded-xl border-l-4 ${numSolutions > 0 ? 'bg-emerald-50 border-emerald-500' : 'bg-rose-50 border-rose-500'}`}>
                    <div className="text-xs font-bold uppercase text-slate-500">Discriminant (m² + 4b)</div>
                    <div className="text-xl font-bold text-slate-800 my-1">{disc.toFixed(2)}</div>
                    <div className="text-sm font-bold">
                        {numSolutions === 0 && <span className="text-rose-600">No Solutions</span>}
                        {numSolutions === 1 && <span className="text-amber-600">1 Solution (Tangent)</span>}
                        {numSolutions === 2 && <span className="text-emerald-600">2 Solutions</span>}
                    </div>
                </div>
            </div>

            <div className="flex-1 flex justify-center">
                <div className="relative w-[300px] h-[300px] bg-white border border-slate-200 rounded-xl overflow-hidden">
                    <svg width="100%" height="100%" viewBox="0 0 300 300">
                        {/* Axes */}
                        <line x1="0" y1={center} x2={width} y2={center} stroke="#cbd5e1" strokeWidth="2" />
                        <line x1={center} y1="0" x2={center} y2={height} stroke="#cbd5e1" strokeWidth="2" />

                        {/* Parabola */}
                        <path d={generateParabola()} fill="none" stroke="#64748b" strokeWidth="3" />

                        {/* Line */}
                        <path d={generateLine()} fill="none" stroke="#4f46e5" strokeWidth="3" />

                        {/* Intersections */}
                        {numSolutions > 0 && (
                            <>
                                {disc === 0 ? (
                                    <circle cx={toPx(m/2)} cy={toPx((m/2)**2, true)} r="5" fill="#10b981" stroke="white" strokeWidth="2" />
                                ) : (
                                    <>
                                        <circle cx={toPx((m + Math.sqrt(disc))/2)} cy={toPx(((m + Math.sqrt(disc))/2)**2, true)} r="5" fill="#10b981" stroke="white" strokeWidth="2" />
                                        <circle cx={toPx((m - Math.sqrt(disc))/2)} cy={toPx(((m - Math.sqrt(disc))/2)**2, true)} r="5" fill="#10b981" stroke="white" strokeWidth="2" />
                                    </>
                                )}
                            </>
                        )}
                    </svg>
                </div>
            </div>
        </div>
    </div>
  );
};

export default LinearQuadraticSystemWidget;