import { useState } from 'react';
import { Button } from '../../ui/Button';
import { Input } from '../../ui/Input';
import { Card, CardHeader } from '../../ui/Card';

interface Problema {
  id: number;
  titulo: string;
  descripcion: string;
  datos: { etiqueta: string; valor: string }[];
  preguntas: {
    id: string;
    texto: string;
    tipo: 'numero' | 'seleccion';
    opciones?: string[];
    respuestaCorrecta: number | string;
    tolerancia?: number;
    solucion: string[];
  }[];
}

const problemas: Problema[] = [
  {
    id: 1,
    titulo: "Elasticidad Precio de la Demanda",
    descripcion: "Una tienda de electrónica observa que cuando el precio de un modelo de laptop aumenta de $800 a $900, la cantidad demandada disminuye de 500 a 400 unidades por mes.",
    datos: [
      { etiqueta: "P1", valor: "$800" },
      { etiqueta: "P2", valor: "$900" },
      { etiqueta: "Q1", valor: "500 unidades" },
      { etiqueta: "Q2", valor: "400 unidades" }
    ],
    preguntas: [
      {
        id: "p1_a",
        texto: "Calcule la elasticidad precio de la demanda usando el método del punto medio.",
        tipo: "numero",
        respuestaCorrecta: -1.89,
        tolerancia: 0.05,
        solucion: [
          "Paso 1: ΔQ = 400 - 500 = -100",
          "Paso 2: ΔP = 900 - 800 = 100",
          "Paso 3: Q̄ = (500 + 400) / 2 = 450",
          "Paso 4: P̄ = (800 + 900) / 2 = 850",
          "Paso 5: %ΔQ = (-100 / 450) × 100 = -22.22%",
          "Paso 6: %ΔP = (100 / 850) × 100 = 11.76%",
          "Paso 7: Ed = -22.22% / 11.76% = -1.89"
        ]
      },
      {
        id: "p1_b",
        texto: "¿Qué tipo de demanda presenta este producto?",
        tipo: "seleccion",
        opciones: [
          "Elástica (|Ed| > 1)",
          "Inelástica (|Ed| < 1)",
          "Unitaria (|Ed| = 1)"
        ],
        respuestaCorrecta: "Elástica (|Ed| > 1)",
        solucion: [
          "Como |Ed| = 1.89 > 1, la demanda es ELÁSTICA.",
          "Esto significa que los consumidores son sensibles al cambio de precio.",
          "Un aumento de precio del 1% reduce la cantidad demandada en aproximadamente 1.89%"
        ]
      }
    ]
  },
  {
    id: 2,
    titulo: "Elasticidad Ingreso",
    descripcion: "En una economía, cuando el ingreso promedio de los hogares aumenta de $2,000 a $2,500 mensuales, el consumo de restaurantes de alta categoría aumenta de 2 a 4 visitas mensuales por hogar.",
    datos: [
      { etiqueta: "I1", valor: "$2,000" },
      { etiqueta: "I2", valor: "$2,500" },
      { etiqueta: "Q1", valor: "2 visitas" },
      { etiqueta: "Q2", valor: "4 visitas" }
    ],
    preguntas: [
      {
        id: "p2_a",
        texto: "Calcule la elasticidad ingreso.",
        tipo: "numero",
        respuestaCorrecta: 2.33,
        tolerancia: 0.05,
        solucion: [
          "Paso 1: ΔQ = 4 - 2 = 2",
          "Paso 2: ΔI = 2500 - 2000 = 500",
          "Paso 3: Q̄ = (2 + 4) / 2 = 3",
          "Paso 4: Ī = (2000 + 2500) / 2 = 2250",
          "Paso 5: %ΔQ = (2 / 3) × 100 = 66.67%",
          "Paso 6: %ΔI = (500 / 2250) × 100 = 22.22%",
          "Paso 7: Ei = 66.67% / 22.22% = 3.00"
        ]
      },
      {
        id: "p2_b",
        texto: "¿Qué tipo de bien representa los restaurantes de alta categoría?",
        tipo: "seleccion",
        opciones: [
          "Bien necesario (0 < Ei < 1)",
          "Bien de lujo (Ei > 1)",
          "Bien inferior (Ei < 0)"
        ],
        respuestaCorrecta: "Bien de lujo (Ei > 1)",
        solucion: [
          "Como Ei = 3.00 > 1, se trata de un BIEN DE LUJO.",
          "El gasto en este bien aumenta más que proporcionalmente al ingreso.",
          "Cuando el ingreso crece 10%, el consumo de restaurantes crece 30%"
        ]
      }
    ]
  },
  {
    id: 3,
    titulo: "Elasticidad Cruzada",
    descripcion: "Cuando el precio del café aumenta de $4 a $6 por libra, la cantidad demandada de té aumenta de 100 a 150 libras mensuales en el mismo mercado.",
    datos: [
      { etiqueta: "Pcafé1", valor: "$4/libra" },
      { etiqueta: "Pcafé2", valor: "$6/libra" },
      { etiqueta: "Qté1", valor: "100 libras" },
      { etiqueta: "Qté2", valor: "150 libras" }
    ],
    preguntas: [
      {
        id: "p3_a",
        texto: "Calcule la elasticidad cruzada entre café y té.",
        tipo: "numero",
        respuestaCorrecta: 1.0,
        tolerancia: 0.05,
        solucion: [
          "Paso 1: ΔQté = 150 - 100 = 50",
          "Paso 2: ΔPcafé = 6 - 4 = 2",
          "Paso 3: Qté̄ = (100 + 150) / 2 = 125",
          "Paso 4: Pcafé̄ = (4 + 6) / 2 = 5",
          "Paso 5: %ΔQté = (50 / 125) × 100 = 40%",
          "Paso 6: %ΔPcafé = (2 / 5) × 100 = 40%",
          "Paso 7: Ecr = 40% / 40% = 1.0"
        ]
      },
      {
        id: "p3_b",
        texto: "¿Qué relación existe entre café y té?",
        tipo: "seleccion",
        opciones: [
          "Son bienes sustitutos (Ecr > 0)",
          "Son bienes complementarios (Ecr < 0)",
          "Son bienes independientes (Ecr = 0)"
        ],
        respuestaCorrecta: "Son bienes sustitutos (Ecr > 0)",
        solucion: [
          "Como Ecr = 1.0 > 0, café y té son BIENES SUSTITUTOS.",
          "Cuando sube el precio del café, los consumidores compran más té.",
          "Los consumidores pueden sustituir uno por otro según los precios"
        ]
      }
    ]
  }
];

interface Respuesta {
  valor: string;
  esCorrecta: boolean | null;
}

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

export function EjerciciosExamen({ ejercicioId: _ejercicioId, onComplete }: EjerciciosExamenProps) {
  const [respuestas, setRespuestas] = useState<Record<string, Respuesta>>({});
  const [mostrarSolucion, setMostrarSolucion] = useState<Record<number, boolean>>({});
  const [problemaActual, setProblemaActual] = useState(0);

  const handleRespuesta = (preguntaId: string, valor: string) => {
    setRespuestas(prev => ({
      ...prev,
      [preguntaId]: { valor, esCorrecta: null }
    }));
  };

  const verificarRespuesta = (pregunta: Problema['preguntas'][0]) => {
    const respuesta = respuestas[pregunta.id];
    if (!respuesta) return;

    let esCorrecta = false;
    
    if (pregunta.tipo === 'numero') {
      const valorNum = parseFloat(respuesta.valor);
      const tolerancia = pregunta.tolerancia || 0.05;
      esCorrecta = Math.abs(valorNum - (pregunta.respuestaCorrecta as number)) <= tolerancia;
    } else {
      esCorrecta = respuesta.valor === pregunta.respuestaCorrecta;
    }

    setRespuestas(prev => ({
      ...prev,
      [pregunta.id]: { ...respuesta, esCorrecta }
    }));
  };

  const toggleSolucion = (problemaId: number) => {
    setMostrarSolucion(prev => ({
      ...prev,
      [problemaId]: !prev[problemaId]
    }));
  };

  const calcularPuntuacion = () => {
    let correctas = 0;
    let total = 0;
    
    problemas.forEach(problema => {
      problema.preguntas.forEach(pregunta => {
        total++;
        if (respuestas[pregunta.id]?.esCorrecta) {
          correctas++;
        }
      });
    });

    return Math.round((correctas / total) * 100);
  };

  const finalizarExamen = () => {
    const score = calcularPuntuacion();
    if (onComplete) {
      onComplete(score);
    }
    return score;
  };

  const problema = problemas[problemaActual];
  const progreso = ((problemaActual + 1) / problemas.length) * 100;

  return (
    <Card className="max-w-3xl mx-auto">
      <CardHeader 
        title="Ejercicios Tipo Examen"
        subtitle={`Problema ${problemaActual + 1} de ${problemas.length}`}
      />

      <div className="mb-4">
        <div className="w-full bg-gray-200 rounded-full h-2">
          <div 
            className="bg-primary h-2 rounded-full transition-all"
            style={{ width: `${progreso}%` }}
          />
        </div>
      </div>

      <div className="space-y-6">
        <div className="bg-blue-50 p-4 rounded-lg">
          <h3 className="font-bold text-lg text-blue-900">{problema.titulo}</h3>
          <p className="text-gray-700 mt-2">{problema.descripcion}</p>
          
          <div className="grid grid-cols-2 md:grid-cols-4 gap-2 mt-4">
            {problema.datos.map((dato, idx) => (
              <div key={idx} className="bg-white p-2 rounded text-center">
                <span className="font-mono text-sm font-bold">{dato.etiqueta}</span>
                <p className="text-xs text-gray-600">{dato.valor}</p>
              </div>
            ))}
          </div>
        </div>

        <div className="space-y-6">
          {problema.preguntas.map((pregunta, idx) => {
            const respuesta = respuestas[pregunta.id];
            const estado = respuesta?.esCorrecta;

            return (
              <div key={pregunta.id} className="border rounded-lg p-4">
                <div className="flex items-start gap-2">
                  <span className="bg-primary text-white rounded-full w-6 h-6 flex items-center justify-center text-sm flex-shrink-0">
                    {idx + 1}
                  </span>
                  <p className="text-gray-800 font-medium">{pregunta.texto}</p>
                </div>

                <div className="mt-3 ml-8">
                  {pregunta.tipo === 'numero' ? (
                    <div className="flex gap-2">
                      <Input
                        type="number"
                        step="0.01"
                        value={respuesta?.valor || ''}
                        onChange={(e) => handleRespuesta(pregunta.id, e.target.value)}
                        className="w-48"
                        placeholder="Respuesta numérica"
                      />
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => verificarRespuesta(pregunta)}
                        disabled={!respuesta?.valor}
                      >
                        Verificar
                      </Button>
                    </div>
                  ) : (
                    <div className="space-y-2">
                      {pregunta.opciones?.map((opcion) => (
                        <label 
                          key={opcion} 
                          className={`flex items-center gap-2 p-2 rounded cursor-pointer transition-colors ${
                            respuesta?.valor === opcion 
                              ? 'bg-blue-100 border-blue-300 border' 
                              : 'hover:bg-gray-50 border border-transparent'
                          }`}
                        >
                          <input
                            type="radio"
                            name={pregunta.id}
                            value={opcion}
                            checked={respuesta?.valor === opcion}
                            onChange={(e) => handleRespuesta(pregunta.id, e.target.value)}
                            className="text-primary"
                          />
                          <span className="text-sm">{opcion}</span>
                        </label>
                      ))}
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => verificarRespuesta(pregunta)}
                        disabled={!respuesta?.valor}
                      >
                        Verificar
                      </Button>
                    </div>
                  )}

                  {estado !== null && (
                    <div className={`mt-3 p-3 rounded ${
                      estado 
                        ? 'bg-green-100 text-green-800' 
                        : 'bg-red-100 text-red-800'
                    }`}>
                      {estado ? '¡Correcto!' : 'Incorrecto. Intenta de nuevo.'}
                    </div>
                  )}

                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => toggleSolucion(parseInt(pregunta.id.split('_')[0]))}
                    className="mt-2"
                  >
                    {mostrarSolucion[parseInt(pregunta.id.split('_')[0])] ? 'Ocultar' : 'Ver'} solución
                  </Button>

                  {mostrarSolucion[parseInt(pregunta.id.split('_')[0])] && (
                    <div className="mt-2 bg-gray-50 p-3 rounded text-sm">
                      <p className="font-semibold mb-2">Solución paso a paso:</p>
                      <ul className="space-y-1 text-gray-700">
                        {pregunta.solucion.map((paso, i) => (
                          <li key={i} className="font-mono text-xs">{paso}</li>
                        ))}
                      </ul>
                    </div>
                  )}
                </div>
              </div>
            );
          })}
        </div>

        <div className="flex justify-between pt-4 border-t">
          <Button
            variant="outline"
            onClick={() => setProblemaActual(Math.max(0, problemaActual - 1))}
            disabled={problemaActual === 0}
          >
            Anterior
          </Button>
          
          {problemaActual < problemas.length - 1 ? (
            <Button
              onClick={() => setProblemaActual(problemaActual + 1)}
            >
              Siguiente
            </Button>
          ) : (
            <Button
              onClick={finalizarExamen}
              variant="primary"
            >
              Finalizar Examen
            </Button>
          )}
        </div>

        {problemaActual === problemas.length - 1 && (
          <div className="bg-gray-50 p-4 rounded-lg text-center">
            <p className="text-gray-600">Puntuación actual: <strong>{calcularPuntuacion()}%</strong></p>
          </div>
        )}
      </div>
    </Card>
  );
}

export default EjerciciosExamen;
