import './AlertFeed.css';

interface AlertFeedProps {
    alerts: Array<{
        timestamp: number;
        type: 'signal' | 'pulse' | 'error' | 'info';
        symbol: string;
        message: string;
    }>;
}

const alertTypeIcons: { [key: string]: string } = {
    signal: '🚀',
    pulse: '⏰',
    error: '⚠️',
    info: 'ℹ️'
};

export const AlertFeed = ({ alerts }: AlertFeedProps) => {
    const sortedAlerts = [...alerts].reverse().slice(0, 50);

    const getTimeAgo = (timestamp: number) => {
        const diffMs = Date.now() - timestamp;
        const diffMins = Math.floor(diffMs / 60000);
        if (diffMins < 1) return 'just now';
        if (diffMins < 60) return `${diffMins}m ago`;
        const diffHours = Math.floor(diffMins / 60);
        if (diffHours < 24) return `${diffHours}h ago`;
        return `${Math.floor(diffHours / 24)}d ago`;
    };

    return (
        <div className="alert-feed">
            <h2>Recent Activity</h2>
            <div className="alerts-container">
                {sortedAlerts.map((alert, index) => (
                    <div key={index} className={`alert-item alert-${alert.type}`}>
                        <div className="alert-icon">{alertTypeIcons[alert.type]}</div>
                        <div className="alert-content">
                            <div className="alert-header">
                                <span className="alert-symbol">{alert.symbol}</span>
                                <span className="alert-time">{getTimeAgo(alert.timestamp)}</span>
                            </div>
                            <div className="alert-message">{alert.message}</div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
};
