// src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfOptional.jsx

/**
 * ShopTime 애플리케이션의 선택적 약관 동의 컴포넌트
 * 
 * @component TermsOfOptional
 * @description 
 * webOS TV 환경에서 선택적 약관 정보를 표시하고 사용자의 동의 여부를 관리합니다.
 * WebOS 버전에 따라 다른 뷰를 자동으로 표시합니다.
 */
/* eslint-disable no-console */
/* eslint-disable react-hooks/exhaustive-deps */
import React, { useCallback, useEffect, useState, useMemo } from "react";
import { useDispatch, useSelector } from "react-redux";
import Spotlight from "@enact/spotlight";

import {
  setHidePopup,
  setShowPopup,
  changeLocalSettings,
  setExitApp,
  setHttpHeaderForServiceRequest  
} from "../../../../actions/commonActions";

import {registerDevice} from "../../../../actions/deviceActions"; 
import TBody from "../../../../components/TBody/TBody";
import {
  setMyTermsWithdraw,
  getMyPageTerms,
  getMyPageOptionalTerms,
  setMyPageTermsAgree, // 약관 동의 상태 업데이트 액션
} from "../../../../actions/myPageActions";
import { sendLogTerms } from "../../../../actions/logActions";
import TButton, { TYPES } from "../../../../components/TButton/TButton";
import TCheckBoxSquare from "../../../../components/TCheckBox/TCheckBoxSquare";
import TPopUp from "../../../../components/TPopUp/TPopUp";
import CustomTermButton from "./CustomTermButton";
import * as Config from "../../../../utils/Config";
import { $L } from "../../../../utils/helperMethods";
import css from "./TermsOfOptional.module.less";
import {
  TERMS_TYPE,
  TERMS_ID_MAP,
  TERMS_TPCD_MAP,
  TERMS_DISPLAY_NAMES,
  getInitialCheckboxStates,
  isMandatoryTerms
} from "./termsShared";
import { popPanel } from "../../../../actions/panelActions";
import TPanel from "../../../../components/TPanel/TPanel";
import TermsPopup from "./TermsPopup";
import OptionalTermsInfo from "./OptionalTermsInfo";



// SVG 아이콘 컴포넌트
const ExpandIcon = ({ className }) => (
  <svg width="37" height="37" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
    <rect x="2.5" y="2.5" width="32" height="32" rx="16" stroke="black" strokeWidth="2.5"/>
    <path d="M16.0059 25.8301L22.74 19.1108C22.8205 19.0307 22.8844 18.9355 22.928 18.8306C22.9716 18.7258 22.994 18.6133 22.994 18.4998C22.994 18.3862 22.9716 18.2738 22.928 18.1689C22.8844 18.0641 22.8205 17.9689 22.74 17.8888L16.0059 11.1701" stroke="black" strokeWidth="2.5" strokeLinecap="round"/>
  </svg>
);

// 혜택 이미지 컴포넌트
const BenefitImage = ({ className, onClick }) => {
  return (
    <div 
      className={`${css.benefitImageContainer} ${className || ''}`}
      onClick={(e) => {
        e.stopPropagation();
        if (onClick) onClick(e);
      }}
    >
      <ExpandIcon className={css.benefitImage} />
    </div>
  );
};

// Home 데이터에서 약관 검색 (약관 내용 포함)
const findTermsInHomeData = (termsData, termsId, type) => {
  if (!termsData) return null;
  
  console.log('🔍 Home 데이터에서 검색 시작');
  
  // 1. 배열 형태 검색
  if (Array.isArray(termsData)) {
    const found = termsData.find(term => term.trmsTpCd === termsId);
    if (found) {
      console.log('✅ Home 배열에서 발견:', found);
      return found;
    }
  }
  
  // 2. 객체 형태 검색
  if (termsData?.data) {
    const searchArrays = [
      termsData.data.terms,
      termsData.data.optionalTerms,
      termsData.data.additionalTerms,
      termsData.data.marketingTerms
    ];
    
    for (const array of searchArrays) {
      if (Array.isArray(array)) {
        const found = array.find(term => term.trmsTpCd === termsId);
        if (found) {
          console.log('✅ Home 객체에서 발견:', found);
          return found;
        }
      }
    }
  }
  
  console.log('❌ Home 데이터에서 찾지 못함');
  return null;
};

// MyPage 데이터에서 약관 검색 (fallback)
const findTermsInMyPageData = (myPageTermsData, myPageOptionalTermsData, termsId, type) => {
  console.log('🔍 MyPage 데이터에서 검색 시작');
  
  const searchInData = (data, source) => {
    if (data?.data?.terms && Array.isArray(data.data.terms)) {
      const found = data.data.terms.find(term => term.trmsTpCd === termsId);
      if (found) {
        console.log(`✅ ${source}에서 발견:`, found);
        return found;
      }
    }
    return null;
  };
  
  // 필수 약관에서 검색
  let found = searchInData(myPageTermsData, 'myPageTermsData');
  if (found) return found;
  
  // 선택 약관에서 검색
  found = searchInData(myPageOptionalTermsData, 'myPageOptionalTermsData');
  if (found) return found;
  
  console.log('❌ MyPage 데이터에서도 찾지 못함');
  return null;
};

export default function TermsOfOptional({
  title,
  isModalMode,
  closeModalCallback,
  panelInfo,
  spotlightId = "termsOfOptionalPanel",
  initialAgreeState,
}) {
  const [hoveredTerm, setHoveredTerm] = useState(null);

  // 마우스/포커스 핸들러
  const handleMouseEnter = useCallback((type) => {
    setHoveredTerm(type);
  }, []);
  
  const handleMouseLeave = useCallback(() => {
    setHoveredTerm(null);
  }, []);

  const dispatch = useDispatch();
  const termsData = useSelector((state) => state.home.termsData);  
  const commonPopupState = useSelector((state) => state.common?.popup || {});
  const { popupVisible = false, activePopup = null } = commonPopupState;


  
  // 약관 철회 결과도 가져오기
  const { setMyTermsWithdrawResult } = useSelector((state) => state.myPage);

  // 약관동의여부 데이터 가져오기
  const { myPageTermsData, myPageOptionalTermsData } = useSelector((state) => state.myPage);
  
  // 1. Redux에서 registerDevice 결과 상태 가져오기
  const deviceState = useSelector((state) => state.device);
  
  useEffect(() => {
    if (termsData) {
      console.log('🔍🔍🔍 TermsOfOptional - termsData 구조:', termsData);
      if (termsData.data) {
        console.log('🔍🔍🔍 TermsOfOptional - termsData.data 키:', Object.keys(termsData.data));
        
        if (termsData.data.optionalTerms) {
          console.log('🔍🔍🔍 TermsOfOptional - optionalTerms 데이터:', termsData.data.optionalTerms);
        }
      }
    }
  }, [termsData]);

  const introTermsData = termsData?.data?.terms.filter(
    (item) => item.trmsTpCd === "MST00401" || item.trmsTpCd === "MST00402"
  );  

  const webOSVersion = useSelector(
    (state) => state.common.appStatus.webOSVersion
  );
  
  const getDisplayMode = () => {
    //temp  
    const webOSVersion = 7; // 임시로 5로 설정 (테스트용)
    return webOSVersion < 6 ? 'image' : 'text';
  };
  
  // 상태 관리
  const [checkboxStates, setCheckboxStates] = useState(() => getInitialCheckboxStates());
  const [isAllChecked, setIsAllChecked] = useState(false);
  const [spotlightDisabled, setSpotlightDisabled] = useState(false);
  
  // 팝업 관련 state
  const [showTermsPopup, setShowTermsPopup] = useState(false);
  const [currentTermsData, setCurrentTermsData] = useState(null);
  const [currentTermsType, setCurrentTermsType] = useState(null);

  // WebOS 버전에 따른 뷰 결정
  const shouldShowBenefitsView = useMemo(() => {
    return webOSVersion && Number(webOSVersion) >= 6.0;
  }, [webOSVersion]);

  // 현재 약관 동의 상태를 파싱하는 함수
  const parseCurrentTermsStatus = useCallback(() => {
    console.log('[DEBUG] 약관 상태 파싱 시작');
    console.log('[DEBUG] myPageTermsData:', myPageTermsData);
    console.log('[DEBUG] myPageOptionalTermsData:', myPageOptionalTermsData);
    
    const currentStatus = {};
    
    // 필수 약관 데이터에서 동의 상태 확인
    if (myPageTermsData?.data?.terms) {
      console.log('[DEBUG] 필수 약관 데이터 처리 시작:', myPageTermsData.data.terms);
      myPageTermsData.data.terms.forEach(term => {
        console.log(`[DEBUG] 필수 약관 처리 중 - trmsTpCd: ${term.trmsTpCd}, trmsAgrFlag: ${term.trmsAgrFlag}`);
        
        // TERMS_ID_MAP에서 역으로 찾기
        const termType = Object.keys(TERMS_TPCD_MAP).find(
          key => TERMS_TPCD_MAP[key] === term.trmsTpCd
        );
        if (termType) {
          const isAgreed = term.trmsAgrFlag === 'Y';
          currentStatus[termType] = isAgreed;
          console.log(`[DEBUG] ${termType}: ${term.trmsAgrFlag} -> ${isAgreed}`);
        } else {
          console.log(`[DEBUG] 매핑되지 않은 약관 타입: ${term.trmsTpCd}`);
        }
      });
    } else {
      console.log('[DEBUG] 필수 약관 데이터 없음');
    }
    
    // 선택 약관 데이터에서 동의 상태 확인
    if (myPageOptionalTermsData?.data?.terms) {
      console.log('[DEBUG] 선택 약관 데이터 처리 시작:', myPageOptionalTermsData.data.terms);
      myPageOptionalTermsData.data.terms.forEach(term => {
        console.log(`[DEBUG] 선택 약관 처리 중 - trmsTpCd: ${term.trmsTpCd}, trmsAgrFlag: ${term.trmsAgrFlag}`);
        
        const termType = Object.keys(TERMS_TPCD_MAP).find(
          key => TERMS_TPCD_MAP[key] === term.trmsTpCd
        );
        if (termType) {
          const isAgreed = term.trmsAgrFlag === 'Y';
          currentStatus[termType] = isAgreed;
          console.log(`[DEBUG] ${termType}: ${term.trmsAgrFlag} -> ${isAgreed}`);
        } else {
          console.log(`[DEBUG] 매핑되지 않은 약관 타입: ${term.trmsTpCd}`);
        }
      });
    } else {
      console.log('[DEBUG] 선택 약관 데이터 없음');
    }
    
    console.log('[DEBUG] 최종 파싱 결과:', currentStatus);
    console.log('[DEBUG] 파싱된 약관 개수:', Object.keys(currentStatus).length);
    
    return currentStatus;
  }, [myPageTermsData, myPageOptionalTermsData]);

  // 컴포넌트 마운트 시 약관 데이터가 있으면 체크박스 상태 초기화 (일반 패널 모드에서만)
  useEffect(() => {
    console.log('[DEBUG] useEffect 트리거됨 - 의존성 변경');
    console.log('[DEBUG] isModalMode:', isModalMode);
    console.log('[DEBUG] myPageTermsData 존재:', !!myPageTermsData);
    console.log('[DEBUG] myPageOptionalTermsData 존재:', !!myPageOptionalTermsData);
    
    if (!isModalMode && (myPageTermsData || myPageOptionalTermsData)) {
      console.log('[DEBUG] 조건 만족 - 체크박스 상태 파싱 시작');
      const currentStatus = parseCurrentTermsStatus();
      
      if (Object.keys(currentStatus).length > 0) {
        console.log('[DEBUG] 체크박스 상태 업데이트 실행');
        console.log('[DEBUG] 서버 상태로 업데이트:', currentStatus);
        
        setCheckboxStates(currentStatus);
        
        // 전체 선택 상태도 업데이트
        const allChecked = Object.values(currentStatus).every(state => state);
        console.log('[DEBUG] 전체 선택 상태:', allChecked);
        setIsAllChecked(allChecked);
      } else {
        console.log('[DEBUG] 파싱된 상태가 비어있음 - 업데이트 건너뛰기');
      }
    } else {
      console.log('[DEBUG] 조건 불만족 - 업데이트 건너뛰기');
    }
  }, [myPageTermsData, myPageOptionalTermsData, isModalMode, parseCurrentTermsStatus]);

  // 메모이제이션된 핸들러들
  const handleCheckboxToggle = useCallback((type) => ({ selected }) => {
    console.log(`[CHECKBOX-CLICK] ${type} 체크박스 클릭됨:`, selected);
    console.log(`[CHECKBOX-CLICK] 이전 상태:`, checkboxStates[type]);
    
    setCheckboxStates(prev => {
      const newStates = {
        ...prev,
        [type]: selected
      };
      console.log(`[CHECKBOX-CLICK] 새로운 전체 상태:`, newStates);
      
      const allChecked = Object.values(newStates).every(state => state);
      console.log(`[CHECKBOX-CLICK] 전체 선택 여부:`, allChecked);
      setIsAllChecked(allChecked);
      return newStates;
    });
  }, []);

  // 체크박스 상태를 직접 토글하는 함수 추가
  const toggleCheckboxDirectly = useCallback((type) => {
    setCheckboxStates(prev => {
      const newStates = {
        ...prev,
        [type]: !prev[type]  // 현재 상태 반전
      };
      const allChecked = Object.values(newStates).every(state => state);
      setIsAllChecked(allChecked);
      return newStates;
    });
  }, []);

  const handleSelectAllToggle = useCallback(({ selected }) => {
    console.log(`[SELECT-ALL-CLICK] 전체 선택 클릭됨:`, selected);
    console.log(`[SELECT-ALL-CLICK] 이전 isAllChecked:`, isAllChecked);
    
    setIsAllChecked(selected);
    setCheckboxStates(prev => {
      const newStates = Object.keys(prev).reduce((acc, key) => ({
        ...acc,
        [key]: selected
      }), {});
      console.log(`[SELECT-ALL-CLICK] 새로운 전체 상태:`, newStates);
      return newStates;
    });
  }, [isAllChecked]);

  // 약관 내용 보기 핸들러
  const handleTermsView = useCallback((type) => (event) => {
    try {
      console.log('🔍 handleTermsView 디버깅:');
      console.log('  - type:', type);
      console.log('  - termsData (약관내용):', termsData);
      console.log('  - myPageTermsData (동의상태):', myPageTermsData);
      console.log('  - myPageOptionalTermsData (선택약관 동의상태):', myPageOptionalTermsData);
      
      // 이벤트 처리
      if (event) {
        event.preventDefault();
        event.stopPropagation();
      }
      
      const termsId = TERMS_TPCD_MAP[type];
      console.log('  - 찾는 termsId:', termsId);
      
      // ✅ 1단계: termsData(home)에서 약관 내용 우선 검색
      let foundTerms = findTermsInHomeData(termsData, termsId, type);
      
      // ✅ 2단계: 없으면 myPage 데이터에서 검색 (fallback)
      if (!foundTerms) {
        foundTerms = findTermsInMyPageData(myPageTermsData, myPageOptionalTermsData, termsId, type);
      }
      
      if (foundTerms) {
        console.log('✅ 약관 데이터 발견:', foundTerms);
        
        // ✅ 다양한 필드명으로 약관 내용 추출 시도
        const termsContent = foundTerms.trmsCntt || 
                            foundTerms.content || 
                            foundTerms.trmsContent || 
                            foundTerms.text || 
                            foundTerms.cntt || 
                            '';
        
        const termsTitle = foundTerms.trmsNm || 
                          foundTerms.title || 
                          foundTerms.name || 
                          TERMS_DISPLAY_NAMES[type] || 
                          '';
        
        console.log('📝 추출된 약관 내용 길이:', termsContent.length);
        console.log('📝 추출된 약관 제목:', termsTitle);
        
        if (!termsContent) {
          console.warn('⚠️ 약관 내용이 비어있습니다. 사용 가능한 필드들:');
          console.warn('  - foundTerms 객체의 모든 키:', Object.keys(foundTerms));
          
          // 디버깅을 위해 모든 필드 출력
          Object.entries(foundTerms).forEach(([key, value]) => {
            if (typeof value === 'string' && value.length > 50) {
              console.warn(`  - ${key}: ${value.substring(0, 100)}...`);
            }
          });
        }
        
        // ✅ TermsPopup에 전달할 데이터 객체 생성
        setCurrentTermsData({
          title: termsTitle,
          content: termsContent
        });
        setCurrentTermsType(type); // 현재 약관 타입 저장
        setShowTermsPopup(true);
        
        console.log('✅ 팝업 표시 요청 완료');
        console.log('  - 전달된 text 길이:', termsContent.length);
        console.log('  - 전달된 title:', termsTitle);
      } else {
        // 모든 데이터 구조 로깅
        console.error('❌ 약관 데이터를 찾을 수 없음');
        console.error('📊 전체 데이터 구조 분석:');
        console.error('  - termsData:', JSON.stringify(termsData, null, 2));
        console.error('  - myPageTermsData:', JSON.stringify(myPageTermsData, null, 2));
        console.error('  - myPageOptionalTermsData:', JSON.stringify(myPageOptionalTermsData, null, 2));
        console.error('  - TERMS_TPCD_MAP:', TERMS_TPCD_MAP);
        console.error('  - 찾는 type:', type, '-> termsId:', TERMS_TPCD_MAP[type]);
      }
      
    } catch (error) {
      console.error('❌ handleTermsView 오류:', error);
    }
  }, [termsData, myPageTermsData, myPageOptionalTermsData]);

  // 약관 버튼 클릭 시 약관 내용만 보여주는 핸들러 (체크박스 토글 제거)
  const handleTermButtonClick = useCallback((type) => (event) => {
    // 약관 내용 보기만 수행 (체크박스 토글은 팝업에서 Agree 클릭 시에만)
    handleTermsView(type)(event);
  }, [handleTermsView]);

  /**
   * 팝업 닫기 핸들러
   */
  const handleClosePopup = useCallback(() => {
    console.log('[TermsOfOptional] handleClosePopup triggered (e.g., OK on Terms Detail or Alert)');
    dispatch(setHidePopup());
  }, [dispatch]);

  /**
   * 앱 종료 핸들러 (IntroPanel과 동일)
   */
  const onExit = useCallback(() => {
    console.log('[TermsOfOptional] onExit (Yes button on Exit Popup) triggered - 약관 철회 처리 시작');
    dispatch(setHidePopup());
    
    console.log('[TermsOfOptional] 현재 체크박스 상태:', checkboxStates);
    console.log('[TermsOfOptional] 3개 약관 ID 매핑:', TERMS_TPCD_MAP);
    
    // 현재 동의된 약관들을 확인 (3개 약관 모두 고려)
    const agreedTerms = Object.entries(checkboxStates)
      .filter(([type, checked]) => {
        console.log(`[TermsOfOptional] 약관 ${type}: ${checked ? '동의됨' : '동의안됨'}`);
        return checked;
      })
      .map(([type]) => {
        const termId = TERMS_ID_MAP[type];
        console.log(`[TermsOfOptional] ${type} -> ${termId}`);
        return termId;
      })
      .filter(Boolean); // undefined 값 제거
    
    console.log('🚫 철회할 약관들 (3개 약관 처리):', agreedTerms);
    console.log('🚫 철회할 약관 개수:', agreedTerms.length);

    if (agreedTerms.length > 0) {
      // 동의된 약관이 있으면 철회 API 호출
      const withdrawParams = {
        trmsTpCdList: agreedTerms
      };
      
      console.log('🚫 약관 철회 API 호출 파라미터:', withdrawParams);
      dispatch(setMyTermsWithdraw(withdrawParams, (result) => {
        console.log('🚫 약관 철회 완료:', result);
        
        if (result && result.retCode === "000") {
          console.log('✅ 약관 철회 성공');
          // 철회 성공 후 앱 종료
          dispatch(setExitApp());
        } else {
          console.error('❌ 약관 철회 실패:', result);
          // 실패 시 에러 팝업 표시
          dispatch(setShowPopup(Config.ACTIVE_POPUP.alertPopup, {
            title: $L("Error"),
            text: $L("약관 철회 중 오류가 발생했습니다. 다시 시도해주세요."),
            button1Text: $L("확인")
          }));
        }
      }));
    } else {
      // 동의된 약관이 없으면 바로 앱 종료
      console.log('🚫 동의된 약관이 없어 바로 앱 종료');
      dispatch(setExitApp());
    }
  }, [dispatch, checkboxStates]);

  // TermsOfService와 동일한 onClose 핸들러 (팝업 취소)
  const onClose = useCallback(() => {
    console.log('[TermsOfOptional] onClose (No button on Exit Popup) triggered');
    dispatch(setHidePopup());
  }, [dispatch]);

  const handleBack = useCallback(() => {
    if (isModalMode && closeModalCallback) {
      console.log('[TermsOfOptional] Modal mode back pressed, calling closeModalCallback.');
      closeModalCallback(); // App.js에 정의된 콜백 호출 (예: 앱 종료 팝업)
    } else if (!isModalMode && panelInfo && panelInfo.name) {
      console.log('[TermsOfOptional] Panel mode back pressed, popping panel:', panelInfo.name);
      dispatch(popPanel(panelInfo.name));
    } else {
      // 기본 동작 또는 정의되지 않은 경우 (예: 앱 종료 팝업)
      console.log('[TermsOfOptional] Back pressed with no specific mode, showing exit popup.');
      dispatch(setShowPopup(Config.ACTIVE_POPUP.exitPopup));
    }
  }, [isModalMode, closeModalCallback, dispatch, panelInfo]);

  const handleTest = () => {
    // 약관 동의할 항목들 (string array)
    const termsList = ["TID0000222", "TID0000223", "TID0000232"];
    
    // 동의하지 않을 항목들 (빈 배열)
    const notTermsList = [];
    
    // 콜백 함수 - 성공 시 실행될 로직
    const callback = (responseData) => {
      console.log("약관 동의 처리 완료:", responseData);
      // 여기에 성공 후 추가 로직 작성
    };
    
    // Redux 액션 디스패치
    dispatch(setMyPageTermsAgree(
      { termsList, notTermsList }, 
      callback
    ));
  };


  const handleAgree = useCallback(() => {
    // 필수 약관 검증
    const hasRequiredTerms = checkboxStates[TERMS_TYPE.TERMS_CONDITIONS] && 
                            checkboxStates[TERMS_TYPE.PRIVACY_POLICY];
    
    if (!hasRequiredTerms) {      
      dispatch(setShowPopup(Config.ACTIVE_POPUP.alertPopup, {
        title: $L("Notice"),
        text: $L("Please agree to all required terms."),
        button1Text: $L("OK")
      }));
      return;
    }
  
    // agreeTerms 배열 구성
    const agreeTerms = [];
    if (checkboxStates[TERMS_TYPE.TERMS_CONDITIONS]) {
      agreeTerms.push("TID0000222");
    }
    if (checkboxStates[TERMS_TYPE.PRIVACY_POLICY]) {
      agreeTerms.push("TID0000223");
    }
    if (checkboxStates[TERMS_TYPE.OPTIONAL_TERMS]) {
      agreeTerms.push("TID0000232");
    }
  
    console.log('최종 전송될 agreeTerms:', agreeTerms);
  
    // ✅ 콜백 없이 registerDevice 호출
    dispatch(registerDevice({
      agreeTerms: agreeTerms
    }));
    
  }, [checkboxStates, dispatch]);
  
  // ✅ 별도 useEffect로 deviceState 변화 감지
  useEffect(() => {
    console.log('📊 deviceState 변화 감지:', deviceState);
    
    // registerDevice 성공 시 (retCode가 0 또는 "000"인 경우)
    if (deviceState?.regDeviceData && (deviceState.regDeviceData.retCode === 0 || deviceState.regDeviceData.retCode === "000")) {
      console.log('✅ registerDevice 성공 감지 - 패널 닫기 시작');
      
      // getAuthenticationCode 완료까지 잠시 대기 후 패널 닫기
      setTimeout(() => {
        console.log('🚀 패널 닫기 실행');
        
        if (isModalMode && closeModalCallback) {
          console.log('📱 Modal mode - closeModalCallback 호출');
          closeModalCallback(true);
        } else {
          console.log('📋 Panel mode - popPanel 호출');
          dispatch(popPanel());
        }
      }, 2000); // 2초 대기 (getAuthenticationCode 완료 대기)
    }
  }, [deviceState, isModalMode, closeModalCallback, dispatch]);

  const handleDoNotAgree = useCallback(() => {
    console.log('[TermsOfOptional] Do Not Agree pressed.');
    
    // 로그 전송 (IntroPanel과 동일)
    dispatch(sendLogTerms({ logTpNo: Config.LOG_TP_NO.TERMS.DO_NOT_AGREE }));
    
    // ✅ TermsOfService와 동일한 방식으로 옵션 객체 포함
    dispatch(setShowPopup(Config.ACTIVE_POPUP.exitPopup, {
      title: $L(""),
      text: (
        <div>
          {$L("Are you sure you want to opt out?")}
          <br />
          <p style={{ color: "black" }}>
            {$L("The service will not be available anymore after opting out.")}
          </p>
        </div>
      ),
      button1Text: $L("Yes"),
      button2Text: $L("No"),
      onButton1Press: onExit,
      onButton2Press: onClose
    }));
  }, [dispatch, onExit, onClose]);

  useEffect(() => {
    console.log('🔄 Redux popup 상태 변화 (commonPopupState):');
    console.log('  - commonPopupState.popupVisible:', commonPopupState.popupVisible);
    console.log('  - commonPopupState.activePopup:', commonPopupState.activePopup);
    console.log('  - commonPopupState 객체:', commonPopupState);
    
    if (commonPopupState.activePopup === Config.ACTIVE_POPUP.termsPopup) {
      console.log('📋 약관 팝업 상태 상세 (commonPopupState):');
      if (commonPopupState.text) {
        console.log('  - commonPopupState.text 미리보기:', commonPopupState.text.substring(0, 200) + '...');
      } else {
        console.warn('⚠️ commonPopupState.text가 비어있습니다!');
      }
    }
  }, [commonPopupState]);

  // 약관 데이터 로드 시 Spotlight 활성화
  useEffect(() => {
    if (termsData) {
      console.log('termsData loaded:', termsData);
      console.log('[SPOTLIGHT] spotlightDisabled를 false로 설정');
      setSpotlightDisabled(false);
      
      // Select All 체크박스에 초기 포커스 설정
      setTimeout(() => {
        console.log('[SPOTLIGHT] checkbox-all에 포커스 설정 시도');
        Spotlight.set('checkbox-all');
      }, 100);
    }
  }, [termsData]);

  // 컴포넌트 마운트 시 Select All에 초기 포커스 설정
  useEffect(() => {
    const timer = setTimeout(() => {
      if (!spotlightDisabled) {
        Spotlight.set('checkbox-all');
      }
    }, 200);
    
    return () => clearTimeout(timer);
  }, [spotlightDisabled]);

  // 체크박스 상태 변경 시 로깅 추가
  useEffect(() => {
    console.log('[TermsOfOptional] 체크박스 상태 변경됨:');
    Object.entries(checkboxStates).forEach(([termType, checked]) => {
      const termId = TERMS_TPCD_MAP[termType];
      const isMandatory = isMandatoryTerms(termType);
      console.log(`  - ${termType} (${termId}) [${isMandatory ? '필수' : '선택'}]: ${checked ? '✅ 동의' : '❌ 비동의'}`);
    });
    
    const allChecked = Object.values(checkboxStates).every(state => state);
    console.log(`  - 전체 선택 상태: ${allChecked ? '✅ 모두 선택됨' : '❌ 일부 또는 미선택'}`);
  }, [checkboxStates]);

  // API 응답 처리 - 약관 철회 결과
  useEffect(() => {
    if (setMyTermsWithdrawResult?.data && setMyTermsWithdrawResult?.retCode === "000") {
      console.log('✅ 약관 철회 API 응답 성공:', setMyTermsWithdrawResult);
      // 철회 성공 후 추가 처리가 필요하다면 여기서 구현
    } else if (setMyTermsWithdrawResult?.error) {
      console.log('❌ 약관 철회 API 응답 실패:', setMyTermsWithdrawResult.error);
      // 실패 시 에러 처리
      dispatch(setShowPopup(Config.ACTIVE_POPUP.alertPopup, {
        title: $L("Error"),
        text: $L("약관 철회 처리 중 오류가 발생했습니다."),
        button1Text: $L("확인")
      }));
    }
  }, [setMyTermsWithdrawResult, dispatch]);

  // Exit Popup 포커스 관리
  useEffect(() => {
    if (activePopup === Config.ACTIVE_POPUP.exitPopup && popupVisible) {
      const timer = setTimeout(() => {
        // 여러 방법으로 포커스 시도
        const focusAttempts = [
          () => Spotlight.set('tPopupBtn2'),
          () => Spotlight.set('tPopupBtn1'),
          () => {
            const buttons = document.querySelectorAll('[data-spotlight-id*="tPopupBtn"]');
            if (buttons.length > 1) {
              buttons[1].focus(); // No 버튼 (두 번째 버튼)
              return true;
            }
            return false;
          }
        ];
        
        for (const attempt of focusAttempts) {
          if (attempt()) {
            console.log('포커스 설정 성공');
            break;
          }
        }
      }, 300);

      return () => clearTimeout(timer);
    }
  }, [activePopup, popupVisible]);

// API 테스트용 함수 - 단순화 버전
const handleAllAgreeTestSimple = useCallback(() => {
  console.log('🧪 API 테스트: 모든 약관 동의 처리 시작');
  
  // 1. 체크박스 상태 업데이트
  const allAgreedStates = {
    [TERMS_TYPE.TERMS_CONDITIONS]: true,
    [TERMS_TYPE.PRIVACY_POLICY]: true,
    [TERMS_TYPE.OPTIONAL_TERMS]: true
  };
  
  setCheckboxStates(allAgreedStates);
  setIsAllChecked(true);
  
  // 2. API 파라미터 설정
  const termsList = [    
    "TID0000222", // 이용약관 (필수)    
  ];
  
  const notTermsList = [
    "TID0000223", // 개인정보처리방침 (필수)
    "TID0000232"  // 선택약관
  ]; // 비동의 약관 없음
  
  console.log('📤 API 호출 파라미터:', { termsList, notTermsList });
  
  // 3. 성공 콜백
  const onSuccess = (response) => {
    console.log('✅ API 성공:', response);
    
    if (response?.retCode === 0) {
      // MyPage 데이터 새로고침
      dispatch(getMyPageTerms());
      dispatch(getMyPageOptionalTerms());
      
      // 성공 알림
      dispatch(setShowPopup(Config.ACTIVE_POPUP.alertPopup, {
        title: "테스트 성공",
        text: "약관 동의가 완료되었습니다.",
        button1Text: "확인"
      }));
    } else {
      console.error('❌ 서버 오류:', response);
      dispatch(setShowPopup(Config.ACTIVE_POPUP.alertPopup, {
        title: "서버 오류",
        text: `오류: ${response?.retMsg || '알 수 없는 오류'}`,
        button1Text: "확인"
      }));
    }
  };
  
  // 4. API 호출
  dispatch(setMyPageTermsAgree({ termsList, notTermsList }, onSuccess));
  
}, [dispatch, setCheckboxStates, setIsAllChecked]);
  
  // API 테스트용 함수 - setMyPageTermsAgree 사용하도록 수정
const handleAllAgreeTest = useCallback(() => {
  console.log('🧪 [API-TEST] registerDevice 테스트 시작');
  
  // 1. 모든 체크박스를 true로 강제 설정 (기존 로직 유지)
  const allAgreedStates = {
    [TERMS_TYPE.TERMS_CONDITIONS]: true,
    [TERMS_TYPE.PRIVACY_POLICY]: true,
    [TERMS_TYPE.OPTIONAL_TERMS]: true
  };
  
  setCheckboxStates(allAgreedStates);
  setIsAllChecked(true);
  
  // 2. 동의한 약관 ID 배열 생성 (기존 로직 유지)
  const agreedTerms = [
    "TID0000222", // TERMS_CONDITIONS (필수)
    "TID0000223", // PRIVACY_POLICY (필수)
    "TID0000232"  // OPTIONAL_TERMS (선택)
  ];

  console.log('🔥 [API-TEST] registerDevice 호출 파라미터:', agreedTerms);
  
  // 3. ✅ registerDevice로 교체
  const onTestSuccess = (response) => {
    console.log('🧪 [API-TEST] ✅ registerDevice 성공 응답:', response);
    
    if (response && (response.retCode === "000" || response.retCode === 0)) {
      console.log('🧪 [API-TEST] ✅ 디바이스 등록 성공!');
      
      // MyPage 데이터 새로고침 (필요시)
      dispatch(getMyPageTerms());
      dispatch(getMyPageOptionalTerms());
      
      // 성공 알림 팝업
      dispatch(setShowPopup(Config.ACTIVE_POPUP.alertPopup, {
        title: "🧪 registerDevice 테스트 성공",
        text: `디바이스 등록 성공!\n응답: ${response.retMsg || 'OK'}\n동의한 약관: ${agreedTerms.length}개`,
        button1Text: "확인"
      }));
      
    } else {
      console.error('🧪 [API-TEST] ❌ registerDevice 오류:', response);
      
      dispatch(setShowPopup(Config.ACTIVE_POPUP.alertPopup, {
        title: "🧪 registerDevice 테스트 실패",
        text: `retCode: ${response?.retCode}\nretMsg: ${response?.retMsg}`,
        button1Text: "확인"
      }));
    }
  };

  // 4. ✅ registerDevice API 호출
  dispatch(registerDevice({
    // registerDevice에 맞는 파라미터 구성
    agreedTermsList: agreedTerms,
    // 기타 필요한 디바이스 정보들...
  }, onTestSuccess));
  
}, [dispatch, setCheckboxStates, setIsAllChecked]);

  // TERMS_TPCD_MAP 검증 함수
  const validateTermsIdMap = useCallback(() => {
    console.log('🔍 [VALIDATION] TERMS_TPCD_MAP 검증 시작');
    console.log('🔍 [VALIDATION] 전체 TERMS_TPCD_MAP:', TERMS_TPCD_MAP);
    console.log('🔍 [VALIDATION] 전체 TERMS_TYPE:', TERMS_TYPE);
    
    Object.entries(TERMS_TYPE).forEach(([key, type]) => {
      const id = TERMS_TPCD_MAP[type];
      console.log(`🔍 [VALIDATION] ${key} (${type}) -> ${id} (${typeof id})`);
      
      if (!id) {
        console.error(`❌ [VALIDATION] ${type}에 대한 ID가 없습니다!`);
      } else {
        console.log(`✅ [VALIDATION] ${type}: 유효한 ID`);
      }
    });
    
    // 팝업으로 결과 표시
    const validIds = Object.values(TERMS_TYPE).map(type => TERMS_TPCD_MAP[type]).filter(Boolean);
    const totalTypes = Object.keys(TERMS_TYPE).length;
    
    dispatch(setShowPopup(Config.ACTIVE_POPUP.alertPopup, {
      title: "🔍 TERMS_TPCD_MAP 검증 결과",
      text: `전체 약관 타입: ${totalTypes}개\n유효한 ID: ${validIds.length}개\n\n${validIds.join('\n')}`,
      button1Text: "확인"
    }));
  }, [dispatch]);

  // 간단한 API 테스트 함수
  const simpleApiTest = useCallback(() => {
    console.log('🧪 [SIMPLE-TEST] 간단 API 테스트 시작');
    
    const testIds = ["MST00402", "MST00401", "MST00405"];
    
    console.log('🧪 [SIMPLE-TEST] 하드코딩된 테스트 ID:', testIds);

    dispatch(setMyPageTermsAgree({
      termsList: testIds,
      notTermsList: [],
      onComplete: (res) => {
        console.log('🧪 [SIMPLE-TEST] ✅ 성공:', res);
        const retCode = res?.data?.retCode;
        const retMsg = res?.data?.retMsg;
        
        dispatch(setShowPopup(Config.ACTIVE_POPUP.alertPopup, {
          title: "🧪 간단 API 테스트 성공",
          text: `retCode: ${retCode}\nretMsg: ${retMsg}\n전송 ID: ${testIds.join(', ')}`,
          button1Text: "확인"
        }));
      },
      onError: (err) => {
        console.error('🧪 [SIMPLE-TEST] ❌ 실패:', err);
        dispatch(setShowPopup(Config.ACTIVE_POPUP.alertPopup, {
          title: "🧪 간단 API 테스트 실패",
          text: `오류: ${err?.message || '알 수 없음'}\n전송 ID: ${testIds.join(', ')}`,
          button1Text: "확인"
        }));
      }
    }));
  }, [dispatch]);
  

  return (
    <TPanel
      title={title || $L("Terms and Conditions")}
      handleCancel={handleBack}
      // className={`${css.termsOptionalPanel} ${isModalMode ? css.modalModePanel : ''}`}
      className={css.panel}
      spotlightId={spotlightId}
      noCloseButton={isModalMode}
    >
      {/* <TBody className={`${css.body} ${isModalMode ? css.modalModeBody : ''}`}> */}
      <TBody className={css.termsOptionalLayout}>
               
        <div className={css.termsContainer}>
          {/* Welcome Section - 항상 표시 */}
          <div className={css.welcomeSection}>
            <div className={css.welcomeTitle}>
              <span className={css.welcomeText}>{$L("Welcome to")}</span>
              <h1 className={css.brandTitle}>
                <span className={css.brandShop}>Sh</span>
                <span className={css.brandO}>o</span>
                <span className={css.brandPTime}>p Time !</span>
              </h1>
            </div>
            <p className={css.welcomeDescription}>
              {$L("Check out more LIVE SHOWS now and enjoy shopping at Shop Time's special price on your TV by agreeing to the LG TV Shopping Terms and Conditions.")}
            </p>
          </div>

          {/* Terms Section - TButton 방식으로 수정 */}
          <div className={css.termsSection}>
            <div className={css.mandatoryTerms}>
              {Object.entries(TERMS_TYPE).map(([key, type], index) => {
                console.log(`[RENDER] ${type} 체크박스 렌더링:`, {
                  selected: checkboxStates[type],
                  disabled: spotlightDisabled,
                  id: `checkbox-${type.toLowerCase()}`
                });
                
                return (
                  <div key={type} className={css.termItem}>
                    <TCheckBoxSquare 
                      id={`checkbox-${type.toLowerCase()}`}
                      data-spotlight-id={`checkbox-${type.toLowerCase()}`}
                      selected={checkboxStates[type]}
                      onToggle={handleCheckboxToggle(type)}
                      onClick={(e) => {
                        console.log(`[CHECKBOX-ONCLICK] ${type} 체크박스 직접 클릭됨`, e);
                        console.log(`[CHECKBOX-ONCLICK] 현재 disabled 상태:`, spotlightDisabled);
                        console.log(`[CHECKBOX-ONCLICK] 현재 selected 상태:`, checkboxStates[type]);
                      }}
                      className={css.termCheckbox}
                      disabled={spotlightDisabled}
                      spotlightDisabled={spotlightDisabled}
                      tabIndex={2}
                      aria-label={TERMS_DISPLAY_NAMES[type]}
                      role="checkbox"
                      aria-checked={checkboxStates[type]}
                    />
                    {/* ✅ TButton을 사용하여 약관 버튼 구현 */}
                    <CustomTermButton
                      data-spotlight-id={`termbox-${type.toLowerCase()}`}
                      data-type={type}
                      onClick={handleTermButtonClick(type)}
                      className={css.termBox}
                      spotlightDisabled={spotlightDisabled}
                      onMouseEnter={() => handleMouseEnter(type)}
                      onMouseLeave={handleMouseLeave}
                      hovered={hoveredTerm === type}
                      icon={
                        shouldShowBenefitsView ? (
                          <BenefitImage className={css.benefitImageWrapper} />
                        ) : (
                          <div className={css.expandIconContainer}>
                            <ExpandIcon className={css.expandIcon} />
                          </div>
                        )
                      }
                    >
                      <span className={`${css.termName} ${isMandatoryTerms(type) ? css.termNameMandatory : ''}`}>
                        {TERMS_DISPLAY_NAMES[type]}
                      </span>
                    </CustomTermButton>
                  </div>
                );
              })}
            </div>

            <div className = {css.divider}/>

            {/* <div className = {css.optionalTerms}>             */}
              <OptionalTermsInfo 
                displayMode={getDisplayMode()}
                imageSources={['/path/to/single-image.jpg']}
                imageTitle={$L('Agree and Enjoy Special Benefits')}
                spotlightId="optional-terms-info"
              />
            {/* </div> */}

          </div>

          <div className={css.selectAllSection}>
            <TCheckBoxSquare 
              id="checkbox-all"
              data-spotlight-id="checkbox-all"
              selected={isAllChecked}
              onToggle={handleSelectAllToggle}
              onClick={(e) => {
                console.log(`[SELECT-ALL-ONCLICK] 전체 선택 체크박스 직접 클릭됨`, e);
                console.log(`[SELECT-ALL-ONCLICK] 현재 disabled 상태:`, spotlightDisabled);
                console.log(`[SELECT-ALL-ONCLICK] 현재 isAllChecked 상태:`, isAllChecked);
              }}
              className={css.selectAllCheckbox}
              disabled={spotlightDisabled}
              spotlightDisabled={spotlightDisabled}
              tabIndex={1}
            />
            <span className={css.selectAllText}>{$L("Select All")}</span>
          </div>

          {/* 하단 버튼 레이어 - 전체화면 모드에서는 항상 두 버튼 모두 표시 */}
          <div className={css.bottomBtnLayer}>
            <TButton
              onClick={handleAgree}
              className={css.agreeButton}
              spotlightId={spotlightId + "_agreeButton"}
            >
              {$L("Agree")}
            </TButton>          
          
            
            {/* 전체화면 모드에서는 항상 "Do Not Agree" 버튼 표시 */}
            <TButton 
              onClick={handleDoNotAgree} 
              className={css.disagreeButton}
              spotlightId={spotlightId + "_disagreeButton"}
            >
              {$L("Do Not Agree")}
            </TButton>
          </div>
        </div>

        {/* TermsPopup 컴포넌트 */}
        <TermsPopup
          visible={showTermsPopup}
          onAgree={() => {
            console.log('TermsPopup - Agree clicked for type:', currentTermsType);
            // Agree 클릭 시 해당 약관의 체크박스를 토글 (동의)
            if (currentTermsType) {
              toggleCheckboxDirectly(currentTermsType);
            }
            // 팝업 닫기
            setShowTermsPopup(false);
            setCurrentTermsData(null);
            setCurrentTermsType(null);
          }}
          onClose={() => {
            console.log('TermsPopup - Close clicked (no agreement change)');
            // Close 클릭 시 체크박스 상태 변경 없이 팝업만 닫기
            setShowTermsPopup(false);
            setCurrentTermsData(null);
            setCurrentTermsType(null);
          }}
          termsData={currentTermsData}
          isAlreadyAgreed={currentTermsType ? checkboxStates[currentTermsType] || false : false}
        />
        
        {/* 알림 팝업 */}
        {activePopup === Config.ACTIVE_POPUP.alertPopup && popupVisible && (
          <TPopUp
            kind="alertPopup"
            className={css.customAlertPopup}
            open={popupVisible}
            onClose={handleClosePopup}
            onButton1Press={handleClosePopup}
            hasButton
            button1Text={commonPopupState.button1Text || $L("OK")}
            hasText
            title={commonPopupState.title}
            text={commonPopupState.text}
          />
        )}

        {/* 기존 TPopUp 컴포넌트 (Exit Popup) */}
        {activePopup === Config.ACTIVE_POPUP.exitPopup && popupVisible && (
          <TPopUp
            kind="exitPopup"
            className={css.customExitPopup}
            open={popupVisible}
            onExit={onExit}
            onClose={onClose}
            hasButton
            button1Text={$L("Yes")}
            button2Text={$L("No")}
            hasText
            title={$L("")}
            text={
              <div>
                {$L("Are you sure you want to opt out?")}
                <br />
                <p style={{ color: "black", fontWeight: "bold" }}>
                  {$L("The service will not be available anymore after opting out.")}
                </p>
              </div>
            }
          />
        )}
      </TBody>
    </TPanel>
  );
}