import React from 'react';
import { 
  Box, 
  Container, 
  Typography, 
  Paper, 
  Grid, 
  Card, 
  CardContent, 
  CardActions, 
  Button, 
  List, 
  ListItem, 
  ListItemIcon, 
  ListItemText, 
  Tabs, 
  Tab, 
  FormControl, 
  InputLabel, 
  Select, 
  MenuItem, 
  Switch, 
  FormControlLabel, 
  CircularProgress, 
  InputAdornment, 
  Dialog, 
  DialogTitle, 
  DialogContent, 
  DialogActions, 
  Divider, 
  IconButton,
  Stack,
  Chip,
} from '@mui/material';
import { styled } from '@mui/material/styles';
import { useState, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { RootState } from '../../../store/store';
import { updateVarrometerState } from '../../../store/varrometerSlice';
import { Treatment } from '../../../types/treatments';
import { Treatment as VarrometerTreatment, ColonyStrength } from '../../../types/varrometer';
import { loadTreatmentsFromCSV } from '../../../data/treatmentsData';
import WarningIcon from '@mui/icons-material/Warning';
import ThermometerIcon from '@mui/icons-material/Thermostat';
import AccessTimeIcon from '@mui/icons-material/AccessTime';
import BuildIcon from '@mui/icons-material/Build';
import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
import BeehiveIcon from '@mui/icons-material/Hive';
import ScienceIcon from '@mui/icons-material/Science';
import GridViewIcon from '@mui/icons-material/GridView';
import BusinessIcon from '@mui/icons-material/Business';
import DeviceThermostatIcon from '@mui/icons-material/DeviceThermostat';
import FilterListIcon from '@mui/icons-material/FilterList';
import PercentIcon from '@mui/icons-material/Percent';
import LocalPharmacyIcon from '@mui/icons-material/LocalPharmacy';
import EuroIcon from '@mui/icons-material/Euro';
import NatureIcon from '@mui/icons-material/Nature';
import InfoIcon from '@mui/icons-material/Info';
import NavigateNextIcon from '@mui/icons-material/NavigateNext';
import CloseIcon from '@mui/icons-material/Close';
// Nuevos iconos para el modal de detalles
import HandymanIcon from '@mui/icons-material/Handyman';
import ConstructionIcon from '@mui/icons-material/Construction';
import SecurityIcon from '@mui/icons-material/Security';
import RepeatIcon from '@mui/icons-material/Repeat';
import DateRangeIcon from '@mui/icons-material/DateRange';
import ScheduleIcon from '@mui/icons-material/Schedule';
import WbSunnyIcon from '@mui/icons-material/WbSunny';
import AcUnitIcon from '@mui/icons-material/AcUnit';
import WaterIcon from '@mui/icons-material/Water';
import CloudIcon from '@mui/icons-material/Cloud';
import RecyclingIcon from '@mui/icons-material/Recycling';
import InventoryIcon from '@mui/icons-material/Inventory';
import HourglassEmptyIcon from '@mui/icons-material/HourglassEmpty';
import BugReportIcon from '@mui/icons-material/BugReport';
import HealthAndSafetyIcon from '@mui/icons-material/HealthAndSafety';
import ReceiptIcon from '@mui/icons-material/Receipt';
import ErrorIcon from '@mui/icons-material/Error';
import MedicationIcon from '@mui/icons-material/Medication';

interface TabPanelProps {
  children?: React.ReactNode;
  index: number;
  value: number;
}

const TabPanel = (props: TabPanelProps) => {
  const { children, value, index, ...other } = props;
  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`treatment-tabpanel-${index}`}
      aria-labelledby={`treatment-tab-${index}`}
      {...other}
    >
      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
    </div>
  );
};

const HeroSection = styled(Box)(({ theme }) => ({
  position: 'relative',
  color: 'white',
  minHeight: '10vh',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  textAlign: 'center',
  overflow: 'hidden',
  marginTop: '0',
  marginBottom: theme.spacing(4),
  padding: theme.spacing(4, 0),
  '&::before': {
    content: '""',
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    background: `linear-gradient(45deg, ${theme.palette.primary.main}dd 30%, ${theme.palette.secondary.main}dd 90%)`,
    zIndex: 1
  }
}));

const HeroContent = styled(Box)({
  position: 'relative',
  zIndex: 2,
  width: '100%',
  padding: '10px'
});

const Medications: React.FC = () => {
  const dispatch = useDispatch();
  const varrometerState = useSelector((state: RootState) => state.varrometer);
  const [baseFilteredTreatments, setBaseFilteredTreatments] = useState<Treatment[]>([]);
  const [treatments, setTreatments] = useState<Treatment[]>([]);
  const [filteredTreatments, setFilteredTreatments] = useState<Treatment[]>([]);
  const [selectedTreatments, setSelectedTreatments] = useState<Treatment[]>([]);
  const [selectedType, setSelectedType] = useState<string | null>(null);
  const [organicOnly, setOrganicOnly] = useState<boolean>(false);
  const [efficacyFilter, setEfficacyFilter] = useState<string>('all');
  const [timeRequiredFilter, setTimeRequiredFilter] = useState<string>('all');
  const [temperatureFilter, setTemperatureFilter] = useState<string>('all');
  const [availabilityFilter, setAvailabilityFilter] = useState<string>('all');
  const [costFilter, setCostFilter] = useState<string>('all');
  const [seasonFilter, setSeasonFilter] = useState<string>('all');
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const TREATMENT_TYPES = [
    'Synthetic Chemical',
    'Organic Chemical',
    'Bio-technical methods',
    'Mechanical methods'
  ] as const;

  const formatColonyStrength = (strength: ColonyStrength): string => {
    switch (strength) {
      case 'strong':
        return 'Strong (>6 frames covered with bees)';
      case 'medium':
        return 'Medium (6 frames covered with bees)';
      case 'weak':
        return 'Weak (<5 frames covered with bees)';
      case 'nuclei':
        return 'Nuclei (<6 frames covered with bees)';
      default:
        return 'Unknown';
    }
  };

  const renderSelectedFilters = () => {
    return (
      <Box sx={{ mb: 3 }}>
        <Typography variant="subtitle1" sx={{ mb: 1, fontWeight: 'bold' }}>Selected Filters from Test:</Typography>
        <Grid container spacing={1}>
          {/* Beekeeping Type Card */}
          <Grid item xs={12} sm={6} md={1.7}>
            <Card sx={{ 
              borderRadius: 1, 
              boxShadow: 1, 
              height: '100%',
              background: '#fff',
              border: '1px solid #ff9800',
              '&:hover': {
                boxShadow: 2,
              }
            }}>
              <CardContent sx={{ p: 1, pb: 1, '&:last-child': { pb: 1 } }}>
                <Typography variant="caption" sx={{ 
                  textAlign: 'center', 
                  mb: 0.5, 
                  color: '#ff9800', 
                  fontWeight: 'bold',
                  display: 'block'
                }}>
                  Beekeeping
                </Typography>
                <Box sx={{ display: 'flex', justifyContent: 'center', mb: 0.5 }}>
                  <BeehiveIcon sx={{ fontSize: 24, color: '#ff9800' }} />
                </Box>
                <Typography variant="body2" sx={{ 
                  textAlign: 'center', 
                  fontWeight: 'medium',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap'
                }}>
                  {varrometerState.beekeepingType || 'Not specified'}
                </Typography>
                <Typography variant="caption" sx={{ 
                  textAlign: 'center', 
                  color: 'text.secondary',
                  display: 'block',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap'
                }}>
                  {varrometerState.hiveType || 'Not specified'}
                </Typography>
              </CardContent>
            </Card>
          </Grid>

          {/* Colony Strength Card */}
          <Grid item xs={12} sm={6} md={1.7}>
            <Card sx={{ 
              borderRadius: 1, 
              boxShadow: 1, 
              height: '100%',
              background: '#fff',
              border: '1px solid #ff9800',
              '&:hover': {
                boxShadow: 2,
              }
            }}>
              <CardContent sx={{ p: 1, pb: 1, '&:last-child': { pb: 1 } }}>
                <Typography variant="caption" sx={{ 
                  textAlign: 'center', 
                  mb: 0.5, 
                  color: '#ff9800', 
                  fontWeight: 'bold',
                  display: 'block'
                }}>
                  Colony Strength
                </Typography>
                <Box sx={{ display: 'flex', justifyContent: 'center', mb: 0.5 }}>
                  <ThermometerIcon sx={{ fontSize: 24, color: '#ff9800' }} />
                </Box>
                <Typography variant="body2" sx={{ 
                  textAlign: 'center', 
                  fontWeight: 'medium',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap'
                }}>
                  {formatColonyStrength(varrometerState.colonyStrength).split('(')[0]}
                </Typography>
                <Typography variant="caption" sx={{ 
                  textAlign: 'center', 
                  color: 'text.secondary',
                  display: 'block',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap'
                }}>
                  {formatColonyStrength(varrometerState.colonyStrength).includes('(') ? 
                    formatColonyStrength(varrometerState.colonyStrength).split('(')[1].replace(')', '') : 
                    'frames'}
                </Typography>
              </CardContent>
            </Card>
          </Grid>

          {/* Infestation Level Card */}
          <Grid item xs={12} sm={6} md={1.7}>
            <Card sx={{ 
              borderRadius: 1, 
              boxShadow: 1, 
              height: '100%',
              background: '#fff',
              border: '1px solid #ff9800',
              '&:hover': {
                boxShadow: 2,
              }
            }}>
              <CardContent sx={{ p: 1, pb: 1, '&:last-child': { pb: 1 } }}>
                <Typography variant="caption" sx={{ 
                  textAlign: 'center', 
                  mb: 0.5, 
                  color: '#ff9800', 
                  fontWeight: 'bold',
                  display: 'block'
                }}>
                  Infestation
                </Typography>
                <Box sx={{ display: 'flex', justifyContent: 'center', mb: 0.5 }}>
                  <WarningIcon sx={{ fontSize: 24, color: '#ff9800' }} />
                </Box>
                <Typography variant="body2" sx={{ 
                  textAlign: 'center', 
                  fontWeight: 'medium',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap'
                }}>
                  {varrometerState.infestationLevel || 'Not specified'}
                </Typography>
                <Typography variant="caption" sx={{ 
                  textAlign: 'center', 
                  color: 'text.secondary',
                  display: 'block',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap'
                }}>
                  level
                </Typography>
              </CardContent>
            </Card>
          </Grid>

          {/* Time Available Card */}
          <Grid item xs={12} sm={6} md={1.7}>
            <Card sx={{ 
              borderRadius: 1, 
              boxShadow: 1, 
              height: '100%',
              background: '#fff',
              border: '1px solid #ff9800',
              '&:hover': {
                boxShadow: 2,
              }
            }}>
              <CardContent sx={{ p: 1, pb: 1, '&:last-child': { pb: 1 } }}>
                <Typography variant="caption" sx={{ 
                  textAlign: 'center', 
                  mb: 0.5, 
                  color: '#ff9800', 
                  fontWeight: 'bold',
                  display: 'block'
                }}>
                  Time Available
                </Typography>
                <Box sx={{ display: 'flex', justifyContent: 'center', mb: 0.5 }}>
                  <AccessTimeIcon sx={{ fontSize: 24, color: '#ff9800' }} />
                </Box>
                <Typography variant="body2" sx={{ 
                  textAlign: 'center', 
                  fontWeight: 'medium',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap'
                }}>
                  {varrometerState.timePerHive || 'Not specified'}
                </Typography>
                <Typography variant="caption" sx={{ 
                  textAlign: 'center', 
                  color: 'text.secondary',
                  display: 'block',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap'
                }}>
                  per hive
                </Typography>
              </CardContent>
            </Card>
          </Grid>

          {/* Genetic Resistance Card */}
          <Grid item xs={12} sm={6} md={1.7}>
            <Card sx={{ 
              borderRadius: 1, 
              boxShadow: 1, 
              height: '100%',
              background: '#fff',
              border: '1px solid #ff9800',
              '&:hover': {
                boxShadow: 2,
              }
            }}>
              <CardContent sx={{ p: 1, pb: 1, '&:last-child': { pb: 1 } }}>
                <Typography variant="caption" sx={{ 
                  textAlign: 'center', 
                  mb: 0.5, 
                  color: '#ff9800', 
                  fontWeight: 'bold',
                  display: 'block'
                }}>
                  Genetic Resistance
                </Typography>
                <Box sx={{ display: 'flex', justifyContent: 'center', mb: 0.5 }}>
                  <BuildIcon sx={{ fontSize: 24, color: '#ff9800' }} />
                </Box>
                <Typography variant="body2" sx={{ 
                  textAlign: 'center', 
                  fontWeight: 'medium',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap'
                }}>
                  {varrometerState.geneticResistance || 'Not specified'}
                </Typography>
                <Typography variant="caption" sx={{ 
                  textAlign: 'center', 
                  color: 'text.secondary',
                  display: 'block',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap'
                }}>
                  &nbsp;
                </Typography>
              </CardContent>
            </Card>
          </Grid>

          {/* Frames Card */}
          <Grid item xs={12} sm={6} md={1.7}>
            <Card sx={{ 
              borderRadius: 1, 
              boxShadow: 1, 
              height: '100%',
              background: '#fff',
              border: '1px solid #ff9800',
              '&:hover': {
                boxShadow: 2,
              }
            }}>
              <CardContent sx={{ p: 1, pb: 1, '&:last-child': { pb: 1 } }}>
                <Typography variant="caption" sx={{ 
                  textAlign: 'center', 
                  mb: 0.5, 
                  color: '#ff9800', 
                  fontWeight: 'bold',
                  display: 'block'
                }}>
                  Frames
                </Typography>
                <Box sx={{ display: 'flex', justifyContent: 'center', mb: 0.5 }}>
                  <GridViewIcon sx={{ fontSize: 24, color: '#ff9800' }} />
                </Box>
                <Typography variant="body2" sx={{ 
                  textAlign: 'center', 
                  fontWeight: 'medium',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap'
                }}>
                  {varrometerState.frames || 'Not specified'}
                </Typography>
                <Typography variant="caption" sx={{ 
                  textAlign: 'center', 
                  color: 'text.secondary',
                  display: 'block',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap'
                }}>
                  &nbsp;
                </Typography>
              </CardContent>
            </Card>
          </Grid>

          {/* Assessment Date Card */}
          <Grid item xs={12} sm={6} md={1.7}>
            <Card sx={{ 
              borderRadius: 1, 
              boxShadow: 1, 
              height: '100%',
              background: '#fff',
              border: '1px solid #ff9800',
              '&:hover': {
                boxShadow: 2,
              }
            }}>
              <CardContent sx={{ p: 1, pb: 1, '&:last-child': { pb: 1 } }}>
                <Typography variant="caption" sx={{ 
                  textAlign: 'center', 
                  mb: 0.5, 
                  color: '#ff9800', 
                  fontWeight: 'bold',
                  display: 'block'
                }}>
                  Assessment Date
                </Typography>
                <Box sx={{ display: 'flex', justifyContent: 'center', mb: 0.5 }}>
                  <CalendarMonthIcon sx={{ fontSize: 24, color: '#ff9800' }} />
                </Box>
                <Typography variant="body2" sx={{ 
                  textAlign: 'center', 
                  fontWeight: 'medium',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap'
                }}>
                  {varrometerState.assessmentDate ? new Date(varrometerState.assessmentDate).toLocaleDateString() : 'Not specified'}
                </Typography>
                <Typography variant="caption" sx={{ 
                  textAlign: 'center', 
                  color: 'text.secondary',
                  display: 'block',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap'
                }}>
                  &nbsp;
                </Typography>
              </CardContent>
            </Card>
          </Grid>
        </Grid>
      </Box>
    );
  };

  useEffect(() => {
    const loadTreatments = async () => {
      try {
        console.log('==================== INICIO DE CARGA DE TRATAMIENTOS ====================');
        console.log('Estado actual del varrómetro:', {
          beekeepingType: varrometerState.beekeepingType,
          timePerHive: varrometerState.timePerHive,
          frames: varrometerState.frames,
          assessmentDate: varrometerState.assessmentDate,
          hiveType: varrometerState.hiveType
        });

        const loadedTreatments = await loadTreatmentsFromCSV();
        console.log(`Total de tratamientos cargados del CSV: ${loadedTreatments.length}`);
        
        // Para el resumen final
        const treatmentSummary: {
          name: string;
          included: boolean;
          timeRequired: string;
          monthCompatible: string;
          hiveCompatible: string;
          reasons: string[];
        }[] = [];
        
        // Filtrar tratamientos por compatibilidad
        const filtered = loadedTreatments
          .filter(treatment => {
            if (!treatment) return false;
            
            // Exclude Surveillance type treatments
            if (treatment.type === 'Surveillance') {
              return false;
            }

            console.log(`\n========== Evaluando tratamiento: ${treatment.name} ==========`);
            let shouldInclude = true;
            const reasons: string[] = [];

            // Para el resumen
            const monthMap = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'] as const;
            const currentMonth = monthMap[new Date().getMonth()];
            const summary = {
              name: treatment.name,
              included: true,
              timeRequired: treatment.duration,
              monthCompatible: treatment[currentMonth as keyof typeof treatment] !== 'no' ? 'yes' : 'no',
              hiveCompatible: treatment.colonyConditions !== 'no' ? 'yes' : 'no',
              reasons: [] as string[]
            };

            // 1. Filtrar por tipo de apicultura (orgánico/convencional)
            if (varrometerState.beekeepingType === 'organic' || varrometerState.beekeepingType === 'certified_organic') {
              console.log(`Tipo de apicultura: ${varrometerState.beekeepingType}, Compatible: ${treatment.organicCompatible}`);
              if (!treatment.organicCompatible) {
                shouldInclude = false;
                reasons.push(`No compatible con apicultura ${varrometerState.beekeepingType}`);
              }
            }

            // 2. Filtrar por tiempo disponible
            if (varrometerState.timePerHive === 'less_than_10min') {
              const realTimeRequired = parseInt(treatment.duration) || 0;
              console.log(`Tiempo disponible: <10min, Tiempo real requerido: ${realTimeRequired}min`);
              if (realTimeRequired > 10) {
                shouldInclude = false;
                reasons.push('Requiere más de 10 minutos por colmena');
              }
            }

            // 3. Filtrar por tipo de colmena
            if (varrometerState.hiveType) {
              const hiveTypeKey = varrometerState.hiveType.toLowerCase();
              const hiveTypeValue = treatment.colonyConditions;
              console.log(`Tipo de colmena: ${hiveTypeKey}, Compatible: "${hiveTypeValue}"`);
              
              if (hiveTypeValue === 'no') {
                shouldInclude = false;
                reasons.push(`No compatible con colmenas tipo ${varrometerState.hiveType}`);
              }
            }

            // 4. Filtrar por fuerza de la colonia
            if (varrometerState.colonyStrength) {
              console.log(`Fuerza de la colonia: ${varrometerState.colonyStrength}, Requerimiento: ${treatment.colonyStrengthRequirement}`);
              if (treatment.colonyStrengthRequirement === 'strong' && varrometerState.colonyStrength !== 'strong') {
                shouldInclude = false;
                reasons.push('Requiere colonia fuerte');
              }
            }

            // 5. Filtrar por resistencia genética
            if (varrometerState.geneticResistance === 'varroa_tolerant') {
              console.log(`Colonia tolerante a varroa: ${treatment.organicCompatible}`);
              if (!treatment.organicCompatible) {
                // No excluimos, pero damos prioridad a tratamientos compatibles
                summary.reasons.push('No optimizado para colonias tolerantes a varroa');
              }
            }

            // 6. Filtrar por nivel de infestación
            if (varrometerState.infestationLevel) {
              console.log(`Nivel de infestación: ${varrometerState.infestationLevel}`);
              const efficacyNumber = parseInt(treatment.efficacy) || 0;
              
              if (varrometerState.infestationLevel === 'red' && efficacyNumber < 90) {
                shouldInclude = false;
                reasons.push('Eficacia insuficiente para alta infestación');
              } else if (varrometerState.infestationLevel === 'yellow' && efficacyNumber < 80) {
                shouldInclude = false;
                reasons.push('Eficacia insuficiente para infestación media');
              }
            }

            // 7. Filtrar por disponibilidad del tratamiento
            if (varrometerState.treatmentAvailable) {
              console.log(`Disponibilidad del tratamiento: ${varrometerState.treatmentAvailable}`);
              if (varrometerState.treatmentAvailable === 'pharmacy') {
                shouldInclude = false;
                reasons.push('Tratamiento no disponible en su área');
              } else if (varrometerState.treatmentAvailable === 'veterinary' && 
                      treatment.availability !== 'veterinary') {
                shouldInclude = false;
                reasons.push('Tratamiento solo disponible con receta veterinaria');
              }
            }

            // 8. Filtrar por temporada según la fecha del test
            if (varrometerState.assessmentDate) {
              const assessmentDate = new Date(varrometerState.assessmentDate);
              const month = assessmentDate.getMonth(); // 0-11
              
              const monthMap: { [key: number]: keyof Treatment } = {
                0: 'jan', 1: 'feb', 2: 'mar', 3: 'apr', 4: 'may', 5: 'jun',
                6: 'jul', 7: 'aug', 8: 'sep', 9: 'oct', 10: 'nov', 11: 'dec'
              };
              
              const monthKey = monthMap[month];
              const monthValue = treatment[monthKey];
              console.log(`Mes actual: ${monthKey}, Valor en tratamiento: "${monthValue}"`);
              
              if (monthValue === 'no') {
                shouldInclude = false;
                reasons.push(`No recomendado para ${monthKey}`);
              }
            }

            if (!shouldInclude) {
              console.log(`❌ Tratamiento excluido: ${treatment.name}`);
              console.log('Razones:', reasons);
            } else {
              console.log(`✅ Tratamiento incluido: ${treatment.name}`);
            }

            // Actualizar el resumen
            summary.included = shouldInclude;
            summary.reasons = reasons;
            treatmentSummary.push(summary);

            return shouldInclude;
          });

        console.log(`\n==================== RESUMEN DETALLADO ====================`);
        console.log('Nombre | Tiempo Requerido | Compatible Feb | Compatible Langstroth | Estado | Razones');
        console.log('-------|------------------|----------------|---------------------|---------|--------');
        treatmentSummary.forEach(summary => {
          console.log(
            `${summary.name.padEnd(20)} | ` +
            `${summary.timeRequired.padEnd(17)} | ` +
            `${summary.monthCompatible} | ` +
            `${summary.hiveCompatible} | ` +
            `${summary.included ? '✅' : '❌'} | ` +
            `${summary.reasons.length ? summary.reasons.join(', ') : '-'}`
          );
        });

        console.log(`\n==================== RESUMEN ====================`);
        console.log(`Total de tratamientos filtrados: ${filtered.length} de ${loadedTreatments.length}`);
        
        // Guardar los tratamientos filtrados por el varrómetro
        setBaseFilteredTreatments(filtered);
        setTreatments(filtered);
        setFilteredTreatments(filtered);

      } catch (error) {
        console.error('Error al cargar/filtrar tratamientos:', error);
      }
    };

    loadTreatments();
  }, [varrometerState]);

  useEffect(() => {
    if (!baseFilteredTreatments.length) return;

    let filtered = [...baseFilteredTreatments];

    // Primero aplicar el filtro por tipo si no es "All treatments"
    if (selectedType !== null) {
      filtered = filtered.filter(treatment => {
        // Match the exact treatment type with case sensitivity
        return treatment.type === selectedType;
      });
    }

    // Filtrar por eficacia
    if (efficacyFilter !== 'all') {
      filtered = filtered.filter(treatment => {
        const efficacy = parseInt(treatment.efficacy) || 0;
        switch(efficacyFilter) {
          case 'high': return efficacy >= 95;
          case 'medium': return efficacy >= 90 && efficacy < 95;
          case 'low': return efficacy < 90;
          default: return true;
        }
      });
    }

    // Filtrar por tiempo requerido
    if (timeRequiredFilter !== 'all') {
      filtered = filtered.filter(treatment => {
        const timeRequired = parseInt(treatment.duration) || 0;
        switch(timeRequiredFilter) {
          case 'short': return timeRequired <= 7;
          case 'medium': return timeRequired > 7 && timeRequired <= 28;
          case 'long': return timeRequired > 28;
          default: return true;
        }
      });
    }

    // Filtrar por temperatura
    if (temperatureFilter !== 'all') {
      filtered = filtered.filter(treatment => {
        const minTemp = treatment.temperatureMin;
        const maxTemp = treatment.temperatureMax;
        switch(temperatureFilter) {
          case 'cold': return minTemp <= 10;
          case 'moderate': return minTemp > 10 || maxTemp <= 25;
          case 'warm': return maxTemp > 25;
          default: return true;
        }
      });
    }

    // Filtrar por disponibilidad
    if (availabilityFilter !== 'all') {
      filtered = filtered.filter(treatment => {
        return treatment.availability === availabilityFilter;
      });
    }

    // Filtrar por costo
    if (costFilter !== 'all') {
      filtered = filtered.filter(treatment => {
        return treatment.costCategory === costFilter;
      });
    }

    // Filtrar por estación
    if (seasonFilter !== 'all') {
      filtered = filtered.filter(treatment => {
        switch(seasonFilter) {
          case 'spring': return treatment.mar === 'yes' || treatment.apr === 'yes' || treatment.may === 'yes';
          case 'summer': return treatment.jun === 'yes' || treatment.jul === 'yes' || treatment.aug === 'yes';
          case 'autumn': return treatment.sep === 'yes' || treatment.oct === 'yes' || treatment.nov === 'yes';
          case 'winter': return treatment.dec === 'yes' || treatment.jan === 'yes' || treatment.feb === 'yes';
          default: return true;
        }
      });
    }

    // Filtrar por orgánico
    if (organicOnly) {
      filtered = filtered.filter(treatment => treatment.organicCompatible);
    }

    setFilteredTreatments(filtered);
  }, [baseFilteredTreatments, selectedType, efficacyFilter, timeRequiredFilter, temperatureFilter, availabilityFilter, costFilter, seasonFilter, organicOnly]);

  const resetAllFilters = () => {
    setSelectedType(null);
    setEfficacyFilter('all');
    setTimeRequiredFilter('all');
    setTemperatureFilter('all');
    setAvailabilityFilter('all');
    setCostFilter('all');
    setSeasonFilter('all');
    setOrganicOnly(false);
  };

  const handleTypeSelect = (type: string | null) => {
    console.log('Selected type:', type);
    setSelectedType(type);
  };

  const handleTreatmentSelect = (treatment: Treatment) => {
    setSelectedTreatments(prev => {
      const isSelected = prev.some(t => t.id === treatment.id);
      if (isSelected) {
        return prev.filter(t => t.id !== treatment.id);
      } else {
        return [...prev, treatment];
      }
    });
  };

  const handleNext = () => {
    if (selectedTreatments.length > 0) {
      const varrometerTreatments = selectedTreatments.map(treatment => ({
        id: treatment.id,
        name: treatment.name,
        type: treatment.type,
        effectiveness: parseInt(treatment.efficacy) || 0,
        applicationTime: parseInt(treatment.duration) || 0,
        duration: treatment.duration,
        description: treatment.description,
        advantages: treatment.advantages,
        disadvantages: treatment.disadvantages
      }));
      dispatch(updateVarrometerState({ 
        selectedTreatments: varrometerTreatments,
        currentPhase: 'treatment_results'
      }));
    }
  };

  const handleOrganicChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setOrganicOnly(event.target.checked);
  };

  // Estado para el modal de detalles
  const [detailsOpen, setDetailsOpen] = useState<boolean>(false);
  const [selectedDetailTreatment, setSelectedDetailTreatment] = useState<Treatment | null>(null);

  // Funciones para el modal de detalles
  const handleOpenDetails = (treatment: Treatment, event: React.MouseEvent) => {
    event.stopPropagation();
    setSelectedDetailTreatment(treatment);
    setDetailsOpen(true);
  };

  const handleCloseDetails = () => {
    setDetailsOpen(false);
  };

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', margin: 0, padding: 0, pb: 12 }}>
      <HeroSection>
        <HeroContent>
          <Container maxWidth="md">
            <Typography variant="h2" component="h1" gutterBottom>
              Available Treatments
            </Typography>
            <Typography variant="body1" sx={{ mb: 2, maxWidth: '800px', mx: 'auto' }}>
              Select the most suitable treatments for your colony. Showing {filteredTreatments.length} of {treatments.length} treatments.
            </Typography>
          </Container>
        </HeroContent>
      </HeroSection>

      <Container maxWidth="lg" sx={{ mt: 4 }}>
        {renderSelectedFilters()}

        {/* Filtro de tipos */}
        <Paper sx={{ mb: 3 }}>
          <Tabs
            value={selectedType || 'all'}
            onChange={(e, newValue) => setSelectedType(newValue === 'all' ? null : newValue)}
            variant="scrollable"
            scrollButtons="auto"
            aria-label="treatment type tabs"
            sx={{
              '.MuiTab-root': {
                textTransform: 'none', // Para mantener las mayúsculas/minúsculas originales
                minWidth: 'auto'
              }
            }}
          >
            <Tab 
              label="All treatments" 
              value="all"
              sx={{ fontWeight: selectedType === null ? 'bold' : 'normal' }}
            />
            {TREATMENT_TYPES.map(type => (
              <Tab 
                key={type}
                label={type}
                value={type}
                sx={{ fontWeight: selectedType === type ? 'bold' : 'normal' }}
              />
            ))}
          </Tabs>
        </Paper>

        {/* Mostrar el número de tratamientos filtrados */}
        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
          <Paper 
            elevation={0} 
            sx={{ 
              p: 1, 
              display: 'flex', 
              alignItems: 'center', 
              bgcolor: filteredTreatments.length < treatments.length ? 'rgba(255, 152, 0, 0.1)' : 'rgba(76, 175, 80, 0.1)',
              borderRadius: 2
            }}
          >
            <Typography variant="body2" color="text.secondary">
              Showing <strong>{filteredTreatments.length}</strong> of <strong>{treatments.length}</strong> treatments
              {filteredTreatments.length < treatments.length && (
                <span> (Filtered)</span>
              )}
            </Typography>
          </Paper>
          
          {(selectedType !== null || efficacyFilter !== 'all' || timeRequiredFilter !== 'all' || 
            temperatureFilter !== 'all' || availabilityFilter !== 'all' || costFilter !== 'all' || 
            seasonFilter !== 'all' || organicOnly) && (
            <Button 
              variant="outlined" 
              size="small" 
              onClick={resetAllFilters}
              startIcon={<FilterListIcon />}
              color="warning"
            >
              Reset Filters
            </Button>
          )}
        </Box>

        {/* Filtros adicionales */}
        <Paper sx={{ p: 2, mb: 3, borderRadius: 2, boxShadow: 2 }}>
          <Typography variant="h6" gutterBottom sx={{ display: 'flex', alignItems: 'center', color: '#ff9800', mb: 2 }}>
            <FilterListIcon sx={{ mr: 1 }} />
            Filter Treatments
          </Typography>
          <Grid container spacing={2}>
            <Grid item xs={12} sm={6} md={3}>
              <FormControl fullWidth variant="outlined">
                <InputLabel>Efficacy</InputLabel>
                <Select
                  value={efficacyFilter}
                  onChange={(e) => setEfficacyFilter(e.target.value)}
                  label="Efficacy"
                  startAdornment={
                    <InputAdornment position="start">
                      <PercentIcon color="action" />
                    </InputAdornment>
                  }
                >
                  <MenuItem value="all">All</MenuItem>
                  <MenuItem value="high">High (≥95%)</MenuItem>
                  <MenuItem value="medium">Medium (90-94%)</MenuItem>
                  <MenuItem value="low">Low (&lt;90%)</MenuItem>
                </Select>
              </FormControl>
            </Grid>

            <Grid item xs={12} sm={6} md={3}>
              <FormControl fullWidth variant="outlined">
                <InputLabel>Time Required</InputLabel>
                <Select
                  value={timeRequiredFilter}
                  onChange={(e) => setTimeRequiredFilter(e.target.value)}
                  label="Time Required"
                  startAdornment={
                    <InputAdornment position="start">
                      <AccessTimeIcon color="action" />
                    </InputAdornment>
                  }
                >
                  <MenuItem value="all">All</MenuItem>
                  <MenuItem value="short">Short (≤7 days)</MenuItem>
                  <MenuItem value="medium">Medium (8-28 days)</MenuItem>
                  <MenuItem value="long">Long (&gt;28 days)</MenuItem>
                </Select>
              </FormControl>
            </Grid>

            <Grid item xs={12} sm={6} md={3}>
              <FormControl fullWidth variant="outlined">
                <InputLabel>Temperature</InputLabel>
                <Select
                  value={temperatureFilter}
                  onChange={(e) => setTemperatureFilter(e.target.value)}
                  label="Temperature"
                  startAdornment={
                    <InputAdornment position="start">
                      <DeviceThermostatIcon color="action" />
                    </InputAdornment>
                  }
                >
                  <MenuItem value="all">All</MenuItem>
                  <MenuItem value="cold">Cold (≤10°C)</MenuItem>
                  <MenuItem value="moderate">Moderate (11-25°C)</MenuItem>
                  <MenuItem value="warm">Warm (&gt;25°C)</MenuItem>
                </Select>
              </FormControl>
            </Grid>

            <Grid item xs={12} sm={6} md={3}>
              <FormControl fullWidth variant="outlined">
                <InputLabel>Availability</InputLabel>
                <Select
                  value={availabilityFilter}
                  onChange={(e) => setAvailabilityFilter(e.target.value)}
                  label="Availability"
                  startAdornment={
                    <InputAdornment position="start">
                      <LocalPharmacyIcon color="action" />
                    </InputAdornment>
                  }
                >
                  <MenuItem value="all">All</MenuItem>
                  <MenuItem value="pharmacy">Pharmacy</MenuItem>
                  <MenuItem value="veterinary">Veterinary</MenuItem>
                </Select>
              </FormControl>
            </Grid>

            <Grid item xs={12} sm={6} md={3}>
              <FormControl fullWidth variant="outlined">
                <InputLabel>Cost</InputLabel>
                <Select
                  value={costFilter}
                  onChange={(e) => setCostFilter(e.target.value)}
                  label="Cost"
                  startAdornment={
                    <InputAdornment position="start">
                      <EuroIcon color="action" />
                    </InputAdornment>
                  }
                >
                  <MenuItem value="all">All</MenuItem>
                  <MenuItem value="low">Low</MenuItem>
                  <MenuItem value="medium">Medium</MenuItem>
                  <MenuItem value="high">High</MenuItem>
                </Select>
              </FormControl>
            </Grid>

            <Grid item xs={12} sm={6} md={3}>
              <FormControl fullWidth variant="outlined">
                <InputLabel>Season</InputLabel>
                <Select
                  value={seasonFilter}
                  onChange={(e) => setSeasonFilter(e.target.value)}
                  label="Season"
                  startAdornment={
                    <InputAdornment position="start">
                      <CalendarMonthIcon color="action" />
                    </InputAdornment>
                  }
                >
                  <MenuItem value="all">All Seasons</MenuItem>
                  <MenuItem value="spring">Spring</MenuItem>
                  <MenuItem value="summer">Summer</MenuItem>
                  <MenuItem value="autumn">Autumn</MenuItem>
                  <MenuItem value="winter">Winter</MenuItem>
                </Select>
              </FormControl>
            </Grid>

            <Grid item xs={12} sm={6} md={3}>
              <FormControlLabel
                control={
                  <Switch
                    checked={organicOnly}
                    onChange={handleOrganicChange}
                    color="success"
                  />
                }
                label={
                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
                    <NatureIcon sx={{ mr: 1, color: 'success.main' }} />
                    <Typography variant="body2">Organic Only</Typography>
                  </Box>
                }
                sx={{ mt: 1 }}
              />
            </Grid>
          </Grid>
        </Paper>

        <Box sx={{ mb: 4 }}>
          {filteredTreatments.length === 0 ? (
            <Paper 
              elevation={3} 
              sx={{ 
                p: 4, 
                mb: 3, 
                display: 'flex', 
                flexDirection: 'column', 
                alignItems: 'center',
                justifyContent: 'center',
                textAlign: 'center',
                borderRadius: 2,
                bgcolor: 'rgba(255, 152, 0, 0.05)'
              }}
            >
              <FilterListIcon sx={{ fontSize: 60, color: 'text.secondary', mb: 2 }} />
              <Typography variant="h6" gutterBottom>No treatments match your filters</Typography>
              <Typography variant="body2" color="text.secondary" paragraph>
                Try adjusting your filter criteria or click the "Reset Filters" button to see all available treatments.
              </Typography>
              <Button 
                variant="contained" 
                color="warning" 
                onClick={resetAllFilters}
                startIcon={<FilterListIcon />}
              >
                Reset All Filters
              </Button>
            </Paper>
          ) : (
            <>
              {/* Non-Chemical Methods Section */}
              <Paper 
                elevation={0} 
                sx={{ 
                  p: 2, 
                  mb: 3, 
                  bgcolor: 'rgba(33, 150, 243, 0.1)',
                  borderRadius: '8px 8px 0 0',
                  borderLeft: '4px solid',
                  borderColor: 'info.main'
                }}
              >
                <Typography variant="h6" sx={{ display: 'flex', alignItems: 'center', color: 'info.main' }}>
                  <BuildIcon sx={{ mr: 1 }} />
                  Non-Chemical Control Methods
                </Typography>
                <Typography variant="body2" sx={{ mt: 1, color: 'text.secondary' }}>
                  These methods focus on mechanical and biological approaches to control Varroa mites without chemical substances.
                </Typography>
              </Paper>

              <Grid container spacing={3}>
                {filteredTreatments
                  .filter(treatment => 
                    treatment.type === 'Mechanical methods' || 
                    treatment.type === 'Bio-technical methods'
                  )
                  .map((treatment, index) => (
                    <Grid item xs={12} md={6} lg={4} key={treatment.id}>
                      <Card 
                        sx={{ 
                          cursor: 'pointer',
                          border: selectedTreatments.some(t => t.id === treatment.id) ? '2px solid' : '1px solid',
                          borderColor: selectedTreatments.some(t => t.id === treatment.id) ? 'primary.main' : '#ff9800',
                          borderLeft: '4px solid',
                          borderLeftColor: '#ff9800',
                          backgroundColor: selectedTreatments.some(t => t.id === treatment.id) ? 'rgba(255, 152, 0, 0.15)' : 'background.paper',
                          '&:hover': {
                            boxShadow: 3,
                            backgroundColor: 'rgba(255, 152, 0, 0.1)'
                          },
                          height: '100%'
                        }}
                        onClick={() => handleTreatmentSelect(treatment)}
                      >
                        <CardContent>
                          <Typography variant="h6" gutterBottom>
                            {treatment.name}
                          </Typography>
                          
                          <Stack direction="row" spacing={1} flexWrap="wrap" mb={1}>
                            <Chip 
                              icon={treatment.type === 'Mechanical methods' ? <BuildIcon /> : <BeehiveIcon />}
                              label={treatment.type}
                              color={treatment.type === 'Mechanical methods' ? 'success' : 'info'}
                              size="small"
                            />
                            <Chip 
                              icon={<PercentIcon />}
                              label={`Efficacy: ${treatment.efficacy}%`}
                              color={parseInt(treatment.efficacy) >= 95 ? 'success' : parseInt(treatment.efficacy) >= 90 ? 'warning' : 'error'}
                              size="small"
                            />
                          </Stack>

                          <Typography variant="subtitle2" gutterBottom>
                            Application Method
                          </Typography>
                          <Typography variant="body2" color="text.secondary" paragraph sx={{ 
                            minHeight: '40px',
                            display: 'flex',
                            alignItems: 'center'
                          }}>
                            {treatment.applicationMethod || treatment.implementation || 'Not specified'}
                          </Typography>

                          <Typography variant="subtitle2" gutterBottom>
                            Required Equipment
                          </Typography>
                          <Stack direction="row" spacing={1} sx={{ mb: 2 }}>
                            <Chip 
                              icon={<BuildIcon />}
                              label={treatment.equipmentNeeded || 'Not specified'}
                              size="small"
                            />
                          </Stack>

                          <List dense>
                            <ListItem>
                              <ListItemIcon>
                                <AccessTimeIcon />
                              </ListItemIcon>
                              <Typography variant="body2">
                                Total duration: {treatment.totalDuration}
                              </Typography>
                            </ListItem>
                            <ListItem>
                              <ListItemIcon>
                                <WarningIcon />
                              </ListItemIcon>
                              <Typography variant="body2">
                                Residue risks: {treatment.residueRisks || 'None'}
                              </Typography>
                            </ListItem>
                            <ListItem>
                              <ListItemIcon>
                                <ScienceIcon />
                              </ListItemIcon>
                              <Typography variant="body2">
                                Active ingredient: {treatment.activeIngredient || 'None'}
                              </Typography>
                            </ListItem>
                            <ListItem>
                              <ListItemIcon>
                                <BusinessIcon />
                              </ListItemIcon>
                              <Typography variant="body2">
                                Manufacturer: {treatment.manufacturer || '-'}
                              </Typography>
                            </ListItem>
                            <ListItem>
                              <ListItemIcon>
                                <DeviceThermostatIcon />
                              </ListItemIcon>
                              <Typography variant="body2">
                                Temperature range: {(treatment.temperatureMin > 0 && treatment.temperatureMax > 0) ? 
                                  `${treatment.temperatureMin}°C - ${treatment.temperatureMax}°C` : 
                                  'Not specified'}
                              </Typography>
                            </ListItem>
                          </List>

                          {/* Información adicional - Desplegable */}
                          <Box sx={{ mt: 2 }}>
                            <Button 
                              variant="outlined" 
                              size="small" 
                              endIcon={<NavigateNextIcon />} 
                              onClick={(e) => handleOpenDetails(treatment, e)}
                              fullWidth
                              sx={{ mt: 1 }}
                            >
                              View More Details
                            </Button>
                          </Box>
                        </CardContent>
                      </Card>
                    </Grid>
                  ))}
              </Grid>

              {/* Chemical Methods Section */}
              <Paper 
                elevation={0} 
                sx={{ 
                  p: 2, 
                  mb: 3, 
                  mt: 4,
                  bgcolor: 'rgba(244, 67, 54, 0.1)',
                  borderRadius: '8px 8px 0 0',
                  borderLeft: '4px solid',
                  borderColor: 'error.main'
                }}
              >
                <Typography variant="h6" sx={{ display: 'flex', alignItems: 'center', color: 'error.main' }}>
                  <LocalPharmacyIcon sx={{ mr: 1 }} />
                  Chemical Control Methods
                </Typography>
                <Typography variant="body2" sx={{ mt: 1, color: 'text.secondary' }}>
                  These methods use chemical substances (organic or synthetic) to effectively eliminate Varroa mites.
                </Typography>
              </Paper>

              <Grid container spacing={3}>
                {filteredTreatments
                  .filter(treatment => 
                    treatment.type === 'Organic Chemical' || 
                    treatment.type === 'Synthetic Chemical'
                  )
                  .map((treatment, index) => (
                    <Grid item xs={12} md={6} lg={4} key={treatment.id}>
                      <Card 
                        sx={{ 
                          cursor: 'pointer',
                          border: selectedTreatments.some(t => t.id === treatment.id) ? '2px solid' : '1px solid',
                          borderColor: selectedTreatments.some(t => t.id === treatment.id) ? 'primary.main' : '#ff9800',
                          borderLeft: '4px solid',
                          borderLeftColor: '#ff9800',
                          backgroundColor: selectedTreatments.some(t => t.id === treatment.id) ? 'rgba(255, 152, 0, 0.15)' : 'background.paper',
                          '&:hover': {
                            boxShadow: 3,
                            backgroundColor: 'rgba(255, 152, 0, 0.1)'
                          },
                          height: '100%'
                        }}
                        onClick={() => handleTreatmentSelect(treatment)}
                      >
                        <CardContent>
                          <Typography variant="h6" gutterBottom>
                            {treatment.name}
                          </Typography>
                          
                          <Stack direction="row" spacing={1} flexWrap="wrap" mb={1}>
                            <Chip 
                              icon={treatment.type === 'Organic Chemical' ? <ScienceIcon /> : <LocalPharmacyIcon />}
                              label={treatment.type}
                              color={treatment.type === 'Organic Chemical' ? 'success' : 'error'}
                              size="small"
                            />
                            <Chip 
                              icon={<PercentIcon />}
                              label={`Efficacy: ${treatment.efficacy}%`}
                              color={parseInt(treatment.efficacy) >= 95 ? 'success' : parseInt(treatment.efficacy) >= 90 ? 'warning' : 'error'}
                              size="small"
                            />
                          </Stack>

                          <Typography variant="subtitle2" gutterBottom>
                            Application Method
                          </Typography>
                          <Typography variant="body2" color="text.secondary" paragraph sx={{ 
                            minHeight: '40px',
                            display: 'flex',
                            alignItems: 'center'
                          }}>
                            {treatment.applicationMethod || treatment.implementation || 'Not specified'}
                          </Typography>

                          <Typography variant="subtitle2" gutterBottom>
                            Required Equipment
                          </Typography>
                          <Stack direction="row" spacing={1} sx={{ mb: 2 }}>
                            <Chip 
                              icon={<BuildIcon />}
                              label={treatment.equipmentNeeded || 'Not specified'}
                              size="small"
                            />
                          </Stack>

                          <List dense>
                            <ListItem>
                              <ListItemIcon>
                                <AccessTimeIcon />
                              </ListItemIcon>
                              <Typography variant="body2">
                                Total duration: {treatment.totalDuration}
                              </Typography>
                            </ListItem>
                            <ListItem>
                              <ListItemIcon>
                                <WarningIcon />
                              </ListItemIcon>
                              <Typography variant="body2">
                                Residue risks: {treatment.residueRisks || 'None'}
                              </Typography>
                            </ListItem>
                            <ListItem>
                              <ListItemIcon>
                                <ScienceIcon />
                              </ListItemIcon>
                              <Typography variant="body2">
                                Active ingredient: {treatment.activeIngredient || 'None'}
                              </Typography>
                            </ListItem>
                            <ListItem>
                              <ListItemIcon>
                                <BusinessIcon />
                              </ListItemIcon>
                              <Typography variant="body2">
                                Manufacturer: {treatment.manufacturer || '-'}
                              </Typography>
                            </ListItem>
                            <ListItem>
                              <ListItemIcon>
                                <DeviceThermostatIcon />
                              </ListItemIcon>
                              <Typography variant="body2">
                                Temperature range: {(treatment.temperatureMin > 0 && treatment.temperatureMax > 0) ? 
                                  `${treatment.temperatureMin}°C - ${treatment.temperatureMax}°C` : 
                                  'Not specified'}
                              </Typography>
                            </ListItem>
                          </List>

                          {/* Información adicional - Desplegable */}
                          <Box sx={{ mt: 2 }}>
                            <Button 
                              variant="outlined" 
                              size="small" 
                              endIcon={<NavigateNextIcon />} 
                              onClick={(e) => handleOpenDetails(treatment, e)}
                              fullWidth
                              sx={{ mt: 1 }}
                            >
                              View More Details
                            </Button>
                          </Box>
                        </CardContent>
                      </Card>
                    </Grid>
                  ))}
              </Grid>

              {/* Other Treatments Section (if any) */}
              {filteredTreatments.some(treatment => 
                treatment.type !== 'Mechanical methods' && 
                treatment.type !== 'Bio-technical methods' && 
                treatment.type !== 'Organic Chemical' && 
                treatment.type !== 'Synthetic Chemical'
              ) && (
                <>
                  <Paper 
                    elevation={0} 
                    sx={{ 
                      p: 2, 
                      mb: 3, 
                      mt: 4,
                      bgcolor: 'rgba(158, 158, 158, 0.1)',
                      borderRadius: '8px 8px 0 0',
                      borderLeft: '4px solid',
                      borderColor: 'grey.500'
                    }}
                  >
                    <Typography variant="h6" sx={{ display: 'flex', alignItems: 'center', color: 'grey.700' }}>
                      <InfoIcon sx={{ mr: 1 }} />
                      Other Treatment Methods
                    </Typography>
                    <Typography variant="body2" sx={{ mt: 1, color: 'text.secondary' }}>
                      Additional treatment methods that may be useful in your Varroa mite management strategy.
                    </Typography>
                  </Paper>

                  <Grid container spacing={3}>
                    {filteredTreatments
                      .filter(treatment => 
                        treatment.type !== 'Mechanical methods' && 
                        treatment.type !== 'Bio-technical methods' && 
                        treatment.type !== 'Organic Chemical' && 
                        treatment.type !== 'Synthetic Chemical'
                      )
                      .map((treatment, index) => (
                        <Grid item xs={12} md={6} lg={4} key={treatment.id}>
                          <Card 
                            sx={{ 
                              cursor: 'pointer',
                              border: selectedTreatments.some(t => t.id === treatment.id) ? '2px solid' : '1px solid',
                              borderColor: selectedTreatments.some(t => t.id === treatment.id) ? 'primary.main' : '#ff9800',
                              borderLeft: '4px solid',
                              borderLeftColor: '#ff9800',
                              backgroundColor: selectedTreatments.some(t => t.id === treatment.id) ? 'rgba(255, 152, 0, 0.15)' : 'background.paper',
                              '&:hover': {
                                boxShadow: 3,
                                backgroundColor: 'rgba(255, 152, 0, 0.1)'
                              },
                              height: '100%'
                            }}
                            onClick={() => handleTreatmentSelect(treatment)}
                          >
                            <CardContent>
                              <Typography variant="h6" gutterBottom>
                                {treatment.name}
                              </Typography>
                              
                              <Stack direction="row" spacing={1} flexWrap="wrap" mb={1}>
                                <Chip 
                                  icon={<InfoIcon />}
                                  label={treatment.type || 'Unspecified'}
                                  size="small"
                                />
                                <Chip 
                                  icon={<PercentIcon />}
                                  label={`Efficacy: ${treatment.efficacy}%`}
                                  color={parseInt(treatment.efficacy) >= 95 ? 'success' : parseInt(treatment.efficacy) >= 90 ? 'warning' : 'error'}
                                  size="small"
                                />
                              </Stack>

                              <Typography variant="subtitle2" gutterBottom>
                                Application Method
                              </Typography>
                              <Typography variant="body2" color="text.secondary" paragraph sx={{ 
                                minHeight: '40px',
                                display: 'flex',
                                alignItems: 'center'
                              }}>
                                {treatment.applicationMethod || treatment.implementation || 'Not specified'}
                              </Typography>

                              <Typography variant="subtitle2" gutterBottom>
                                Required Equipment
                              </Typography>
                              <Stack direction="row" spacing={1} sx={{ mb: 2 }}>
                                <Chip 
                                  icon={<BuildIcon />}
                                  label={treatment.equipmentNeeded || 'Not specified'}
                                  size="small"
                                />
                              </Stack>

                              <List dense>
                                <ListItem>
                                  <ListItemIcon>
                                    <AccessTimeIcon />
                                  </ListItemIcon>
                                  <Typography variant="body2">
                                    Total duration: {treatment.totalDuration}
                                  </Typography>
                                </ListItem>
                                <ListItem>
                                  <ListItemIcon>
                                    <WarningIcon />
                                  </ListItemIcon>
                                  <Typography variant="body2">
                                    Residue risks: {treatment.residueRisks || 'None'}
                                  </Typography>
                                </ListItem>
                                <ListItem>
                                  <ListItemIcon>
                                    <ScienceIcon />
                                  </ListItemIcon>
                                  <Typography variant="body2">
                                    Active ingredient: {treatment.activeIngredient || 'None'}
                                  </Typography>
                                </ListItem>
                                <ListItem>
                                  <ListItemIcon>
                                    <BusinessIcon />
                                  </ListItemIcon>
                                  <Typography variant="body2">
                                    Manufacturer: {treatment.manufacturer || '-'}
                                  </Typography>
                                </ListItem>
                                <ListItem>
                                  <ListItemIcon>
                                    <DeviceThermostatIcon />
                                  </ListItemIcon>
                                  <Typography variant="body2">
                                    Temperature range: {(treatment.temperatureMin > 0 && treatment.temperatureMax > 0) ? 
                                      `${treatment.temperatureMin}°C - ${treatment.temperatureMax}°C` : 
                                      'Not specified'}
                                  </Typography>
                                </ListItem>
                              </List>

                              {/* Información adicional - Desplegable */}
                              <Box sx={{ mt: 2 }}>
                                <Button 
                                  variant="outlined" 
                                  size="small" 
                                  endIcon={<NavigateNextIcon />} 
                                  onClick={(e) => handleOpenDetails(treatment, e)}
                                  fullWidth
                                  sx={{ mt: 1 }}
                                >
                                  View More Details
                                </Button>
                              </Box>
                            </CardContent>
                          </Card>
                        </Grid>
                      ))}
                  </Grid>
                </>
              )}
            </>
          )}
        </Box>

        {/* Botón de siguiente */}
        <Box sx={{ mt: 4, display: 'flex', justifyContent: 'flex-end' }}>
          <Button
            variant="contained"
            color="primary"
            endIcon={<NavigateNextIcon />}
            onClick={handleNext}
            disabled={selectedTreatments.length === 0}
          >
            Continue with Selected Treatments
          </Button>
        </Box>
      </Container>

      {/* Modal de detalles del tratamiento */}
      <Dialog 
        open={detailsOpen} 
        onClose={handleCloseDetails}
        maxWidth="md"
        fullWidth
      >
        {selectedDetailTreatment && (
          <>
            <DialogTitle sx={{ 
              bgcolor: 'primary.main', 
              color: 'white',
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center'
            }}>
              <Typography variant="h6">{selectedDetailTreatment.name} - Detailed Information</Typography>
              <IconButton
                edge="end"
                color="inherit"
                onClick={handleCloseDetails}
                aria-label="close"
              >
                <CloseIcon />
              </IconButton>
            </DialogTitle>
            <DialogContent dividers>
              <Grid container spacing={3}>
                <Grid item xs={12} md={6}>
                  <Typography variant="subtitle1" gutterBottom color="primary">Basic Information</Typography>
                  <List dense>
                    <ListItem>
                      <ListItemIcon><HandymanIcon /></ListItemIcon>
                      <ListItemText primary="Type" secondary={selectedDetailTreatment.type} />
                    </ListItem>
                    <ListItem>
                      <ListItemIcon><PercentIcon /></ListItemIcon>
                      <ListItemText primary="Efficacy" secondary={`${selectedDetailTreatment.efficacy}%`} />
                    </ListItem>
                    <ListItem>
                      <ListItemIcon><AccessTimeIcon /></ListItemIcon>
                      <ListItemText primary="Duration" secondary={selectedDetailTreatment.duration} />
                    </ListItem>
                    <ListItem>
                      <ListItemIcon><DeviceThermostatIcon /></ListItemIcon>
                      <ListItemText 
                        primary="Temperature Range" 
                        secondary={
                          (selectedDetailTreatment.temperatureMin > 0 && selectedDetailTreatment.temperatureMax > 0) 
                            ? `${selectedDetailTreatment.temperatureMin}°C - ${selectedDetailTreatment.temperatureMax}°C` 
                            : 'Not specified'
                        } 
                      />
                    </ListItem>
                  </List>

                  <Divider sx={{ my: 2 }} />
                  
                  <Typography variant="subtitle1" gutterBottom color="primary">Application Details</Typography>
                  <List dense>
                    <ListItem>
                      <ListItemIcon><ConstructionIcon /></ListItemIcon>
                      <ListItemText primary="Application Method" secondary={selectedDetailTreatment.applicationMethod || selectedDetailTreatment.implementation || 'Not specified'} />
                    </ListItem>
                    <ListItem>
                      <ListItemIcon><BuildIcon /></ListItemIcon>
                      <ListItemText primary="Equipment Needed" secondary={selectedDetailTreatment.equipmentNeeded || 'Not specified'} />
                    </ListItem>
                    <ListItem>
                      <ListItemIcon><SecurityIcon /></ListItemIcon>
                      <ListItemText primary="Safety Equipment" secondary={selectedDetailTreatment.safetyEquipment || 'Not specified'} />
                    </ListItem>
                    <ListItem>
                      <ListItemIcon><RepeatIcon /></ListItemIcon>
                      <ListItemText primary="Number of Applications" secondary={selectedDetailTreatment.numberOfApplications || 'Not specified'} />
                    </ListItem>
                    <ListItem>
                      <ListItemIcon><DateRangeIcon /></ListItemIcon>
                      <ListItemText primary="Days Between Applications" secondary={selectedDetailTreatment.daysBetweenApplications || 'Not specified'} />
                    </ListItem>
                    <ListItem>
                      <ListItemIcon><AccessTimeIcon /></ListItemIcon>
                      <ListItemText primary="Total Duration" secondary={selectedDetailTreatment.totalDuration || 'Not specified'} />
                    </ListItem>
                    <ListItem>
                      <ListItemIcon><ScheduleIcon /></ListItemIcon>
                      <ListItemText primary="Best Time" secondary={selectedDetailTreatment.bestTime || 'Not specified'} />
                    </ListItem>
                  </List>
                </Grid>
                
                <Grid item xs={12} md={6}>
                  <Typography variant="subtitle1" gutterBottom color="primary">Requirements & Precautions</Typography>
                  <List dense>
                    <ListItem>
                      <ListItemIcon><BeehiveIcon /></ListItemIcon>
                      <ListItemText primary="Colony Conditions" secondary={selectedDetailTreatment.colonyConditions || 'Not specified'} />
                    </ListItem>
                    <ListItem>
                      <ListItemIcon><WbSunnyIcon /></ListItemIcon>
                      <ListItemText primary="Weather Conditions" secondary={selectedDetailTreatment.weatherConditions || 'Not specified'} />
                    </ListItem>
                    <ListItem>
                      <ListItemIcon><AcUnitIcon /></ListItemIcon>
                      <ListItemText primary="Temperature Range" secondary={(selectedDetailTreatment.temperatureMin > 0 && selectedDetailTreatment.temperatureMax > 0) ? `${selectedDetailTreatment.temperatureMin}°C - ${selectedDetailTreatment.temperatureMax}°C` : 'Not specified'} />
                    </ListItem>
                    <ListItem>
                      <ListItemIcon><WaterIcon /></ListItemIcon>
                      <ListItemText primary="Humidity Requirements" secondary={selectedDetailTreatment.humidityRequirements || 'Not specified'} />
                    </ListItem>
                    <ListItem>
                      <ListItemIcon><CloudIcon /></ListItemIcon>
                      <ListItemText primary="Environmental Precautions" secondary={selectedDetailTreatment.environmentalPrecautions || 'Not specified'} />
                    </ListItem>
                    <ListItem>
                      <ListItemIcon><InventoryIcon /></ListItemIcon>
                      <ListItemText primary="Storage Requirements" secondary={selectedDetailTreatment.storageRequirements || 'Not specified'} />
                    </ListItem>
                    <ListItem>
                      <ListItemIcon><HourglassEmptyIcon /></ListItemIcon>
                      <ListItemText primary="Withdrawal Period" secondary={selectedDetailTreatment.withdrawalPeriod || 'Not specified'} />
                    </ListItem>
                    <ListItem>
                      <ListItemIcon><WarningIcon /></ListItemIcon>
                      <ListItemText primary="Residue Risks" secondary={selectedDetailTreatment.residueRisks || 'None'} />
                    </ListItem>
                    <ListItem>
                      <ListItemIcon><BugReportIcon /></ListItemIcon>
                      <ListItemText primary="Incompatibilities" secondary={selectedDetailTreatment.incompatibilities || 'None'} />
                    </ListItem>
                    <ListItem>
                      <ListItemIcon><ErrorIcon /></ListItemIcon>
                      <ListItemText primary="Resistance Risk" secondary={selectedDetailTreatment.resistanceRisk || 'Not specified'} />
                    </ListItem>
                  </List>

                  <Divider sx={{ my: 2 }} />
                  
                  <Typography variant="subtitle1" gutterBottom color="primary">Product Information</Typography>
                  <List dense>
                    <ListItem>
                      <ListItemIcon><ScienceIcon /></ListItemIcon>
                      <ListItemText primary="Active Ingredient" secondary={selectedDetailTreatment.activeIngredient || 'None'} />
                    </ListItem>
                    <ListItem>
                      <ListItemIcon><BusinessIcon /></ListItemIcon>
                      <ListItemText primary="Manufacturer" secondary={selectedDetailTreatment.manufacturer || 'Not specified'} />
                    </ListItem>
                    <ListItem>
                      <ListItemIcon><ReceiptIcon /></ListItemIcon>
                      <ListItemText primary="Registration Number" secondary={selectedDetailTreatment.registrationNumber || 'Not specified'} />
                    </ListItem>
                    <ListItem>
                      <ListItemIcon><HealthAndSafetyIcon /></ListItemIcon>
                      <ListItemText primary="Side Effects" secondary={selectedDetailTreatment.sideEffects || 'Not specified'} />
                    </ListItem>
                    <ListItem>
                      <ListItemIcon><EuroIcon /></ListItemIcon>
                      <ListItemText primary="Cost Category" secondary={selectedDetailTreatment.costCategory || 'Not specified'} />
                    </ListItem>
                    <ListItem>
                      <ListItemIcon><NatureIcon /></ListItemIcon>
                      <ListItemText primary="Organic Compatible" secondary={selectedDetailTreatment.organicCompatible ? 'Yes' : 'No'} />
                    </ListItem>
                    <ListItem>
                      <ListItemIcon><LocalPharmacyIcon /></ListItemIcon>
                      <ListItemText primary="Availability" secondary={selectedDetailTreatment.availability || 'Not specified'} />
                    </ListItem>
                  </List>
                </Grid>
              </Grid>
            </DialogContent>
            <DialogActions>
              <Button onClick={handleCloseDetails} color="primary">
                Close
              </Button>
              <Button 
                variant="contained" 
                color="primary" 
                onClick={() => {
                  handleTreatmentSelect(selectedDetailTreatment);
                  handleCloseDetails();
                }}
              >
                Select This Treatment
              </Button>
            </DialogActions>
          </>
        )}
      </Dialog>
    </Box>
  );
};

export default Medications;