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

interface Bien {
  id: string;
  nombre: string;
  descripcion: string;
  elasticidad: number;
  categoriaCorrecta: Categoria;
}

type Categoria = 'lujo' | 'necesario' | 'inferior';

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

const bienes: Bien[] = [
  { id: '1', nombre: 'Caviar', descripcion: 'Alimento de lujo', elasticidad: 3.5, categoriaCorrecta: 'lujo' },
  { id: '2', nombre: 'Arroz', descripcion: 'Grano básico de consumo', elasticidad: 0.3, categoriaCorrecta: 'necesario' },
  { id: '3', nombre: 'Viajes en primera clase', descripcion: 'Transporte de lujo', elasticidad: 2.8, categoriaCorrecta: 'lujo' },
  { id: '4', nombre: 'Pasta de dientes', descripcion: 'Higiene personal básica', elasticidad: 0.15, categoriaCorrecta: 'necesario' },
  { id: '5', nombre: 'Autobuses', descripcion: 'Transporte público urbano', elasticidad: -0.5, categoriaCorrecta: 'inferior' },
  { id: '6', nombre: 'Frijoles', descripcion: 'Proteína básica', elasticidad: 0.4, categoriaCorrecta: 'necesario' },
  { id: '7', nombre: 'Yates privados', descripcion: 'Embarcaciones recreativas', elasticidad: 4.2, categoriaCorrecta: 'lujo' },
  { id: '8', nombre: 'Pan de bagazo', descripcion: 'Pan económico de baja calidad', elasticidad: -0.8, categoriaCorrecta: 'inferior' },
  { id: '9', nombre: 'Sal', descripcion: 'Condimento esencial', elasticidad: 0.05, categoriaCorrecta: 'necesario' },
  { id: '10', nombre: 'Joyería fina', descripcion: 'Accesorios de oro/plata', elasticidad: 2.2, categoriaCorrecta: 'lujo' },
  { id: '11', nombre: 'Comida rápida barata', descripcion: 'Hamburguesas de bajo costo', elasticidad: -0.3, categoriaCorrecta: 'inferior' },
  { id: '12', nombre: 'Medicinas genéricas', descripcion: 'Productos farmacéuticos básicos', elasticidad: 0.2, categoriaCorrecta: 'necesario' }
];

const categorias: { id: Categoria; nombre: string; descripcion: string; rango: string; color: string }[] = [
  { 
    id: 'lujo', 
    nombre: 'Bienes de Lujo', 
    descripcion: 'El gasto aumenta más que proporcionalmente al ingreso',
    rango: 'Ei > 1',
    color: 'bg-purple-100 border-purple-300 text-purple-800'
  },
  { 
    id: 'necesario', 
    nombre: 'Bienes Necesarios', 
    descripcion: 'El gasto aumenta menos que proporcionalmente al ingreso',
    rango: '0 < Ei < 1',
    color: 'bg-blue-100 border-blue-300 text-blue-800'
  },
  { 
    id: 'inferior', 
    nombre: 'Bienes Inferiores', 
    descripcion: 'El consumo disminuye cuando aumenta el ingreso',
    rango: 'Ei < 0',
    color: 'bg-red-100 border-red-300 text-red-800'
  }
];

export function ClasificadorBienes({ ejercicioId: _ejercicioId, onComplete }: ClasificadorBienesProps) {
  const [clasificaciones, setClasificaciones] = useState<Record<string, Categoria | null>>({});
  const [mostrarResultados, setMostrarResultados] = useState(false);
  const [bienesActuales] = useState(() => 
    [...bienes].sort(() => Math.random() - 0.5).slice(0, 8)
  );

  const seleccionarCategoria = (bienId: string, categoria: Categoria) => {
    setClasificaciones(prev => ({
      ...prev,
      [bienId]: categoria
    }));
  };

  const verificarResultados = () => {
    setMostrarResultados(true);
    
    const correctas = bienesActuales.filter(
      bien => clasificaciones[bien.id] === bien.categoriaCorrecta
    ).length;
    
    const score = Math.round((correctas / bienesActuales.length) * 100);
    
    if (onComplete) {
      onComplete(score);
    }
    
    return score;
  };

  const reiniciar = () => {
    setClasificaciones({});
    setMostrarResultados(false);
  };

  const getEstadoBien = (bien: Bien) => {
    if (!mostrarResultados || !clasificaciones[bien.id]) {
      return 'bg-white border-gray-200';
    }
    
    const esCorrecto = clasificaciones[bien.id] === bien.categoriaCorrecta;
    return esCorrecto 
      ? 'bg-green-50 border-green-400' 
      : 'bg-red-50 border-red-400';
  };

  const getIconoEstado = (bien: Bien) => {
    if (!mostrarResultados || !clasificaciones[bien.id]) return null;
    
    const esCorrecto = clasificaciones[bien.id] === bien.categoriaCorrecta;
    return esCorrecto ? (
      <span className="text-green-600 text-xl">✓</span>
    ) : (
      <span className="text-red-600 text-xl">✗</span>
    );
  };

  const puntuacion = mostrarResultados 
    ? bienesActuales.filter(bien => clasificaciones[bien.id] === bien.categoriaCorrecta).length
    : 0;

  return (
    <Card className="max-w-4xl mx-auto">
      <CardHeader 
        title="Clasificador de Bienes"
        subtitle="Clasifica cada bien según su elasticidad ingreso"
      />

      <div className="space-y-6">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
          {categorias.map((cat) => (
            <div key={cat.id} className={`p-4 rounded-lg border-2 ${cat.color}`}>
              <h4 className="font-bold text-lg">{cat.nombre}</h4>
              <p className="text-sm font-mono font-semibold">{cat.rango}</p>
              <p className="text-xs mt-1 opacity-80">{cat.descripcion}</p>
            </div>
          ))}
        </div>

        <div className="space-y-3">
          {bienesActuales.map((bien) => (
            <div 
              key={bien.id} 
              className={`p-4 rounded-lg border-2 transition-all ${getEstadoBien(bien)}`}
            >
              <div className="flex items-center justify-between">
                <div className="flex-1">
                  <div className="flex items-center gap-2">
                    <h4 className="font-semibold text-gray-800">{bien.nombre}</h4>
                    {getIconoEstado(bien)}
                  </div>
                  <p className="text-sm text-gray-500">{bien.descripcion}</p>
                  {mostrarResultados && (
                    <p className="text-xs font-mono mt-1 text-gray-600">
                      Ei = {bien.elasticidad} → {categorias.find(c => c.id === bien.categoriaCorrecta)?.nombre}
                    </p>
                  )}
                </div>
                
                <div className="flex gap-2">
                  {categorias.map((cat) => (
                    <button
                      key={cat.id}
                      onClick={() => !mostrarResultados && seleccionarCategoria(bien.id, cat.id)}
                      disabled={mostrarResultados}
                      className={`px-3 py-2 rounded text-xs font-medium transition-all ${
                        clasificaciones[bien.id] === cat.id
                          ? cat.color + ' border-2'
                          : 'bg-gray-100 text-gray-600 hover:bg-gray-200 border-2 border-transparent'
                      } ${mostrarResultados ? 'cursor-default' : 'cursor-pointer'}`}
                    >
                      {cat.nombre.split(' ')[1]}
                    </button>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="flex items-center justify-between pt-4 border-t">
          <div className="text-sm text-gray-600">
            Progreso: {Object.keys(clasificaciones).length} / {bienesActuales.length}
          </div>
          
          {!mostrarResultados ? (
            <Button
              onClick={verificarResultados}
              disabled={Object.keys(clasificaciones).length < bienesActuales.length}
            >
              Verificar Resultados
            </Button>
          ) : (
            <div className="flex items-center gap-4">
              <div className="text-right">
                <p className="text-sm text-gray-600">Puntuación</p>
                <p className="text-2xl font-bold text-gray-800">
                  {puntuacion} / {bienesActuales.length}
                </p>
              </div>
              <Button variant="outline" onClick={reiniciar}>
                Reiniciar
              </Button>
            </div>
          )}
        </div>

        {mostrarResultados && (
          <div className={`p-4 rounded-lg ${
            puntuacion === bienesActuales.length 
              ? 'bg-green-100 border border-green-300' 
              : puntuacion >= bienesActuales.length / 2 
                ? 'bg-yellow-100 border border-yellow-300' 
                : 'bg-red-100 border border-red-300'
          }`}>
            <p className="font-semibold text-gray-800">
              {puntuacion === bienesActuales.length 
                ? '¡Perfecto! Has clasificado todos los bienes correctamente.'
                : puntuacion >= bienesActuales.length / 2 
                  ? '¡Buen trabajo! Sigue practicando para mejorar.'
                  : 'Necesitas más práctica. Revisa las categorías y vuelve a intentar.'}
            </p>
          </div>
        )}
      </div>
    </Card>
  );
}

export default ClasificadorBienes;
