import React from 'react';
import { Box, Typography, useTheme, useMediaQuery } from '@mui/material';

interface VarroaMeterProps {
  value: number;
  greenThreshold?: number;
  yellowThreshold?: number;
  measurementType?: 'percentage' | 'daily-count';
  unit?: string;
  maxValue?: number;
}

const VarroaMeter: React.FC<VarroaMeterProps> = ({
  value,
  greenThreshold = 3,
  yellowThreshold = 5,
  measurementType = 'percentage',
  unit = '%',
  maxValue
}) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
  const isTablet = useMediaQuery(theme.breakpoints.down('md'));

  // Altura del termómetro según el tamaño de pantalla
  const meterHeight = isMobile ? 300 : isTablet ? 350 : 450;
  const meterWidth = isMobile ? 80 : isTablet ? 100 : 120;
  
  // Determinar el valor máximo para la escala
  const effectiveMaxValue = maxValue || (measurementType === 'percentage' ? 15 : 50);
  
  // Calcular la posición del indicador basado en el valor
  const clampedValue = Math.min(value, effectiveMaxValue);
  const fillHeight = (clampedValue / effectiveMaxValue) * 100;
  
  // Determinar el color basado en los umbrales
  const getColor = () => {
    if (value < greenThreshold) return theme.palette.success.main;
    if (value < yellowThreshold) return theme.palette.warning.main;
    return theme.palette.error.main;
  };

  const color = getColor();

  // Generar etiquetas de escala basadas en el tipo de medición
  const generateScaleLabels = () => {
    if (measurementType === 'percentage') {
      return [
        { value: effectiveMaxValue, label: `${effectiveMaxValue}%`, color: theme.palette.error.main, weight: 'bold' },
        { value: effectiveMaxValue * 2/3, label: `${Math.round(effectiveMaxValue * 2/3)}%`, color: theme.palette.error.main, weight: 'medium' },
        { value: yellowThreshold, label: `${yellowThreshold}%`, color: theme.palette.warning.main, weight: 'medium' },
        { value: greenThreshold, label: `${greenThreshold}%`, color: theme.palette.success.main, weight: 'medium' },
        { value: 0, label: '0%', color: theme.palette.text.secondary, weight: 'regular' }
      ];
    } else {
      return [
        { value: effectiveMaxValue, label: `${effectiveMaxValue} mites/day`, color: theme.palette.error.main, weight: 'bold' },
        { value: effectiveMaxValue * 2/3, label: `${Math.round(effectiveMaxValue * 2/3)} mites/day`, color: theme.palette.error.main, weight: 'medium' },
        { value: yellowThreshold, label: `${yellowThreshold} mites/day`, color: theme.palette.warning.main, weight: 'medium' },
        { value: greenThreshold, label: `${greenThreshold} mites/day`, color: theme.palette.success.main, weight: 'medium' },
        { value: 0, label: '0 mites/day', color: theme.palette.text.secondary, weight: 'regular' }
      ];
    }
  };

  const scaleLabels = generateScaleLabels();

  return (
    <Box sx={{ 
      display: 'flex', 
      flexDirection: 'column', 
      alignItems: 'center', 
      justifyContent: 'center',
      width: '100%',
      height: '100%',
      p: 2
    }}>
      {/* Título y valor */}
      <Typography 
        variant="h4" 
        component="div" 
        align="center" 
        sx={{ 
          mb: 2, 
          color, 
          fontWeight: 'bold',
          fontSize: { xs: '1.8rem', sm: '2.2rem', md: '2.5rem' }
        }}
      >
        {value.toFixed(measurementType === 'percentage' ? 1 : 0)}{unit}
      </Typography>
      
      <Box sx={{ 
        display: 'flex', 
        alignItems: 'flex-end', 
        justifyContent: 'center',
        height: meterHeight,
        width: '100%'
      }}>
        {/* Leyenda izquierda */}
        <Box sx={{ 
          display: 'flex', 
          flexDirection: 'column', 
          justifyContent: 'space-between', 
          height: '90%', 
          mr: 1,
          textAlign: 'right'
        }}>
          {scaleLabels.map((label, index) => (
            <Typography 
              key={index} 
              variant="body2" 
              sx={{ 
                color: label.color, 
                fontWeight: label.weight === 'bold' ? 'bold' : label.weight === 'medium' ? 'medium' : 'regular',
                fontSize: isMobile ? '0.65rem' : '0.75rem'
              }}
            >
              {label.label}
            </Typography>
          ))}
        </Box>
        
        {/* Termómetro */}
        <Box sx={{ 
          position: 'relative', 
          height: '90%', 
          width: meterWidth,
          bgcolor: theme.palette.grey[200],
          borderRadius: 2,
          boxShadow: '0 0 10px rgba(0,0,0,0.1)',
          border: '1px solid',
          borderColor: theme.palette.grey[300],
          overflow: 'hidden'
        }}>
          {/* Nivel de relleno */}
          <Box sx={{ 
            position: 'absolute', 
            bottom: 0, 
            width: '100%', 
            height: `${fillHeight}%`, 
            bgcolor: color,
            transition: 'height 0.5s, background-color 0.5s'
          }} />
          
          {/* Indicador de nivel actual */}
          <Box sx={{ 
            position: 'absolute', 
            bottom: `${fillHeight}%`, 
            left: 0,
            width: '100%',
            height: 2,
            bgcolor: theme.palette.common.black,
            zIndex: 2
          }} />
          
          {/* Etiqueta del nivel actual */}
          <Box sx={{ 
            position: 'absolute', 
            bottom: `${fillHeight}%`, 
            right: -60,
            transform: 'translateY(-50%)',
            zIndex: 3,
            display: 'flex',
            alignItems: 'center'
          }}>
            <Typography 
              variant="caption" 
              sx={{ 
                fontWeight: 'bold', 
                color: theme.palette.common.black,
                fontSize: '0.7rem',
                bgcolor: 'rgba(255,255,255,0.9)',
                px: 0.5,
                py: 0.2,
                borderRadius: 0.5,
                boxShadow: '0 1px 3px rgba(0,0,0,0.2)'
              }}
            >
              Actual
            </Typography>
          </Box>
        </Box>
        
        {/* Leyenda derecha */}
        <Box sx={{ 
          display: 'flex', 
          flexDirection: 'column', 
          justifyContent: 'space-between', 
          height: '90%', 
          ml: 4,
          width: '40%'
        }}>
          <Box sx={{ display: 'flex', alignItems: 'center' }}>
            <Box sx={{ 
              width: 12, 
              height: 12, 
              bgcolor: theme.palette.error.main, 
              borderRadius: '50%',
              mr: 1
            }} />
            <Typography variant="body2" sx={{ color: theme.palette.error.main, fontWeight: 'bold' }}>
              Colony at severe risk
            </Typography>
          </Box>
          
          <Box sx={{ display: 'flex', alignItems: 'center' }}>
            <Box sx={{ 
              width: 12, 
              height: 12, 
              bgcolor: theme.palette.error.main, 
              borderRadius: '50%',
              mr: 1
            }} />
            <Typography variant="body2" sx={{ color: theme.palette.error.main }}>
              High infestation
            </Typography>
          </Box>
          
          <Box sx={{ display: 'flex', alignItems: 'center' }}>
            <Box sx={{ 
              width: 12, 
              height: 12, 
              bgcolor: theme.palette.warning.main, 
              borderRadius: '50%',
              mr: 1
            }} />
            <Typography variant="body2" sx={{ color: theme.palette.warning.main }}>
              Action required
            </Typography>
          </Box>
          
          <Box sx={{ display: 'flex', alignItems: 'center' }}>
            <Box sx={{ 
              width: 12, 
              height: 12, 
              bgcolor: theme.palette.success.main, 
              borderRadius: '50%',
              mr: 1
            }} />
            <Typography variant="body2" sx={{ color: theme.palette.success.main }}>
              Safe level
            </Typography>
          </Box>
          
          <Box />
        </Box>
      </Box>
    </Box>
  );
};

export default VarroaMeter;