import { Box, CircularProgress, Alert, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Button } from '@mui/material';
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
import { useApiData } from '../../hooks/useApiData';
import type { CotizacionBolsa } from '../../models/mercadoModels';
import { formatCurrency, formatFullDateTime } from '../../utils/formatters';
import { copyToClipboard } from '../../utils/clipboardUtils';

// Función para convertir datos a formato CSV
const toCSV = (headers: string[], data: CotizacionBolsa[]) => {
    const headerRow = headers.join(';');
    const dataRows = data.map(row => 
        [
            row.ticker,
            row.nombreEmpresa,
            formatCurrency(row.precioActual),
            formatCurrency(row.cierreAnterior),
            `${row.porcentajeCambio.toFixed(2)}%`
        ].join(';')
    );
    return [headerRow, ...dataRows].join('\n');
};

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

    const handleCopy = () => {
        if (!data) return;
        const headers = ["Ticker", "Nombre", "Último Precio", "Cierre Anterior", "Variación %"];
        const csvData = toCSV(headers, data);
        
        copyToClipboard(csvData)
            .then(() => {
                alert('¡Tabla copiada al portapapeles!');
            })
            .catch(err => {
                console.error('Error al copiar:', err);
                alert('Error: No se pudo copiar la tabla.');
            });
    };

    if (loading) return <CircularProgress />;
    if (error) return <Alert severity="error">{error}</Alert>;
    if (!data) return null;

    return (
        <Box>
            <Button startIcon={<ContentCopyIcon />} onClick={handleCopy} sx={{ mb: 1 }}>
                Copiar como CSV
            </Button>
            <TableContainer component={Paper}>
                <Table size="small">
                    <TableHead>
                        <TableRow>
                            <TableCell>Ticker</TableCell>
                            <TableCell>Nombre</TableCell>
                            <TableCell align="right">Último Precio</TableCell>
                            <TableCell align="right">Cierre Anterior</TableCell>
                            <TableCell align="right">Variación %</TableCell>
                            <TableCell>Última Act.</TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {data.map(row => (
                            <TableRow key={row.id}>
                                <TableCell>{row.ticker}</TableCell>
                                <TableCell>{row.nombreEmpresa}</TableCell>
                                <TableCell align="right">${formatCurrency(row.precioActual)}</TableCell>
                                <TableCell align="right">${formatCurrency(row.cierreAnterior)}</TableCell>
                                <TableCell align="right">{row.porcentajeCambio.toFixed(2)}%</TableCell>
                                <TableCell>{formatFullDateTime(row.fechaRegistro)}</TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </TableContainer>
        </Box>
    );
};