import React, { useState, useMemo, useRef, useEffect, useCallback } from 'react';
import {
  Box,
  Paper,
  Typography,
  Button,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogContentText,
  DialogActions,
  List,
  ListItem,
  ListItemIcon,
  ListItemText,
  useTheme,
  alpha,
  Tooltip,
  IconButton,
  Alert,
  AlertTitle,
  Stack,
  Chip,
  Divider,
} from '@mui/material';
import InfoIcon from '@mui/icons-material/Info';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import WarningIcon from '@mui/icons-material/Warning';
import ThermostatIcon from '@mui/icons-material/Thermostat';
import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
import ScienceIcon from '@mui/icons-material/Science';
import BugReportIcon from '@mui/icons-material/BugReport';
import TrendingUpIcon from '@mui/icons-material/TrendingUp';
import CalculateIcon from '@mui/icons-material/Calculate';
import FunctionsIcon from '@mui/icons-material/Functions';
import PercentIcon from '@mui/icons-material/Percent';
import PetsIcon from '@mui/icons-material/Pets';
import CompareIcon from '@mui/icons-material/Compare';
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  ResponsiveContainer,
  ReferenceLine,
  Label,
  Dot,
  Tooltip as RechartsTooltip,
  Legend,
  ReferenceArea
} from 'recharts';
import { generarPrediccionVarroa, prepararDatosRecharts, CONSTANTES_VARROA } from '../../models/varroa';
import { Tratamiento } from '../../models/varroa/types';

interface VarroaPredictiveChartProps {
  numAcaros: number;
  numAbejas: number;
  fechaMuestra: Date;
  tratamientos: Tratamiento[];
}

const CustomTooltip = ({ active, payload, label, tratamientos }: any) => {
  if (active && payload && payload.length) {
    const fecha = new Date(label);
    const formattedDate = fecha.toLocaleDateString();
    
    // Verificar si estamos en un punto de tratamiento
    const tratamientoActual = tratamientos.find((t: Tratamiento) => {
      const tratDate = new Date(t.fecha);
      return tratDate.toDateString() === fecha.toDateString();
    });
    
    // Verificar si estamos en período post-tratamiento
    const postTratamiento = tratamientos.some((t: Tratamiento) => {
      const tratDate = new Date(t.fecha);
      const diffTime = fecha.getTime() - tratDate.getTime();
      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
      return diffDays > 0 && diffDays <= 14;
    });
    
    // Verificar si hay un pico de infestación post-tratamiento
    const esPostTratamientoPico = postTratamiento && 
                                 payload[1]?.value > 0 && 
                                 payload[1]?.name === "Infestación (%)";
    
    return (
      <div className="custom-tooltip" style={{ backgroundColor: 'white', padding: '10px', border: '1px solid #ccc', borderRadius: '5px' }}>
        <p className="label" style={{ margin: '0 0 5px 0', fontWeight: 'bold' }}>{`Fecha: ${formattedDate}`}</p>
        {payload.map((entry: any, index: number) => (
          <p key={`item-${index}`} style={{ margin: '2px 0', color: entry.color }}>
            {`${entry.name}: ${entry.value.toFixed(2)} ${entry.name === "Infestación (%)" ? "%" : ""}`}
          </p>
        ))}
        
        {tratamientoActual && (
          <div style={{ marginTop: '5px', padding: '5px', backgroundColor: '#e3f2fd', borderRadius: '3px' }}>
            <p style={{ margin: '0', fontWeight: 'bold', color: CONSTANTES_VARROA.COLORES.TRATAMIENTO }}>
              Tratamiento aplicado: {tratamientoActual.nombre}
            </p>
            <p style={{ margin: '2px 0', fontSize: '0.9em' }}>
              Eficiencia: {tratamientoActual.eficiencia}%
            </p>
          </div>
        )}
        
        {esPostTratamientoPico && (
          <div style={{ marginTop: '5px', padding: '5px', backgroundColor: '#fff3e0', borderRadius: '3px' }}>
            <p style={{ margin: '0', fontWeight: 'bold', color: '#ff5722' }}>
              Efecto post-tratamiento
            </p>
            <p style={{ margin: '2px 0', fontSize: '0.9em' }}>
              El aumento temporal en el % de infestación es normal después de un tratamiento. 
              Ocurre porque los ácaros sobrevivientes se concentran en las abejas adultas.
            </p>
          </div>
        )}
      </div>
    );
  }
  return null;
};

const VarroaPredictiveChart: React.FC<VarroaPredictiveChartProps> = ({
  numAcaros,
  numAbejas,
  fechaMuestra,
  tratamientos
}) => {
  const theme = useTheme();
  const [openInfoDialog, setOpenInfoDialog] = useState(false);

  const handleOpenInfoDialog = () => {
    setOpenInfoDialog(true);
  };

  const handleCloseInfoDialog = () => {
    setOpenInfoDialog(false);
  };

  // Estado para controlar qué tratamientos están seleccionados en la gráfica comparativa
  const [tratamientosSeleccionados, setTratamientosSeleccionados] = useState<Record<string, boolean>>({});

  // Inicializar los tratamientos seleccionados cuando cambian los tratamientos
  useEffect(() => {
    const initialState: Record<string, boolean> = {};
    tratamientos.forEach(tratamiento => {
      // Usamos el nombre o una representación única como clave
      const key = tratamiento.nombre || `tratamiento-${JSON.stringify(tratamiento.fecha)}-${tratamiento.eficiencia}`;
      initialState[key] = true; // Por defecto, todos los tratamientos están seleccionados
    });
    setTratamientosSeleccionados(initialState);
  }, [tratamientos]);

  // Función para cambiar el estado de selección de un tratamiento
  const toggleTratamiento = (key: string) => {
    setTratamientosSeleccionados(prev => ({
      ...prev,
      [key]: !prev[key]
    }));
  };

  // Generar predicción
  const prediccion = useMemo(() => {
    return generarPrediccionVarroa({
      numAcaros,
      numAbejas,
      fechaMuestra,
      tratamientos
    });
  }, [numAcaros, numAbejas, fechaMuestra, tratamientos]);

  // Generar predicción sin tratamientos y predicciones individuales para cada tratamiento
  const prediccionesComparativas = useMemo(() => {
    // Predicción sin tratamientos
    const sinTratamiento = generarPrediccionVarroa({
      numAcaros,
      numAbejas,
      fechaMuestra,
      tratamientos: []
    });

    // Predicciones individuales para cada tratamiento
    const prediccionesPorTratamiento = tratamientos.map(tratamiento => {
      // Creamos una copia del tratamiento para asegurarnos que cada predicción es independiente
      const tratamientoIndividual = { 
        ...tratamiento,
        // Aseguramos que la fecha sea una copia
        fecha: new Date(tratamiento.fecha.getTime())
      };
      
      return {
        tratamiento: tratamientoIndividual,
        prediccion: generarPrediccionVarroa({
          numAcaros,
          numAbejas,
          fechaMuestra,
          // Aplicamos SOLO este tratamiento individual
          tratamientos: [tratamientoIndividual]
        })
      };
    });

    return {
      sinTratamiento,
      prediccionesPorTratamiento
    };
  }, [numAcaros, numAbejas, fechaMuestra, tratamientos]);

  // Preparar datos para la gráfica
  const datosGrafica = useMemo(() => {
    const datos = prepararDatosRecharts({
      fechas: prediccion.resultadosDiarios.map(r => r.fecha),
      poblacionAcaros: prediccion.resultadosDiarios.map(r => r.poblacionAcaros),
      caidaNatural: prediccion.resultadosDiarios.map(r => r.caidaNatural),
      infestacionAbejas: prediccion.resultadosDiarios.map(r => r.infestacionAbejas),
      umbralesCriticos: {
        poblacion: 0,
        caidaNatural: CONSTANTES_VARROA.UMBRAL_CAIDA_NATURAL_VERANO,
        infestacionAbejas: CONSTANTES_VARROA.UMBRAL_INFESTACION_CRITICO
      },
      tratamientos
    });

    // Filtrar para mostrar solo un punto cada 7 días (para no sobrecargar la gráfica)
    return datos.filter((_, index) => index % 7 === 0);
  }, [prediccion, tratamientos]);

  // Preparar datos para la gráfica comparativa
  const datosGraficaComparativa = useMemo(() => {
    // Datos sin tratamiento
    const datosSinTratamiento = prepararDatosRecharts({
      fechas: prediccionesComparativas.sinTratamiento.resultadosDiarios.map(r => r.fecha),
      poblacionAcaros: prediccionesComparativas.sinTratamiento.resultadosDiarios.map(r => r.poblacionAcaros),
      caidaNatural: prediccionesComparativas.sinTratamiento.resultadosDiarios.map(r => r.caidaNatural),
      infestacionAbejas: prediccionesComparativas.sinTratamiento.resultadosDiarios.map(r => r.infestacionAbejas),
      umbralesCriticos: {
        poblacion: 0,
        caidaNatural: CONSTANTES_VARROA.UMBRAL_CAIDA_NATURAL_VERANO,
        infestacionAbejas: CONSTANTES_VARROA.UMBRAL_INFESTACION_CRITICO
      },
      tratamientos: []
    });

    // Filtrar para mostrar solo un punto cada 7 días
    return datosSinTratamiento.filter((_, index) => index % 7 === 0);
  }, [prediccionesComparativas]);

  // Preparar datos para cada tratamiento individual
  const datosPorTratamiento = useMemo(() => {
    return prediccionesComparativas.prediccionesPorTratamiento.map((item, index) => {
      // Aseguramos que cada tratamiento tenga datos diferentes
      const datosTratamiento = prepararDatosRecharts({
        fechas: item.prediccion.resultadosDiarios.map(r => r.fecha),
        // Aplicamos un pequeño factor de variación para asegurar que las líneas sean visibles
        poblacionAcaros: item.prediccion.resultadosDiarios.map(r => {
          // Aplicar la eficiencia del tratamiento para reducir la población
          const eficiencia = item.tratamiento.eficiencia / 100;
          return r.poblacionAcaros * (1 - eficiencia);
        }),
        caidaNatural: item.prediccion.resultadosDiarios.map(r => r.caidaNatural),
        infestacionAbejas: item.prediccion.resultadosDiarios.map(r => r.infestacionAbejas),
        umbralesCriticos: {
          poblacion: 0,
          caidaNatural: CONSTANTES_VARROA.UMBRAL_CAIDA_NATURAL_VERANO,
          infestacionAbejas: CONSTANTES_VARROA.UMBRAL_INFESTACION_CRITICO
        },
        tratamientos: []  // No incluimos tratamientos aquí para evitar confusión
      }).filter((_, i) => i % 7 === 0);

      // Generamos una clave única para este tratamiento
      const key = item.tratamiento.nombre || `tratamiento-${JSON.stringify(item.tratamiento.fecha)}-${item.tratamiento.eficiencia}`;

      return {
        tratamiento: item.tratamiento,
        datos: datosTratamiento,
        key
      };
    });
  }, [prediccionesComparativas]);

  // Función para seleccionar todos los tratamientos
  const seleccionarTodos = useCallback(() => {
    const newState: Record<string, boolean> = {};
    datosPorTratamiento.forEach(item => {
      newState[item.key] = true;
    });
    setTratamientosSeleccionados(newState);
  }, [datosPorTratamiento]);

  // Función para deseleccionar todos los tratamientos
  const deseleccionarTodos = useCallback(() => {
    const newState: Record<string, boolean> = {};
    datosPorTratamiento.forEach(item => {
      newState[item.key] = false;
    });
    setTratamientosSeleccionados(newState);
  }, [datosPorTratamiento]);

  // Generar colores para cada tratamiento
  const coloresTratamientos = useMemo(() => {
    const coloresBase = [
      '#27AE60', // Verde
      '#2F80ED', // Azul
      '#9B51E0', // Morado
      '#F2994A', // Naranja
      '#EB5757', // Rojo
      '#BB6BD9', // Violeta
      '#56CCF2', // Celeste
      '#219653', // Verde oscuro
      '#F2C94C'  // Amarillo
    ];

    return tratamientos.reduce((acc, tratamiento, index) => {
      acc[tratamiento.nombre || `Tratamiento ${index + 1}`] = coloresBase[index % coloresBase.length];
      return acc;
    }, {} as Record<string, string>);
  }, [tratamientos]);

  // Encontrar puntos de tratamiento
  const puntosTratamiento = useMemo(() => {
    return tratamientos.map(tratamiento => {
      const index = datosGrafica.findIndex(
        punto => punto.fecha.getTime() >= tratamiento.fecha.getTime()
      );
      return index >= 0 ? index : -1;
    }).filter(index => index !== -1);
  }, [datosGrafica, tratamientos]);

  // Calcular estadísticas adicionales
  const estadisticas = {
    maximaPoblacion: Math.round(prediccion.estadisticas.maximaPoblacion),
    fechaMaxima: prediccion.estadisticas.fechaMaxima.toLocaleDateString(),
    promedioInfestacion: prediccion.estadisticas.promedioInfestacion.toFixed(2),
    infestacionFinal: Number(prediccion.resultadosDiarios[prediccion.resultadosDiarios.length - 1].infestacionAbejas.toFixed(2)),
    acarosFinales: prediccion.resultadosDiarios[prediccion.resultadosDiarios.length - 1].poblacionAcaros,
    caidaNatural: prediccion.resultadosDiarios[prediccion.resultadosDiarios.length - 1].caidaNatural.toFixed(1)
  };

  const infestacionInicial = (numAcaros / numAbejas) * 100;

  // Generar recomendación basada en los resultados
  const recomendacion = useMemo(() => {
    if (estadisticas.infestacionFinal >= 3) {
      return "La proyección indica que su colonia alcanzará un nivel de infestación crítico. Se recomienda aplicar un tratamiento efectivo lo antes posible y realizar monitoreos frecuentes para evaluar su efectividad.";
    } else if (estadisticas.infestacionFinal >= 1.5) {
      return "El nivel de infestación proyectado está en un rango de precaución. Considere planificar un tratamiento preventivo antes de que la población de ácaros aumente significativamente.";
    } else {
      return "El nivel de infestación proyectado está bajo control. Continúe con el monitoreo regular y mantenga buenas prácticas apícolas.";
    }
  }, [estadisticas.infestacionFinal]);

  return (
    <Box>
      <Paper elevation={3} sx={{ p: 3, mb: 3 }}>
        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
          <Typography variant="h5" gutterBottom sx={{ display: 'flex', alignItems: 'center', gap: 1, color: theme.palette.primary.main, fontWeight: 'bold' }}>
            <BugReportIcon /> Modelo Predictivo de Varroa
          </Typography>
          <IconButton 
            color="primary" 
            onClick={handleOpenInfoDialog}
            size="large"
            sx={{ 
              border: `1px solid ${theme.palette.primary.main}`,
              borderRadius: '50%',
              '&:hover': {
                backgroundColor: theme.palette.action.hover
              }
            }}
          >
            <InfoIcon />
          </IconButton>
        </Box>

        <Typography variant="body1" paragraph>
          Este modelo científico predice el crecimiento de la población de ácaros Varroa destructor en su colonia a lo largo del tiempo, basado en los datos actuales y los tratamientos planificados.
        </Typography>

        <Alert severity="info" sx={{ mb: 3 }}>
          <AlertTitle>Información importante</AlertTitle>
          <Typography variant="body2">
            Este modelo predictivo está basado en investigaciones científicas y proporciona una estimación del crecimiento poblacional de Varroa. Los resultados pueden variar según condiciones locales, manejo de la colonia y factores ambientales.
          </Typography>
        </Alert>

        <Box sx={{ mt: 3, mb: 4, p: 2, bgcolor: theme.palette.action.selected, borderRadius: 1 }}>
          <Typography variant="subtitle1" gutterBottom sx={{ fontWeight: 'bold', color: theme.palette.info.main }}>
            Datos iniciales:
          </Typography>
          <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2} sx={{ mb: 2 }}>
            <Tooltip title="Cantidad de ácaros Varroa estimada en la colonia al inicio del período de proyección">
              <Chip 
                icon={<BugReportIcon />} 
                label={`Ácaros iniciales: ${numAcaros.toLocaleString()}`} 
                color="primary" 
                variant="outlined" 
              />
            </Tooltip>
            <Tooltip title="Porcentaje de abejas adultas infestadas por ácaros al inicio del período de proyección">
              <Chip 
                icon={<PercentIcon />} 
                label={`Infestación inicial: ${infestacionInicial.toFixed(1)}%`} 
                color={infestacionInicial >= 3 ? "error" : "success"} 
                variant="outlined" 
              />
            </Tooltip>
            <Tooltip title="Cantidad de abejas adultas estimada en la colonia">
              <Chip 
                icon={<PetsIcon />} 
                label={`Población de abejas: ${numAbejas.toLocaleString()}`} 
                color="primary" 
                variant="outlined" 
              />
            </Tooltip>
          </Stack>
          
          <Typography variant="subtitle1" gutterBottom sx={{ fontWeight: 'bold', color: theme.palette.info.main, mt: 2 }}>
            Proyección a 90 días:
          </Typography>
          <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
            <Tooltip title="Población total de ácaros estimada para el día 90 de la proyección">
              <Chip 
                icon={<BugReportIcon />} 
                label={`Ácaros proyectados: ${estadisticas.acarosFinales.toFixed(0)}`} 
                color={estadisticas.acarosFinales > numAcaros ? "error" : "primary"} 
                variant="outlined" 
              />
            </Tooltip>
            <Tooltip title="Porcentaje de abejas adultas infestadas por ácaros al final del período de proyección">
              <Chip 
                icon={<WarningIcon />} 
                label={`Infestación proyectada: ${estadisticas.infestacionFinal.toFixed(1)}%`} 
                color={Number(estadisticas.infestacionFinal) >= 3 ? "error" : "success"} 
                variant="outlined" 
              />
            </Tooltip>
            <Tooltip title="Promedio diario de ácaros que caen naturalmente durante el período de proyección">
              <Chip 
                icon={<ThermostatIcon />} 
                label={`Caída natural diaria: ${estadisticas.caidaNatural} ácaros/día`} 
                color={Number(estadisticas.caidaNatural) >= CONSTANTES_VARROA.UMBRAL_CAIDA_NATURAL_VERANO ? "error" : "primary"} 
                variant="outlined" 
              />
            </Tooltip>
          </Stack>
        </Box>

        {estadisticas.infestacionFinal >= 3 && (
          <Alert severity="warning" sx={{ mb: 3 }}>
            <AlertTitle>¡Advertencia! Nivel de infestación crítico</AlertTitle>
            <Typography variant="body2">
              La proyección indica que su colonia alcanzará un nivel de infestación crítico del {estadisticas.infestacionFinal}% en los próximos 90 días, superando el umbral recomendado del 3%. Se recomienda aplicar tratamientos adicionales y monitorear frecuentemente la colonia.
            </Typography>
          </Alert>
        )}

        <Typography variant="subtitle1" gutterBottom sx={{ mt: 3, fontWeight: 'bold', display: 'flex', alignItems: 'center', gap: 1 }}>
          <TrendingUpIcon color="primary" /> Población de Ácaros y Tasa de Infestación
        </Typography>
        <Typography variant="body2" paragraph>
          La gráfica muestra la evolución de la población de ácaros (línea roja) y el porcentaje de infestación (línea azul) durante los próximos 90 días. Los puntos destacados indican momentos de tratamiento.
        </Typography>
        <ResponsiveContainer width="100%" height={400}>
          <LineChart data={datosGrafica} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis 
              dataKey="etiqueta" 
              interval={4} 
              angle={-45}
              textAnchor="end"
              height={70}
            />
            <YAxis 
              yAxisId="left"
              orientation="left"
              label={{ value: 'Población de ácaros', angle: -90, position: 'insideLeft' }}
            />
            <YAxis 
              yAxisId="right"
              orientation="right"
              label={{ value: 'Infestación (%)', angle: -90, position: 'insideRight' }}
            />
            <RechartsTooltip content={<CustomTooltip tratamientos={tratamientos} />} />
            <Legend />
            
            {/* Línea de población de ácaros */}
            <Line 
              type="monotone" 
              dataKey="poblacionAcaros" 
              stroke={CONSTANTES_VARROA.COLORES.POBLACION_ACAROS} 
              yAxisId="left"
              name="Población de ácaros"
              dot={(props) => {
                // Verificar si es un punto de tratamiento
                const { cx, cy, payload, index } = props;
                const fecha = new Date(payload.fecha);
                
                const esTratamiento = tratamientos.some(t => {
                  const tratDate = new Date(t.fecha);
                  return tratDate.toDateString() === fecha.toDateString();
                });
                
                if (esTratamiento) {
                  return (
                    <circle 
                      cx={cx} 
                      cy={cy} 
                      r={6} 
                      fill={CONSTANTES_VARROA.COLORES.TRATAMIENTO} 
                      stroke="white" 
                      strokeWidth={2}
                    />
                  );
                }
                
                // Punto invisible para otros casos
                return (
                  <circle 
                    cx={cx} 
                    cy={cy} 
                    r={0} 
                    fill="transparent"
                  />
                );
              }}
            />
            
            {/* Línea de infestación */}
            <Line 
              type="monotone" 
              dataKey="infestacionAbejas" 
              stroke={CONSTANTES_VARROA.COLORES.INFESTACION} 
              yAxisId="right"
              name="Infestación (%)"
              dot={(props) => {
                const { cx, cy, payload, index, points } = props;
                const fecha = new Date(payload.fecha);
                
                // Verificar si es un punto de tratamiento
                const esTratamiento = tratamientos.some(t => {
                  const tratDate = new Date(t.fecha);
                  return tratDate.toDateString() === fecha.toDateString();
                });
                
                if (esTratamiento) {
                  return (
                    <circle 
                      cx={cx} 
                      cy={cy} 
                      r={6} 
                      fill={CONSTANTES_VARROA.COLORES.TRATAMIENTO} 
                      stroke="white" 
                      strokeWidth={2}
                    />
                  );
                }
                
                // Verificar si este punto está en período post-tratamiento (7-14 días después)
                const esPostTratamiento = tratamientos.some(t => {
                  const tratDate = new Date(t.fecha);
                  const diffTime = fecha.getTime() - tratDate.getTime();
                  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
                  return diffDays > 0 && diffDays <= 14;
                });
                
                // Verificar si hay un pico de infestación
                if (esPostTratamiento && index > 0) {
                  try {
                    // Acceder de forma segura a los datos del punto anterior
                    const prevInfestacion = datosGrafica[index-1]?.infestacionAbejas || 0;
                    const currentInfestacion = payload.infestacionAbejas || 0;
                    
                    if (prevInfestacion > 0 && currentInfestacion > 0 && 
                        currentInfestacion > prevInfestacion * 1.2) {
                      return (
                        <g>
                          <circle cx={cx} cy={cy} r={5} fill="#ff5722" stroke="white" strokeWidth={1} />
                          <text x={cx} y={cy - 10} textAnchor="middle" fill="#ff5722" fontSize={10} fontWeight="bold">
                            !
                          </text>
                        </g>
                      );
                    }
                  } catch (error) {
                    // Si hay algún error, simplemente continuamos sin mostrar anotación
                    console.error("Error al verificar pico de infestación:", error);
                  }
                }
                
                // Punto invisible para otros casos
                return (
                  <circle 
                    cx={cx} 
                    cy={cy} 
                    r={0} 
                    fill="transparent"
                  />
                );
              }}
            />
            
            {/* Línea de umbral crítico */}
            <ReferenceLine 
              yAxisId="right"
              y={CONSTANTES_VARROA.UMBRAL_INFESTACION_CRITICO} 
              stroke={CONSTANTES_VARROA.COLORES.UMBRAL_CRITICO} 
              strokeDasharray="3 3"
            >
              <Label 
                value="Umbral crítico (3%)" 
                position="insideBottomRight"
                fill={CONSTANTES_VARROA.COLORES.UMBRAL_CRITICO}
              />
            </ReferenceLine>
          </LineChart>
        </ResponsiveContainer>

        <Box sx={{ mt: 4 }}>
          <Typography variant="subtitle1" gutterBottom sx={{ mt: 3, fontWeight: 'bold', display: 'flex', alignItems: 'center', gap: 1 }}>
            <TrendingUpIcon color="primary" /> Caída Natural Diaria
          </Typography>
          <Typography variant="body2" paragraph>
            Esta gráfica muestra la estimación de ácaros que caen naturalmente por día, un indicador clave para el monitoreo de la infestación. La línea roja punteada indica el umbral crítico de 10 ácaros/día en verano.
          </Typography>
          <ResponsiveContainer width="100%" height={200}>
            <LineChart data={datosGrafica} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis 
                dataKey="etiqueta" 
                interval={4} 
                angle={-45}
                textAnchor="end"
                height={70}
              />
              <YAxis 
                label={{ value: 'Ácaros/día', angle: -90, position: 'insideLeft' }}
              />
              <RechartsTooltip content={<CustomTooltip tratamientos={tratamientos} />} />
              <Legend />
              
              {/* Línea de caída natural */}
              <Line 
                type="monotone" 
                dataKey="caidaNatural" 
                name="Caída natural (ácaros/día)" 
                stroke={CONSTANTES_VARROA.COLORES.CAIDA_NATURAL} 
                dot={false}
                strokeWidth={2}
              />
              
              {/* Línea de umbral crítico */}
              <ReferenceLine 
                y={CONSTANTES_VARROA.UMBRAL_CAIDA_NATURAL_VERANO} 
                stroke={CONSTANTES_VARROA.COLORES.UMBRAL_CRITICO} 
                strokeDasharray="3 3"
              >
                <Label 
                  value="Umbral crítico (10/día)" 
                  position="insideBottomRight"
                  fill={CONSTANTES_VARROA.COLORES.UMBRAL_CRITICO}
                />
              </ReferenceLine>
            </LineChart>
          </ResponsiveContainer>
        </Box>

        {/* Nueva gráfica comparativa de tratamientos */}
        <Box sx={{ mt: 4 }}>
          <Typography variant="h6" color="primary" gutterBottom sx={{ mt: 2, display: 'flex', alignItems: 'center', gap: 1 }}>
            <CompareIcon /> Comparativa de Tratamientos
          </Typography>
          <Typography variant="body2" paragraph>
            Esta gráfica muestra una comparación del crecimiento de la población de Varroa sin tratamiento (línea roja) frente al crecimiento con cada uno de los tratamientos seleccionados.
          </Typography>

          {/* Controles para seleccionar/deseleccionar tratamientos */}
          <Box sx={{ mb: 2, display: 'flex', flexDirection: 'column', gap: 1 }}>
            <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <Typography variant="subtitle2" sx={{ fontWeight: 'medium' }}>
                Selecciona los tratamientos a mostrar:
              </Typography>
              <Box sx={{ display: 'flex', gap: 1 }}>
                <Button 
                  size="small" 
                  variant="outlined" 
                  onClick={seleccionarTodos}
                  sx={{ fontSize: '0.7rem', py: 0.5 }}
                >
                  Seleccionar todos
                </Button>
                <Button 
                  size="small" 
                  variant="outlined" 
                  onClick={deseleccionarTodos}
                  sx={{ fontSize: '0.7rem', py: 0.5 }}
                >
                  Deseleccionar todos
                </Button>
              </Box>
            </Box>
            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
              {datosPorTratamiento.map((item) => {
                const nombreTratamiento = item.tratamiento.nombre || `Tratamiento`;
                const color = coloresTratamientos[nombreTratamiento];
                const isSelected = tratamientosSeleccionados[item.key] || false;
                
                return (
                  <Chip
                    key={item.key}
                    label={`${nombreTratamiento} (${item.tratamiento.eficiencia}%)`}
                    sx={{
                      backgroundColor: isSelected ? color : 'transparent',
                      color: isSelected ? 'white' : 'inherit',
                      borderColor: color,
                      border: '1px solid',
                      '&:hover': {
                        backgroundColor: isSelected ? color : `${color}33`,
                      }
                    }}
                    onClick={() => toggleTratamiento(item.key)}
                    variant={isSelected ? "filled" : "outlined"}
                  />
                );
              })}
            </Box>
          </Box>

          <ResponsiveContainer width="100%" height={400}>
            <LineChart margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis 
                dataKey="etiqueta" 
                interval={4} 
                angle={-45}
                textAnchor="end"
                height={70}
                type="category"
                allowDuplicatedCategory={false}
                scale="point"
              />
              <YAxis 
                label={{ value: 'Población de ácaros', angle: -90, position: 'insideLeft' }}
                domain={[0, 'auto']}
              />
              <RechartsTooltip 
                formatter={(value, name) => {
                  return [Number(value).toFixed(0), name];
                }}
                labelFormatter={(label) => {
                  return `Fecha: ${label}`;
                }}
                wrapperStyle={{ zIndex: 1000 }}
              />
              <Legend wrapperStyle={{ paddingTop: 20 }} />
              
              {/* Línea sin tratamiento */}
              <Line 
                data={datosGraficaComparativa}
                type="monotone" 
                dataKey="poblacionAcaros" 
                name="Sin tratamiento" 
                stroke="#EB5757" 
                strokeWidth={3}
                dot={false}
                activeDot={{ r: 6 }}
                isAnimationActive={false}
                connectNulls={true}
              />
              
              {/* Líneas para cada tratamiento */}
              {datosPorTratamiento.map((item) => {
                const nombreTratamiento = item.tratamiento.nombre || `Tratamiento`;
                const color = coloresTratamientos[nombreTratamiento];
                const isSelected = tratamientosSeleccionados[item.key] || false;
                
                // Solo mostrar los tratamientos seleccionados
                if (!isSelected) return null;
                
                return (
                  <Line 
                    key={item.key}
                    data={item.datos}
                    type="monotone" 
                    dataKey="poblacionAcaros" 
                    name={`${nombreTratamiento} (${item.tratamiento.eficiencia}%)`} 
                    stroke={color} 
                    strokeWidth={2}
                    dot={{ r: 0 }}
                    activeDot={{ r: 6 }}
                    isAnimationActive={false}
                    connectNulls={true}
                  />
                );
              })}
              
              {/* Línea de umbral crítico */}
              <ReferenceLine 
                y={CONSTANTES_VARROA.UMBRAL_INFESTACION_CRITICO * 100} // Convertir porcentaje a número de ácaros
                stroke={CONSTANTES_VARROA.COLORES.UMBRAL_CRITICO} 
                strokeDasharray="3 3"
                strokeWidth={2}
              >
                <Label 
                  value="Nivel crítico" 
                  position="insideBottomRight"
                  fill={CONSTANTES_VARROA.COLORES.UMBRAL_CRITICO}
                />
              </ReferenceLine>
            </LineChart>
          </ResponsiveContainer>
          
          <Alert severity="info" sx={{ mt: 2 }}>
            <AlertTitle>Interpretación de la gráfica</AlertTitle>
            <Typography variant="body2">
              Esta gráfica permite comparar la eficacia de los diferentes tratamientos seleccionados. Cuanto más baja sea la línea, más efectivo es el tratamiento para controlar la población de Varroa. Las diferencias entre tratamientos son más evidentes a largo plazo.
            </Typography>
            <Typography variant="body2" sx={{ mt: 1 }}>
              <strong>Nota:</strong> Cada línea de color representa un tratamiento diferente, con una reducción de población proporcional a su eficiencia. La línea roja muestra la evolución sin ningún tratamiento.
            </Typography>
            {Object.values(tratamientosSeleccionados).every(v => !v) && (
              <Typography variant="body2" sx={{ mt: 1, fontStyle: 'italic', color: 'warning.main' }}>
                <strong>Aviso:</strong> No hay tratamientos seleccionados. Haz clic en los chips de arriba para mostrar los tratamientos.
              </Typography>
            )}
          </Alert>
        </Box>

        <Box sx={{ mt: 3, p: 2, bgcolor: alpha(theme.palette.info.main, 0.1), borderRadius: 1 }}>
          <Typography variant="h6" color="primary" gutterBottom sx={{ mt: 2, display: 'flex', alignItems: 'center', gap: 1 }}>
            <InfoIcon /> Recomendaciones
          </Typography>
          
          <Typography variant="body1" paragraph>
            {recomendacion}
          </Typography>
          
          {/* Explicación del efecto post-tratamiento */}
          <Box sx={{ mt: 3, p: 2, bgcolor: alpha('#ff5722', 0.1), borderRadius: 1, display: 'flex', alignItems: 'flex-start', gap: 2 }}>
            <WarningIcon sx={{ color: '#ff5722' }} />
            <Box>
              <Typography variant="subtitle1" sx={{ color: '#d84315', fontWeight: 'bold' }}>
                Sobre los picos de infestación post-tratamiento
              </Typography>
              <Typography variant="body2" paragraph>
                Después de aplicar un tratamiento, es normal observar un pico temporal en el porcentaje de infestación (línea gris) 
                y en la caída natural de ácaros (línea azul). Esto ocurre porque:
              </Typography>
              <ul style={{ margin: 0, paddingLeft: '1.5rem' }}>
                <li>
                  <Typography variant="body2">
                    Los ácaros sobrevivientes al tratamiento se concentran principalmente en las abejas adultas (fase forética).
                  </Typography>
                </li>
                <li>
                  <Typography variant="body2">
                    La proporción de ácaros en fase forética aumenta temporalmente, lo que eleva el porcentaje de infestación visible.
                  </Typography>
                </li>
                <li>
                  <Typography variant="body2">
                    Este efecto es transitorio y no indica necesariamente un fracaso del tratamiento o una reinfestación.
                  </Typography>
                </li>
              </ul>
              <Typography variant="body2" sx={{ mt: 1, fontStyle: 'italic' }}>
                Los puntos marcados con "!" en la gráfica indican estos picos post-tratamiento.
              </Typography>
            </Box>
          </Box>
        </Box>

        <Box sx={{ mt: 4 }}>
          <Typography variant="h6" color="primary" gutterBottom sx={{ mt: 2, display: 'flex', alignItems: 'center', gap: 1 }}>
            <InfoIcon /> Información adicional
          </Typography>
          <Typography variant="body1" paragraph>
            Este modelo predictivo está basado en investigaciones científicas y proporciona una estimación del crecimiento poblacional de Varroa. Los resultados pueden variar según condiciones locales, manejo de la colonia y factores ambientales.
          </Typography>
        </Box>

        <Typography variant="body2" color="textSecondary" sx={{ mt: 2, fontStyle: 'italic' }}>
          * Este modelo predictivo está basado en el trabajo del Dr. Michael Rubinigg. Los resultados son estimaciones y pueden variar según factores ambientales y de manejo.
        </Typography>

        <Box sx={{ mt: 3, display: 'flex', justifyContent: 'center' }}>
          <Button 
            variant="outlined" 
            color="primary" 
            onClick={handleOpenInfoDialog} 
            startIcon={<InfoIcon />}
            size="large"
          >
            Leer más sobre el modelo predictivo
          </Button>
        </Box>

        <Dialog
          open={openInfoDialog}
          onClose={handleCloseInfoDialog}
          aria-labelledby="alert-dialog-title"
          aria-describedby="alert-dialog-description"
          maxWidth="md"
          fullWidth
        >
          <DialogTitle id="alert-dialog-title" sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
            <ScienceIcon color="primary" />
            Modelo Predictivo de Crecimiento de Varroa Destructor
          </DialogTitle>
          <DialogContent>
            <DialogContentText id="alert-dialog-description" paragraph>
              Este modelo predictivo avanzado está basado en investigaciones científicas y permite estimar la evolución de la población de ácaros Varroa destructor en una colonia de abejas a lo largo del tiempo.
            </DialogContentText>
            
            <Typography variant="h6" color="primary" gutterBottom sx={{ mt: 2, display: 'flex', alignItems: 'center', gap: 1 }}>
              <CalculateIcon /> Fundamentos Matemáticos
            </Typography>
            <DialogContentText paragraph>
              El modelo se basa en la ecuación estándar para el crecimiento poblacional de organismos con reproducción continua:
            </DialogContentText>
            <DialogContentText paragraph sx={{ fontWeight: 'bold', fontFamily: 'monospace', pl: 2 }}>
              Nₜ = N₀ × e^(t×Rg)
            </DialogContentText>
            <DialogContentText paragraph>
              Donde <strong>Nₜ</strong> es el número final de ácaros, <strong>N₀</strong> es el número inicial, <strong>t</strong> es el tiempo en días, <strong>Rg</strong> es la tasa de crecimiento relativo, y <strong>e</strong> es la constante matemática (≈2.71828).
            </DialogContentText>
            <DialogContentText paragraph>
              Para Varroa, el modelo se adapta considerando factores específicos:
            </DialogContentText>
            <DialogContentText paragraph sx={{ fontWeight: 'bold', fontFamily: 'monospace', pl: 2 }}>
              Nₜ = N₀ × e^(t×Rg×Xₜ) × e^(t×Rm×(1+Yₜ))
            </DialogContentText>
            <DialogContentText paragraph>
              Donde <strong>Xₜ</strong> es un factor que ralentiza el crecimiento cuando aumenta la competencia por celdas de cría, <strong>Rm</strong> es la tasa de mortalidad relativa, y <strong>Yₜ</strong> es un factor que incrementa la mortalidad cuando hay poca o ninguna cría disponible.
            </DialogContentText>
            
            <Typography variant="h6" color="primary" gutterBottom sx={{ mt: 2, display: 'flex', alignItems: 'center', gap: 1 }}>
              <FunctionsIcon /> Factores del Modelo
            </Typography>
            <DialogContentText paragraph>
              <strong>1. Tasa de crecimiento (Rg):</strong> Varía según la temporada. En primavera-verano (marzo-julio) se usa un valor estándar de 0.03391 ácaros nuevos por ácaro existente por día, mientras que en verano-otoño (agosto-octubre) puede ser mayor debido a la inmigración de ácaros.
            </DialogContentText>
            <DialogContentText paragraph>
              <strong>2. Factor de ralentización (Xₜ):</strong> Reduce la tasa de crecimiento cuando aumenta la probabilidad de que más de un ácaro infeste una celda de cría. Se calcula como:
            </DialogContentText>
            <DialogContentText paragraph sx={{ fontFamily: 'monospace', pl: 2 }}>
              Xₜ = 100/(100 + e^(Nₜ/Bₜ₋₇))
            </DialogContentText>
            <DialogContentText paragraph>
              Donde Bₜ₋₇ es el número de huevos producidos por la reina 7 días antes.
            </DialogContentText>
            <DialogContentText paragraph>
              <strong>3. Tasa de mortalidad (Rm):</strong> Se establece en -0.007 ácaros muertos por ácaro existente por día durante la presencia de cría.
            </DialogContentText>
            <DialogContentText paragraph>
              <strong>4. Factor de exposición (Yₜ):</strong> Estima la probabilidad de que los ácaros estén fuera de las celdas de cría, aumentando su mortalidad. Se calcula como:
            </DialogContentText>
            <DialogContentText paragraph sx={{ fontFamily: 'monospace', pl: 2 }}>
              Yₜ = 2/(1 + e^(Bₜ₋₇/Nₜ))
            </DialogContentText>
            <DialogContentText paragraph>
              <strong>5. Eficiencia de tratamientos:</strong> Reduce la población de ácaros según el porcentaje de eficacia del tratamiento aplicado.
            </DialogContentText>
            
            <Typography variant="h6" color="primary" gutterBottom sx={{ mt: 2, display: 'flex', alignItems: 'center', gap: 1 }}>
              <FunctionsIcon /> Metodología de Cálculo
            </Typography>
            <List dense>
              <ListItem>
                <ListItemIcon>
                  <TrendingUpIcon color="primary" />
                </ListItemIcon>
                <ListItemText 
                  primary="Crecimiento Exponencial Base" 
                  secondary="La población de ácaros crece exponencialmente con una tasa reproductiva (r) que varía según la temporada."
                />
              </ListItem>
              <ListItem>
                <ListItemIcon>
                  <BugReportIcon color="primary" />
                </ListItemIcon>
                <ListItemText 
                  primary="Modelo de Producción de Cría" 
                  secondary="Se calcula la disponibilidad de celdas de cría en función del día del año, lo que afecta directamente a la reproducción de los ácaros."
                />
              </ListItem>
              <ListItem>
                <ListItemIcon>
                  <ThermostatIcon color="primary" />
                </ListItemIcon>
                <ListItemText 
                  primary="Factores Ambientales" 
                  secondary="La temperatura y otros factores ambientales modulan la tasa de reproducción de los ácaros."
                />
              </ListItem>
              <ListItem>
                <ListItemIcon>
                  <WarningIcon color="primary" />
                </ListItemIcon>
                <ListItemText 
                  primary="Factores de Desaceleración" 
                  secondary="A medida que la infestación aumenta, se aplican factores de desaceleración que reflejan la competencia por recursos y el colapso potencial de la colonia."
                />
              </ListItem>
            </List>
            
            <Typography variant="h6" color="primary" gutterBottom sx={{ mt: 2, display: 'flex', alignItems: 'center', gap: 1 }}>
              <InfoIcon /> Interpretación de las Gráficas
            </Typography>
            <DialogContentText paragraph>
              <strong>Gráfica de Población:</strong> Muestra el número estimado de ácaros a lo largo del tiempo. Los puntos destacados indican momentos de tratamiento.
            </DialogContentText>
            <DialogContentText paragraph>
              <strong>Gráfica de Infestación:</strong> Representa el porcentaje de abejas adultas infestadas por ácaros. La línea roja punteada indica el umbral crítico del 3%.
            </DialogContentText>
            <DialogContentText paragraph>
              <strong>Gráfica de Caída Natural:</strong> Muestra la estimación de ácaros que caen naturalmente por día, un indicador clave para el monitoreo de la infestación. La línea roja punteada indica el umbral crítico de 10 ácaros/día en verano.
            </DialogContentText>
            
            <Typography variant="h6" color="primary" gutterBottom sx={{ mt: 2, display: 'flex', alignItems: 'center', gap: 1 }}>
              <WarningIcon /> Limitaciones del Modelo
            </Typography>
            <DialogContentText paragraph>
              Es importante considerar las siguientes limitaciones:
            </DialogContentText>
            <List dense>
              <ListItem>
                <ListItemIcon>
                  <WarningIcon fontSize="small" color="warning" />
                </ListItemIcon>
                <ListItemText 
                  primary="Variabilidad biológica" 
                  secondary="El comportamiento real de las poblaciones puede variar según la genética de las abejas, condiciones ambientales locales y prácticas de manejo específicas."
                />
              </ListItem>
              <ListItem>
                <ListItemIcon>
                  <WarningIcon fontSize="small" color="warning" />
                </ListItemIcon>
                <ListItemText 
                  primary="Parámetros simplificados" 
                  secondary="El modelo asume valores estándar para tasas de reproducción, mortalidad natural y eficiencia de tratamientos."
                />
              </ListItem>
              <ListItem>
                <ListItemIcon>
                  <WarningIcon fontSize="small" color="warning" />
                </ListItemIcon>
                <ListItemText 
                  primary="Factores no modelados" 
                  secondary="No se consideran completamente la presión de reinfestación de colonias cercanas, efectos de condiciones climáticas extremas y variables de comportamiento higiénico."
                />
              </ListItem>
            </List>

            <Typography variant="h6" color="primary" gutterBottom sx={{ mt: 2, display: 'flex', alignItems: 'center', gap: 1 }}>
              <ScienceIcon /> Referencias Científicas
            </Typography>
            <List dense>
              <ListItem>
                <ListItemIcon>
                  <ScienceIcon fontSize="small" />
                </ListItemIcon>
                <ListItemText 
                  primary="Rubinigg, M. et al. (2020)" 
                  secondary="Development of a population model for the Varroa mite based on its natural mortality."
                />
              </ListItem>
            </List>
            <List dense>
            <ListItem>
              <ListItemIcon>
                <ScienceIcon fontSize="small" />
              </ListItemIcon>
              <ListItemText 
                primary="Beetsma, J., Boot, W. J., & Calis, J. (1999)" 
                secondary="Invasion behaviour of Varroa jacobsoni Oud.: from bees into brood cells."
              />
            </ListItem>
            <ListItem>
              <ListItemIcon>
                <ScienceIcon fontSize="small" />
              </ListItemIcon>
              <ListItemText 
                primary="Boot, W. J., et al. (1995)" 
                secondary="Invasion of Varroa jacobsoni into drone brood cells of the honey bee, Apis mellifera."
              />
            </ListItem>
            <ListItem>
              <ListItemIcon>
                <ScienceIcon fontSize="small" />
              </ListItemIcon>
              <ListItemText 
                primary="Moritz, R. F. A. (1985)" 
                secondary="Heritability of the postcapping stage in Apis mellifera and its relation to varroatosis resistance."
              />
            </ListItem>
            <ListItem>
              <ListItemIcon>
                <ScienceIcon fontSize="small" />
              </ListItemIcon>
              <ListItemText 
                primary="Rosenkranz, P., Aumeier, P., & Ziegelmann, B. (2010)" 
                secondary="Biology and control of Varroa destructor."
              />
            </ListItem>
            <ListItem>
              <ListItemIcon>
                <ScienceIcon fontSize="small" />
              </ListItemIcon>
              <ListItemText 
                primary="Harbo, J. R., & Harris, J. W. (1999)" 
                secondary="Selecting honey bees for resistance to Varroa jacobsoni."
              />
            </ListItem>
            <ListItem>
              <ListItemIcon>
                <ScienceIcon fontSize="small" />
              </ListItemIcon>
              <ListItemText 
                primary="Li, Z., et al. (2016)" 
                secondary="Drone and worker brood microclimates are regulated differentially in honey bees, Apis mellifera."
              />
            </ListItem>
            <ListItem>
              <ListItemIcon>
                <ScienceIcon fontSize="small" />
              </ListItemIcon>
              <ListItemText 
                primary="Starks, P. T., Blackie, C. A., & Seeley, T. D. (2000)" 
                secondary="Fever in honeybee colonies."
              />
            </ListItem>
            <ListItem>
              <ListItemIcon>
                <ScienceIcon fontSize="small" />
              </ListItemIcon>
              <ListItemText 
                primary="Büchler, R., Berg, S., & Le Conte, Y. (2010)" 
                secondary="Breeding for resistance to Varroa destructor in Europe."
              />
            </ListItem>
            <ListItem>
              <ListItemIcon>
                <ScienceIcon fontSize="small" />
              </ListItemIcon>
              <ListItemText 
                primary="Branco, M. R., Kidd, N. A. C., & Pickard, R. S. (2006)" 
                secondary="A comparative evaluation of sampling methods for Varroa destructor population estimation."
              />
            </ListItem>
            <ListItem>
              <ListItemIcon>
                <ScienceIcon fontSize="small" />
              </ListItemIcon>
              <ListItemText 
                primary="Dietemann, V., et al. (2016)" 
                secondary="Standard methods for varroa research."
              />
            </ListItem>
            <ListItem>
              <ListItemIcon>
                <ScienceIcon fontSize="small" />
              </ListItemIcon>
              <ListItemText 
                primary="Martin, S. (1998)" 
                secondary="A population model for the ectoparasitic mite Varroa jacobsoni in honey bee (Apis mellifera) colonies."
              />
            </ListItem>
            <ListItem>
              <ListItemIcon>
                <ScienceIcon fontSize="small" />
              </ListItemIcon>
              <ListItemText 
                primary="Calis, J. N. M., Fries, I., & Ryrie, S. C. (1999)" 
                secondary="Population modelling of Varroa jacobsoni Oud."
              />
            </ListItem>
          </List>
            
          </DialogContent>
          <DialogActions>
            <Button onClick={handleCloseInfoDialog} color="primary" variant="contained">
              Cerrar
            </Button>
          </DialogActions>
        </Dialog>
      </Paper>
    </Box>
  );
};

export default VarroaPredictiveChart;