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

// Importaciones de React y Material-UI
import React, { useState, useRef } from 'react';
import {
  Box, CircularProgress, Alert, Table, TableBody, TableCell, TableContainer,
  TableHead, TableRow, Paper, Typography, Dialog, DialogTitle,
  DialogContent, IconButton
} from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
import RemoveIcon from '@mui/icons-material/Remove';
import { PiChartLineUpBold } from 'react-icons/pi';

// Importaciones de nuestros modelos, hooks y utilidades
import type { CotizacionBolsa } from '../models/mercadoModels';
import { useApiData } from '../hooks/useApiData';
import { useIsHoliday } from '../hooks/useIsHoliday';
import { formatFullDateTime, formatCurrency } from '../utils/formatters';
import { HistoricalChartWidget } from './HistoricalChartWidget';
import { HolidayAlert } from './common/HolidayAlert';

/**
 * Sub-componente para mostrar la variación porcentual con un icono y color apropiado.
 */
const Variacion = ({ value }: { value: number }) => {
  const color = value > 0 ? 'success.main' : value < 0 ? 'error.main' : 'text.secondary';
  const Icon = value > 0 ? ArrowUpwardIcon : value < 0 ? ArrowDownwardIcon : RemoveIcon;
  return (
    <Box component="span" sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color }}>
      <Icon sx={{ fontSize: '1rem', mr: 0.5 }} />
      <Typography variant="body2" component="span" sx={{ fontWeight: 'bold' }}>{value.toFixed(2)}%</Typography>
    </Box>
  );
};

/**
 * Sub-componente que renderiza la tabla de acciones detalladas.
 * Se extrae para mantener el componente principal más limpio.
 */
const RenderContent = ({ data, handleOpenModal }: { 
    data: CotizacionBolsa[], 
    handleOpenModal: (ticker: string, event: React.MouseEvent<HTMLButtonElement>) => void, 
}) => {
  // Filtramos para obtener solo las acciones, excluyendo el índice.
  const panelPrincipal = data.filter(d => d.ticker !== '^MERV');
  
  if (panelPrincipal.length === 0) {
      return <Alert severity="info">No hay acciones líderes para mostrar en este momento.</Alert>;
  }

  return (
    <TableContainer component={Paper}>
      <Box sx={{ p: 1, m: 0 }}>
        <Typography variant="caption" sx={{ fontStyle: 'italic', color: 'text.secondary' }}>
          Última actualización de acciones: {formatFullDateTime(panelPrincipal[0].fechaRegistro)}
        </Typography>
      </Box>
      <Table size="small" aria-label="panel principal merval">
        <TableHead>
          <TableRow>
            <TableCell>Símbolo</TableCell>
            <TableCell align="right">Precio Actual</TableCell>
            <TableCell align="right" sx={{ display: { xs: 'none', md: 'table-cell' } }}>Apertura</TableCell>
            <TableCell align="right" sx={{ display: { xs: 'none', sm: 'table-cell' } }}>Cierre Anterior</TableCell>
            <TableCell align="center">% Cambio</TableCell>
            <TableCell align="center">Historial</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {panelPrincipal.map((row) => (
            <TableRow key={row.ticker} hover>
              <TableCell component="th" scope="row"><Typography variant="body2" sx={{ fontWeight: 'bold' }}>{row.ticker}</Typography></TableCell>
              <TableCell align="right">${formatCurrency(row.precioActual)}</TableCell>
              <TableCell align="right" sx={{ display: { xs: 'none', md: 'table-cell' } }}>${formatCurrency(row.apertura)}</TableCell>
              <TableCell align="right" sx={{ display: { xs: 'none', sm: 'table-cell' } }}>${formatCurrency(row.cierreAnterior)}</TableCell>
              <TableCell align="center"><Variacion value={row.porcentajeCambio} /></TableCell>
              <TableCell align="center">
                <IconButton
                  aria-label={`ver historial de ${row.ticker}`}
                  size="small"
                  onClick={(event) => handleOpenModal(row.ticker, event)}
                  sx={{
                    boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
                    transition: 'all 0.2s ease-in-out',
                    '&:hover': { transform: 'scale(1.1)', boxShadow: '0 2px 6px rgba(0,0,0,0.2)' }
                  }}
                >
                  <PiChartLineUpBold size="18" />
                </IconButton>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
};


/**
 * Widget principal para la sección "Bolsa Local".
 * Muestra una tarjeta de héroe para el MERVAL y una tabla detallada para las acciones líderes.
 */
export const BolsaLocalWidget = () => {
  // Hooks para obtener los datos y el estado de feriado. Las llamadas se disparan en paralelo.
  const { data, loading: dataLoading, error: dataError } = useApiData<CotizacionBolsa[]>('/mercados/bolsa/local');
  const isHoliday = useIsHoliday('BA');
  
  // Estado y referencia para manejar el modal del gráfico.
  const [selectedTicker, setSelectedTicker] = useState<string | null>(null);
  const triggerButtonRef = useRef<HTMLButtonElement | null>(null);

  const handleOpenModal = (ticker: string, event: React.MouseEvent<HTMLButtonElement>) => {
    triggerButtonRef.current = event.currentTarget;
    setSelectedTicker(ticker);
  };
  
  const handleCloseDialog = () => {
    setSelectedTicker(null);
    // Devuelve el foco al botón que abrió el modal para mejorar la accesibilidad.
    setTimeout(() => {
      triggerButtonRef.current?.focus();
    }, 0);
  };
  
  // Estado de carga unificado: el componente está "cargando" si los datos principales
  // o la información del feriado todavía no han llegado.
  const isLoading = dataLoading || isHoliday === null;

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

  if (dataError) {
    return <Alert severity="error">{dataError}</Alert>;
  }
  
  // Si no hay ningún dato en absoluto, mostramos un mensaje final.
  if (!data || data.length === 0) {
      // Si sabemos que es feriado, la alerta de feriado tiene prioridad.
      if (isHoliday) {
          return <HolidayAlert />;
      }
      return <Alert severity="info">No hay datos disponibles para el mercado local.</Alert>;
  }

  return (
    <>
      {/* Si es feriado, mostramos la alerta informativa en la parte superior. */}
      {isHoliday && (
        <Box sx={{ mb: 2 }}>
          <HolidayAlert />
        </Box>
      )}

      {/* La tabla de acciones detalladas se muestra siempre que haya datos para ella. */}
      <RenderContent 
        data={data} 
        handleOpenModal={handleOpenModal}
      />

      {/* El Dialog para mostrar el gráfico histórico. */}
      <Dialog
        open={Boolean(selectedTicker)}
        onClose={handleCloseDialog}
        maxWidth="md"
        fullWidth
        sx={{ '& .MuiDialog-paper': { overflow: 'visible' } }}
      >
        <IconButton
          aria-label="close"
          onClick={handleCloseDialog}
          sx={{
            position: 'absolute', top: -15, right: -15,
            color: (theme) => theme.palette.grey[500],
            backgroundColor: 'white', boxShadow: 3,
            '&:hover': { backgroundColor: 'grey.100' },
          }}
        >
          <CloseIcon />
        </IconButton>
        <DialogTitle sx={{ m: 0, p: 2 }}>
          Historial de 30 días para: {selectedTicker}
        </DialogTitle>
        <DialogContent dividers>
          {selectedTicker && <HistoricalChartWidget ticker={selectedTicker} mercado="Local" dias={30} />}
        </DialogContent>
      </Dialog>
    </>
  );
};