import React, { useState } from 'react';

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

  // Visualization
  const width = 300;
  const height = 200;
  
  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;