import { useState } from 'react';
import { Card, CardHeader } from '../../ui/Card';
import { Button } from '../../ui/Button';
import { CheckCircle, XCircle, TrendingDown } from 'lucide-react';

export function LeyRendimientosDecrecientes() {
  const [respuesta, setRespuesta] = useState<string | null>(null);
  const [mostrarExplicacion, setMostrarExplicacion] = useState(false);

  const validarRespuesta = () => {
    setMostrarExplicacion(true);
  };

  return (
    <div className="space-y-6">
      <Card>
        <CardHeader
          title="Ley de Rendimientos Decrecientes"
          subtitle="Comprende cómo los rendimientos marginales disminuyen a medida que aumenta una variable productiva"
        />

        <div className="space-y-4">
          <div className="bg-amber-50 p-4 rounded-lg border border-amber-200">
            <p className="text-sm text-amber-800">
              <strong>Escenario:</strong> Un granjero tiene 100 hectáreas de tierra fijas. 
              Puede contratar más trabajadores, pero la cantidad de tierra no cambia.
            </p>
          </div>

          <div className="bg-gray-50 rounded-lg p-4">
            <h4 className="text-sm font-medium text-gray-700 mb-4">Producción de Trigo (toneladas)</h4>
            <svg className="w-full h-64" viewBox="0 0 500 220">
              {/* Ejes */}
              <line x1="50" y1="180" x2="450" y2="180" stroke="#374151" strokeWidth="2" />
              <line x1="50" y1="180" x2="50" y2="20" stroke="#374151" strokeWidth="2" />
              
              {/* Etiquetas eje X - Trabajadores */}
              <text x="90" y="200" textAnchor="middle" className="text-xs fill-gray-600">1</text>
              <text x="170" y="200" textAnchor="middle" className="text-xs fill-gray-600">2</text>
              <text x="250" y="200" textAnchor="middle" className="text-xs fill-gray-600">3</text>
              <text x="330" y="200" textAnchor="middle" className="text-xs fill-gray-600">4</text>
              <text x="410" y="200" textAnchor="middle" className="text-xs fill-gray-600">5</text>
              <text x="250" y="215" textAnchor="middle" className="text-sm fill-gray-700 font-medium">Número de Trabajadores</text>
              
              {/* Etiquetas eje Y - Producción */}
              <text x="35" y="185" textAnchor="end" className="text-xs fill-gray-600">0</text>
              <text x="35" y="145" textAnchor="end" className="text-xs fill-gray-600">50</text>
              <text x="35" y="105" textAnchor="end" className="text-xs fill-gray-600">100</text>
              <text x="35" y="65" textAnchor="end" className="text-xs fill-gray-600">150</text>
              <text x="35" y="25" textAnchor="end" className="text-xs fill-gray-600">200</text>
              <text x="15" y="100" textAnchor="middle" className="text-sm fill-gray-700 font-medium" transform="rotate(-90 15 100)">Producción (Tn)</text>
              
              {/* Líneas de cuadrícula */}
              <line x1="50" y1="140" x2="450" y2="140" stroke="#e5e7eb" strokeWidth="1" strokeDasharray="4" />
              <line x1="50" y1="100" x2="450" y2="100" stroke="#e5e7eb" strokeWidth="1" strokeDasharray="4" />
              <line x1="50" y1="60" x2="450" y2="60" stroke="#e5e7eb" strokeWidth="1" strokeDasharray="4" />
              
              {/* Curva de producción total */}
              <path
                d="M 50,180 Q 90,140 170,100 Q 250,70 330,60 Q 410,55 450,65"
                fill="none"
                stroke="#2563eb"
                strokeWidth="3"
              />
              
              {/* Puntos de datos */}
              <circle cx="90" cy="140" r="6" fill="#2563eb" />
              <circle cx="170" cy="100" r="6" fill="#2563eb" />
              <circle cx="250" cy="75" r="6" fill="#2563eb" />
              <circle cx="330" cy="65" r="6" fill="#2563eb" />
              <circle cx="410" cy="68" r="6" fill="#ef4444" />
              
              {/* Etiquetas de puntos */}
              <text x="90" y="125" textAnchor="middle" className="text-xs fill-gray-700">50Tn</text>
              <text x="170" y="85" textAnchor="middle" className="text-xs fill-gray-700">100Tn</text>
              <text x="250" y="60" textAnchor="middle" className="text-xs fill-gray-700">135Tn</text>
              <text x="330" y="50" textAnchor="middle" className="text-xs fill-gray-700">155Tn</text>
              <text x="410" y="53" textAnchor="middle" className="text-xs fill-red-600 font-bold">160Tn</text>
              
              {/* Flecha indicando decrecimiento */}
              <path d="M 370,50 Q 390,45 400,60" fill="none" stroke="#ef4444" strokeWidth="2" markerEnd="url(#arrow)" />
              <defs>
                <marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
                  <path d="M0,0 L0,6 L9,3 z" fill="#ef4444" />
                </marker>
              </defs>
            </svg>
          </div>

          <div className="bg-white border rounded-lg p-4">
            <h4 className="font-semibold text-gray-900 mb-3">
              ¿Qué observas en el punto del 5to trabajador?
            </h4>
            <div className="space-y-2">
              <button
                onClick={() => setRespuesta('a')}
                className={`w-full p-3 rounded-lg border-2 text-left transition-all ${
                  respuesta === 'a'
                    ? 'border-blue-500 bg-blue-50'
                    : 'border-gray-200 hover:border-blue-300'
                }`}
              >
                <span className="font-medium">a)</span> La producción aumenta más rápido que antes
              </button>
              <button
                onClick={() => setRespuesta('b')}
                className={`w-full p-3 rounded-lg border-2 text-left transition-all ${
                  respuesta === 'b'
                    ? 'border-blue-500 bg-blue-50'
                    : 'border-gray-200 hover:border-blue-300'
                }`}
              >
                <span className="font-medium">b)</span> El incremento de producción es menor (solo 5Tn adicionales)
              </button>
              <button
                onClick={() => setRespuesta('c')}
                className={`w-full p-3 rounded-lg border-2 text-left transition-all ${
                  respuesta === 'c'
                    ? 'border-blue-500 bg-blue-50'
                    : 'border-gray-200 hover:border-blue-300'
                }`}
              >
                <span className="font-medium">c)</span> La producción total disminuye
              </button>
            </div>
          </div>

          <Button onClick={validarRespuesta} disabled={!respuesta}>
            Validar Respuesta
          </Button>

          {mostrarExplicacion && (
            <div className={`p-4 rounded-lg border ${respuesta === 'b' ? 'bg-green-50 border-green-200' : 'bg-red-50 border-red-200'}`}>
              <div className="flex items-center gap-2 mb-2">
                {respuesta === 'b' ? (
                  <CheckCircle className="w-5 h-5 text-green-600" />
                ) : (
                  <XCircle className="w-5 h-5 text-red-600" />
                )}
                <span className={`font-semibold ${respuesta === 'b' ? 'text-green-800' : 'text-red-800'}`}>
                  {respuesta === 'b' ? '¡Correcto!' : 'Incorrecto'}
                </span>
              </div>
              <p className={`text-sm ${respuesta === 'b' ? 'text-green-700' : 'text-red-700'}`}>
                La respuesta correcta es <strong>b)</strong>. Con el 5to trabajador, la producción 
                solo aumenta de 155Tn a 160Tn (5Tn adicionales), mientras que el 2do trabajador 
                aportó 50Tn adicionales. Esto demuestra la <strong>Ley de Rendimientos Decrecientes</strong>: 
                a medida que aumentamos una variable productiva (trabajo) manteniendo fijas las demás 
                (tierra), el producto marginal disminuye.
              </p>
            </div>
          )}
        </div>
      </Card>

      <Card className="bg-blue-50 border-blue-200">
        <h4 className="font-semibold text-blue-900 mb-2 flex items-center gap-2">
          <TrendingDown className="w-5 h-5" />
          Fórmula del Producto Marginal
        </h4>
        <p className="text-sm text-blue-800">
          <strong>PMg = ΔProducción Total / ΔTrabajadores</strong>
        </p>
        <p className="text-sm text-blue-700 mt-2">
          PMg (1→2) = (100-50)/(2-1) = 50 Tn<br />
          PMg (4→5) = (160-155)/(5-4) = 5 Tn
        </p>
      </Card>
    </div>
  );
}

export default LeyRendimientosDecrecientes;