<template>
  <div v-show="isModalOpen" class="modal-wrapper" tabindex="-1" ref="modalContainer">
    <div class="modal-container small-modal">
      <div class="modal-title text-ct">
        <h2>{{ modalTitle }}</h2>
      </div>
      <div class="modal-content-monthly">
        <p class="alert-write text-ct" v-html="modalMessage">
        </p>
        <div v-if="modalType === 'radio'">
          <p>원본파일 : </p>
          <label></label>
          <p>동작 : </p>
          <label><input type="radio" value="move" v-model="moveOrCopy.type">덮어쓰기</label>
          <label><input type="radio" value="cancel" v-model="moveOrCopy.type">건너뛰기</label>
          <label><input type="checkbox" v-model="moveOrCopy.checkBox">항상 이 동작 사용</label>
        </div>
      </div>
      <div class="modal-end flex justify-center" style="flex-wrap: nowrap;">
        <button class="blue-btn large-btn" @click="onConfirm" ref="confirmBtn"  @keydown="handleKeydown" v-if="isModalOpen">확인</button>
        <button class="gray-btn large-btn" @click="onCancel" v-show="modalType === 'confirm'">취소</button>
        <button class="gray-btn large-btn" @click="onRadioCancel" v-show="modalType === 'radio'">취소</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '모달 제목'
    },
    message: {
      type: String,
      default: '경고 메세지를 입력해주세요. <br /> 삭제,수정,추가 등등'
    },
  },
  data() {
    return {
      isModalOpen: false,
      modalType: 'alert', // 'alert', 'confirm', 'radio' 중 하나
      modalTitle: this.title,
      modalMessage: this.message,
      moveOrCopy: {
        type: "move",
        checkBox: false
      },
      currentPromise: null,
      keyboardEventHandler: null,
      lastActiveElement: null
    }
  },
  methods: {
    // 키보드 이벤트 처리기
    handleKeydown(event) {
      // 모달 안에서 엔터키가 눌렸을 때
      if (this.isModalOpen && event.key === 'Enter') {
        event.preventDefault();
        event.stopPropagation(); // 다른 요소로 이벤트 전파 방지
        this.onConfirm(); // 확인 버튼 클릭 효과
        return false;
      }
    },
    
    // 모달 열릴 때 전역 이벤트 핸들러 추가
    addGlobalKeyboardHandler() {
      if (!this.keyboardEventHandler) {
        this.keyboardEventHandler = (event) => {
          // 모달이 열려있고 엔터키를 누를 때만 처리
          if (this.isModalOpen && (event.key === 'Enter')) {
            event.preventDefault();
            event.stopPropagation();
            
            if (event.key === 'Enter') {
              this.onConfirm();
            }
            
            return false;
          }
        };
        
        // 캡처 단계에서 이벤트를 잡아서 처리
        document.addEventListener('keydown', this.keyboardEventHandler, true);
      }
    },
    
    // 모달 닫힐 때 전역 이벤트 핸들러 제거
    removeGlobalKeyboardHandler() {
      if (this.keyboardEventHandler) {
        document.removeEventListener('keydown', this.keyboardEventHandler, true);
        this.keyboardEventHandler = null;
      }
    },
    
    // 현재 활성 요소 저장
    saveActiveElement() {
      this.lastActiveElement = document.activeElement;
    },
    
    // 이전 활성 요소로 포커스 복원
    restoreActiveElement() {
      if (this.lastActiveElement && this.lastActiveElement.focus) {
        setTimeout(() => {
          try {
            this.lastActiveElement.focus();
          } catch (e) {
            console.error('포커스 복원 중 오류:', e);
          }
        }, 100);
      }
    },

    // 모달 닫기
    closeModal() {
      this.isModalOpen = false;
      this.modalType = 'alert';
      this.removeGlobalKeyboardHandler();
      this.restoreActiveElement();
      
      // 확실한 정리를 위한 추가 타이머
      setTimeout(() => {
        if (this.keyboardEventHandler) {
          this.removeGlobalKeyboardHandler();
        }
      }, 500);
      
      // 모달 닫힘 이벤트 발생 (선택적)
      this.$emit('modal-closed');
    },

    // 일반 모달 표시
    showModal() {
      this.saveActiveElement();
      this.modalType = 'alert';
      this.isModalOpen = true;
      this.addGlobalKeyboardHandler();
      
      // 모달에 포커스 설정
      this.$nextTick(() => {
        if (this.$refs.confirmBtn) {
          this.$refs.confirmBtn.focus();
        } else if (this.$refs.modalContainer) {
          this.$refs.modalContainer.focus();
        }
      });
      
      // 모달 열림 이벤트 발생 (선택적)
      this.$emit('modal-opened');
    },

    // 확인 버튼 클릭 핸들러
    onConfirm() {
      if (this.modalType === 'alert') {
        // 단순 알림 모달은 그냥 닫기
        this.closeModal();
      } else if (this.modalType === 'confirm') {
        // confirm 모달은 true 반환
        this.resolvePromise(true);
      } else if (this.modalType === 'radio') {
        // radio 모달은 현재 선택된 값 반환
        this.resolvePromise(this.moveOrCopy);
      }
    },

    // 취소 버튼 클릭 핸들러 (일반 confirm용)
    onCancel() {
      this.resolvePromise(false);
    },

    // 취소 버튼 클릭 핸들러 (라디오 confirm용)
    onRadioCancel() {
      this.resolvePromise({
        type: "cancel",
        checkBox: false
      });
    },

    // Promise 해결 및 모달 닫기
    resolvePromise(value) {
      if (this.currentPromise && this.currentPromise.resolve) {
        this.currentPromise.resolve(value);
        this.currentPromise = null;
      }
      this.closeModal();
    },

    // Promise 생성
    createPromise() {
      let resolve, reject;
      const promise = new Promise((res, rej) => {
        resolve = res;
        reject = rej;
      });

      this.currentPromise = { promise, resolve, reject };
      return promise;
    },

    // confirm 모달 표시 (확인/취소)
    async showConfirm() {
      this.saveActiveElement();
      this.modalType = 'confirm';
      this.isModalOpen = true;
      this.addGlobalKeyboardHandler();
      
      // 모달에 포커스 설정
      this.$nextTick(() => {
        if (this.$refs.confirmBtn) {
          this.$refs.confirmBtn.focus();
        } else if (this.$refs.modalContainer) {
          this.$refs.modalContainer.focus();
        }
      });
      
      // 모달 열림 이벤트 발생 (선택적)
      this.$emit('modal-opened');
      
      return this.createPromise();
    },

    // radio confirm 모달 표시 (라디오 옵션)
    async showRadioConfirm() {
      this.saveActiveElement();
      this.modalType = 'radio';
      this.isModalOpen = true;
      this.moveOrCopy.type = "move";
      this.moveOrCopy.checkBox = false;
      this.addGlobalKeyboardHandler();
      
      // 모달에 포커스 설정
      this.$nextTick(() => {
        if (this.$refs.confirmBtn) {
          this.$refs.confirmBtn.focus();
        } else if (this.$refs.modalContainer) {
          this.$refs.modalContainer.focus();
        }
      });
      
      // 모달 열림 이벤트 발생 (선택적)
      this.$emit('modal-opened');
      
      return this.createPromise();
    },

    // 제목 설정
    setTitle(title) {
      this.modalTitle = title;
    },

    // 메시지 설정
    setMessage(message) {
      this.modalMessage = message;
    },
  },
  watch: {
    // props로 전달된 title이 변경되면 modalTitle 업데이트
    title(newVal) {
      this.modalTitle = newVal;
    },
    // props로 전달된 message가 변경되면 modalMessage 업데이트
    message(newVal) {
      this.modalMessage = newVal;
    }
  },
  // 컴포넌트가 제거될 때 이벤트 리스너 정리
  beforeDestroy() {
    this.removeGlobalKeyboardHandler();
  }
}
</script>