<template>
    <div v-if="isOpen" class="modal-dialog" @click.self="closeModal">
      <div class="modal-content">
        <h5 class="modal-title">📅 {{ targetUser.name }}님의 연차 부여</h5>
        <button class="close-btn" @click="closeModal">✖</button>

        <div class="modal-body">
          <p>해당 직원에게 부여할 연차 개수를 선택하세요. (최대 2개)</p>

          <div class="vacation-item">
            <button @click="decreaseCount" :disabled="grantCount <= 0">-</button>
            <span>{{ grantCount }}</span>
            <button @click="increaseCount" :disabled="grantCount >= maxQuota">+</button>
          </div>

          <p class="">현재 보유 연차: <strong>{{ remainingQuota }}</strong></p>
        </div>

        <div class="">
          <button class="save-btn" @click="saveVacationGrant" :disabled="grantCount === 0">
            ✅ 저장
          </button>
          <button class="cancel-btn" @click="closeModal">취소</button>
        </div>
      </div>
    </div>
  </template>

  <script setup>
  import { ref, defineProps, defineEmits, watch } from "vue";
  import axios from "@api";

  const props = defineProps({
    isOpen: Boolean, // 모달 상태
    targetUser: Object, // 선택한 사용자 정보
    remainingQuota: Number, // 현재 부여된 연차 개수
  });

  const emit = defineEmits(["close", "updateVacation"]);

  const grantCount = ref(0);
  const maxQuota = 2; // 최대 부여 가능 개수

  // ✅ 연차 개수 증가
  const increaseCount = () => {
    if (grantCount.value < maxQuota) {
      grantCount.value++;
    }
  };

  // ✅ 연차 개수 감소
  const decreaseCount = () => {
    if (grantCount.value > 0) {
      grantCount.value--;
    }
  };

  // ✅ 연차 부여 저장 요청
  const saveVacationGrant = async () => {
    try {
      const response = await axios.post("vacation/grant", {
        senderId: props.targetUser.senderId, // 로그인한 사용자 ID
        receiverId: props.targetUser.MEMBERSEQ, // 대상 사용자 ID
        type: "700103", // 연차 (반차 없음)
        count: grantCount.value, // 선택한 개수
      });

      if (response.data && response.data.status === "OK") {
        alert("✅ 연차가 부여되었습니다.");
        emit("updateVacation"); // ✅ 연차 정보 갱신 요청
        closeModal();
      } else {
        alert("🚨 연차 추가 중 오류가 발생했습니다.");
      }
    } catch (error) {
      console.error("🚨 연차 추가 실패:", error);
      alert("연차 추가에 실패했습니다.");
    }
  };

  // ✅ 모달 닫기
  const closeModal = () => {
    emit("close");
  };

  // ✅ 모달이 열릴 때 초기 값 설정
  watch(() => props.isOpen, (newVal) => {
    if (newVal) {
      grantCount.value = 0; // 초기화
    }
  });
  </script>

  <style scoped>
  </style>
