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 { formatInteger, formatCurrency } from '../utils/formatters'; // <-- CORREGIDO: necesitamos formatCurrency
import { HistoricalChartWidget } from './HistoricalChartWidget';
import { useApiData } from '../hooks/useApiData';

// --- V SUB-COMPONENTE AÑADIDO V ---
const VariacionMerval = ({ actual, anterior }: { actual: number, anterior: number }) => {
    if (anterior === 0) return null; // Evitar división por cero
    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>
    );
};
// --- ^ SUB-COMPONENTE AÑADIDO ^ ---

export const MervalHeroCard = () => {
    const { data: allLocalData, loading, error } = useApiData<CotizacionBolsa[]>('/mercados/bolsa/local');
    const [dias, setDias] = useState<number>(30);

    const handleRangoChange = ( _event: React.MouseEvent<HTMLElement>, nuevoRango: number | null ) => {
        if (nuevoRango !== null) { setDias(nuevoRango); }
    };
    
    const mervalData = allLocalData?.find(d => d.ticker === '^MERV');

    if (loading) { return <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>; }
    if (error) { return <Alert severity="error">{error}</Alert>; }
    if (!mervalData) { return <Alert severity="info">No se encontraron datos para el índice MERVAL.</Alert>; }

    return (
        <Paper elevation={3} sx={{ p: 2, mb: 3 }}>
            <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 2 }}>
                <Box>
                    <Typography variant="h5" component="h2" sx={{ fontWeight: 'bold' }}>Índice S&P MERVAL</Typography>
                    <Typography variant="h3" component="p" sx={{ fontWeight: 'bold', mt:1 }}>{formatInteger(mervalData.precioActual)}</Typography>
                </Box>
                <Box sx={{ pt: 2 }}>
                    {/* Ahora sí encontrará el componente */}
                    <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>
    );
};