export default async function globalSetup() {
  console.log('🎭 Zibby global setup - enabling visual feedback...');
}

export async function setupRippleEffect(page) {
  await page.addInitScript(`
    const style = document.createElement('style');
    style.textContent = \`
      @keyframes zibby-ripple {
        0% {
          transform: scale(0);
          opacity: 0.7;
        }
        100% {
          transform: scale(4);
          opacity: 0;
        }
      }
      .zibby-ripple {
        position: absolute;
        border-radius: 50%;
        background: rgba(59, 130, 246, 0.7);
        pointer-events: none;
        animation: zibby-ripple 0.6s ease-out;
        z-index: 999999;
      }
    \`;
    
    document.addEventListener('DOMContentLoaded', () => {
      if (document.head && !document.getElementById('zibby-ripple-style')) {
        style.id = 'zibby-ripple-style';
        document.head.appendChild(style);
      }
    });
    
    if (document.head && !document.getElementById('zibby-ripple-style')) {
      style.id = 'zibby-ripple-style';
      document.head.appendChild(style);
    }

    window.__zibbyShowRipple = function(x, y) {
      const ripple = document.createElement('div');
      ripple.className = 'zibby-ripple';
      ripple.style.left = (x - 10) + 'px';
      ripple.style.top = (y - 10) + 'px';
      ripple.style.width = '20px';
      ripple.style.height = '20px';
      
      if (document.body) {
        document.body.appendChild(ripple);
        setTimeout(() => ripple.remove(), 600);
      }
    };
  `);
}

