Mercados-Web/frontend/src/components/MercadoAgroCardWidget.tsx

import { useState } from 'react';
import {
    Box, CircularProgress, Alert, Paper, Typography, Dialog,
    DialogTitle, DialogContent, IconButton
} from '@mui/material';
import { PiCow } from "react-icons/pi";
import ScaleIcon from '@mui/icons-material/Scale';
import { PiChartLineUpBold } from "react-icons/pi";
import CloseIcon from '@mui/icons-material/Close';

import type { CotizacionGanado } from '../models/mercadoModels';
import { useApiData } from '../hooks/useApiData';
import { formatCurrency, formatInteger } from '../utils/formatters';
import { AgroHistoricalChartWidget } from './AgroHistoricalChartWidget';

// El subcomponente ahora tendrá un botón para el gráfico.
const AgroCard = ({ registro, onChartClick }: { registro: CotizacionGanado, onChartClick: () => void }) => {
    return (
        // Añadimos posición relativa para poder posicionar el botón del gráfico.
        <Paper elevation={2} sx={{ p: 2, flex: '1 1 250px', minWidth: '250px', maxWidth: '300px', position: 'relative' }}>
            <IconButton
                aria-label="ver historial"
                onClick={(e) => {
                    e.stopPropagation();
                    onChartClick();
                }}
                sx={{
                    position: 'absolute',
                    top: 8,
                    right: 8,
                    backgroundColor: 'rgba(255, 255, 255, 0.7)', // Fondo semitransparente
                    backdropFilter: 'blur(2px)', // Efecto "frosty glass" para el fondo
                    border: '1px solid rgba(0, 0, 0, 0.1)',
                    boxShadow: '0 2px 5px rgba(0,0,0,0.1)',
                    transition: 'all 0.2s ease-in-out', // Transición suave para todos los cambios
                    '&:hover': {
                        transform: 'translateY(-2px)', // Se eleva un poco
                        boxShadow: '0 4px 10px rgba(0,0,0,0.2)', // La sombra se hace más grande
                        backgroundColor: 'rgba(255, 255, 255, 0.9)',
                    }
                }}
            >
                <PiChartLineUpBold size="20" />
            </IconButton>

            <Typography variant="h6" component="h3" sx={{ fontWeight: 'bold', borderBottom: 1, borderColor: 'divider', pb: 1, mb: 2, pr: 5 /* Espacio para el botón */ }}>
                {registro.categoria}
                <Typography variant="body2" color="text.secondary">{registro.especificaciones}</Typography>
            </Typography>

            <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
                <Typography variant="body2" color="text.secondary">Precio Máximo:</Typography>
                <Typography variant="body2" sx={{ fontWeight: 'bold', color: 'success.main' }}>${formatCurrency(registro.maximo)}</Typography>
            </Box>
            <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
                <Typography variant="body2" color="text.secondary">Precio Mínimo:</Typography>
                <Typography variant="body2" sx={{ fontWeight: 'bold', color: 'error.main' }}>${formatCurrency(registro.minimo)}</Typography>
            </Box>
            <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}>
                <Typography variant="body2" color="text.secondary">Precio Mediano:</Typography>
                <Typography variant="body2" sx={{ fontWeight: 'bold' }}>${formatCurrency(registro.mediano)}</Typography>
            </Box>

            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 3, pt: 1, borderTop: 1, borderColor: 'divider' }}>
                <Box sx={{ textAlign: 'center' }}>
                    <PiCow size="28" />
                    <Typography variant="body1" sx={{ fontWeight: 'bold' }}>{formatInteger(registro.cabezas)}</Typography>
                    <Typography variant="caption" color="text.secondary">Cabezas</Typography>
                </Box>
                <Box sx={{ textAlign: 'center' }}>
                    <ScaleIcon color="action" />
                    <Typography variant="body1" sx={{ fontWeight: 'bold' }}>{formatInteger(registro.kilosTotales)}</Typography>
                    <Typography variant="caption" color="text.secondary">Kilos</Typography>
                </Box>
            </Box>
        </Paper>
    );
};

export const MercadoAgroCardWidget = () => {
    const { data, loading, error } = useApiData<CotizacionGanado[]>('/mercados/agroganadero');
    const [selectedCategory, setSelectedCategory] = useState<CotizacionGanado | null>(null);

    const handleChartClick = (registro: CotizacionGanado) => {
        setSelectedCategory(registro);
    };

    const handleCloseDialog = () => {
        setSelectedCategory(null);
    };

    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 del mercado agroganadero disponibles.</Alert>;
    }

    return (
        <>
            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2, justifyContent: 'center' }}>
                {data.map(registro => (
                    <AgroCard key={registro.id} registro={registro} onChartClick={() => handleChartClick(registro)} />
                ))}
            </Box>
            <Dialog
                open={Boolean(selectedCategory)}
                onClose={handleCloseDialog}
                maxWidth="md"
                fullWidth
                sx={{ '& .MuiDialog-paper': { overflow: 'visible' } }} // Permite que el botón se vea fuera
            >
                <IconButton
                    aria-label="close"
                    onClick={handleCloseDialog}
                    sx={{
                        position: 'absolute',
                        top: -15, // Mueve el botón hacia arriba, fuera del Dialog
                        right: -15, // Mueve el botón hacia la derecha, fuera del Dialog
                        color: (theme) => theme.palette.grey[500],
                        backgroundColor: 'white',
                        boxShadow: 3, // Añade una sombra para que destaque
                        '&:hover': {
                            backgroundColor: 'grey.100', // Un leve cambio de color al pasar el mouse
                        },
                    }}
                >
                    <CloseIcon />
                </IconButton>

                <DialogTitle sx={{ m: 0, p: 2 }}>
                    Mensual de {selectedCategory?.categoria} ({selectedCategory?.especificaciones})
                </DialogTitle>
                <DialogContent dividers>
                    {selectedCategory && (
                        <AgroHistoricalChartWidget
                            categoria={selectedCategory.categoria}
                            especificaciones={selectedCategory.especificaciones}
                        />
                    )}
                </DialogContent>
            </Dialog>
        </>
    );
};