import React from 'react';
import { AbsoluteFill } from '../engine/components';
import { useCurrentFrame } from '../engine/player';
import { RenderProps } from '../types';
import { BackgroundLayer } from './composition/BackgroundLayer';
import { BrandOverlay } from './composition/BrandOverlay';
import { CompositionElement } from './composition/CompositionElement';
import { SmartGuides } from './composition/SmartGuides';

export const BrandComposition: React.FC<RenderProps> = ({
  designMD,
  textOverlay,
  timelineElements = [],
  layers = [],
  onElementClick,
  onElementPositionChange,
  onElementContextMenu,
  onElementDoubleClick,
  onElementTransformChange,
  onElementDuplicate,
  onElementDelete,
  onElementLock,
  selectedElementId,
  activeLayerId,
  activeAction,
  brandVisibility,
  outputFormat,
  onDragStart,
  startResize,
  startRotate,
  snapGuides
}) => {
  const frame = useCurrentFrame();

  // Separate brand fullscreen videos from other elements for correct z-order
  const brandFullscreenEls = timelineElements.filter(el =>
    el.isBrandElement && (el.brandDisplayMode ?? 'fullscreen') === 'fullscreen' && el.type === 'video'
  );
  const otherElements = timelineElements.filter(el => {
    const isBrandFullscreen = el.isBrandElement && (el.brandDisplayMode ?? 'fullscreen') === 'fullscreen' && el.type === 'video';
    const isBackground = layers?.find(l => l.id === el.layerId)?.type === 'background';
    return !isBrandFullscreen && !isBackground;
  });

  const renderElement = (el: typeof timelineElements[0]) => {
    let layer = layers.find(l => l.id === el.layerId);
    
    // Solo-aware mute: if any audio layer has isSolo, mute all other audio layers
    if (layer?.type === 'audio') {
      const anySoloActive = layers.some(l => l.type === 'audio' && l.isSolo);
      if (anySoloActive && !layer.isSolo) {
        layer = { ...layer, isMuted: true };
      }
    }

    return (
      <CompositionElement
        key={el.id}
        element={el}
        layer={layer}
        designMD={designMD}
        frame={frame}
        selectedElementId={selectedElementId ?? null}
        activeLayerId={activeLayerId ?? null}
        activeAction={activeAction ?? 'move'}
        isImageMode={outputFormat === 'image'}
        onElementClick={onElementClick}
        onElementDoubleClick={onElementDoubleClick}
        onElementContextMenu={onElementContextMenu}
        onElementDuplicate={onElementDuplicate}
        onElementDelete={onElementDelete}
        onElementLock={onElementLock}
        onDragStart={onDragStart}
        startResize={startResize}
        startRotate={startRotate}
      />
    );
  };

  const showBackground = brandVisibility?.background ?? true;

  return (
    <AbsoluteFill style={{ backgroundColor: showBackground ? designMD.secondaryColor : 'transparent' }}>
      {/* Layer 1: Background media (user-uploaded backgrounds) */}
      <BackgroundLayer timelineElements={timelineElements} layers={layers} />

      {/* Layer 2: Brand fullscreen videos (intro/outro) — BELOW logo/frame */}
      {brandFullscreenEls.map(renderElement)}

      {/* Layer 3: Brand Overlay (logo + frame) */}
      <BrandOverlay designMD={designMD} textOverlay={textOverlay} brandVisibility={brandVisibility} />

      {/* Layer 4: All other elements (text, images, non-fullscreen brand, etc.) */}
      {otherElements.map(renderElement)}

      {/* Smart Guides Overlay */}
      <SmartGuides guides={snapGuides || { x: null, y: null }} />
    </AbsoluteFill>
  );
};
