'use client';

/**
 * GlowEffect - Multi-layer glow effect with pulse rings
 */

import { cn } from '../../../../_shared';
import type { calculateGlowLayers } from '../../../effects';

// =============================================================================
// TYPES
// =============================================================================

export interface GlowEffectData {
  layers: ReturnType<typeof calculateGlowLayers>;
  hueShift: number;
  showPulseRings: boolean;
  showSparkle: boolean;
}

interface GlowEffectProps {
  data: GlowEffectData;
  colors: string[];
  isPlaying: boolean;
}

// =============================================================================
// COMPONENT
// =============================================================================

export function GlowEffect({ data, colors, isPlaying }: GlowEffectProps) {
  const { layers, hueShift, showPulseRings, showSparkle } = data;

  return (
    <>
      {/* Main glow layers */}
      {layers.map((layer, i) => (
        <div
          key={i}
          className={cn('absolute rounded-2xl -z-10', layer.blur)}
          style={{
            inset: `-${layer.inset}px`,
            background: layer.background,
            opacity: isPlaying ? layer.opacity : 0,
            transform: i < 2 ? `scaleY(${layer.scale})` : `scale(${layer.scale})`,
            animation: isPlaying && layer.animation ? layer.animation : 'none',
            transition: 'opacity 0.3s',
          }}
        />
      ))}

      {/* Rotating color sweep */}
      <div
        className="absolute rounded-2xl blur-xl overflow-hidden -z-10"
        style={{
          inset: '-75px',
          opacity: isPlaying ? 0.6 : 0,
          transition: 'opacity 0.5s',
        }}
      >
        <div
          className="absolute inset-0"
          style={{
            background: `conic-gradient(
              from ${hueShift}deg at 50% 50%,
              hsl(${colors[0]} / 0.4) 0deg,
              hsl(${colors[1] || colors[0]} / 0.3) 90deg,
              hsl(${colors[2] || colors[0]} / 0.3) 180deg,
              hsl(${colors[3] || colors[0]} / 0.3) 270deg,
              hsl(${colors[0]} / 0.4) 360deg
            )`,
            animation: isPlaying ? 'glow-rotate 6s linear infinite' : 'none',
          }}
        />
      </div>

      {/* Pulse rings on bass hits */}
      {showPulseRings && (
        <>
          <div
            className="absolute -inset-6 rounded-xl border-2 animate-ping -z-10"
            style={{
              borderColor: `hsl(${colors[0]} / 0.4)`,
              animationDuration: '1s',
            }}
          />
          <div
            className="absolute -inset-12 rounded-2xl border animate-ping -z-10"
            style={{
              borderColor: `hsl(${colors[1] || colors[0]} / 0.3)`,
              animationDuration: '1.5s',
              animationDelay: '0.2s',
            }}
          />
        </>
      )}

      {/* Sparkle on high frequencies */}
      {showSparkle && (
        <div
          className="absolute -inset-18 rounded-3xl -z-10"
          style={{
            background: `radial-gradient(circle at 50% 30%, hsl(${colors[2] || colors[0]} / 0.5) 0%, transparent 30%)`,
            animation: 'sparkle-move 0.5s ease-out',
          }}
        />
      )}
    </>
  );
}
