import { useState } from 'react';
import { motion } from 'framer-motion';
import { Card } from '../../ui/Card';
import { Button } from '../../ui/Button';
import { CheckCircle, XCircle, Trophy, RotateCcw, ArrowRight } from 'lucide-react';

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

interface Pregunta {
  id: number;
  pregunta: string;
  opciones: string[];
  respuestaCorrecta: number;
  explicacion: string;
}

const PREGUNTAS: Pregunta[] = [
  {
    id: 1,
    pregunta: "¿Quiénes son los principales agentes económicos en el flujo circular?",
    opciones: [
      "Solo el gobierno y las empresas",
      "Familias y empresas",
      "Bancos y familias",
      "Empresas y extranjeros"
    ],
    respuestaCorrecta: 1,
    explicacion: "Las familias (consumidores) y las empresas (productores) son los dos agentes principales en el modelo básico del flujo circular."
  },
  {
    id: 2,
    pregunta: "Las familias ofrecen a las empresas:",
    opciones: [
      "Productos terminados",
      "Trabajo, tierra y capital (factores de producción)",
      "Dinero para invertir",
      "Servicios bancarios"
    ],
    respuestaCorrecta: 1,
    explicacion: "Las familias son propietarias de los factores de producción (trabajo, tierra, capital) y los ofrecen a las empresas a cambio de ingresos (salarios, rentas, intereses)."
  },
  {
    id: 3,
    pregunta: "Las empresas le venden a las familias:",
    opciones: [
      "Acciones de la empresa",
      "Bienes y servicios",
      "Materias primas",
      "Deudas"
    ],
    respuestaCorrecta: 1,
    explicacion: "Las empresas producen bienes y servicios que venden a las familias en el mercado de bienes."
  },
  {
    id: 4,
    pregunta: "En el flujo MONETARIO (de dinero), el dinero va:",
    opciones: [
      "De empresas a familias (salarios) y de familias a empresas (gastos)",
      "Solo de familias a empresas",
      "Solo de empresas a familias",
      "En círculo en una sola dirección"
    ],
    respuestaCorrecta: 0,
    explicacion: "El flujo monetario es bidireccional: empresas pagan salarios/rentas a familias, y familias gastan dinero comprando bienes a las empresas."
  },
  {
    id: 5,
    pregunta: "En el flujo REAL (de bienes/factores), ¿qué ofrecen las familias?",
    opciones: [
      "Productos terminados",
      "Factores de producción (trabajo, tierra, capital)",
      "Dinero",
      "Servicios financieros"
    ],
    respuestaCorrecta: 1,
    explicacion: "En el flujo real, las familias ofrecen sus factores de producción (trabajo, tierra, capital) a las empresas."
  }
];

export function FlujoCircular({ ejercicioId: _ejercicioId, onComplete }: FlujoCircularProps) {
  const [preguntaActual, setPreguntaActual] = useState(0);
  const [respuestaSeleccionada, setRespuestaSeleccionada] = useState<number | null>(null);
  const [mostrarResultado, setMostrarResultado] = useState(false);
  const [puntuacion, setPuntuacion] = useState(0);
  const [completado, setCompletado] = useState(false);
  const [respuestasCorrectas, setRespuestasCorrectas] = useState(0);

  const pregunta = PREGUNTAS[preguntaActual];

  const handleSeleccionar = (index: number) => {
    if (mostrarResultado) return;
    setRespuestaSeleccionada(index);
  };

  const handleVerificar = () => {
    if (respuestaSeleccionada === null) return;

    const esCorrecta = respuestaSeleccionada === pregunta.respuestaCorrecta;
    setMostrarResultado(true);

    if (esCorrecta) {
      setPuntuacion(prev => prev + 20);
      setRespuestasCorrectas(prev => prev + 1);
    }

    // Si es la última pregunta
    if (preguntaActual === PREGUNTAS.length - 1) {
      setTimeout(() => {
        setCompletado(true);
        const puntuacionFinal = puntuacion + (esCorrecta ? 20 : 0);
        if (onComplete) {
          onComplete(puntuacionFinal);
        }
      }, 2000);
    }
  };

  const handleSiguiente = () => {
    setPreguntaActual(prev => prev + 1);
    setRespuestaSeleccionada(null);
    setMostrarResultado(false);
  };

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

  if (completado) {
    return (
      <Card className="w-full max-w-2xl mx-auto">
        <div className="text-center py-8 px-4">
          <motion.div
            initial={{ scale: 0 }}
            animate={{ scale: 1 }}
            className="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-yellow-400 to-yellow-600 rounded-full mb-6"
          >
            <Trophy size={40} className="text-white" />
          </motion.div>

          <h3 className="text-2xl font-bold text-gray-900 mb-2">
            ¡Ejercicio Completado!
          </h3>

          <p className="text-gray-600 mb-6">
            Has respondido {respuestasCorrectas} de {PREGUNTAS.length} preguntas correctamente
          </p>

          <div className="bg-blue-50 rounded-xl p-6 mb-6">
            <p className="text-sm text-blue-600 mb-1">Puntuación</p>
            <p className="text-4xl font-bold text-blue-700">{puntuacion}</p>
            <p className="text-sm text-blue-500">puntos</p>
          </div>

          <Button onClick={handleReiniciar} variant="outline">
            <RotateCcw size={16} className="mr-2" />
            Intentar de Nuevo
          </Button>
        </div>
      </Card>
    );
  }

  return (
    <Card className="w-full max-w-3xl mx-auto">
      <div className="p-6">
        {/* Header */}
        <div className="flex items-center justify-between mb-6">
          <div>
            <h3 className="text-xl font-bold text-gray-900">Flujo Circular de la Renta</h3>
            <p className="text-sm text-gray-500">Pregunta {preguntaActual + 1} de {PREGUNTAS.length}</p>
          </div>
          <div className="text-right">
            <p className="text-xs text-gray-500">Puntos</p>
            <p className="text-xl font-bold text-blue-600">{puntuacion}</p>
          </div>
        </div>

        {/* Barra de progreso */}
        <div className="w-full bg-gray-200 rounded-full h-2 mb-6">
          <motion.div
            className="h-2 bg-blue-500 rounded-full"
            initial={{ width: 0 }}
            animate={{ width: `${((preguntaActual + 1) / PREGUNTAS.length) * 100}%` }}
          />
        </div>

        {/* Pregunta */}
        <div className="mb-6">
          <h4 className="text-lg font-medium text-gray-800 mb-4">
            {pregunta.pregunta}
          </h4>

          <div className="space-y-3">
            {pregunta.opciones.map((opcion, index) => {
              const estaSeleccionada = respuestaSeleccionada === index;
              const esCorrecta = index === pregunta.respuestaCorrecta;
              const mostrarCorrecta = mostrarResultado && esCorrecta;
              const mostrarIncorrecta = mostrarResultado && estaSeleccionada && !esCorrecta;

              return (
                <motion.button
                  key={index}
                  onClick={() => handleSeleccionar(index)}
                  disabled={mostrarResultado}
                  whileHover={!mostrarResultado ? { scale: 1.01 } : {}}
                  whileTap={!mostrarResultado ? { scale: 0.99 } : {}}
                  className={`w-full p-4 rounded-xl border-2 text-left 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 bg-white hover:border-blue-300'
                  }`}
                >
                  <div className="flex items-center gap-3">
                    <div className={`w-6 h-6 rounded-full border-2 flex items-center justify-center ${
                      mostrarCorrecta
                        ? 'border-green-500 bg-green-500 text-white'
                        : mostrarIncorrecta
                        ? 'border-red-500 bg-red-500 text-white'
                        : estaSeleccionada
                        ? 'border-blue-500 bg-blue-500 text-white'
                        : 'border-gray-300'
                    }`}>
                      {mostrarCorrecta && <CheckCircle size={14} />}
                      {mostrarIncorrecta && <XCircle size={14} />}
                      {!mostrarResultado && estaSeleccionada && (
                        <div className="w-2 h-2 bg-white rounded-full" />
                      )}
                    </div>
                    <span className={`font-medium ${
                      mostrarCorrecta ? 'text-green-800' :
                      mostrarIncorrecta ? 'text-red-800' :
                      'text-gray-700'
                    }`}>
                      {opcion}
                    </span>
                  </div>
                </motion.button>
              );
            })}
          </div>
        </div>

        {/* Explicación */}
        {mostrarResultado && (
          <motion.div
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            className={`p-4 rounded-xl mb-6 ${
              respuestaSeleccionada === pregunta.respuestaCorrecta
                ? 'bg-green-50 border border-green-200'
                : 'bg-red-50 border border-red-200'
            }`}
          >
            <p className={`font-medium mb-2 ${
              respuestaSeleccionada === pregunta.respuestaCorrecta
                ? 'text-green-800'
                : 'text-red-800'
            }`}>
              {respuestaSeleccionada === pregunta.respuestaCorrecta
                ? '¡Correcto!'
                : 'Incorrecto'}
            </p>
            <p className="text-sm text-gray-700">{pregunta.explicacion}</p>
          </motion.div>
        )}

        {/* Botones */}
        <div className="flex justify-end">
          {!mostrarResultado ? (
            <Button
              onClick={handleVerificar}
              disabled={respuestaSeleccionada === null}
            >
              Verificar Respuesta
            </Button>
          ) : preguntaActual < PREGUNTAS.length - 1 ? (
            <Button onClick={handleSiguiente}>
              Siguiente
              <ArrowRight size={16} className="ml-2" />
            </Button>
          ) : null}
        </div>
      </div>
    </Card>
  );
}

export default FlujoCircular;
