// src/views/HomePanel/HomeBanner/PersistentVideoUnit.jsx (새 파일)

import React, { useCallback, useEffect } from "react";
import { useDispatch } from "react-redux";
import Spottable from "@enact/spotlight/Spottable";

// 새로운 '플레이 제어 매니저' 액션을 임포트합니다.
import {
  requestPlayControl,
  goToFullScreen,
} from "../../../actions/playActions";

import CustomImage from "../../../components/CustomImage/CustomImage";
import emptyHorImage from "../../../../assets/images/img-home-banner-empty-hor.png";
import css from "./RandomUnit.module.less"; // 스타일은 기존 RandomUnit과 공유 가능

const SpottableComponent = Spottable("div");

export default function PersistentVideoUnit({
  bannerData,
  spotlightId,
  isHorizontal,
  handleShelfFocus,
}) {
  const dispatch = useDispatch();

  // bannerData에서 첫 번째 비디오 정보를 추출합니다.
  // 이 컴포넌트는 항상 고정된 비디오를 재생하므로 randomIndex가 필요 없습니다.
  const videoData = bannerData.bannerDetailInfos[0];

  /**
   * 컴포넌트가 처음 렌더링될 때(마운트 시) 딱 한 번만 실행됩니다.
   * 'banner0_persistent'라는 고유 ID로 비디오 재생 제어권을 요청하여
   * 포커스와 상관없이 비디오가 자동으로 재생되도록 합니다.
   */
  useEffect(() => {
    if (videoData && videoData.showUrl) {
      const videoInfo = {
        showUrl: videoData.showUrl,
        patnrId: videoData.patnrId,
        showId: videoData.showId,
        shptmBanrTpNm: videoData.shptmBanrTpNm,
        lgCatCd: videoData.lgCatCd,
        chanId: videoData.brdcChnlId,
        modalContainerId: spotlightId, // PlayerPanel이 위치할 컨테이너 ID
      };
      dispatch(requestPlayControl("banner0_persistent", videoInfo));
    }
  }, [dispatch, videoData, spotlightId]);

  /**
   * 사용자가 이 배너를 클릭했을 때 호출됩니다.
   * 새로운 'goToFullScreen' 액션을 호출하여, 공유 PlayerPanel을
   * 부드럽게 전체화면으로 전환합니다.
   */
  const handleGoToFullScreen = useCallback(() => {
    dispatch(goToFullScreen());
  }, [dispatch]);

  // 상위 HomeBanner로 포커스 이벤트를 전달하는 콜백
  const onFocus = useCallback(() => {
    if (handleShelfFocus) {
      handleShelfFocus();
    }
  }, [handleShelfFocus]);

  return (
    <SpottableComponent
      className={css.itemBox} // 스타일은 재사용
      spotlightId={spotlightId}
      onClick={handleGoToFullScreen}
      onFocus={onFocus}
      aria-label={videoData?.showNm}
    >
      <div className={css.itemBox}>
        <CustomImage
          delay={0}
          src={videoData?.tmnlImgPath}
          fallbackSrc={isHorizontal ? emptyHorImage : undefined}
          ariaLabel={videoData?.tmnImgNm}
          animationSpeed="fast"
        />
      </div>
      {/* 필요하다면 플레이 아이콘이나 다른 UI 요소 추가 */}
    </SpottableComponent>
  );
}
