import { defineTrait } from '../define.js';
import { prefersReducedMotion } from '../motion.js';

export const attentionPulse = defineTrait({
  name: 'attention-pulse',
  category: 'audio-haptics-sensory',
  description: 'Periodic pulse to draw attention',
  attributes: ['data-attention-pulse-active'],
  events: [],
  config: ['data-pulse-interval'],
  setup({ host }) {
    // Reduced-motion: mark active but suppress the pulse animation.
    if (prefersReducedMotion()) {
      host.setAttribute('data-attention-pulse-active', '');
      return () => {
        host.removeAttribute('data-attention-pulse-active');
      };
    }

    const interval = parseInt(host.getAttribute('data-pulse-interval'), 10) || 2000;
    const keyframeName = `adia-pulse-${Math.random().toString(36).slice(2, 8)}`;

    const style = document.createElement('style');
    style.textContent = `
      @keyframes ${keyframeName} {
        0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5); }
        50% { box-shadow: 0 0 12px 4px rgba(59, 130, 246, 0.3); }
      }
    `;
    document.head.appendChild(style);

    host.style.animation = `${keyframeName} ${interval}ms ease-in-out infinite`;
    host.setAttribute('data-attention-pulse-active', '');

    return () => {
      host.style.animation = '';
      style.remove();
      host.removeAttribute('data-attention-pulse-active');
    };
  },
});
