/**
 * PreviousBackgroundOverlay Component
 *
 * Renders the previous page background during page transitions.
 * Shows during loading and crossfade, with optional fade-out animation.
 * Used by both CanvasBackground (constructor) and RuntimePresentation.
 */

import React from 'react';

interface PreviousBackgroundOverlayProps {
  /** Previous background image URL */
  imageUrl?: string;
  /** Previous background video URL */
  videoUrl?: string;
  /** Whether page is currently switching */
  isSwitching?: boolean;
  /** Whether new background is ready */
  isNewBgReady?: boolean;
  /** Whether fade animation is in progress */
  isFadingIn?: boolean;
  /** Additional CSS classes */
  className?: string;
}

const PreviousBackgroundOverlay: React.FC<PreviousBackgroundOverlayProps> = ({
  imageUrl,
  videoUrl,
  isSwitching = false,
  isNewBgReady = false,
  isFadingIn = false,
  className = '',
}) => {
  // Show during loading (isSwitching && !isNewBgReady) OR during crossfade (isFadingIn)
  const shouldShow = isFadingIn || (isSwitching && !isNewBgReady);

  if (!shouldShow) return null;

  return (
    <>
      {imageUrl && (
        <div
          className={`pointer-events-none absolute inset-0 z-0 ${isFadingIn ? 'animate-crossfade-out' : ''} ${className}`}
          style={{
            backgroundImage: `url("${imageUrl}")`,
            backgroundSize: 'contain',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat',
          }}
        />
      )}
      {videoUrl && (
        <video
          className={`absolute inset-0 z-0 h-full w-full object-contain pointer-events-none ${isFadingIn ? 'animate-crossfade-out' : ''} ${className}`}
          src={videoUrl}
          autoPlay
          loop
          muted
          playsInline
        />
      )}
    </>
  );
};

export default PreviousBackgroundOverlay;