import React, { useState } from 'react';

interface Pregunta {
  id: number;
  pregunta: string;
  opciones: { letra: string; texto: string; correcta: boolean }[];
  explicacion: string;
  categoria: string;
}

const preguntas: Pregunta[] = [
  {
    id: 1,
    pregunta: "¿Cuál es la función principal de las familias como agente económico?",
    opciones: [
      { letra: "A", texto: "Producir bienes y servicios para el mercado", correcta: false },
      { letra: "B", texto: "Ofrecer factores productivos (trabajo, capital) y consumir", correcta: true },
      { letra: "C", texto: "Regular la economía y recaudar impuestos", correcta: false },
      { letra: "D", texto: "Importar y exportar productos", correcta: false },
    ],
    explicacion: "Las familias son agentes económicos que ofrecen factores de producción (especialmente trabajo) a las empresas y utilizan sus ingresos para consumir bienes y servicios.",
    categoria: "Familias"
  },
  {
    id: 2,
    pregunta: "¿Qué tipo de empresas son las que buscan maximizar beneficios?",
    opciones: [
      { letra: "A", texto: "Empresas públicas", correcta: false },
      { letra: "B", texto: "Empresas privadas", correcta: true },
      { letra: "C", texto: "ONGs", correcta: false },
      { letra: "D", texto: "Cooperativas", correcta: false },
    ],
    explicacion: "Las empresas privadas tienen como objetivo principal la maximización de beneficios o ganancias, a diferencia de las empresas públicas que persiguen objetivos de bienestar social.",
    categoria: "Empresas"
  },
  {
    id: 3,
    pregunta: "¿Cuál de las siguientes NO es una función del Estado como agente económico?",
    opciones: [
      { letra: "A", texto: "Recaudar impuestos", correcta: false },
      { letra: "B", texto: "Regular la actividad económica", correcta: false },
      { letra: "C", texto: "Maximizar utilidades privadas", correcta: true },
      { letra: "D", texto: "Proporcionar bienes públicos", correcta: false },
    ],
    explicacion: "El Estado no busca maximizar utilidades privadas; esa es la función de las empresas privadas. El Estado persigue el bienestar social y el funcionamiento ordenado de la economía.",
    categoria: "Estado"
  },
  {
    id: 4,
    pregunta: "¿Qué flujo representa el pago de salarios en el circuito económico?",
    opciones: [
      { letra: "A", texto: "Flujo real de bienes y servicios", correcta: false },
      { letra: "B", texto: "Flujo monetario del sector empresas a familias", correcta: true },
      { letra: "C", texto: "Flujo de impuestos al Estado", correcta: false },
      { letra: "D", texto: "Flujo de subsidios", correcta: false },
    ],
    explicacion: "Los salarios representan un flujo monetario que va desde las empresas (que pagan) hacia las familias (que reciben el pago por su trabajo).",
    categoria: "Circuito Económico"
  },
  {
    id: 5,
    pregunta: "¿Qué son los bienes públicos según la economía?",
    opciones: [
      { letra: "A", texto: "Productos que solo pueden usar las familias ricas", correcta: false },
      { letra: "B", texto: "Bienes no rivales y no excluibles proporcionados por el Estado", correcta: true },
      { letra: "C", texto: "Productos importados de otros países", correcta: false },
      { letra: "D", texto: "Bienes de lujo que produce el sector privado", correcta: false },
    ],
    explicacion: "Los bienes públicos son aquellos que son no rivales (el uso por una persona no impide el uso por otra) y no excluibles (no se puede impedir que alguien los use), como la defensa nacional o los parques públicos.",
    categoria: "Bienes Públicos"
  },
  {
    id: 6,
    pregunta: "¿Cuál es la relación entre empresas y familias en el mercado de factores?",
    opciones: [
      { letra: "A", texto: "Las empresas ofrecen trabajo y las familias lo demandan", correcta: false },
      { letra: "B", texto: "Las familias ofrecen factores productivos y las empresas los demandan", correcta: true },
      { letra: "C", texto: "El Estado controla ambos lados del mercado", correcta: false },
      { letra: "D", texto: "No hay relación entre ellos", correcta: false },
    ],
    explicacion: "En el mercado de factores, las familias son los oferentes (proveen trabajo, tierra, capital) y las empresas son los demandantes de estos factores productivos.",
    categoria: "Mercado de Factores"
  },
  {
    id: 7,
    pregunta: "¿Qué papel juega el Estado en la redistribución del ingreso?",
    opciones: [
      { letra: "A", texto: "No interviene en la distribución del ingreso", correcta: false },
      { letra: "B", texto: "Recauda impuestos y proporciona transferencias y servicios sociales", correcta: true },
      { letra: "C", texto: "Solo cobra impuestos a las empresas", correcta: false },
      { letra: "D", texto: "Fija los salarios de todos los trabajadores", correcta: false },
    ],
    explicacion: "El Estado redistribuye el ingreso mediante el cobro de impuestos (generalmente progresivos) y el gasto en transferencias, subsidios, educación, salud y otros servicios públicos.",
    categoria: "Redistribución"
  },
  {
    id: 8,
    pregunta: "¿Cuál es un ejemplo de empresa estatal?",
    opciones: [
      { letra: "A", texto: "Una tienda de ropa privada", correcta: false },
      { letra: "B", texto: "Una empresa petrolera nacional", correcta: true },
      { letra: "C", texto: "Un restaurante familiar", correcta: false },
      { letra: "D", texto: "Una empresa tecnológica multinacional", correcta: false },
    ],
    explicacion: "Las empresas petroleras nacionales (como PEMEX, Petrobras, PDVSA) son ejemplos clásicos de empresas estatales, propiedad del gobierno.",
    categoria: "Empresas Estatales"
  }
];

export const AgentesEconomicosQuiz: React.FC = () => {
  const [preguntaActual, setPreguntaActual] = useState<number>(0);
  const [respuestas, setRespuestas] = useState<{ [key: number]: string }>({});
  const [mostrarResultado, setMostrarResultado] = useState<boolean>(false);
  const [quizTerminado, setQuizTerminado] = useState<boolean>(false);

  const seleccionarRespuesta = (letra: string) => {
    setRespuestas({ ...respuestas, [preguntas[preguntaActual].id]: letra });
    setMostrarResultado(true);
  };

  const siguientePregunta = () => {
    if (preguntaActual < preguntas.length - 1) {
      setPreguntaActual(preguntaActual + 1);
      setMostrarResultado(false);
    } else {
      setQuizTerminado(true);
    }
  };

  const anteriorPregunta = () => {
    if (preguntaActual > 0) {
      setPreguntaActual(preguntaActual - 1);
      setMostrarResultado(true);
    }
  };

  const reiniciarQuiz = () => {
    setPreguntaActual(0);
    setRespuestas({});
    setMostrarResultado(false);
    setQuizTerminado(false);
  };

  const calcularPuntuacion = () => {
    let correctas = 0;
    preguntas.forEach(pregunta => {
      const opcionCorrecta = pregunta.opciones.find(o => o.correcta);
      if (opcionCorrecta && respuestas[pregunta.id] === opcionCorrecta.letra) {
        correctas++;
      }
    });
    return correctas;
  };

  if (quizTerminado) {
    const puntuacion = calcularPuntuacion();
    const porcentaje = (puntuacion / preguntas.length) * 100;

    return (
      <div className="max-w-4xl mx-auto p-6">
        <h2 className="text-2xl font-bold mb-6">Resultados del Quiz</h2>
        
        <div className="bg-blue-50 p-6 rounded-lg text-center mb-6">
          <p className="text-4xl font-bold text-blue-600 mb-2">
            {puntuacion} / {preguntas.length}
          </p>
          <p className="text-xl">{porcentaje.toFixed(0)}% de aciertos</p>
          <p className="mt-4">
            {porcentaje >= 80 
              ? '🎉 ¡Excelente! Dominas los agentes económicos' 
              : porcentaje >= 60 
                ? '👍 ¡Bien! Puedes mejorar un poco más' 
                : '📚 Sigue estudiando los agentes económicos'}
          </p>
        </div>

        <div className="space-y-4 mb-6">
          {preguntas.map((pregunta, index) => {
            const respuestaUsuario = respuestas[pregunta.id];
            const opcionCorrecta = pregunta.opciones.find(o => o.correcta);
            const esCorrecta = respuestaUsuario === opcionCorrecta?.letra;

            return (
              <div key={pregunta.id} className={`p-4 rounded-lg ${esCorrecta ? 'bg-green-100' : 'bg-red-100'}`}>
                <p className="font-semibold">{index + 1}. {pregunta.pregunta}</p>
                <p className="text-sm mt-2">
                  Tu respuesta: <span className={esCorrecta ? 'text-green-700 font-medium' : 'text-red-700'}>
                    {respuestaUsuario || 'Sin respuesta'}
                  </span>
                  {!esCorrecta && (
                    <span className="text-green-700 font-medium ml-4">
                      Correcta: {opcionCorrecta?.letra}
                    </span>
                  )}
                </p>
              </div>
            );
          })}
        </div>

        <button
          onClick={reiniciarQuiz}
          className="w-full bg-blue-500 text-white px-6 py-3 rounded-lg hover:bg-blue-600"
        >
          Intentar de Nuevo
        </button>
      </div>
    );
  }

  const pregunta = preguntas[preguntaActual];
  const respuestaSeleccionada = respuestas[pregunta.id];

  return (
    <div className="max-w-4xl mx-auto p-6">
      <h2 className="text-2xl font-bold mb-2">Quiz: Agentes Económicos</h2>
      
      <div className="flex justify-between items-center mb-6">
        <span className="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">
          Pregunta {preguntaActual + 1} de {preguntas.length}
        </span>
        <span className="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">
          Categoría: {pregunta.categoria}
        </span>
      </div>

      <div className="bg-white border rounded-lg p-6 mb-6">
        <h3 className="text-lg font-semibold mb-4">{pregunta.pregunta}</h3>
        
        <div className="space-y-3">
          {pregunta.opciones.map((opcion) => {
            const estaSeleccionada = respuestaSeleccionada === opcion.letra;
            const mostrarCorrecta = mostrarResultado && opcion.correcta;
            const mostrarIncorrecta = mostrarResultado && estaSeleccionada && !opcion.correcta;

            return (
              <button
                key={opcion.letra}
                onClick={() => !mostrarResultado && seleccionarRespuesta(opcion.letra)}
                disabled={mostrarResultado}
                className={`w-full text-left p-4 rounded-lg border-2 transition-all ${
                  mostrarCorrecta
                    ? 'border-green-500 bg-green-50'
                    : mostrarIncorrecta
                      ? 'border-red-500 bg-red-50'
                      : estaSeleccionada
                        ? 'border-blue-500 bg-blue-50'
                        : 'border-gray-200 hover:border-blue-300'
                }`}
              >
                <span className="font-bold mr-2">{opcion.letra})</span>
                {opcion.texto}
                {mostrarCorrecta && <span className="ml-2 text-green-600">✓</span>}
                {mostrarIncorrecta && <span className="ml-2 text-red-600">✗</span>}
              </button>
            );
          })}
        </div>

        {mostrarResultado && (
          <div className="mt-6 p-4 bg-yellow-50 rounded-lg">
            <p className="font-semibold mb-2">Explicación:</p>
            <p className="text-gray-700">{pregunta.explicacion}</p>
          </div>
        )}
      </div>

      <div className="flex justify-between">
        <button
          onClick={anteriorPregunta}
          disabled={preguntaActual === 0}
          className="bg-gray-500 text-white px-6 py-2 rounded hover:bg-gray-600 disabled:bg-gray-300"
        >
          Anterior
        </button>
        
        <button
          onClick={siguientePregunta}
          disabled={!respuestaSeleccionada}
          className="bg-blue-500 text-white px-6 py-2 rounded hover:bg-blue-600 disabled:bg-gray-300"
        >
          {preguntaActual === preguntas.length - 1 ? 'Ver Resultados' : 'Siguiente'}
        </button>
      </div>

      <div className="mt-6 flex justify-center gap-2">
        {preguntas.map((_, index) => (
          <div
            key={index}
            className={`w-3 h-3 rounded-full ${
              index === preguntaActual
                ? 'bg-blue-500'
                : respuestas[preguntas[index].id]
                  ? 'bg-green-400'
                  : 'bg-gray-300'
            }`}
          />
        ))}
      </div>
    </div>
  );
};

export default AgentesEconomicosQuiz;