import { useState, useCallback } from 'react';

interface SimuladorDisyuntivasProps {
  ejercicioId: string;
  onComplete?: (puntuacion: number) => void;
}

export function SimuladorDisyuntivas({ ejercicioId: _ejercicioId, onComplete }: SimuladorDisyuntivasProps) {
  const [bienX, setBienX] = useState(50);
  const [bienY, setBienY] = useState(50);
  const [validacion, setValidacion] = useState<'eficiente' | 'ineficiente' | 'inalcanzable' | null>(null);
  const [completado, setCompletado] = useState(false);

  const MAX_X = 100;
  const MAX_Y = 80;

  const calcularFPP = useCallback((x: number): number => {
    const ratio = x / MAX_X;
    const y = MAX_Y * Math.pow(1 - ratio, 0.7);
    return Math.max(0, Math.min(MAX_Y, y));
  }, []);

  const validarPosicion = useCallback(() => {
    const yFPP = calcularFPP(bienX);
    const diferencia = Math.abs(bienY - yFPP);
    const tolerancia = 3;

    if (bienY > yFPP + tolerancia) {
      return 'inalcanzable';
    } else if (diferencia <= tolerancia) {
      return 'eficiente';
    } else {
      return 'ineficiente';
    }
  }, [bienX, bienY, calcularFPP]);

  const handleValidar = () => {
    const resultado = validarPosicion();
    setValidacion(resultado);
    
    if (resultado === 'eficiente' && !completado) {
      setCompletado(true);
      if (onComplete) {
        onComplete(100);
      }
    }
  };

  const handleReset = () => {
    setBienX(50);
    setBienY(50);
    setValidacion(null);
    setCompletado(false);
  };

  // Generar puntos para la curva FPP
  const puntosFPP: string[] = [];
  for (let x = 0; x <= MAX_X; x += 2) {
    const y = calcularFPP(x);
    const svgX = 40 + (x / MAX_X) * 260;
    const svgY = 200 - (y / MAX_Y) * 180;
    puntosFPP.push(`${svgX},${svgY}`);
  }
  const pathData = puntosFPP.length > 0 
    ? `M ${puntosFPP.join(' L ')}`
    : '';

  const colorValidacion = validacion === 'eficiente' 
    ? 'text-green-600 bg-green-50 border-green-200'
    : validacion === 'ineficiente'
    ? 'text-yellow-600 bg-yellow-50 border-yellow-200'
    : validacion === 'inalcanzable'
    ? 'text-red-600 bg-red-50 border-red-200'
    : 'text-gray-600 bg-gray-50 border-gray-200';

  const mensajeValidacion = validacion === 'eficiente'
    ? '¡Excelente! Estás sobre la FPP (Asignación eficiente)'
    : validacion === 'ineficiente'
    ? 'Punto ineficiente: Estás dentro de la FPP, hay recursos sin usar'
    : validacion === 'inalcanzable'
    ? 'Punto inalcanzable: No tienes suficientes recursos'
    : 'Ajusta los sliders para explorar la FPP';

  const puntoColor = validacion === 'eficiente' 
    ? '#10b981' 
    : validacion === 'ineficiente' 
    ? '#f59e0b' 
    : validacion === 'inalcanzable'
    ? '#ef4444'
    : '#6b7280';

  return (
    <div className="w-full max-w-4xl mx-auto bg-white rounded-lg shadow-lg p-6">
      <div className="mb-4">
        <h3 className="text-lg font-semibold text-gray-900">Simulador de Disyuntivas Económicas</h3>
        <p className="text-sm text-gray-500">Explora la Frontera de Posibilidades de Producción (FPP)</p>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="space-y-6">
          {/* Slider X */}
          <div>
            <label className="flex justify-between text-sm font-medium text-gray-700 mb-2">
              <span>Alimentos (X)</span>
              <span className="text-blue-600 font-bold">{bienX} millones de toneladas</span>
            </label>
            <input
              type="range"
              min="0"
              max={MAX_X}
              value={bienX}
              onChange={(e) => setBienX(Number(e.target.value))}
              className="w-full h-2 bg-gray-200 rounded-lg cursor-pointer"
              style={{ accentColor: '#2563eb' }}
            />
          </div>

          {/* Slider Y */}
          <div>
            <label className="flex justify-between text-sm font-medium text-gray-700 mb-2">
              <span>Tecnología (Y)</span>
              <span className="text-green-600 font-bold">{bienY} millones de unidades</span>
            </label>
            <input
              type="range"
              min="0"
              max={MAX_Y}
              value={bienY}
              onChange={(e) => setBienY(Number(e.target.value))}
              className="w-full h-2 bg-gray-200 rounded-lg cursor-pointer"
              style={{ accentColor: '#16a34a' }}
            />
          </div>

          {/* Mensaje de validación */}
          <div className={`p-4 rounded-lg border-2 ${colorValidacion}`}>
            <span className="font-semibold capitalize">{validacion || 'Selecciona'}:</span>
            <p className="text-sm mt-1">{mensajeValidacion}</p>
          </div>

          {/* Botones */}
          <div className="flex gap-3">
            <button
              onClick={handleValidar}
              disabled={completado}
              className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-gray-400 transition-colors"
            >
              Validar Posición
            </button>
            <button
              onClick={handleReset}
              className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
            >
              Reiniciar
            </button>
          </div>

          {/* Mensaje de éxito */}
          {completado && (
            <div className="bg-green-100 border border-green-300 rounded-lg p-4 text-center">
              <p className="text-green-800 font-semibold">¡Ejercicio Completado!</p>
              <p className="text-green-700 text-2xl font-bold mt-1">100 puntos</p>
            </div>
          )}
        </div>

        {/* Gráfico SVG */}
        <div className="bg-gray-50 rounded-lg p-4 border-2 border-gray-200">
          <svg viewBox="0 0 340 240" className="w-full" style={{ minHeight: '300px' }}>
            {/* Grid */}
            <defs>
              <pattern id="grid" width="30" height="27" patternUnits="userSpaceOnUse">
                <path d="M 30 0 L 0 0 0 27" fill="none" stroke="#e5e7eb" strokeWidth="0.5"/>
              </pattern>
            </defs>
            <rect width="340" height="240" fill="url(#grid)" />
            
            {/* Ejes */}
            <line x1="40" y1="210" x2="320" y2="210" stroke="#374151" strokeWidth="2" />
            <line x1="40" y1="210" x2="40" y2="30" stroke="#374151" strokeWidth="2" />
            
            {/* Flechas */}
            <polygon points="320,210 315,207 315,213" fill="#374151" />
            <polygon points="40,30 37,35 43,35" fill="#374151" />
            
            {/* Etiquetas */}
            <text x="180" y="235" textAnchor="middle" fill="#6b7280" fontSize="12">
              Alimentos (millones de toneladas)
            </text>
            <text x="15" y="120" textAnchor="middle" fill="#6b7280" fontSize="12" transform="rotate(-90, 15, 120)">
              Tecnología (millones de unidades)
            </text>
            
            {/* Marcas X */}
            {[0, 25, 50, 75, 100].map((val, i) => (
              <g key={`x-${val}`}>
                <line x1={40 + i * 70} y1="210" x2={40 + i * 70} y2="215" stroke="#374151" />
                <text x={40 + i * 70} y="228" textAnchor="middle" fill="#6b7280" fontSize="11">{val}</text>
              </g>
            ))}
            
            {/* Marcas Y */}
            {[0, 20, 40, 60, 80].map((val, i) => (
              <g key={`y-${val}`}>
                <line x1="35" y1={210 - i * 45} x2="40" y2={210 - i * 45} stroke="#374151" />
                <text x="30" y={210 - i * 45 + 4} textAnchor="end" fill="#6b7280" fontSize="11">{val}</text>
              </g>
            ))}
            
            {/* Curva FPP */}
            {pathData && (
              <path
                d={pathData}
                fill="none"
                stroke="#2563eb"
                strokeWidth="3"
              />
            )}
            
            {/* Punto actual */}
            <circle
              cx={40 + (bienX / MAX_X) * 280}
              cy={210 - (bienY / MAX_Y) * 180}
              r="8"
              fill={puntoColor}
              stroke="white"
              strokeWidth="3"
            />
            
            {/* Coordenadas */}
            <text 
              x={40 + (bienX / MAX_X) * 280} 
              y={210 - (bienY / MAX_Y) * 180 - 15} 
              textAnchor="middle" 
              fill="#1f2937" 
              fontSize="12"
              fontWeight="bold"
            >
              ({bienX}, {bienY})
            </text>
          </svg>
        </div>
      </div>
    </div>
  );
}

export default SimuladorDisyuntivas;
