import { AlertCircle, Bell, Info, Rocket, Timer } from 'lucide-react';
import './AlertFeed.css';

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

const alertTypeIcons = {
    signal: Rocket,
    pulse: Timer,
    error: AlertCircle,
    info: 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">
            <div className="alert-feed-header">
                <div className="alert-feed-title-icon"><Bell size={16} /></div>
                <div>
                    <h2>Recent Activity</h2>
                    <p>{sortedAlerts.length} recent event{sortedAlerts.length === 1 ? '' : 's'} across signals, warnings, and execution.</p>
                </div>
            </div>
            <div className="alerts-container">
                {sortedAlerts.length === 0 && (
                    <div className="alert-empty-state">
                        <strong>No recent alerts</strong>
                        <span>Signals, warnings, and execution events will appear here as they arrive.</span>
                    </div>
                )}
                {sortedAlerts.map((alert, index) => {
                    const Icon = alertTypeIcons[alert.type] || Info;
                    return (
                    <div key={index} className={`alert-item alert-${alert.type}`}>
                        <div className="alert-icon"><Icon size={18} /></div>
                        <div className="alert-content">
                            <div className="alert-header">
                                <span className="alert-symbol">{alert.symbol || 'System'}</span>
                                <span className="alert-time">{getTimeAgo(alert.timestamp)}</span>
                            </div>
                            <div className="alert-message">{alert.message}</div>
                        </div>
                    </div>
                    );
                })}
            </div>
        </div>
    );
};
