edbridge-scholars/src/components/lessons/RadicalSolutionWidget.tsx

import React, { useState } from 'react';

const RadicalSolutionWidget: React.FC = () => {
  // Equation: sqrt(x) = x - k
  const [k, setK] = useState(2); 

  // Intersection logic
  // x = (x-k)^2 => x = x^2 - 2kx + k^2 => x^2 - (2k+1)x + k^2 = 0
  // Roots via quadratic formula
  const a = 1;
  const b = -(2*k + 1);
  const c = k*k;
  const disc = b*b - 4*a*c;
  
  let solutions: number[] = [];
  if (disc >= 0) {
      const x1 = (-b + Math.sqrt(disc)) / (2*a);
      const x2 = (-b - Math.sqrt(disc)) / (2*a);
      solutions = [x1, x2].filter(val => val >= 0); // Domain x>=0
  }

  // Check validity against original equation sqrt(x) = x - k
  const validSolutions = solutions.filter(x => Math.abs(Math.sqrt(x) - (x - k)) < 0.01);
  const extraneousSolutions = solutions.filter(x => Math.abs(Math.sqrt(x) - (x - k)) >= 0.01);

  // Vis
  const width = 300;
  const height = 300;
  const range = 10;
  const scale = 25;
  const toPx = (v: number, isY = false) => isY ? height - v * scale - 20 : v * scale + 20;

  const pathSqrt = () => {
      let d = "";
      for(let x=0; x<=range; x+=0.1) {
          d += d ? ` L ${toPx(x)} ${toPx(Math.sqrt(x), true)}` : `M ${toPx(x)} ${toPx(Math.sqrt(x), true)}`;
      }
      return d;
  };

  const pathLine = () => {
      // y = x - k
      const x1 = 0; const y1 = -k;
      const x2 = range; const y2 = range - k;
      return `M ${toPx(x1)} ${toPx(y1, true)} L ${toPx(x2)} ${toPx(y2, true)}`;
  };

  // Phantom parabola path (x = y^2) - representing the squared equation
  // This includes y = -sqrt(x)
  const pathPhantom = () => {
      let d = "";
      for(let x=0; x<=range; x+=0.1) {
          d += d ? ` L ${toPx(x)} ${toPx(-Math.sqrt(x), true)}` : `M ${toPx(x)} ${toPx(-Math.sqrt(x), true)}`;
      }
      return d;
  };

  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">Equation</div>
                    <div className="font-mono text-lg font-bold text-slate-800">
                        √x = x - {k}
                    </div>
                </div>

                <div>
                    <label className="text-xs font-bold text-slate-500 uppercase">Shift Line (k) = {k}</label>
                    <input type="range" min="0" max="6" step="0.5" value={k} onChange={e => setK(parseFloat(e.target.value))} className="w-full h-2 bg-slate-200 rounded-lg accent-indigo-600 mt-2"/>
                </div>

                <div className="space-y-3">
                    <div className="p-3 bg-emerald-50 rounded border border-emerald-100">
                        <div className="text-xs font-bold text-emerald-700 uppercase mb-1">Valid Solutions</div>
                        <div className="font-mono text-sm font-bold text-emerald-900">
                            {validSolutions.length > 0 ? validSolutions.map(n => `x = ${n.toFixed(2)}`).join(', ') : "None"}
                        </div>
                    </div>
                    <div className="p-3 bg-rose-50 rounded border border-rose-100">
                        <div className="text-xs font-bold text-rose-700 uppercase mb-1">Extraneous Solutions</div>
                        <div className="font-mono text-sm font-bold text-rose-900">
                            {extraneousSolutions.length > 0 ? extraneousSolutions.map(n => `x = ${n.toFixed(2)}`).join(', ') : "None"}
                        </div>
                    </div>
                </div>
                
                <p className="text-xs text-slate-400 leading-relaxed">
                    The <span className="text-rose-400 font-bold">extraneous</span> solution is a real intersection for the <em>squared</em> equation (the phantom curve), but not for the original radical.
                </p>
            </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">
                        {/* Grid */}
                        <defs>
                            <pattern id="grid-rad" width="25" height="25" patternUnits="userSpaceOnUse">
                                <path d="M 25 0 L 0 0 0 25" fill="none" stroke="#f8fafc" strokeWidth="1"/>
                            </pattern>
                        </defs>
                        <rect width="100%" height="100%" fill="url(#grid-rad)" />

                        {/* Axes */}
                        <line x1="20" y1="0" x2="20" y2="300" stroke="#cbd5e1" strokeWidth="2" />
                        <line x1="0" y1={toPx(0, true)} x2="300" y2={toPx(0, true)} stroke="#cbd5e1" strokeWidth="2" />

                        {/* Phantom -sqrt(x) */}
                        <path d={pathPhantom()} fill="none" stroke="#cbd5e1" strokeWidth="2" strokeDasharray="4,4" />

                        {/* Real sqrt(x) */}
                        <path d={pathSqrt()} fill="none" stroke="#4f46e5" strokeWidth="3" />

                        {/* Line x-k */}
                        <path d={pathLine()} fill="none" stroke="#64748b" strokeWidth="2" />

                        {/* Points */}
                        {validSolutions.map(x => (
                            <circle key={`v-${x}`} cx={toPx(x)} cy={toPx(Math.sqrt(x), true)} r="5" fill="#10b981" stroke="white" strokeWidth="2" />
                        ))}
                        {extraneousSolutions.map(x => (
                            <circle key={`e-${x}`} cx={toPx(x)} cy={toPx(-(Math.sqrt(x)), true)} r="5" fill="#f43f5e" stroke="white" strokeWidth="2" />
                        ))}
                    </svg>
                    <div className="absolute top-2 right-2 text-xs font-bold text-indigo-600">y = √x</div>
                    <div className="absolute bottom-10 right-2 text-xs font-bold text-slate-500">y = x - {k}</div>
                </div>
            </div>
        </div>
    </div>
  );
};

export default RadicalSolutionWidget;