import React from 'react';
import type { LiveShowBackgroundMode, LiveShowPhoto } from '../services/liveShowApi';

function resolvePhotoUrl(photo?: LiveShowPhoto | null): string | null {
  if (!photo) {
    return null;
  }
  return photo.full_url || photo.thumb_url || null;
}

function resolveBlurAmount(intensity: number): number {
  const safe = Number.isFinite(intensity) ? intensity : 70;
  return 28 + Math.min(60, Math.max(0, safe)) * 0.45;
}

export default function LiveShowBackdrop({
  mode,
  photo,
  intensity,
}: {
  mode: LiveShowBackgroundMode;
  photo?: LiveShowPhoto | null;
  intensity: number;
}) {
  const photoUrl = resolvePhotoUrl(photo);
  const blurAmount = resolveBlurAmount(intensity);
  const fallbackMode = mode === 'blur_last' && !photoUrl ? 'gradient' : mode;

  if (fallbackMode === 'solid') {
    return (
      <div
        className="pointer-events-none absolute inset-0 z-0"
        style={{ backgroundColor: 'rgb(8, 10, 16)' }}
      />
    );
  }

  if (fallbackMode === 'gradient') {
    return <div className="pointer-events-none absolute inset-0 z-0 bg-aurora-enhanced" />;
  }

  if (fallbackMode === 'brand') {
    return (
      <div
        className="pointer-events-none absolute inset-0 z-0"
        style={{
          backgroundImage:
            'radial-gradient(120% 120% at 15% 15%, var(--guest-primary) 0%, rgba(0,0,0,0.8) 55%), radial-gradient(120% 120% at 85% 20%, var(--guest-secondary) 0%, transparent 60%)',
          backgroundColor: 'rgb(5, 8, 16)',
        }}
      />
    );
  }

  return (
    <div className="pointer-events-none absolute inset-0 z-0">
      <div
        className="absolute inset-0 scale-110"
        style={{
          backgroundImage: photoUrl ? `url(${photoUrl})` : undefined,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          filter: `blur(${blurAmount}px) saturate(1.15)`,
        }}
      />
      <div className="absolute inset-0 bg-black/60" />
    </div>
  );
}