<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">
                    <VacationModal
                    v-if="isModalOpen"
                    :isOpen="isModalOpen"
                    :myVacations="myVacations"
                    :receivedVacations="receivedVacations"
                    :userColors="userColors"
                    @click="handleProfileClick(user)"
                    @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="addVacationRequests"
                    />
                </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";

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);


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);
  }
};

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

// 공휴일 날짜(YYYY-MM-DD 형식)를 저장 (클릭 불가 처리용)
const holidayDates = ref(new Set());

// 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,
});

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] || "기타";
};

/**
 * API 이벤트(fetchedEvents)와 사용자가 선택한 날짜(selectedDates)를 병합하여
 * calendarEvents를 업데이트하는 함수
 * - 선택 이벤트는 display: "background" 옵션을 사용하여 배경으로 표시
 * - 선택된 타입에 따라 클래스(selected-am, selected-pm, selected-full)를 부여함
 */
function updateCalendarEvents() {
const selectedEvents = Array.from(selectedDates.value).map(([date, type]) => {
    return {
    title: getVacationType(type),
    start: date,
    backgroundColor: "rgba(0, 128, 0, 0.3)",
    display: "background",
    classNames: [getVacationTypeClass(type)],
    };
});
calendarEvents.value = [...fetchedEvents.value, ...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;
const clickedDate = info.date;

// 주말 (토:6, 일:0)은 클릭 무시
if (clickedDate.getDay() === 0 || clickedDate.getDay() === 6) {
    return;
}
// 공휴일이면 클릭 무시
if (holidayDates.value.has(clickedDateStr)) {
    return;
}
if (!selectedDates.value.has(clickedDateStr)) {
    const type = halfDayType.value
    ? halfDayType.value === "AM"
        ? "700101"
        : "700102"
    : "700103";
    selectedDates.value.set(clickedDateStr, type);
} else {
    selectedDates.value.delete(clickedDateStr);
}
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;
    const events = vacationList
        .map((vac) => {
        let dateStr = vac.LOCVACUDT.split("T")[0];
        let className = "fc-daygrid-event";
        let backgroundColor = userColors.value[vac.MEMBERSEQ] || "#FFFFFF";
        return {
            title: getVacationType(vac.LOCVACTYP),
            start: dateStr,
            backgroundColor,
            classNames: [getVacationTypeClass(vac.LOCVACTYP)],
        };
        })
        .filter((event) => event !== null);
    return events;
    } else {
    console.warn("📌 휴가 데이터를 불러오지 못함");
    return [];
    }
} catch (error) {
    console.error("Error fetching vacation data:", error);
    return [];
}
}

/**
 * 휴가 요청 추가 (선택된 날짜를 백엔드로 전송)
 */
async function addVacationRequests() {
if (selectedDates.value.size === 0) {
    alert("휴가를 선택해주세요.");
    return;
}
const vacationRequests = Array.from(selectedDates.value).map(([date, type]) => ({
    date,
    type,
}));
try {
    const response = await axios.post("vacation", vacationRequests);
    if (response.data && response.data.status === "OK") {
    alert("휴가가 저장되었습니다.");
    await fetchRemainingVacation();
    // 저장 후 현재 달 데이터 다시 불러오기
    const currentDate = fullCalendarRef.value.getApi().getDate();
    const year = currentDate.getFullYear();
    const month = String(currentDate.getMonth() + 1).padStart(2, "0");
    loadCalendarData(year, month);
    selectedDates.value.clear();
    updateCalendarEvents();
    } else {
    alert("휴가 저장 중 오류가 발생했습니다.");
    }
} catch (error) {
    console.error(error);
    alert("휴가 저장에 실패했습니다.");
}
}

/**
 * 공휴일 데이터 요청 및 이벤트 변환
 */
async function fetchHolidays(year, month) {
try {
    const response = await axios.get(`vacation/${year}/${month}`);
    const holidayEvents = response.data.map((holiday) => ({
    title: holiday.name,
    start: holiday.date, // "YYYY-MM-DD" 형식
    backgroundColor: "#ff6666",
    classNames: ["holiday-event"],
    }));
    return holidayEvents;
} catch (error) {
    console.error("공휴일 정보를 불러오지 못했습니다.", error);
    return [];
}
}

/**
 * 달력 월 변경 시 호출 (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>
