'use client';

/**
 * SpotlightEffect - Rotating spotlight with conic gradients
 */

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

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

interface SpotlightEffectProps {
  data: ReturnType<typeof calculateSpotlight>;
  colors: string[];
  blur: string;
  isPlaying: boolean;
}

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

export function SpotlightEffect({ data, colors, blur, isPlaying }: SpotlightEffectProps) {
  const inset = 'inset' in data ? data.inset : 12;
  const pulseInset = 'pulseInset' in data ? data.pulseInset : 24;
  const ringOpacity = 'ringOpacity' in data ? data.ringOpacity : 0.3;
  const ringScale = 'ringScale' in data ? data.ringScale : 1;

  return (
    <>
      {/* Rotating conic gradient - reactive size */}
      <div
        className={cn('absolute rounded-xl -z-10', blur)}
        style={{
          inset: `-${inset}px`,
          background: `conic-gradient(
            from ${data.rotation}deg,
            hsl(${colors[0]} / ${data.colors[0]?.opacity || 0.5}),
            hsl(${colors[1] || colors[0]} / ${data.colors[1]?.opacity || 0.7}),
            hsl(${colors[2] || colors[0]} / ${data.colors[2]?.opacity || 0.5}),
            hsl(${colors[0]} / ${data.colors[1]?.opacity || 0.7}),
            hsl(${colors[0]} / ${data.colors[0]?.opacity || 0.5})
          )`,
          opacity: isPlaying ? 1 : 0,
          transition: 'all 0.08s ease-out',
        }}
      />

      {/* Inner border */}
      <div
        className="absolute -inset-1 rounded-lg bg-background -z-10"
        style={{ opacity: isPlaying ? 1 : 0, transition: 'opacity 0.1s' }}
      />

      {/* Bass pulse glow - reactive size */}
      <div
        className={cn('absolute rounded-2xl -z-10', blur)}
        style={{
          inset: `-${pulseInset}px`,
          background: `radial-gradient(circle, hsl(${colors[0]} / 0.7) 0%, hsl(${colors[0]} / 0.3) 50%, transparent 70%)`,
          opacity: isPlaying ? data.pulseOpacity : 0,
          transform: `scale(${data.pulseScale})`,
          transition: 'all 0.08s ease-out',
        }}
      />

      {/* Outer ring glow */}
      <div
        className="absolute rounded-3xl -z-10 blur-2xl"
        style={{
          inset: `-${pulseInset + 30}px`,
          background: `radial-gradient(circle, hsl(${colors[1] || colors[0]} / 0.4) 0%, transparent 60%)`,
          opacity: isPlaying ? ringOpacity : 0,
          transform: `scale(${ringScale})`,
          transition: 'all 0.08s ease-out',
        }}
      />
    </>
  );
}
