import React from 'react';
import { 
  Box, 
  Container, 
  Typography, 
  Paper, 
  Grid, 
  Card, 
  CardContent, 
  IconButton, 
  Button, 
  List, 
  ListItem, 
  ListItemIcon, 
  Stack, 
  Divider, 
  Chip, 
  Tabs, 
  Tab, 
  Alert, 
  AlertTitle,
  TextField,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  Switch,
  FormControlLabel,
  CircularProgress
} 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, convertToVarrometerTreatment } from '../../../data/treatmentsData';
import LocalPharmacyIcon from '@mui/icons-material/LocalPharmacy';
import MedicalServicesIcon from '@mui/icons-material/MedicalServices';
import BlockIcon from '@mui/icons-material/Block';
import AccessTimeIcon from '@mui/icons-material/AccessTime';
import EuroIcon from '@mui/icons-material/Euro';
import ThermometerIcon from '@mui/icons-material/Thermostat';
import WarningIcon from '@mui/icons-material/Warning';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
import InfoIcon from '@mui/icons-material/Info';
import NavigateNextIcon from '@mui/icons-material/NavigateNext';
import WaterIcon from '@mui/icons-material/Water';
import BuildIcon from '@mui/icons-material/Build';
import SecurityIcon from '@mui/icons-material/Security';

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(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 = [
    'Chemical methods',
    'Bio-technical methods',
    'Mechanical methods',
    'Surveillance'
  ] 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 renderFilters = () => {
    return (
      <Box sx={{ mb: 4, p: 2, bgcolor: '#f5f5f5', borderRadius: 1 }}>
        <Typography variant="h6" sx={{ mb: 2 }}>Selected Filters from Test:</Typography>
        <Grid container spacing={2}>
          <Grid item xs={12} sm={6} md={4}>
            <Typography variant="body2">
              <strong>Beekeeping Type:</strong> {varrometerState.beekeepingType || 'Not specified'}
            </Typography>
            <Typography variant="body2">
              <strong>Time Available:</strong> {varrometerState.timePerHive || 'Not specified'}
            </Typography>
            <Typography variant="body2">
              <strong>Hive Type:</strong> {varrometerState.hiveType || 'Not specified'}
            </Typography>
            <Typography variant="body2">
              <strong>Colony Strength:</strong> {formatColonyStrength(varrometerState.colonyStrength)}
            </Typography>
          </Grid>
          <Grid item xs={12} sm={6} md={4}>
            <Typography variant="body2">
              <strong>Genetic Resistance:</strong> {varrometerState.geneticResistance || 'Not specified'}
            </Typography>
            <Typography variant="body2">
              <strong>Infestation Level:</strong> {varrometerState.infestationLevel || 'Not specified'}
            </Typography>
            <Typography variant="body2">
              <strong>Treatment Availability:</strong> {varrometerState.treatmentAvailable || 'Not specified'}
            </Typography>
            <Typography variant="body2">
              <strong>Assessment Date:</strong> {varrometerState.assessmentDate ? new Date(varrometerState.assessmentDate).toLocaleDateString() : 'Not specified'}
            </Typography>
          </Grid>
          <Grid item xs={12} sm={6} md={4}>
            <Typography variant="body2">
              <strong>Frames:</strong> {varrometerState.frames || 'Not specified'}
            </Typography>
          </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 basados en las respuestas del test
        const filtered = loadedTreatments.filter(treatment => {
          if (!treatment) 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] !== '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 => 
        treatment.type.toLowerCase() === selectedType.toLowerCase()
      );
    }

    // Luego aplicar el resto de filtros
    if (timeRequiredFilter !== 'all') {
      filtered = filtered.filter(treatment => {
        const timeRequired = parseInt(treatment.duration);
        switch(timeRequiredFilter) {
          case 'short': return timeRequired <= 7;
          case 'medium': return timeRequired > 7 && timeRequired <= 28;
          case 'long': return timeRequired > 28;
          default: return true;
        }
      });
    }

    // 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;
        }
      });
    }

    setFilteredTreatments(filtered);
  }, [baseFilteredTreatments, selectedType, timeRequiredFilter, seasonFilter]);

  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(convertToVarrometerTreatment);
      dispatch(updateVarrometerState({ 
        selectedTreatments: varrometerTreatments,
        currentPhase: 'treatment_results'
      }));
    }
  };

  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 }}>
        {renderFilters()}

        {/* 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 */}
        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
          Showing {filteredTreatments.length} of {treatments.length} treatments
          {selectedType && ` (Filtered by: ${selectedType})`}
        </Typography>

        {/* Filtros adicionales */}
        <Paper sx={{ p: 2, mb: 3 }}>
          <Grid container spacing={2}>
            <Grid item xs={12} sm={6} md={3}>
              <FormControl fullWidth>
                <InputLabel>Efficacy</InputLabel>
                <Select
                  value={efficacyFilter}
                  onChange={(e) => setEfficacyFilter(e.target.value)}
                  label="Efficacy"
                >
                  <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>
                <InputLabel>Time Required</InputLabel>
                <Select
                  value={timeRequiredFilter}
                  onChange={(e) => setTimeRequiredFilter(e.target.value)}
                  label="Time Required"
                >
                  <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>
                <InputLabel>Temperature</InputLabel>
                <Select
                  value={temperatureFilter}
                  onChange={(e) => setTemperatureFilter(e.target.value)}
                  label="Temperature"
                >
                  <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>
                <InputLabel>Availability</InputLabel>
                <Select
                  value={availabilityFilter}
                  onChange={(e) => setAvailabilityFilter(e.target.value)}
                  label="Availability"
                >
                  <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>
                <InputLabel>Cost</InputLabel>
                <Select
                  value={costFilter}
                  onChange={(e) => setCostFilter(e.target.value)}
                  label="Cost"
                >
                  <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>
                <InputLabel>Season</InputLabel>
                <Select
                  value={seasonFilter}
                  onChange={(e) => setSeasonFilter(e.target.value)}
                  label="Season"
                >
                  <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={(e) => setOrganicOnly(e.target.checked)}
                    color="success"
                  />
                }
                label="Organic Only"
                sx={{ mt: 1 }}
              />
            </Grid>
          </Grid>
        </Paper>

        {/* Grid de tratamientos */}
        <Grid container spacing={3}>
          {filteredTreatments.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' : 'none',
                  borderColor: 'primary.main',
                  backgroundColor: selectedTreatments.some(t => t.id === treatment.id) ? 'action.selected' : 'background.paper',
                  '&:hover': {
                    boxShadow: 3,
                    backgroundColor: 'action.hover'
                  }
                }}
                onClick={() => handleTreatmentSelect(treatment)}
              >
                <CardContent>
                  <Typography variant="h6" gutterBottom>
                    {treatment.name}
                  </Typography>
                  
                  <Stack direction="row" spacing={1} flexWrap="wrap" mb={1}>
                    <Chip 
                      label={treatment.type.replace(' methods', '')}
                      color={
                        treatment.type.toLowerCase().includes('chemical') ? 'error' :
                        treatment.type.toLowerCase().includes('bio-technical') ? 'success' :
                        treatment.type.toLowerCase().includes('mechanical') ? 'warning' :
                        'info'
                      }
                      size="small"
                    />
                    <Chip 
                      icon={<AccessTimeIcon />}
                      label={treatment.duration}
                      size="small"
                    />
                  </Stack>

                  <Typography variant="subtitle2" gutterBottom>
                    Método de aplicación
                  </Typography>
                  <Typography variant="body2" color="text.secondary" paragraph>
                    {treatment.description || 'No especificado'}
                  </Typography>

                  <Typography variant="subtitle2" gutterBottom>
                    Equipo necesario
                  </Typography>
                  <Stack direction="row" spacing={1} sx={{ mb: 2 }}>
                    <Chip 
                      icon={<BuildIcon />}
                      label={treatment.safetyEquipment || 'No especificado'}
                      size="small"
                    />
                  </Stack>

                  <List dense>
                    <ListItem>
                      <ListItemIcon>
                        <AccessTimeIcon />
                      </ListItemIcon>
                      <Typography variant="body2">
                        Duración total: {treatment.duration}
                      </Typography>
                    </ListItem>
                    {treatment.residueRisks && (
                      <ListItem>
                        <ListItemIcon>
                          <WarningIcon />
                        </ListItemIcon>
                        <Typography variant="body2">
                          Efectos secundarios: {treatment.residueRisks}
                        </Typography>
                      </ListItem>
                    )}
                  </List>
                </CardContent>
              </Card>
            </Grid>
          ))}
        </Grid>

        {/* 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>
    </Box>
  );
};

export default Medications;