<template>
    <div class="vacation-management">
        <div class="container-xxl flex-grow-1 container-p-y">
        <div class="card app-calendar-wrapper">
            <div class="row g-0">
            <div class="col app-calendar-content">
                <div class="card shadow-none border-0">
                    <ProfileList
                    @profileClick="handleProfileClick"
                    :remainingVacationData="remainingVacationData"
                    />
                <div class="card-body w-75 p-3 align-self-center">
                    <VacationModal
                    v-if="isModalOpen"
                    :isOpen="isModalOpen"
                    :myVacations="myVacations"
                    :receivedVacations="receivedVacations"
                    :userColors="userColors"
                    @close="isModalOpen = false"
                    />

                    <VacationGrantModal
                      v-if="isGrantModalOpen"
                      :isOpen="isGrantModalOpen"
                      :targetUser="selectedUser"
                      :remainingQuota="remainingVacationData[selectedUser?.MEMBERSEQ] || 0"
                      @close="isGrantModalOpen = false"
                      @updateVacation="fetchRemainingVacation"
                    />
                    <full-calendar
                    ref="fullCalendarRef"
                    :options="calendarOptions"
                    class="flatpickr-calendar-only"
                    />
                    <HalfDayButtons
                    @toggleHalfDay="toggleHalfDay"
                    @addVacationRequests="saveVacationChanges"
                    />
                </div>
                </div>
            </div>
            </div>
        </div>
        </div>
    </div>
</template>

<script setup>
import FullCalendar from "@fullcalendar/vue3";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import "flatpickr/dist/flatpickr.min.css";
import "@/assets/css/app-calendar.css";
import { reactive, ref, onMounted, nextTick } from "vue";
import axios from "@api";
import "bootstrap-icons/font/bootstrap-icons.css";
import HalfDayButtons from "@c/button/HalfDayButtons.vue";
import ProfileList from "@c/vacation/ProfileList.vue";
import { useUserStore } from "@s/userList";
import VacationModal from "@c/modal/VacationModal.vue"
import { useUserInfoStore } from "@s/useUserInfoStore";
import VacationGrantModal from "@c/modal/VacationGrantModal.vue";
import { fetchHolidays } from "@c/calendar/holiday.js";

const userStore = useUserInfoStore();
const userListStore = useUserStore();
const userList = ref([]);
const userColors = ref({});
const myVacations = ref([]); // 내가 사용한 연차 목록
const receivedVacations = ref([]); // 내가 받은 연차 목록
const isModalOpen = ref(false);
const remainingVacationData = ref({});

const isGrantModalOpen = ref(false);
const selectedUser = ref(null);

// FullCalendar 관련 참조 및 데이터
const fullCalendarRef = ref(null);
const calendarEvents = ref([]); // 최종적으로 FullCalendar에 표시할 이벤트 (API 이벤트 + 선택 이벤트)
const selectedDates = ref(new Map()); // 사용자가 클릭한 날짜 및 타입
const halfDayType = ref(null);
const vacationCodeMap = ref({}); // 휴가 코드명 저장용

// 공휴일 날짜(YYYY-MM-DD 형식)를 저장 (클릭 불가 처리용)
const holidayDates = ref(new Set());
const fetchedEvents = ref([]); // API에서 불러온 이벤트 (휴가, 공휴일)

// FullCalendar 옵션 객체 (events에 calendarEvents를 지정)
const calendarOptions = reactive({
plugins: [dayGridPlugin, interactionPlugin],
initialView: "dayGridMonth",
headerToolbar: {
    left: "today",
    center: "title",
    right: "prev,next",
},
locale: "ko",
selectable: false,
dateClick: handleDateClick,
datesSet: handleMonthChange,
events: calendarEvents,
});

onMounted(async () => {
  await userStore.userInfo();
  await fetchRemainingVacation();
});

const fetchRemainingVacation = async () => {
  try {
    const response = await axios.get("vacation/remaining");
    if (response.status === 200) {
      remainingVacationData.value = response.data.data.reduce((acc, vacation) => {
        acc[vacation.employeeId] = vacation.remainingQuota;
        return acc;
      }, {});
    }
  } catch (error) {
    console.error("🚨 남은 연차 데이터를 불러오지 못했습니다:", error);
  }
};

// 프로필 클릭 시 연차 내역 가져오기
const handleProfileClick = async (user) => {
  try {
    if (user.MEMBERSEQ === userStore.user.id) {
      // 내 프로필을 클릭한 경우
      const response = await axios.get(`vacation/history`);

      if (response.status === 200 && response.data) {
        myVacations.value = response.data.data.usedVacations || [];
        receivedVacations.value = response.data.data.receivedVacations || [];
        isModalOpen.value = true; // 내 연차 모달 열기
        isGrantModalOpen.value = false;
      } else {
        console.warn("❌ 연차 내역을 불러오지 못했습니다.");
      }
    } else {
      // 다른 사람의 프로필을 클릭한 경우
      selectedUser.value = user;
      isGrantModalOpen.value = true; // 연차 부여 모달 열기
      isModalOpen.value = false;
    }
  } catch (error) {
    console.error("🚨 연차 데이터 불러오기 실패:", error);
  }
};

const fetchUserList = async () => {
  try {
    await userListStore.fetchUserList();
    userList.value = userListStore.userList;

    if (!userList.value.length) {
      console.warn("📌 사용자 목록이 비어 있음!");
      return;
    }

    userColors.value = {};
    userList.value.forEach((user) => {
      userColors.value[user.MEMBERSEQ] = user.usercolor || "#FFFFFF";
    });
  } catch (error) {
    console.error("📌 사용자 목록 불러오기 오류:", error);
  }
};

const fetchVacationCodes = async () => {
  try {
    const response = await axios.get("vacation/codes");
    if (response.status === 200 && response.data) {
      // 배열을 객체 형태로 변환
      vacationCodeMap.value = response.data.data.reduce((acc, item) => {
        acc[item.code] = item.name; // code를 key로, name을 value로 설정
        return acc;
      }, {});
    } else {
      console.warn("❌ 공통 코드 데이터를 불러오지 못했습니다.");
    }
  } catch (error) {
    console.error("🚨 공통 코드 API 호출 실패:", error);
  }
};

// 🔹 typeCode를 통해 code명 반환
const getVacationType = (typeCode) => {
  return vacationCodeMap.value[typeCode] || "기타";
};


function updateCalendarEvents() {
  // 신규 선택한 연차(추가 대상): type이 "delete"가 아닌 항목
  const selectedEvents = Array.from(selectedDates.value)
    .filter(([date, type]) => type !== "delete")
    .map(([date, type]) => ({
      title: getVacationType(type),
      start: date,
      backgroundColor: "rgb(113 212 243 / 76%)",
      textColor: "#fff", // 흰색 텍스트
      display: "background",
      classNames: [getVacationTypeClass(type), "selected-event"]
    }));

  // 기존 백엔드에서 불러온 저장된 연차 이벤트 중,
  // 해당 날짜가 삭제 대상으로 표시되어 있으면 제거
  const filteredFetchedEvents = fetchedEvents.value.filter(event => {
    if (event.saved) { // saved 플래그가 있는 이벤트는 저장된 연차
      return selectedDates.value.get(event.start) !== "delete";
    }
    return true;
  });
  calendarEvents.value = [...filteredFetchedEvents, ...selectedEvents];
}

/**
 * ✅ 반차 유형에 따라 클래스명 지정 (색상 변경 없이 영역만 조정)
 */
 const getVacationTypeClass = (type) => {
  if (type === "700101") return "half-day-am"; // 오전반차 → 왼쪽 절반
  if (type === "700102") return "half-day-pm"; // 오후반차 → 오른쪽 절반
  return "full-day"; // 연차 → 전체 배경
};

/**
 * 날짜 클릭 이벤트
 * - 주말(토, 일)과 공휴일은 클릭되지 않음
 * - 클릭 시 해당 날짜를 selectedDates에 추가 또는 제거한 후 updateCalendarEvents() 호출
 */
 function handleDateClick(info) {
  const clickedDateStr = info.dateStr; // "YYYY-MM-DD" 형식
  const clickedDate = info.date;
  const todayStr = new Date().toISOString().split("T")[0];

  // 주말, 공휴일, 오늘 이전 날짜는 클릭 불가
  if (
    clickedDate.getDay() === 0 ||
    clickedDate.getDay() === 6 ||
    holidayDates.value.has(clickedDateStr) ||
    clickedDateStr < todayStr
  ) {
    return;
  }

  // 토글: 이미 선택된 날짜라면 해제
  if (selectedDates.value.has(clickedDateStr)) {
    selectedDates.value.delete(clickedDateStr);
    updateCalendarEvents();
    return;
  }

  // 저장된(보낸사람 없는) 연차가 있는지 확인
  const unsentVacation = myVacations.value.find(
    (vac) => vac.LOCVACUDT && vac.LOCVACUDT.startsWith(clickedDateStr) && !vac.LOCVACRMM
  );

  if (unsentVacation) {
    // 기존 저장된 연차가 있다면, 클릭 시 "delete" 플래그 지정 (즉, 숨김 처리)
    selectedDates.value.set(clickedDateStr, "delete");
  } else {
    // 그렇지 않으면 신규 연차 추가: halfDayType 값에 따라 결정
    const type = halfDayType.value
      ? (halfDayType.value === "AM" ? "700101" : "700102")
      : "700103";
    selectedDates.value.set(clickedDateStr, type);
  }

  halfDayType.value = null;
  updateCalendarEvents();
}

/**
 * 오전/오후 반차 버튼 토글
 */
function toggleHalfDay(type) {
halfDayType.value = halfDayType.value === type ? null : type;
}

/**
 * 백엔드에서 휴가 데이터를 가져와 이벤트로 변환
 */
 async function fetchVacationData(year, month) {
  try {
    const response = await axios.get(`vacation/list/${year}/${month}`);
    if (response.status === 200) {
      const vacationList = response.data;
      // 내 연차 데이터 업데이트 (사용자 본인의 연차만)
      myVacations.value = vacationList.filter(
        (vac) => vac.MEMBERSEQ === userStore.user.id
      );
      // 기존 저장된 연차 이벤트에 saved 플래그 추가
      const events = vacationList
        .filter((vac) => !vac.LOCVACRMM) // 보낸사람이 없는(저장된) 연차
        .map((vac) => {
          let dateStr = vac.LOCVACUDT.split("T")[0];
          let backgroundColor = userColors.value[vac.MEMBERSEQ] || "#FFFFFF";
          return {
            title: getVacationType(vac.LOCVACTYP),
            start: dateStr,
            backgroundColor,
            classNames: [getVacationTypeClass(vac.LOCVACTYP)],
            saved: true, // saved 플래그 추가
          };
        })
        .filter((event) => event !== null);
      return events;
    } else {
      console.warn("📌 휴가 데이터를 불러오지 못함");
      return [];
    }
  } catch (error) {
    console.error("Error fetching vacation data:", error);
    return [];
  }
}

/**
 * 휴가 요청 추가 (선택된 날짜를 백엔드로 전송)
 */
 async function saveVacationChanges() {
  // 추가할 연차: selectedDates 항목 중 type이 "delete"가 아닌 경우
  const selectedDatesArray = Array.from(selectedDates.value);
  const vacationsToAdd = selectedDatesArray
    .filter(([date, type]) => type !== "delete")
    .filter(([date, type]) =>
      // 기존 데이터에 없거나, 기존 데이터에 있더라도 보낸사람(LOCVACRMM)이 있는 경우 추가
      !myVacations.value.some(vac => vac.LOCVACUDT.startsWith(date)) ||
      myVacations.value.some(vac => vac.LOCVACUDT.startsWith(date) && vac.LOCVACRMM)
    )
    .map(([date, type]) => ({ date, type }));

  // 삭제할 연차: 기존 데이터 중 보낸사람이 없는 항목에서,
  // 해당 날짜가 "delete"로 지정되었거나 선택되지 않은 경우
  const vacationsToDelete = myVacations.value
  .filter(vac => {
    const date = vac.LOCVACUDT.split("T")[0];
    // 오직 해당 날짜가 "delete"로 선택된 경우만 삭제 대상으로 처리
    return selectedDates.value.get(date) === "delete" && !vac.LOCVACRMM;
  })
  .map(vac => {
    const id = vac.LOCVACSEQ ;
    return typeof id === "number" ? Number(id) : id;
  });

  try {
    const response = await axios.post("vacation/batchUpdate", {
      add: vacationsToAdd,
      delete: vacationsToDelete
    });
    if (response.data && response.data.status === "OK") {
      alert("✅ 휴가 변경 사항이 저장되었습니다.");
      await fetchRemainingVacation();
      const currentDate = fullCalendarRef.value.getApi().getDate();
      await loadCalendarData(currentDate.getFullYear(), currentDate.getMonth() + 1);
      // 초기화: 선택한 날짜 해제
      selectedDates.value.clear();
      updateCalendarEvents();
    } else {
      alert("❌ 휴가 저장 중 오류가 발생했습니다.");
    }
  } catch (error) {
    console.error("🚨 휴가 변경 저장 실패:", error);
    alert("❌ 휴가 저장 요청에 실패했습니다.");
  }
}

/**
 * 달력 월 변경 시 호출 (FullCalendar의 datesSet 옵션)
 */
 function handleMonthChange(viewInfo) {
const currentDate = viewInfo.view.currentStart;
const year = currentDate.getFullYear();
const month = String(currentDate.getMonth() + 1).padStart(2, "0");
loadCalendarData(year, month);
}

/**
 * 지정한 월의 데이터를 로드 (휴가, 공휴일 데이터를 병렬 요청)
 */
async function loadCalendarData(year, month) {
fetchedEvents.value = [];
const [vacationEvents, holidayEvents] = await Promise.all([
    fetchVacationData(year, month),
    fetchHolidays(year, month),
]);
// 클릭 불가 처리를 위해 공휴일 날짜 Set 업데이트
holidayDates.value = new Set(holidayEvents.map((event) => event.start));
fetchedEvents.value = [...vacationEvents, ...holidayEvents];
updateCalendarEvents();
await nextTick();
fullCalendarRef.value.getApi().refetchEvents();
}

// 컴포넌트 마운트 시 현재 달의 데이터 로드
onMounted(async () => {
await fetchUserList(); // 사용자 목록 먼저 불러오기
await fetchVacationCodes();
const today = new Date();
const year = today.getFullYear();
const month = String(today.getMonth() + 1).padStart(2, "0");
await loadCalendarData(year, month);
});
</script>

<style>

</style>
