import React, { useState } from 'react';

// Example: x^2 + y^2 - 6x + 8y - 11 = 0
// Center (3, -4), Radius 6
// Steps:
// 1. Group: (x^2 - 6x) + (y^2 + 8y) = 11
// 2. Add magic numbers: (x^2 - 6x + 9) + (y^2 + 8y + 16) = 11 + 9 + 16
// 3. Factor: (x - 3)^2 + (y + 4)^2 = 36

const CompletingSquareWidget: React.FC = () => {
  const [step, setStep] = useState(0);
  const [inputs, setInputs] = useState({
    magicX: '',
    magicY: '',
    factorX: '',
    factorY: '',
    totalR: ''
  });
  // Removed explicit generic Record<string, boolean> to prevent parsing error
  const [errors, setErrors] = useState<any>({});

  const correct = {
    magicX: '9',   // (-6/2)^2
    magicY: '16',  // (8/2)^2
    factorX: '3',  // h
    factorY: '4',  // -k (actually displayed as + 4)
    totalR: '36'   // 11 + 9 + 16
  };

  const handleChange = (field: string, value: string) => {
    setInputs(prev => ({ ...prev, [field]: value }));
    if (errors[field]) {
      setErrors((prev: any) => ({ ...prev, [field]: false }));
    }
  };

  const validateStep1 = () => {
    const isXCorrect = inputs.magicX === correct.magicX;
    const isYCorrect = inputs.magicY === correct.magicY;
    
    setErrors({
      magicX: !isXCorrect,
      magicY: !isYCorrect
    });

    if (isXCorrect && isYCorrect) setStep(1);
  };

  const validateStep2 = () => {
    const isFXCorrect = inputs.factorX === correct.factorX;
    const isFYCorrect = inputs.factorY === correct.factorY;
    const isRCorrect = inputs.totalR === correct.totalR;

    setErrors({
      factorX: !isFXCorrect,
      factorY: !isFYCorrect,
      totalR: !isRCorrect
    });

    if (isFXCorrect && isFYCorrect && isRCorrect) setStep(2);
  };

  return (
    <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-200 w-full max-w-2xl mx-auto">
      <h3 className="text-lg font-bold text-slate-800 mb-4 flex items-center">
        <span className="bg-indigo-100 text-indigo-700 text-xs px-2 py-1 rounded uppercase tracking-wide mr-2">Interactive</span>
        Convert to Standard Form
      </h3>
      
      <div className="mb-6 p-4 bg-slate-50 rounded-lg text-center font-mono text-lg text-slate-700">
        x² + y² - 6x + 8y - 11 = 0
      </div>

      <div className="space-y-6">
        {/* Step 0: Group and Move */}
        <div className={`transition-opacity duration-500 ${step >= 0 ? 'opacity-100' : 'opacity-50'}`}>
          <p className="text-sm font-semibold text-slate-500 mb-2">Step 1: Group terms & move constant</p>
          <div className="font-mono text-lg flex flex-wrap items-center gap-2">
            <span>(x² - 6x + <input 
              type="text" 
              placeholder="?" 
              value={inputs.magicX}
              onChange={(e) => handleChange('magicX', e.target.value)}
              disabled={step > 0}
              className={`w-12 text-center border-b-2 bg-transparent outline-none ${errors.magicX ? 'border-red-500 text-red-600' : 'border-slate-300'}`}
            />)</span>
            <span>+</span>
            <span>(y² + 8y + <input 
              type="text" 
              placeholder="?" 
              value={inputs.magicY}
              onChange={(e) => handleChange('magicY', e.target.value)}
              disabled={step > 0}
              className={`w-12 text-center border-b-2 bg-transparent outline-none ${errors.magicY ? 'border-red-500 text-red-600' : 'border-slate-300'}`}
            />)</span>
            <span>=</span>
            <span>11 + <span className="text-indigo-600">{inputs.magicX || '?'}</span> + <span className="text-indigo-600">{inputs.magicY || '?'}</span></span>
          </div>
          {step === 0 && (
            <div className="mt-2 text-xs text-slate-500">
              Hint: Take half the coefficient of the linear term (-6 and 8), then square it.
            </div>
          )}
          {step === 0 && (
            <button 
              onClick={validateStep1}
              className="mt-4 px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 text-sm font-medium transition-colors"
            >
              Check Magic Numbers
            </button>
          )}
        </div>

        {/* Step 2: Factor */}
        {step >= 1 && (
          <div className="animate-fade-in-up">
            <p className="text-sm font-semibold text-slate-500 mb-2">Step 2: Factor & Sum</p>
            <div className="font-mono text-lg flex flex-wrap items-center gap-2">
              <span>(x - <input 
                type="text" 
                value={inputs.factorX}
                onChange={(e) => handleChange('factorX', e.target.value)}
                disabled={step > 1}
                className={`w-10 text-center border-b-2 bg-transparent outline-none ${errors.factorX ? 'border-red-500' : 'border-slate-300'}`}
              />)²</span>
              <span>+</span>
              <span>(y + <input 
                type="text" 
                value={inputs.factorY}
                onChange={(e) => handleChange('factorY', e.target.value)}
                disabled={step > 1}
                className={`w-10 text-center border-b-2 bg-transparent outline-none ${errors.factorY ? 'border-red-500' : 'border-slate-300'}`}
              />)²</span>
              <span>=</span>
              <input 
                type="text" 
                value={inputs.totalR}
                onChange={(e) => handleChange('totalR', e.target.value)}
                disabled={step > 1}
                className={`w-16 text-center border-b-2 bg-transparent outline-none ${errors.totalR ? 'border-red-500' : 'border-slate-300'}`}
              />
            </div>
             {step === 1 && (
            <button 
              onClick={validateStep2}
              className="mt-4 px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 text-sm font-medium transition-colors"
            >
              Check Final Equation
            </button>
            )}
          </div>
        )}

        {/* Step 3: Success */}
        {step === 2 && (
          <div className="animate-fade-in-up p-4 bg-green-50 border border-green-200 rounded-lg text-green-800">
            <p className="font-bold mb-1">🎉 Awesome work!</p>
            <p className="text-sm">You've successfully converted the equation. The center is (3, -4) and radius is 6 (√36).</p>
          </div>
        )}
      </div>
    </div>
  );
};

export default CompletingSquareWidget;