// 이전 방식: 모든 미디어를 하나의 컴포넌트에서 처리
export const MediaInsert: React.FC<{ config: MediaInsertConfig }> = ({ config }) => {
  // 이미지, 비디오, 텍스트를 모두 여기서 처리하려고 했다
  if (type === 'video') {
    return <OffthreadVideo src={src} />; // 🔥 이게 문제였다
  }
  // ...
};

// 비디오 전용 설정 (Sequence 기반)
export interface VideoSequenceConfig {
  id: string;                    // 디버깅용 식별자
  src: string;                   // 비디오 파일 경로
  from: number;                  // 시작 프레임 (정확한 타이밍)
  durationInFrames: number;      // 지속 프레임 (끝까지 제어)
  style?: {
    // ... 포지셔닝 및 스타일링 옵션들
    mixBlendMode?: 'screen' | 'multiply' | 'overlay'; // 🔥 블렌딩 지원
  };
  chromaKey?: ChromaKeyConfig;   // 그린스크린 처리
  transparent?: boolean;         // 투명 비디오 지원
  loop?: boolean;               // 루프 재생
  startFrom?: number;           // 비디오 내부 시작 지점
}

export const VideoSequencePlayer: React.FC<VideoSequencePlayerProps> = ({ videos }) => {
  const frame = useCurrentFrame();
  
  return (
    <AbsoluteFill>
      {videos.map((video) => (
        <Sequence
          key={video.id}
          from={video.from}                    // 🎯 정확한 시작 지점
          durationInFrames={video.durationInFrames} // 🎯 정확한 종료 지점
        >
          <VideoRenderer config={video} />    // 🔥 개별 렌더러로 분리
        </Sequence>
      ))}
    </AbsoluteFill>
  );
};

const VideoRenderer: React.FC<{ config: VideoSequenceConfig }> = ({ config }) => {
  const {
    src,
    style = {},
    chromaKey,
    transparent = false,
    loop = false,
    startFrom = 0
  } = config;

  // 크로마키가 활성화된 경우 별도 처리
  if (chromaKey?.enabled) {
    return (
      <div style={videoStyle}>
        <ChromaKeyVideo
          src={src}
          chromaKey={chromaKey}
          startFrom={startFrom}
          loop={loop}
        />
      </div>
    );
  }

  // 일반 비디오는 OffthreadVideo로 최적화
  return (
    <div style={videoStyle}>
      <OffthreadVideo
        src={staticFile(src)}
        transparent={transparent}
        loop={loop}
        startFrom={startFrom}
        onError={(e) => console.error(`비디오 로드 실패:`, e)}
      />
    </div>
  );
};

// 🖼️ 이미지/텍스트 전용 (기존 방식 유지)
export const EP1Shorts1_MEDIA_INSERTS: MediaInsertConfig[] = [
  {
    type: 'image',
    src: 'assets/some-image.jpeg',
    startFrame: 1280,
    duration: 40,
    // ...
  }
  // 비디오는 모두 제거!
];

// 🎬 비디오 전용 (새로운 시스템)
export const EP1Shorts1_VIDEO_SEQUENCES: VideoSequenceConfig[] = [
  {
    id: 'phoenix-wright',
    src: '/assets/PhoenixWrightGreenScreen.mp4',
    from: 340,           // 정확한 시작점
    durationInFrames: 30, // 정확한 길이
    style: {
      mixBlendMode: 'screen' // 🔥 검은 배경 투명화
    },
    chromaKey: {
      enabled: true,
      color: 'green',
      threshold: 120
    }
  },
  // ...더 많은 비디오들
];

const YTep1Shorts1Comp: React.FC<YTep1Shorts1Props> = ({ ... }) => {
  return (
    <AbsoluteFill>
      {/* 배경 */}
      <BackgroundLayer />
      
      {/* 메인 오디오 */}
      <Audio src={staticFile(audioSrc)} volume={1.0} />

      {/* 🔥 비디오 시퀀스 (완전히 분리된 시스템) */}
      <VideoSequencePlayer videos={EP1Shorts1_VIDEO_SEQUENCES} />

      {/* 자막 */}
      <CaptionLayer />

      {/* 🖼️ 이미지/텍스트 (기존 시스템 유지) */}
      {EP1Shorts1_MEDIA_INSERTS.map((config, index) => (
        <MediaInsert key={`media-${index}`} config={config} />
      ))}

      {/* 디버깅 정보 */}
      <DebugInfo />
    </AbsoluteFill>
  );
};

// 개발 모드에서만 보이는 디버깅 정보
{process.env.NODE_ENV === 'development' && (
  <div style={{
    position: 'absolute',
    top: 10,
    left: 10,
    backgroundColor: 'rgba(0,0,0,0.8)',
    color: 'white',
    fontFamily: 'monospace'
  }}>
    프레임: {frame}<br />
    비디오 시퀀스: {EP1Shorts1_VIDEO_SEQUENCES.length}<br />
    활성 자막: {timing.isActive ? 'YES' : 'NO'}
  </div>
)}