// GlowCard — adaptación del spotlight card de easemize.
// Tarjeta con doble borde radial que sigue al cursor, hue desplazado según
// posición X y color base (blue/purple/green/red/orange).
// Sin Tailwind — estilos inline + un <style> para los pseudo-elementos
// (::before/::after no se pueden inlinear).

(function injectGlowStyles() {
  if (document.getElementById('odas-glow-styles')) return;
  const css = `
    [data-glow]::before,
    [data-glow]::after {
      pointer-events: none;
      content: "";
      position: absolute;
      inset: calc(var(--border-size) * -1);
      border: var(--border-size) solid transparent;
      border-radius: calc(var(--radius) * 1px);
      background-attachment: fixed;
      background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
      background-repeat: no-repeat;
      background-position: 50% 50%;
      mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
      -webkit-mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
      mask-clip: padding-box, border-box;
      -webkit-mask-clip: padding-box, border-box;
      mask-composite: intersect;
      -webkit-mask-composite: source-in;
    }
    [data-glow]::before {
      background-image: radial-gradient(
        calc(var(--spotlight-size) * 0.75) calc(var(--spotlight-size) * 0.75) at
        calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
        hsl(var(--hue, 210) calc(var(--saturation, 100) * 1%) calc(var(--lightness, 50) * 1%) / var(--border-spot-opacity, 1)),
        transparent 100%
      );
      filter: brightness(1.6);
    }
    [data-glow]::after {
      background-image: radial-gradient(
        calc(var(--spotlight-size) * 0.5) calc(var(--spotlight-size) * 0.5) at
        calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
        hsl(0 100% 100% / var(--border-light-opacity, 0.85)),
        transparent 100%
      );
    }
    [data-glow] > [data-glow] {
      position: absolute;
      inset: 0;
      will-change: filter;
      opacity: var(--outer, 1);
      border-radius: calc(var(--radius) * 1px);
      border-width: calc(var(--border-size) * 20);
      filter: blur(calc(var(--border-size) * 10));
      background: none;
      pointer-events: none;
      border: none;
    }
    [data-glow] > [data-glow]::before {
      inset: -10px;
      border-width: 10px;
    }
  `;
  const el = document.createElement('style');
  el.id = 'odas-glow-styles';
  el.textContent = css;
  document.head.appendChild(el);
})();

const _glowColorMap = {
  blue:   { base: 220, spread: 200 },
  purple: { base: 280, spread: 300 },
  green:  { base: 120, spread: 200 },
  red:    { base:   0, spread: 200 },
  orange: { base:  30, spread: 200 },
};

// Global pointer sync — one listener for all cards. Uses CSS vars on :root.
(function installGlowPointer() {
  if (window.__odasGlowPointerInstalled) return;
  window.__odasGlowPointerInstalled = true;
  const sync = (e) => {
    const x = e.clientX, y = e.clientY;
    document.documentElement.style.setProperty('--glow-x', x.toFixed(2));
    document.documentElement.style.setProperty('--glow-y', y.toFixed(2));
    document.documentElement.style.setProperty('--glow-xp', (x / window.innerWidth).toFixed(3));
    document.documentElement.style.setProperty('--glow-yp', (y / window.innerHeight).toFixed(3));
  };
  document.addEventListener('pointermove', sync);
})();

function GlowCard({ children, glowColor = 'blue', style = {}, innerStyle = {}, radius = 22, border = 2 }) {
  const cardRef = React.useRef(null);

  // Per-card pointer sync so --x/--y are relative to this element's own space.
  React.useEffect(() => {
    const el = cardRef.current;
    if (!el) return;
    const handler = (e) => {
      el.style.setProperty('--x', e.clientX.toFixed(2));
      el.style.setProperty('--xp', (e.clientX / window.innerWidth).toFixed(3));
      el.style.setProperty('--y', e.clientY.toFixed(2));
      el.style.setProperty('--yp', (e.clientY / window.innerHeight).toFixed(3));
    };
    document.addEventListener('pointermove', handler);
    return () => document.removeEventListener('pointermove', handler);
  }, []);

  const { base, spread } = _glowColorMap[glowColor] || _glowColorMap.blue;

  const cssVars = {
    '--base': base,
    '--spread': spread,
    '--radius': radius,
    '--border': border,
    '--saturation': 80,
    '--lightness': 55,
    '--backdrop': 'rgba(255,253,248,0.6)',
    '--backup-border': 'rgba(10,10,10,0.08)',
    '--size': 240,
    '--outer': 1,
    '--border-size': `calc(var(--border, 2) * 1px)`,
    '--spotlight-size': `calc(var(--size, 150) * 1px)`,
    '--hue': `calc(var(--base) + (var(--xp, 0) * var(--spread, 0)))`,
    '--bg-spot-opacity': 0.12,
    '--border-spot-opacity': 0.9,
    '--border-light-opacity': 0.7,
    backgroundImage: `radial-gradient(
      var(--spotlight-size) var(--spotlight-size) at
      calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
      hsl(var(--hue, 210) calc(var(--saturation, 100) * 1%) calc(var(--lightness, 70) * 1%) / var(--bg-spot-opacity, 0.1)),
      transparent
    )`,
    backgroundColor: 'var(--backdrop, transparent)',
    backgroundSize: `calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)))`,
    backgroundPosition: '50% 50%',
    backgroundAttachment: 'fixed',
    border: `var(--border-size) solid var(--backup-border)`,
    position: 'relative',
    touchAction: 'none',
    borderRadius: `calc(var(--radius) * 1px)`,
    boxShadow: 'none',
    backdropFilter: 'blur(4px)',
    WebkitBackdropFilter: 'blur(4px)',
    overflow: 'hidden',
    ...style,
  };

  return (
    <div ref={cardRef} data-glow style={cssVars}>
      <div data-glow />
      <div style={{ position: 'relative', zIndex: 1, width: '100%', height: '100%', ...innerStyle }}>
        {children}
      </div>
    </div>
  );
}

Object.assign(window, { GlowCard });