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

import { Box, CircularProgress, Alert } from '@mui/material';
import type { CotizacionGrano } from '../models/mercadoModels';
import { useApiData } from '../hooks/useApiData';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
import { formatFullDateTime } from '../utils/formatters';

interface GrainsHistoricalChartWidgetProps {
  nombre: string;
}

const formatTooltipLabel = (label: string) => {
    return formatFullDateTime(label);
};

const formatXAxis = (tickItem: string) => {
    const date = new Date(tickItem);
    return date.toLocaleDateString('es-AR', { day: '2-digit', month: '2-digit' });
};

export const GrainsHistoricalChartWidget = ({ nombre }: GrainsHistoricalChartWidgetProps) => {
    const apiUrl = `/mercados/granos/history/${encodeURIComponent(nombre)}?dias=30`;
    const { data, loading, error } = useApiData<CotizacionGrano[]>(apiUrl);

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

    if (error) {
        return <Alert severity="error" sx={{ height: 300 }}>{error}</Alert>;
    }

    if (!data || data.length < 2) {
        return <Alert severity="info" sx={{ height: 300 }}>No hay suficientes datos históricos para graficar este grano.</Alert>;
    }

    return (
        <ResponsiveContainer width="100%" height={300}>
            <LineChart data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
                <CartesianGrid strokeDasharray="3 3" />
                {/* Para los granos, usamos la fecha de operación en el eje X, que es más relevante */}
                <XAxis dataKey="fechaOperacion" tickFormatter={formatXAxis} />
                <YAxis domain={['dataMin - 1000', 'dataMax + 1000']} tickFormatter={(tick) => `$${tick.toLocaleString('es-AR')}`} />
                <Tooltip 
                    formatter={(value: number) => [`$${value.toFixed(0)}`, 'Precio']} 
                    labelFormatter={formatTooltipLabel}
                />
                <Legend />
                <Line type="monotone" dataKey="precio" name="Precio" stroke="#028fbe" strokeWidth={2} dot={false} />
            </LineChart>
        </ResponsiveContainer>
    );
};