import React, { useState } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { GitBranch, ArrowRight, ArrowLeft, CheckCircle2, XCircle, Trophy, RotateCcw, BookOpen, TrendingUp, TrendingDown } from 'lucide-react'; interface CambiosEquilibrioProps { ejercicioId: string; onComplete?: (puntuacion: number) => void; } type DireccionShock = 'oferta-aumenta' | 'oferta-disminuye' | 'demanda-aumenta' | 'demanda-disminuye'; interface Escenario { id: number; descripcion: string; shock: DireccionShock; curva: 'oferta' | 'demanda'; direccion: 'aumenta' | 'disminuye'; cambioPrecio: 'sube' | 'baja'; cambioCantidad: 'sube' | 'baja'; explicacion: string; dificultad: 'facil' | 'medio' | 'dificil'; } const escenarios: Escenario[] = [ { id: 1, descripcion: 'Una nueva tecnología reduce los costos de producción de teléfonos inteligentes.', shock: 'oferta-aumenta', curva: 'oferta', direccion: 'aumenta', cambioPrecio: 'baja', cambioCantidad: 'sube', explicacion: 'La tecnología mejora la productividad, aumentando la oferta. La curva se desplaza a la derecha: el precio baja y la cantidad sube.', dificultad: 'facil' }, { id: 2, descripcion: 'Un informe de salud afirma que el café aumenta la longevidad.', shock: 'demanda-aumenta', curva: 'demanda', direccion: 'aumenta', cambioPrecio: 'sube', cambioCantidad: 'sube', explicacion: 'Las preferencias positivas aumentan la demanda. La curva se desplaza a la derecha: el precio y la cantidad suben.', dificultad: 'facil' }, { id: 3, descripcion: 'Una plaga de langostas destruye el 30% de la cosecha de granos.', shock: 'oferta-disminuye', curva: 'oferta', direccion: 'disminuye', cambioPrecio: 'sube', cambioCantidad: 'baja', explicacion: 'La plaga reduce la cantidad disponible, disminuyendo la oferta. La curva se desplaza a la izquierda: el precio sube y la cantidad baja.', dificultad: 'facil' }, { id: 4, descripcion: 'La economía entra en recesión y el ingreso promedio cae 20% (bien normal).', shock: 'demanda-disminuye', curva: 'demanda', direccion: 'disminuye', cambioPrecio: 'baja', cambioCantidad: 'baja', explicacion: 'Para bienes normales, al bajar el ingreso, disminuye la demanda. La curva se desplaza a la izquierda: el precio y la cantidad bajan.', dificultad: 'medio' }, { id: 5, descripcion: 'El gobierno subsidia la compra de autos eléctricos con $10,000.', shock: 'demanda-aumenta', curva: 'demanda', direccion: 'aumenta', cambioPrecio: 'sube', cambioCantidad: 'sube', explicacion: 'El subsidio reduce el precio efectivo para consumidores, aumentando la demanda. El equilibrio se mueve hacia mayor precio y cantidad.', dificultad: 'medio' }, { id: 6, descripcion: 'El precio del petróleo (insumo importante) sube un 50%.', shock: 'oferta-disminuye', curva: 'oferta', direccion: 'disminuye', cambioPrecio: 'sube', cambioCantidad: 'baja', explicacion: 'Al subir los costos de insumos, producir es más caro, disminuyendo la oferta. El equilibrio resulta en mayor precio y menor cantidad.', dificultad: 'dificil' } ]; interface OpcionShock { value: DireccionShock; label: string; descripcion: string; icon: React.ReactNode; } const opcionesShock: OpcionShock[] = [ { value: 'oferta-aumenta', label: 'Oferta ↑', descripcion: 'Aumenta', icon: }, { value: 'oferta-disminuye', label: 'Oferta ↓', descripcion: 'Disminuye', icon: }, { value: 'demanda-aumenta', label: 'Demanda ↑', descripcion: 'Aumenta', icon: }, { value: 'demanda-disminuye', label: 'Demanda ↓', descripcion: 'Disminuye', icon: }, ]; interface OpcionCambio { value: 'sube' | 'baja'; label: string; icon: React.ReactNode; } const opcionesCambio: OpcionCambio[] = [ { value: 'sube', label: 'Sube', icon: }, { value: 'baja', label: 'Baja', icon: }, ]; export const CambiosEquilibrio: React.FC = ({ onComplete, ejercicioId: _ejercicioId }) => { const [escenarioActual, setEscenarioActual] = useState(0); const [shockSeleccionado, setShockSeleccionado] = useState(null); const [cambioPrecio, setCambioPrecio] = useState<'sube' | 'baja' | null>(null); const [cambioCantidad, setCambioCantidad] = useState<'sube' | 'baja' | null>(null); const [mostrarResultado, setMostrarResultado] = useState(false); const [esCorrecto, setEsCorrecto] = useState(false); const [score, setScore] = useState(0); const [respuestasCorrectas, setRespuestasCorrectas] = useState(0); const [completado, setCompletado] = useState(false); const [_startTime] = useState(Date.now()); const escenario = escenarios[escenarioActual]; const handleVerificar = () => { if (!shockSeleccionado || !cambioPrecio || !cambioCantidad) return; const shockCorrecto = shockSeleccionado === escenario.shock; const precioCorrecto = cambioPrecio === escenario.cambioPrecio; const cantidadCorrecta = cambioCantidad === escenario.cambioCantidad; const todoCorrecto = shockCorrecto && precioCorrecto && cantidadCorrecta; setEsCorrecto(todoCorrecto); setMostrarResultado(true); if (todoCorrecto) { setScore(prev => prev + Math.round(100 / escenarios.length)); setRespuestasCorrectas(prev => prev + 1); } }; const handleSiguiente = () => { if (escenarioActual < escenarios.length - 1) { setEscenarioActual(prev => prev + 1); setShockSeleccionado(null); setCambioPrecio(null); setCambioCantidad(null); setMostrarResultado(false); } else { setCompletado(true); if (onComplete) { onComplete(score); } } }; const handleReiniciar = () => { setEscenarioActual(0); setShockSeleccionado(null); setCambioPrecio(null); setCambioCantidad(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 getShockColor = (value: DireccionShock) => { if (value.includes('oferta')) return value.includes('aumenta') ? 'green' : 'red'; return value.includes('aumenta') ? 'blue' : 'orange'; }; const renderGrafico = () => { const isOferta = escenario.curva === 'oferta'; const isAumenta = escenario.direccion === 'aumenta'; return ( {/* Grid */} {Array.from({ length: 6 }).map((_, i) => ( ))} {/* Ejes */} {/* Labels */} Q P {/* Curva original */} {isOferta ? ( ) : ( )} {isOferta ? 'S₁' : 'D₁'} {/* Curva desplazada */} {mostrarResultado && ( {isOferta ? ( ) : ( )} {isOferta ? 'S₂' : 'D₂'} )} {/* Punto de equilibrio original */} E₁ {/* Nuevo equilibrio (si se muestra resultado) */} {mostrarResultado && ( E₂ )} ); }; if (completado) { const porcentaje = Math.round((respuestasCorrectas / escenarios.length) * 100); return (

¡Ejercicio Completado!

Has analizado cambios en el equilibrio

{porcentaje}%

{respuestasCorrectas} de {escenarios.length} respuestas correctas

); } return (

Cambios en el Equilibrio

{escenario.dificultad.toUpperCase()} {escenarioActual + 1} de {escenarios.length}

Analiza cómo los shocks del mercado afectan el precio y cantidad de equilibrio.

Escenario {escenario.id}

{escenario.descripcion}

1. ¿Qué curva se desplaza y en qué dirección?

{opcionesShock.map((opcion) => { const isSelected = shockSeleccionado === opcion.value; const isCorrect = mostrarResultado && opcion.value === escenario.shock; const color = getShockColor(opcion.value); return ( !mostrarResultado && setShockSeleccionado(opcion.value)} disabled={mostrarResultado} whileHover={!mostrarResultado ? { scale: 1.02 } : {}} whileTap={!mostrarResultado ? { scale: 0.98 } : {}} className={`p-4 rounded-lg border-2 transition-all flex flex-col items-center gap-2 ${ isCorrect ? 'border-green-500 bg-green-50' : isSelected && mostrarResultado && opcion.value !== escenario.shock ? 'border-red-500 bg-red-50' : isSelected ? `border-${color}-500 bg-${color}-50` : 'border-gray-200 hover:border-gray-300 hover:bg-gray-50' }`} > {opcion.icon} {opcion.label} ); })}

2. ¿Cómo cambian el precio y la cantidad de equilibrio?

{opcionesCambio.map((opcion) => { const isSelected = cambioPrecio === opcion.value; const isCorrect = mostrarResultado && opcion.value === escenario.cambioPrecio; return ( ); })}
{opcionesCambio.map((opcion) => { const isSelected = cambioCantidad === opcion.value; const isCorrect = mostrarResultado && opcion.value === escenario.cambioCantidad; return ( ); })}
{mostrarResultado && (
{esCorrecto ? ( ) : ( )}

{esCorrecto ? '¡Correcto!' : 'Algunas respuestas son incorrectas'}

{escenario.explicacion}

)}
{!mostrarResultado ? ( ) : ( )}

Visualización del Cambio

{renderGrafico()}

Resumen de efectos:

Curva de {escenario.curva}: Se {escenario.direccion === 'aumenta' ? 'desplaza a la derecha' : 'desplaza a la izquierda'}
Precio de equilibrio: {escenario.cambioPrecio === 'sube' ? '↑ Sube' : '↓ Baja'}
Cantidad de equilibrio: {escenario.cambioCantidad === 'sube' ? '↑ Sube' : '↓ Baja'}

Recordatorio:

  • • Oferta ↑ → P↓, Q↑
  • • Oferta ↓ → P↑, Q↓
  • • Demanda ↑ → P↑, Q↑
  • • Demanda ↓ → P↓, Q↓
{escenarios.map((_, index) => (
))}
); }; export default CambiosEquilibrio;