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

import React, { useState } from "react";

const PolynomialBehaviorWidget: React.FC = () => {
  const [degreeType, setDegreeType] = useState<"even" | "odd">("odd");
  const [lcSign, setLcSign] = useState<"pos" | "neg">("pos");

  const getPath = () => {
    // Create schematic shapes
    // Odd +: Low Left -> High Right
    // Odd -: High Left -> Low Right
    // Even +: High Left -> High Right
    // Even -: Low Left -> Low Right

    const startY =
      (degreeType === "odd" && lcSign === "pos") ||
      (degreeType === "even" && lcSign === "neg")
        ? 180
        : 20;
    const endY = lcSign === "pos" ? 20 : 180;

    // Control points for curvy polynomial look
    const cp1Y = startY === 20 ? 150 : 50;
    const cp2Y = endY === 20 ? 150 : 50;

    return `M 20 ${startY} C 100 ${cp1Y}, 200 ${cp2Y}, 280 ${endY}`;
  };

  return (
    <div className="bg-white p-6 rounded-xl shadow-lg border border-slate-200">
      <div className="grid grid-cols-2 gap-4 mb-6">
        <div className="space-y-2">
          <p className="text-xs font-bold text-slate-400 uppercase">
            Degree (Highest Power)
          </p>
          <div className="flex gap-2">
            <button
              onClick={() => setDegreeType("even")}
              className={`px-4 py-2 rounded-lg font-bold text-sm border transition-all ${degreeType === "even" ? "bg-indigo-600 text-white border-indigo-600" : "bg-white text-slate-600 border-slate-200"}`}
            >
              Even (x², x⁴)
            </button>
            <button
              onClick={() => setDegreeType("odd")}
              className={`px-4 py-2 rounded-lg font-bold text-sm border transition-all ${degreeType === "odd" ? "bg-indigo-600 text-white border-indigo-600" : "bg-white text-slate-600 border-slate-200"}`}
            >
              Odd (x, x³)
            </button>
          </div>
        </div>
        <div className="space-y-2">
          <p className="text-xs font-bold text-slate-400 uppercase">
            Leading Coefficient
          </p>
          <div className="flex gap-2">
            <button
              onClick={() => setLcSign("pos")}
              className={`px-4 py-2 rounded-lg font-bold text-sm border transition-all ${lcSign === "pos" ? "bg-emerald-600 text-white border-emerald-600" : "bg-white text-slate-600 border-slate-200"}`}
            >
              Positive (+)
            </button>
            <button
              onClick={() => setLcSign("neg")}
              className={`px-4 py-2 rounded-lg font-bold text-sm border transition-all ${lcSign === "neg" ? "bg-rose-600 text-white border-rose-600" : "bg-white text-slate-600 border-slate-200"}`}
            >
              Negative (-)
            </button>
          </div>
        </div>
      </div>

      <div className="relative h-48 bg-slate-50 border border-slate-200 rounded-xl overflow-hidden flex items-center justify-center">
        <svg width="300" height="200">
          <line
            x1="150"
            y1="20"
            x2="150"
            y2="180"
            stroke="#cbd5e1"
            strokeWidth="2"
          />
          <line
            x1="20"
            y1="100"
            x2="280"
            y2="100"
            stroke="#cbd5e1"
            strokeWidth="2"
          />

          <path
            d={getPath()}
            stroke="#8b5cf6"
            strokeWidth="4"
            fill="none"
            markerEnd="url(#arrow)"
            markerStart="url(#arrow-start)"
          />

          <defs>
            <marker
              id="arrow"
              markerWidth="10"
              markerHeight="10"
              refX="8"
              refY="3"
              orient="auto"
            >
              <path d="M0,0 L0,6 L9,3 z" fill="#8b5cf6" />
            </marker>
            <marker
              id="arrow-start"
              markerWidth="10"
              markerHeight="10"
              refX="8"
              refY="3"
              orient="auto-start-reverse"
            >
              <path d="M0,0 L0,6 L9,3 z" fill="#8b5cf6" />
            </marker>
          </defs>
        </svg>

        <div className="absolute top-2 left-2 text-xs font-bold text-slate-400">
          End Behavior
        </div>
      </div>

      <div className="mt-4 p-3 bg-indigo-50 border border-indigo-100 rounded-lg text-sm text-indigo-900 text-center">
        {degreeType === "even" &&
          lcSign === "pos" &&
          "Ends go in the SAME direction (UP)."}
        {degreeType === "even" &&
          lcSign === "neg" &&
          "Ends go in the SAME direction (DOWN)."}
        {degreeType === "odd" &&
          lcSign === "pos" &&
          "Ends go in OPPOSITE directions (Down Left, Up Right)."}
        {degreeType === "odd" &&
          lcSign === "neg" &&
          "Ends go in OPPOSITE directions (Up Left, Down Right)."}
      </div>
    </div>
  );
};

export default PolynomialBehaviorWidget;