import { Box, CircularProgress, Alert, Paper, Typography } from '@mui/material';
import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
import RemoveIcon from '@mui/icons-material/Remove';
// Iconos de react-icons para cada grano
import { GiSunflower, GiWheat, GiCorn, GiGrain } from "react-icons/gi";
import { TbGrain } from "react-icons/tb";

import type { CotizacionGrano } from '../models/mercadoModels';
import { useApiData } from '../hooks/useApiData';
import { formatCurrency, formatDateOnly } from '../utils/formatters';

// Función para elegir el icono según el nombre del grano
const getGrainIcon = (nombre: string) => {
    switch (nombre.toLowerCase()) {
        case 'girasol':
            return <GiSunflower size={28} color="#fbc02d" />;
        case 'trigo':
            return <GiWheat size={28} color="#fbc02d" />;
        case 'sorgo':
            return <TbGrain size={28} color="#fbc02d" />;
        case 'maiz':
            return <GiCorn size={28} color="#fbc02d" />;
        default:
            return <GiGrain size={28} color="#fbc02d" />;
    }
};

// Subcomponente para una única tarjeta de grano
const GranoCard = ({ grano }: { grano: CotizacionGrano }) => {
    const isPositive = grano.variacionPrecio > 0;
    const isNegative = grano.variacionPrecio < 0;
    const color = isPositive ? 'success.main' : isNegative ? 'error.main' : 'text.secondary';
    const Icon = isPositive ? ArrowUpwardIcon : isNegative ? ArrowDownwardIcon : RemoveIcon;

    return (
        <Paper 
            elevation={2} 
            sx={{ 
                p: 2, 
                display: 'flex', 
                flexDirection: 'column', 
                justifyContent: 'space-between', 
                flex: '1 1 180px',
                minWidth: '180px',
                maxWidth: '220px',
                height: '160px',
                borderTop: `4px solid ${isPositive ? '#2e7d32' : isNegative ? '#d32f2f' : '#bdbdbd'}`
            }}
        >
            <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
                {getGrainIcon(grano.nombre)}
                <Typography variant="h6" component="h3" sx={{ fontWeight: 'bold', ml: 1 }}>
                    {grano.nombre}
                </Typography>
            </Box>

            <Box sx={{ textAlign: 'center', my: 1 }}>
                <Typography variant="h5" component="p" sx={{ fontWeight: 'bold' }}>
                    ${formatCurrency(grano.precio)}
                </Typography>
                <Typography variant="caption" color="text.secondary">
                    por Tonelada
                </Typography>
            </Box>

            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color }}>
                <Icon sx={{ fontSize: '1.1rem', mr: 0.5 }} />
                <Typography variant="body2" sx={{ fontWeight: 'bold' }}>
                    {formatCurrency(grano.variacionPrecio)}
                </Typography>
            </Box>
            <Typography variant="caption" align="center" sx={{ mt: 1, color: 'text.secondary' }}>
                Operación: {formatDateOnly(grano.fechaOperacion)}
            </Typography>
        </Paper>
    );
};

export const GranosCardWidget = () => {
  const { data, loading, error } = useApiData<CotizacionGrano[]>('/mercados/granos');

  if (loading) {
    return <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>;
  }

  if (error) {
    return <Alert severity="error">{error}</Alert>;
  }

  if (!data || data.length === 0) {
    return <Alert severity="info">No hay datos de granos disponibles.</Alert>;
  }

  return (
    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2, justifyContent: 'center' }}>
      {data.map((grano) => (
        <GranoCard key={grano.nombre} grano={grano} />
      ))}
    </Box>
  );
};