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

interface VarroaMeterProps {
  percentage: number | undefined;
  greenThreshold: number;
  yellowThreshold: number;
}

const VarroaMeter: React.FC<VarroaMeterProps> = ({ percentage, greenThreshold, yellowThreshold }) => {
  const getColor = (value: number) => {
    if (value < greenThreshold) return '#4caf50';
    if (value < yellowThreshold) return '#ff9800';
    return '#f44336';
  };

  const height = 300;
  const width = 60;
  const borderRadius = 30;
  const padding = 5;
  const innerHeight = height - (padding * 2);

  if (typeof percentage !== 'number') {
    percentage = 0;
  }

  // Limitar el porcentaje a un máximo de 15% para la visualización
  const normalizedPercentage = Math.min(percentage, 15);
  const fillHeight = (normalizedPercentage / 15) * innerHeight;

  return (
    <Paper elevation={3} sx={{ p: 3, borderRadius: 2 }}>
      <Typography variant="h6" align="center" gutterBottom>
        Varroa Infestation Level
      </Typography>
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
        <Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', height }}>
          <Typography>15%</Typography>
          <Typography>10%</Typography>
          <Typography>5%</Typography>
          <Typography>0%</Typography>
        </Box>
        <Box
          sx={{
            position: 'relative',
            height,
            width,
            bgcolor: '#e0e0e0',
            borderRadius: `${borderRadius}px`,
            overflow: 'hidden',
            p: `${padding}px`,
          }}
        >
          <Box
            sx={{
              position: 'absolute',
              bottom: padding,
              left: padding,
              width: width - (padding * 2),
              height: fillHeight,
              bgcolor: getColor(percentage),
              borderRadius: `${borderRadius}px`,
              transition: 'height 0.5s ease-out, background-color 0.5s ease-out',
            }}
          />
        </Box>
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, ml: 2 }}>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
            <Box sx={{ width: 16, height: 16, bgcolor: '#f44336', borderRadius: 1 }} />
            <Typography>High Risk ({yellowThreshold}%+)</Typography>
          </Box>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
            <Box sx={{ width: 16, height: 16, bgcolor: '#ff9800', borderRadius: 1 }} />
            <Typography>Warning ({greenThreshold}-{yellowThreshold}%)</Typography>
          </Box>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
            <Box sx={{ width: 16, height: 16, bgcolor: '#4caf50', borderRadius: 1 }} />
            <Typography>Safe (0-{greenThreshold}%)</Typography>
          </Box>
        </Box>
      </Box>
      <Typography variant="h4" align="center" sx={{ mt: 2, color: getColor(percentage || 0) }}>
        {percentage?.toFixed(1)}%
      </Typography>
    </Paper>
  );
};

export default VarroaMeter;