import React, { useState, useEffect } from 'react';
import { Box, Text } from 'ink';
import { MonitorState, NexusAlert } from './types.js';

interface NexusAlertsProps {
    alerts: NexusAlert[];
}

export function NexusAlerts({ alerts }: NexusAlertsProps) {
    const [isVisible, setIsVisible] = useState(true);

    // Blinking effect for CRITICAL alerts
    useEffect(() => {
        const hasCritical = alerts.some(a => a.severity === 'CRITICAL');
        if (!hasCritical) {
            setIsVisible(true);
            return;
        }

        const interval = setInterval(() => {
            setIsVisible(v => !v);
        }, 800);

        return () => clearInterval(interval);
    }, [alerts]);

    if (!alerts || alerts.length === 0) return null;

    const topAlert = alerts[0];
    const isCritical = topAlert.severity === 'CRITICAL';
    const color = isCritical ? 'red' : 'yellow';

    return (
        <Box
            borderStyle="bold"
            borderColor={color}
            paddingX={2}
            marginBottom={1}
            flexDirection="column"
        >
            <Box gap={2}>
                <Text
                    backgroundColor={isVisible ? color : undefined}
                    color={isVisible ? 'white' : color}
                    bold
                    italic
                >
                    {isCritical ? ' ☢ NEXUS BREACH ☢ ' : ' ⚡ NEXUS ALERT ⚡ '}
                </Text>
                <Text bold color={color}>
                    {topAlert.title.toUpperCase()}
                </Text>
            </Box>
            <Box marginTop={0}>
                <Text dimColor italic>
                    Hive Signal: {topAlert.message.substring(0, 100)}...
                </Text>
            </Box>
        </Box>
    );
}