import React, { useState } from 'react';

const MultiplicityWidget: React.FC = () => {
  const [m1, setM1] = useState(1); // Multiplicity for (x+2)
  const [m2, setM2] = useState(2); // Multiplicity for (x-1)

  // f(x) = 0.1 * (x+2)^m1 * (x-1)^m2
  // Scale factor to keep y-values reasonable for visualization

  const width = 300;
  const height = 200;
  const rangeX = 4;
  const scaleX = width / (rangeX * 2);
  const centerX = width / 2;
  const centerY = height / 2;
  const scaleY = 15; // Vertical compression

  const toPx = (x: number, y: number) => ({
      x: centerX + x * scaleX,
      y: centerY - y * scaleY
  });

  const generatePath = () => {
      let d = "";
      // f(x) scaling factor depends on degree to keep graph in view
      const k = 0.5; 
      
      for (let x = -rangeX; x <= rangeX; x += 0.05) {
          const y = k * Math.pow(x + 2, m1) * Math.pow(x - 1, m2);
          if (Math.abs(y) > 100) continue; // Clip
          const pos = toPx(x, y);
          d += d ? ` L ${pos.x} ${pos.y}` : `M ${pos.x} ${pos.y}`;
      }
      return d;
  };

  return (
    <div className="bg-white p-6 rounded-xl shadow-lg border border-slate-200">
        <div className="mb-6 text-center">
            <div className="inline-block bg-slate-50 p-4 rounded-xl border border-slate-200">
                <span className="font-mono text-xl font-bold text-slate-800">
                    P(x) = (x + 2)<sup className="text-rose-600">{m1}</sup> (x - 1)<sup className="text-indigo-600">{m2}</sup>
                </span>
            </div>
        </div>

        <div className="flex flex-col md:flex-row gap-8 items-center">
            <div className="w-full md:w-1/3 space-y-6">
                <div>
                    <label className="text-xs font-bold text-rose-600 uppercase mb-2 block">Root x = -2</label>
                    <div className="flex gap-2">
                        <button 
                          onClick={() => setM1(1)}
                          className={`flex-1 py-2 rounded-lg font-bold text-sm border transition-all ${m1 === 1 ? 'bg-rose-600 text-white border-rose-600' : 'bg-white text-slate-500 border-slate-200'}`}
                        >
                            Odd (1)
                        </button>
                        <button 
                          onClick={() => setM1(2)}
                          className={`flex-1 py-2 rounded-lg font-bold text-sm border transition-all ${m1 === 2 ? 'bg-rose-600 text-white border-rose-600' : 'bg-white text-slate-500 border-slate-200'}`}
                        >
                            Even (2)
                        </button>
                    </div>
                    <p className="text-xs text-rose-600 mt-2 font-bold text-center">
                        {m1 % 2 !== 0 ? "CROSSES Axis" : "TOUCHES Axis"}
                    </p>
                </div>

                <div>
                    <label className="text-xs font-bold text-indigo-600 uppercase mb-2 block">Root x = 1</label>
                    <div className="flex gap-2">
                        <button 
                          onClick={() => setM2(1)}
                          className={`flex-1 py-2 rounded-lg font-bold text-sm border transition-all ${m2 === 1 ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white text-slate-500 border-slate-200'}`}
                        >
                            Odd (1)
                        </button>
                        <button 
                          onClick={() => setM2(2)}
                          className={`flex-1 py-2 rounded-lg font-bold text-sm border transition-all ${m2 === 2 ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white text-slate-500 border-slate-200'}`}
                        >
                            Even (2)
                        </button>
                    </div>
                    <p className="text-xs text-indigo-600 mt-2 font-bold text-center">
                        {m2 % 2 !== 0 ? "CROSSES Axis" : "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 200">
                        {/* Grid Lines */}
                        <defs>
                            <pattern id="grid-mult" width="37.5" height="20" patternUnits="userSpaceOnUse">
                                <path d="M 37.5 0 L 0 0 0 20" fill="none" stroke="#f1f5f9" strokeWidth="1"/>
                            </pattern>
                        </defs>
                        <rect width="100%" height="100%" fill="url(#grid-mult)" />

                        {/* Axes */}
                        <line x1="0" y1={centerY} x2={width} y2={centerY} stroke="#94a3b8" strokeWidth="2" />
                        <line x1={centerX} y1="0" x2={centerX} y2={height} stroke="#94a3b8" strokeWidth="2" />

                        {/* Graph */}
                        <path d={generatePath()} fill="none" stroke="#8b5cf6" strokeWidth="3" />

                        {/* Roots */}
                        <circle cx={toPx(-2, 0).x} cy={toPx(-2, 0).y} r="5" fill="#e11d48" stroke="white" strokeWidth="2" />
                        <text x={toPx(-2, 0).x} y={toPx(-2, 0).y + 20} textAnchor="middle" className="text-xs font-bold fill-rose-600">-2</text>

                        <circle cx={toPx(1, 0).x} cy={toPx(1, 0).y} r="5" fill="#4f46e5" stroke="white" strokeWidth="2" />
                        <text x={toPx(1, 0).x} y={toPx(1, 0).y + 20} textAnchor="middle" className="text-xs font-bold fill-indigo-600">1</text>
                    </svg>
                </div>
            </div>
        </div>
    </div>
  );
};

export default MultiplicityWidget;