import { useState, useMemo } from 'react';
import { Card, CardHeader } from '../../ui/Card';
import { Button } from '../../ui/Button';
import { Input } from '../../ui/Input';
import { CheckCircle, Target, TrendingUp, DollarSign } from 'lucide-react';

interface FilaProduccion {
  q: number;
  ct: number;
}

interface FilaCalculada {
  q: number;
  precio: number;
  it: number;
  ct: number;
  bt: number;
  img: number | null;
  cmg: number | null;
}

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

export function SimuladorProduccion({ ejercicioId: _ejercicioId, onComplete }: SimuladorProduccionProps) {
  const [precio, setPrecio] = useState(80);
  
  const datosBase: FilaProduccion[] = [
    { q: 0, ct: 200 },
    { q: 1, ct: 250 },
    { q: 2, ct: 290 },
    { q: 3, ct: 320 },
    { q: 4, ct: 360 },
    { q: 5, ct: 420 },
    { q: 6, ct: 500 },
    { q: 7, ct: 600 },
    { q: 8, ct: 720 },
  ];

  const datosCalculados: FilaCalculada[] = useMemo(() => {
    return datosBase.map((fila, index) => {
      const it = precio * fila.q;
      const bt = it - fila.ct;
      const img = index > 0 ? precio : null;
      const cmg = index > 0 ? fila.ct - datosBase[index - 1].ct : null;

      return {
        q: fila.q,
        precio,
        it,
        ct: fila.ct,
        bt,
        img,
        cmg,
      };
    });
  }, [precio]);

  const qOptima = useMemo(() => {
    let maxBT = -Infinity;
    let qOpt = 0;
    
    datosCalculados.forEach((fila) => {
      if (fila.bt > maxBT) {
        maxBT = fila.bt;
        qOpt = fila.q;
      }
    });
    
    return qOpt;
  }, [datosCalculados]);

  const verificacionIMgCMg = useMemo(() => {
    const filasValidas = datosCalculados.filter(f => f.img !== null && f.cmg !== null);
    const filaOptima = filasValidas.find(f => f.q === qOptima);
    
    if (!filaOptima) return null;
    
    return {
      img: filaOptima.img,
      cmg: filaOptima.cmg,
      diferencia: Math.abs((filaOptima.img || 0) - (filaOptima.cmg || 0)),
      cumple: Math.abs((filaOptima.img || 0) - (filaOptima.cmg || 0)) < 5,
    };
  }, [datosCalculados, qOptima]);

  const maxValor = Math.max(
    ...datosCalculados.map(d => Math.max(d.it, d.ct, d.bt > 0 ? d.bt : 0))
  );
  const escala = maxValor > 0 ? 140 / maxValor : 1;

  const handleCompletar = () => {
    if (onComplete) {
      onComplete(100);
    }
    return 100;
  };

  return (
    <div className="space-y-6">
      <Card>
        <CardHeader
          title="Simulador de Decisión de Producción"
          subtitle="Encuentra la cantidad óptima que maximiza el beneficio"
        />

        <div className="mb-6 p-4 bg-blue-50 rounded-lg">
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Precio de Mercado (P)
          </label>
          <div className="flex items-center gap-4">
            <DollarSign className="w-5 h-5 text-gray-400" />
            <Input
              type="number"
              value={precio}
              onChange={(e) => setPrecio(parseFloat(e.target.value) || 0)}
              className="w-32"
              min="0"
            />
            <span className="text-sm text-gray-500">
              Ajusta el precio para ver cómo cambia la decisión óptima
            </span>
          </div>
        </div>

        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="bg-gray-50 border-b">
                <th className="px-3 py-2 text-left font-medium text-gray-700">Q</th>
                <th className="px-3 py-2 text-left font-medium text-gray-700">Precio (P)</th>
                <th className="px-3 py-2 text-left font-medium text-primary">IT = P × Q</th>
                <th className="px-3 py-2 text-left font-medium text-gray-700">CT</th>
                <th className="px-3 py-2 text-left font-medium text-success">BT = IT - CT</th>
                <th className="px-3 py-2 text-left font-medium text-gray-600">IMg</th>
                <th className="px-3 py-2 text-left font-medium text-gray-600">CMg</th>
              </tr>
            </thead>
            <tbody>
              {datosCalculados.map((fila) => (
                <tr
                  key={fila.q}
                  className={`border-b hover:bg-gray-50 ${
                    fila.q === qOptima ? 'bg-green-50' : ''
                  }`}
                >
                  <td className="px-3 py-2 font-medium">{fila.q}</td>
                  <td className="px-3 py-2">{fila.precio}</td>
                  <td className="px-3 py-2 font-medium text-primary">{fila.it}</td>
                  <td className="px-3 py-2">{fila.ct}</td>
                  <td className={`px-3 py-2 font-bold ${fila.bt >= 0 ? 'text-success' : 'text-error'}`}>
                    {fila.bt}
                  </td>
                  <td className="px-3 py-2 text-gray-600">
                    {fila.img !== null ? fila.img : '-'}
                  </td>
                  <td className="px-3 py-2 text-gray-600">
                    {fila.cmg !== null ? fila.cmg : '-'}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="mt-6 p-4 bg-green-50 border border-green-200 rounded-lg">
          <div className="flex items-center gap-3">
            <Target className="w-6 h-6 text-green-600" />
            <div>
              <p className="font-semibold text-green-800">
                Cantidad Óptima: Q = {qOptima}
              </p>
              <p className="text-sm text-green-700">
                Beneficio Máximo: BT = {datosCalculados.find(d => d.q === qOptima)?.bt} 
                {' '}(${precio} × {qOptima} - {datosCalculados.find(d => d.q === qOptima)?.ct})
              </p>
            </div>
          </div>
        </div>

        {verificacionIMgCMg && (
          <div className={`mt-4 p-4 rounded-lg ${
            verificacionIMgCMg.cumple 
              ? 'bg-success/10 border border-success' 
              : 'bg-yellow-50 border border-yellow-200'
          }`}>
            <div className="flex items-center gap-2">
              {verificacionIMgCMg.cumple ? (
                <CheckCircle className="w-5 h-5 text-success" />
              ) : (
                <TrendingUp className="w-5 h-5 text-yellow-600" />
              )}
              <span className={`font-medium ${
                verificacionIMgCMg.cumple ? 'text-success' : 'text-yellow-800'
              }`}>
                Verificación IMg ≈ CMg:
              </span>
            </div>
            <p className="mt-1 text-sm text-gray-600">
              IMg = {verificacionIMgCMg.img}, CMg = {verificacionIMgCMg.cmg}
              {' '}(Diferencia: {verificacionIMgCMg.diferencia.toFixed(1)})
            </p>
            <p className="mt-1 text-sm text-gray-500">
              {verificacionIMgCMg.cumple 
                ? '✓ La condición de optimalidad se cumple: IMg ≈ CMg' 
                : 'La diferencia es significativa, pero el beneficio sigue siendo máximo en Q = ' + qOptima}
            </p>
          </div>
        )}
      </Card>

      <Card>
        <CardHeader
          title="Gráfico de IT y CT"
          subtitle="Visualiza el punto donde la distancia entre IT y CT es máxima"
        />

        <div className="h-64 bg-gray-50 rounded-lg p-4">
          <svg className="w-full h-full" viewBox="0 0 500 220">
            <line x1="50" y1="190" x2="480" y2="190" stroke="#374151" strokeWidth="1" />
            <line x1="50" y1="190" x2="50" y2="20" stroke="#374151" strokeWidth="1" />
            <text x="265" y="210" textAnchor="middle" className="text-sm fill-gray-600">Cantidad (Q)</text>
            <text x="20" y="105" textAnchor="middle" className="text-sm fill-gray-600" transform="rotate(-90 20 105)">$</text>
            
            {datosCalculados.map((d, i) => (
              <text key={i} x={80 + i * 45} y="205" textAnchor="middle" className="text-xs fill-gray-500">
                {d.q}
              </text>
            ))}
            
            <polyline
              fill="none"
              stroke="#2563eb"
              strokeWidth="3"
              points={datosCalculados.map((d, i) => `${80 + i * 45},${190 - d.it * escala}`).join(' ')}
            />
            
            <polyline
              fill="none"
              stroke="#dc2626"
              strokeWidth="3"
              points={datosCalculados.map((d, i) => `${80 + i * 45},${190 - d.ct * escala}`).join(' ')}
            />
            
            {datosCalculados.map((d, i) => (
              <g key={i}>
                <circle
                  cx={80 + i * 45}
                  cy={190 - d.it * escala}
                  r="5"
                  fill="#2563eb"
                />
                <circle
                  cx={80 + i * 45}
                  cy={190 - d.ct * escala}
                  r="5"
                  fill="#dc2626"
                />
              </g>
            ))}

            <g transform={`translate(${80 + datosCalculados.findIndex(d => d.q === qOptima) * 45}, ${
              190 - (datosCalculados.find(d => d.q === qOptima)?.it || 0) * escala - 20
            })`}>
              <polygon points="0,0 -8,-15 8,-15" fill="#16a34a" />
              <text x="0" y="-20" textAnchor="middle" className="text-xs fill-green-600 font-bold">
                Óptimo Q={qOptima}
              </text>
            </g>

            <g transform="translate(380, 40)">
              <line x1="0" y1="0" x2="30" y2="0" stroke="#2563eb" strokeWidth="3" />
              <text x="40" y="5" className="text-sm fill-gray-700">IT (Ingreso Total)</text>
              <line x1="0" y1="20" x2="30" y2="20" stroke="#dc2626" strokeWidth="3" />
              <text x="40" y="25" className="text-sm fill-gray-700">CT (Costo Total)</text>
            </g>
          </svg>
        </div>
      </Card>

      <Card className="bg-gradient-to-r from-green-50 to-blue-50">
        <h4 className="font-semibold text-gray-900 mb-3 flex items-center gap-2">
          <TrendingUp className="w-5 h-5" />
          Conceptos Clave
        </h4>
        <div className="grid md:grid-cols-2 gap-4 text-sm">
          <div>
            <p className="font-medium text-gray-700 mb-1">Ingreso Total (IT)</p>
            <p className="text-gray-600">IT = P × Q</p>
          </div>
          <div>
            <p className="font-medium text-gray-700 mb-1">Beneficio Total (BT)</p>
            <p className="text-gray-600">BT = IT - CT</p>
          </div>
          <div>
            <p className="font-medium text-gray-700 mb-1">Ingreso Marginal (IMg)</p>
            <p className="text-gray-600">IMg = ΔIT / ΔQ = P (en competencia perfecta)</p>
          </div>
          <div>
            <p className="font-medium text-gray-700 mb-1">Condición de Optimalidad</p>
            <p className="text-gray-600">IMg = CMg (producir hasta que el ingreso marginal iguale al costo marginal)</p>
          </div>
        </div>
      </Card>

      <div className="flex justify-end">
        <Button onClick={handleCompletar} size="lg">
          <CheckCircle className="w-5 h-5 mr-2" />
          Marcar como Completado
        </Button>
      </div>
    </div>
  );
}

export default SimuladorProduccion;