class AnomalyVisualizer extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.anomalies = [];
    }

    connectedCallback() {
        this.render();
        document.addEventListener('quantumAnomaly', (e) => {
            this.addAnomaly(e.detail);
        });
    }

    addAnomaly(anomaly) {
        this.anomalies.push(anomaly);
        this.renderAnomaly(anomaly);
        
        // Remove after animation
        setTimeout(() => {
            this.anomalies = this.anomalies.filter(a => a !== anomaly);
        }, 3000);
    }

    render() {
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    pointer-events: none;
                    z-index: 9999;
                }
                .anomaly {
                    position: absolute;
                    width: 16px;
                    height: 16px;
                    background: radial-gradient(circle, rgba(239,68,68,0.8) 0%, rgba(239,68,68,0) 70%);
                    border-radius: 50%;
                    transform: translate(-50%, -50%);
                    animation: pulse 2s infinite;
                }
                @keyframes pulse {
                    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
                    100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
                }
            </style>
        `;
    }

    renderAnomaly(anomaly) {
        const element = document.createElement('div');
        element.className = 'anomaly';
        element.style.left = `${Math.random() * 100}%`;
        element.style.top = `${Math.random() * 100}%`;
        element.style.animationDelay = `${Math.random() * 0.5}s`;
        this.shadowRoot.appendChild(element);
    }
}

customElements.define('anomaly-visualizer', AnomalyVisualizer);