import React, { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Brain, ArrowRight, ArrowLeft, TrendingUp, TrendingDown, CheckCircle2, XCircle, Trophy, RotateCcw, BookOpen } from 'lucide-react';

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

type DireccionShock = 'oferta-up' | 'oferta-down' | 'demanda-up' | 'demanda-down';
type CurvaTipo = 'oferta' | 'demanda';
type Direccion = 'arriba' | 'abajo';

interface Escenario {
  id: number;
  descripcion: string;
  respuesta: DireccionShock;
  curva: CurvaTipo;
  direccion: Direccion;
  explicacion: string;
  dificultad: 'facil' | 'medio' | 'dificil';
}

const escenarios: Escenario[] = [
  {
    id: 1,
    descripcion: 'Una nueva tecnología permite producir smartphones más rápido y barato.',
    respuesta: 'oferta-up',
    curva: 'oferta',
    direccion: 'arriba',
    explicacion: 'La tecnología mejora la productividad, reduciendo costos. Esto aumenta la oferta (la curva se desplaza a la derecha).',
    dificultad: 'facil'
  },
  {
    id: 2,
    descripcion: 'Se anuncia que el café causa cáncer y la demanda disminuye drásticamente.',
    respuesta: 'demanda-down',
    curva: 'demanda',
    direccion: 'abajo',
    explicacion: 'Las preferencias de los consumidores cambian negativamente. La demanda disminuye (la curva se desplaza a la izquierda).',
    dificultad: 'facil'
  },
  {
    id: 3,
    descripcion: 'Una sequía severa destruye el 40% de la cosecha de trigo.',
    respuesta: 'oferta-down',
    curva: 'oferta',
    direccion: 'abajo',
    explicacion: 'La sequía reduce la cantidad disponible de trigo. La oferta disminuye (la curva se desplaza a la izquierda).',
    dificultad: 'facil'
  },
  {
    id: 4,
    descripcion: 'El ingreso promedio de la población aumenta un 15% (bien normal).',
    respuesta: 'demanda-up',
    curva: 'demanda',
    direccion: 'arriba',
    explicacion: 'Para bienes normales, al aumentar el ingreso, aumenta la demanda (la curva se desplaza a la derecha).',
    dificultad: 'medio'
  },
  {
    id: 5,
    descripcion: 'El precio del petróleo (insumo) sube un 30%.',
    respuesta: 'oferta-down',
    curva: 'oferta',
    direccion: 'abajo',
    explicacion: 'Al subir el costo de los insumos, producir es más caro. La oferta disminuye (la curva se desplaza a la izquierda).',
    dificultad: 'medio'
  },
  {
    id: 6,
    descripcion: 'El gobierno subsidia la compra de autos eléctricos con $5,000.',
    respuesta: 'demanda-up',
    curva: 'demanda',
    direccion: 'arriba',
    explicacion: 'El subsidio reduce el precio efectivo para consumidores. La demanda aumenta (la curva se desplaza a la derecha).',
    dificultad: 'dificil'
  }
];

interface Opcion {
  value: DireccionShock;
  label: string;
  icon: React.ReactNode;
  color: string;
}

const opciones: Opcion[] = [
  { value: 'oferta-up', label: 'Oferta ↑', icon: <TrendingUp className="w-5 h-5" />, color: 'green' },
  { value: 'oferta-down', label: 'Oferta ↓', icon: <TrendingDown className="w-5 h-5" />, color: 'red' },
  { value: 'demanda-up', label: 'Demanda ↑', icon: <TrendingUp className="w-5 h-5" />, color: 'blue' },
  { value: 'demanda-down', label: 'Demanda ↓', icon: <TrendingDown className="w-5 h-5" />, color: 'orange' },
];

export const IdentificarShocks: React.FC<IdentificarShocksProps> = ({ onComplete, ejercicioId: _ejercicioId }) => {
  const [escenarioActual, setEscenarioActual] = useState(0);
  const [respuestaSeleccionada, setRespuestaSeleccionada] = useState<DireccionShock | null>(null);
  const [mostrarResultado, setMostrarResultado] = useState(false);
  const [score, setScore] = useState(0);
  const [respuestasCorrectas, setRespuestasCorrectas] = useState(0);
  const [_startTime] = useState(Date.now());
  const [completado, setCompletado] = useState(false);

  const escenario = escenarios[escenarioActual];

  const handleSeleccionar = (respuesta: DireccionShock) => {
    if (mostrarResultado) return;
    setRespuestaSeleccionada(respuesta);
  };

  const handleVerificar = () => {
    if (!respuestaSeleccionada) return;
    
    const esCorrecta = respuestaSeleccionada === escenario.respuesta;
    setMostrarResultado(true);
    
    if (esCorrecta) {
      setScore(prev => prev + Math.round(100 / escenarios.length));
      setRespuestasCorrectas(prev => prev + 1);
    }
  };

  const handleSiguiente = () => {
    if (escenarioActual < escenarios.length - 1) {
      setEscenarioActual(prev => prev + 1);
      setRespuestaSeleccionada(null);
      setMostrarResultado(false);
    } else {
      setCompletado(true);
      if (onComplete) {
        onComplete(score);
      }
    }
  };

  const handleReiniciar = () => {
    setEscenarioActual(0);
    setRespuestaSeleccionada(null);
    setMostrarResultado(false);
    setScore(0);
    setRespuestasCorrectas(0);
    setCompletado(false);
  };

  const getDificultadColor = (dificultad: string) => {
    switch (dificultad) {
      case 'facil': return 'bg-green-100 text-green-700';
      case 'medio': return 'bg-yellow-100 text-yellow-700';
      case 'dificil': return 'bg-red-100 text-red-700';
      default: return 'bg-gray-100 text-gray-700';
    }
  };

  const renderGraficoShock = () => {
    const { curva, direccion } = escenario;
    const isOferta = curva === 'oferta';
    const isUp = direccion === 'arriba';
    
    return (
      <svg width="300" height="250" className="mx-auto">
        {/* Grid */}
        {Array.from({ length: 6 }).map((_, i) => (
          <g key={i}>
            <line x1={50 + i * 40} y1="30" x2={50 + i * 40} y2="210" stroke="#e5e7eb" strokeWidth="1" />
            <line x1="50" y1={30 + i * 36} x2="250" y2={30 + i * 36} stroke="#e5e7eb" strokeWidth="1" />
          </g>
        ))}

        {/* Ejes */}
        <line x1="50" y1="210" x2="250" y2="210" stroke="#374151" strokeWidth="2" />
        <line x1="50" y1="30" x2="50" y2="210" stroke="#374151" strokeWidth="2" />

        {/* Curva original */}
        {isOferta ? (
          <line x1="80" y1="180" x2="220" y2="80" stroke="#22c55e" strokeWidth="3" />
        ) : (
          <line x1="80" y1="80" x2="220" y2="180" stroke="#3b82f6" strokeWidth="3" />
        )}
        <text x={isOferta ? 230 : 230} y={isOferta ? 75 : 190} className={`text-sm ${isOferta ? 'fill-green-600' : 'fill-blue-600'}`}>
          {isOferta ? 'S₁' : 'D₁'}
        </text>

        {/* Curva desplazada */}
        <motion.g
          initial={{ opacity: 0, x: isUp ? 30 : -30 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.5 }}
        >
          {isOferta ? (
            <line x1={isUp ? 110 : 50} y1="180" x2={isUp ? 250 : 190} y2="80" stroke="#22c55e" strokeWidth="3" strokeDasharray="5,5" />
          ) : (
            <line x1={isUp ? 110 : 50} y1="80" x2={isUp ? 250 : 190} y2="180" stroke="#3b82f6" strokeWidth="3" strokeDasharray="5,5" />
          )}
          <text x={isUp ? 260 : 200} y={isOferta ? 75 : 190} className={`text-sm ${isOferta ? 'fill-green-600' : 'fill-blue-600'}`}>
            {isOferta ? 'S₂' : 'D₂'}
          </text>
        </motion.g>

        {/* Flecha de dirección */}
        <motion.path
          d={isUp ? 'M 280 130 L 300 130' : 'M 300 130 L 280 130'}
          stroke={isOferta ? '#22c55e' : '#3b82f6'}
          strokeWidth="3"
          markerEnd={`url(#arrowhead-${isOferta ? 'green' : 'blue'})`}
          initial={{ pathLength: 0 }}
          animate={{ pathLength: 1 }}
          transition={{ duration: 0.5, delay: 0.3 }}
        />

        {/* Defs para flechas */}
        <defs>
          <marker id="arrowhead-green" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
            <polygon points="0 0, 10 3.5, 0 7" fill="#22c55e" />
          </marker>
          <marker id="arrowhead-blue" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
            <polygon points="0 0, 10 3.5, 0 7" fill="#3b82f6" />
          </marker>
        </defs>
      </svg>
    );
  };

  if (completado) {
    const porcentaje = Math.round((respuestasCorrectas / escenarios.length) * 100);
    
    return (
      <motion.div
        initial={{ opacity: 0, scale: 0.95 }}
        animate={{ opacity: 1, scale: 1 }}
        className="w-full max-w-2xl mx-auto p-8 bg-white rounded-xl shadow-lg text-center"
      >
        <Trophy className="w-16 h-16 text-yellow-500 mx-auto mb-4" />
        <h2 className="text-3xl font-bold text-gray-800 mb-2">¡Ejercicio Completado!</h2>
        <p className="text-gray-600 mb-6">Has identificado shocks del mercado</p>
        
        <div className="bg-gray-50 rounded-lg p-6 mb-6">
          <div className="text-5xl font-bold text-purple-600 mb-2">{porcentaje}%</div>
          <p className="text-gray-600">
            {respuestasCorrectas} de {escenarios.length} respuestas correctas
          </p>
        </div>

        <button
          onClick={handleReiniciar}
          className="inline-flex items-center gap-2 px-6 py-3 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 transition-colors"
        >
          <RotateCcw className="w-5 h-5" />
          Intentar de nuevo
        </button>
      </motion.div>
    );
  }

  return (
    <div className="w-full max-w-4xl mx-auto p-6 bg-white rounded-xl shadow-lg">
      <div className="mb-6">
        <div className="flex items-center justify-between mb-4">
          <div className="flex items-center gap-3">
            <Brain className="w-8 h-8 text-purple-600" />
            <h2 className="text-2xl font-bold text-gray-800">Identificar Shocks del Mercado</h2>
          </div>
          <div className="flex items-center gap-4">
            <span className={`px-3 py-1 rounded-full text-xs font-medium ${getDificultadColor(escenario.dificultad)}`}>
              {escenario.dificultad.toUpperCase()}
            </span>
            <span className="text-sm text-gray-500">
              {escenarioActual + 1} de {escenarios.length}
            </span>
            <div className="w-32 h-2 bg-gray-200 rounded-full overflow-hidden">
              <motion.div
                className="h-full bg-purple-600"
                initial={{ width: 0 }}
                animate={{ width: `${((escenarioActual + 1) / escenarios.length) * 100}%` }}
              />
            </div>
          </div>
        </div>
        <p className="text-gray-600">
          Lee cada escenario e identifica qué curva se desplaza y en qué dirección.
        </p>
      </div>

      <div className="grid md:grid-cols-2 gap-6">
        <div>
          <div className="bg-gradient-to-br from-purple-50 to-blue-50 rounded-lg p-6 mb-4">
            <div className="flex items-start gap-3">
              <BookOpen className="w-6 h-6 text-purple-600 flex-shrink-0 mt-1" />
              <div>
                <h3 className="font-semibold text-gray-800 mb-2">Escenario {escenario.id}</h3>
                <p className="text-gray-700 text-lg">{escenario.descripcion}</p>
              </div>
            </div>
          </div>

          <div className="grid grid-cols-2 gap-3">
            {opciones.map((opcion) => {
              const isSelected = respuestaSeleccionada === opcion.value;
              const isCorrect = mostrarResultado && opcion.value === escenario.respuesta;
              const isWrong = mostrarResultado && isSelected && opcion.value !== escenario.respuesta;

              let buttonClass = 'p-4 rounded-lg border-2 transition-all flex flex-col items-center gap-2 ';
              
              if (isCorrect) {
                buttonClass += 'border-green-500 bg-green-50';
              } else if (isWrong) {
                buttonClass += 'border-red-500 bg-red-50';
              } else if (isSelected) {
                buttonClass += `border-${opcion.color}-500 bg-${opcion.color}-50`;
              } else {
                buttonClass += 'border-gray-200 hover:border-gray-300 hover:bg-gray-50';
              }

              return (
                <motion.button
                  key={opcion.value}
                  onClick={() => handleSeleccionar(opcion.value)}
                  disabled={mostrarResultado}
                  whileHover={!mostrarResultado ? { scale: 1.02 } : {}}
                  whileTap={!mostrarResultado ? { scale: 0.98 } : {}}
                  className={buttonClass}
                >
                  {opcion.icon}
                  <span className={`font-semibold ${
                    isCorrect ? 'text-green-700' : 
                    isWrong ? 'text-red-700' : 
                    isSelected ? `text-${opcion.color}-700` : 'text-gray-700'
                  }`}>
                    {opcion.label}
                  </span>
                  {isCorrect && <CheckCircle2 className="w-5 h-5 text-green-600" />}
                  {isWrong && <XCircle className="w-5 h-5 text-red-600" />}
                </motion.button>
              );
            })}
          </div>

          <AnimatePresence>
            {mostrarResultado && (
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -20 }}
                className={`mt-4 p-4 rounded-lg ${
                  respuestaSeleccionada === escenario.respuesta 
                    ? 'bg-green-50 border border-green-200' 
                    : 'bg-red-50 border border-red-200'
                }`}
              >
                <div className="flex items-start gap-2">
                  {respuestaSeleccionada === escenario.respuesta ? (
                    <CheckCircle2 className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
                  ) : (
                    <XCircle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
                  )}
                  <div>
                    <p className={`font-semibold ${
                      respuestaSeleccionada === escenario.respuesta ? 'text-green-800' : 'text-red-800'
                    }`}>
                      {respuestaSeleccionada === escenario.respuesta ? '¡Correcto!' : 'Incorrecto'}
                    </p>
                    <p className="text-sm mt-1 text-gray-700">{escenario.explicacion}</p>
                  </div>
                </div>
              </motion.div>
            )}
          </AnimatePresence>

          <div className="mt-4 flex gap-3">
            {!mostrarResultado ? (
              <button
                onClick={handleVerificar}
                disabled={!respuestaSeleccionada}
                className="flex-1 py-3 px-4 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
              >
                Verificar respuesta
              </button>
            ) : (
              <button
                onClick={handleSiguiente}
                className="flex-1 py-3 px-4 bg-green-600 text-white rounded-lg font-medium hover:bg-green-700 transition-colors flex items-center justify-center gap-2"
              >
                {escenarioActual < escenarios.length - 1 ? (
                  <>
                    Siguiente
                    <ArrowRight className="w-5 h-5" />
                  </>
                ) : (
                  'Finalizar'
                )}
              </button>
            )}
          </div>
        </div>

        <div className="bg-gray-50 rounded-lg p-4">
          <h3 className="font-semibold text-gray-700 mb-4 text-center">Visualización del Shock</h3>
          {renderGraficoShock()}
          
          <div className="mt-4 p-3 bg-white rounded-lg">
            <h4 className="font-medium text-gray-700 mb-2">Leyenda:</h4>
            <div className="space-y-2 text-sm">
              <div className="flex items-center gap-2">
                <div className="w-8 h-0.5 bg-blue-600"></div>
                <span className="text-gray-600">Curva de Demanda (D)</span>
              </div>
              <div className="flex items-center gap-2">
                <div className="w-8 h-0.5 bg-green-600"></div>
                <span className="text-gray-600">Curva de Oferta (S)</span>
              </div>
              <div className="flex items-center gap-2">
                <div className="w-8 h-0.5 border-t-2 border-dashed border-gray-400"></div>
                <span className="text-gray-600">Curva después del shock</span>
              </div>
            </div>
          </div>

          <div className="mt-4 p-3 bg-yellow-50 rounded-lg border border-yellow-200">
            <p className="text-sm text-yellow-800">
              <strong>Tip:</strong> Recuerda que:
            </p>
            <ul className="text-sm text-yellow-700 mt-1 space-y-1">
              <li>• Factores de oferta: tecnología, insumos, número de vendedores</li>
              <li>• Factores de demanda: ingreso, preferencias, precios relacionados</li>
            </ul>
          </div>
        </div>
      </div>

      <div className="mt-6 flex justify-between items-center">
        <button
          onClick={() => setEscenarioActual(Math.max(0, escenarioActual - 1))}
          disabled={escenarioActual === 0}
          className="flex items-center gap-2 px-4 py-2 text-gray-600 hover:text-gray-800 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
        >
          <ArrowLeft className="w-4 h-4" />
          Anterior
        </button>

        <div className="flex items-center gap-1">
          {escenarios.map((_, index) => (
            <div
              key={index}
              className={`w-2 h-2 rounded-full ${
                index === escenarioActual 
                  ? 'bg-purple-600' 
                  : index < escenarioActual 
                    ? 'bg-green-500' 
                    : 'bg-gray-300'
              }`}
            />
          ))}
        </div>

        <button
          onClick={() => setEscenarioActual(Math.min(escenarios.length - 1, escenarioActual + 1))}
          disabled={escenarioActual === escenarios.length - 1}
          className="flex items-center gap-2 px-4 py-2 text-gray-600 hover:text-gray-800 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
        >
          Siguiente
          <ArrowRight className="w-4 h-4" />
        </button>
      </div>
    </div>
  );
};

export default IdentificarShocks;
