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

import { useState } from 'react';
import { Box, Paper, Typography, ToggleButton, ToggleButtonGroup, CircularProgress, Alert } from '@mui/material';
import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
import RemoveIcon from '@mui/icons-material/Remove';

import type { CotizacionBolsa } from '../models/mercadoModels';
import { formatCurrency2Decimal, formatCurrency } from '../utils/formatters';
import { HistoricalChartWidget } from './HistoricalChartWidget';
import { useApiData } from '../hooks/useApiData';
import { useIsHoliday } from '../hooks/useIsHoliday'; // <-- Importamos el hook
import { HolidayAlert } from './common/HolidayAlert';   // <-- Importamos la alerta

/**
 * Sub-componente para la variación del índice.
 */
const VariacionMerval = ({ actual, anterior }: { actual: number, anterior: number }) => {
    if (anterior === 0) return null;
    const variacionPuntos = actual - anterior;
    const variacionPorcentaje = (variacionPuntos / anterior) * 100;

    const isPositive = variacionPuntos > 0;
    const isNegative = variacionPuntos < 0;
    const color = isPositive ? 'success.main' : isNegative ? 'error.main' : 'text.secondary';
    const Icon = isPositive ? ArrowUpwardIcon : isNegative ? ArrowDownwardIcon : RemoveIcon;

    return (
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, color }}>
            <Icon sx={{ fontSize: '2rem' }} />
            <Box>
                <Typography component="span" sx={{ fontWeight: 'bold', fontSize: '1.2rem', display: 'block' }}>
                    {formatCurrency(variacionPuntos)}
                </Typography>
                <Typography component="span" sx={{ fontWeight: 'bold', fontSize: '1.2rem' }}>
                    ({variacionPorcentaje.toFixed(2)}%)
                </Typography>
            </Box>
        </Box>
    );
};

/**
 * Widget autónomo para la tarjeta de héroe del S&P Merval.
 */
export const MervalHeroCard = () => {
    // Cada widget gestiona sus propias llamadas a la API
    const { data: allLocalData, loading: dataLoading, error: dataError } = useApiData<CotizacionBolsa[]>('/mercados/bolsa/local');
    const isHoliday = useIsHoliday('BA');
    
    // Estado interno para el gráfico
    const [dias, setDias] = useState<number>(30);

    const handleRangoChange = ( _event: React.MouseEvent<HTMLElement>, nuevoRango: number | null ) => {
        if (nuevoRango !== null) { setDias(nuevoRango); }
    };
    
    // Filtramos el dato específico que este widget necesita
    const mervalData = allLocalData?.find(d => d.ticker === '^MERV');
    
    // --- LÓGICA DE RENDERIZADO CORREGIDA ---
    
    // El estado de carga depende de AMBAS llamadas a la API.
    const isLoading = dataLoading || isHoliday === null;

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

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

    // Si no hay datos del Merval, es un estado final.
    if (!mervalData) {
        // Si no hay datos PERO sabemos que es feriado, la alerta de feriado es más informativa.
        if (isHoliday) {
            return <HolidayAlert />;
        }
        return <Alert severity="info">No se encontraron datos para el índice MERVAL.</Alert>;
    }

    // Si llegamos aquí, SÍ tenemos datos para mostrar.
    return (
        <Box>
            {/* Si es feriado, mostramos la alerta como un AVISO encima del contenido. */}
            {isHoliday && (
                <Box sx={{ mb: 2 }}>
                    <HolidayAlert />
                </Box>
            )}

            {/* El contenido principal del widget siempre se muestra si hay datos. */}
            <Paper elevation={3} sx={{ p: 2, mb: 3 }}>
                <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 2 }}>
                    <Box>
                        <Typography variant="h6" component="h2" sx={{ fontWeight: 'bold' }}>Índice S&P MERVAL</Typography>
                        <Typography variant="h4" component="p" sx={{ fontWeight: 'bold', mt:1 }}>{formatCurrency2Decimal(mervalData.precioActual)}</Typography>
                    </Box>
                    <Box sx={{ pt: 2 }}>
                        <VariacionMerval actual={mervalData.precioActual} anterior={mervalData.cierreAnterior} />
                    </Box>
                </Box>
                <Box sx={{ mt: 2 }}>
                    <Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 1 }}>
                        <ToggleButtonGroup value={dias} exclusive onChange={handleRangoChange} size="small">
                            <ToggleButton value={7}>Semanal</ToggleButton>
                            <ToggleButton value={30}>Mensual</ToggleButton>
                            <ToggleButton value={365}>Anual</ToggleButton>
                        </ToggleButtonGroup>
                    </Box>
                    <HistoricalChartWidget ticker={mervalData.ticker} mercado="Local" dias={dias} />
                </Box>
            </Paper>
        </Box>
    );
};