import {
  Box, CircularProgress, Alert, Table, TableBody, TableCell,
  TableContainer, TableHead, TableRow, Paper, Typography, Tooltip
} from '@mui/material';
import type { CotizacionBolsa } from '../models/mercadoModels';
import { useApiData } from '../hooks/useApiData';
import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
import RemoveIcon from '@mui/icons-material/Remove';

const formatNumber = (num: number) => {
  return new Intl.NumberFormat('en-US', { // Usamos formato de EEUU
    style: 'currency',
    currency: 'USD',
  }).format(num);
};

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>
  );
};

export const BolsaUsaWidget = () => {
  const { data, loading, error } = useApiData<CotizacionBolsa[]>('/mercados/bolsa/eeuu');

  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 disponibles para el mercado de EEUU. (El fetcher puede estar desactivado)</Alert>;
  }

  return (
    <TableContainer component={Paper}>
      <Table size="small" aria-label="tabla bolsa eeuu">
        <TableHead>
          <TableRow>
            <TableCell>Símbolo</TableCell>
            <TableCell align="right">Precio Actual</TableCell>
            <TableCell align="right">Apertura</TableCell>
            <TableCell align="right">Cierre Anterior</TableCell>
            <TableCell align="center">% Cambio</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {data.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">{formatNumber(row.precioActual)}</TableCell>
              <TableCell align="right">{formatNumber(row.apertura)}</TableCell>
              <TableCell align="right">{formatNumber(row.cierreAnterior)}</TableCell>
              <TableCell align="center">
                <Variacion value={row.porcentajeCambio} />
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
      <Tooltip title={`Última actualización: ${new Date(data[0].fechaRegistro).toLocaleString('es-AR')}`}>
        <Typography variant="caption" sx={{ p: 1, display: 'block', textAlign: 'right', color: 'text.secondary' }}>
          Fuente: Finnhub
        </Typography>
      </Tooltip>
    </TableContainer>
  );
};