<template>
    <ul class="row gx-2 mb-0 list-inline ">
        <li
            v-for="(user, index) in sortedUserList"
            :key="index"
            class="col-4 mb-3"
            :class="{ newRow: (index + 1) % 4 === 0 }"
            @click="$emit('profileClick', user)"
            data-bs-placement="top"
            :aria-label="user.MEMBERSEQ"
        >
            <div class="ratio ratio-1x1 mb-0 profile-list position-relative">
                <img
                    v-if="user.MEMBERSEQ === employeeId"
                    src="/img/icons/Crown.png"
                    alt="Crown"
                    class="start-50 translate-middle crown-icon"
                />
                <img
                    class="rounded-circle profile-img"
                    :src="getUserProfileImage(user.MEMBERPRF)"
                    alt="user"
                    :style="getDynamicStyle(user)"
                    @error="setDefaultImage"
                    @load="showImage"
                />
            </div>
            <span class="mt-2 text-sm-center d-block fs-6 remaining-vacation">
                {{ remainingVacationData[user.MEMBERSEQ] || 0 }}
            </span>
        </li>
    </ul>
</template>

<script setup>
import { onMounted, ref, computed, nextTick } from "vue";
import { useUserInfoStore } from "@s/useUserInfoStore";
import { useUserStore } from "@s/userList";
import $api from "@api";

defineEmits(["profileClick"]);
defineProps({ remainingVacationData: Object });

const userStore = useUserInfoStore();
const userListStore = useUserStore();

const userList = ref([]);
const baseUrl = $api.defaults.baseURL.replace(/api\/$/, "");
const defaultProfile = "/img/icons/icon.png";
const employeeId = ref(null);
const userColors = ref({});
const windowWidth = ref(window.innerWidth);

const updateWindowWidth = () => {
windowWidth.value = window.innerWidth;
};

onMounted(async () => {
window.addEventListener("resize", updateWindowWidth);

await userStore.userInfo();
employeeId.value = userStore.user?.id ?? null;

await userListStore.fetchUserList();
userList.value = userListStore.userList;

userList.value.forEach(user => {
    userColors.value[user.MEMBERSEQ] = user.usercolor || "#ccc";
});

nextTick(() => {
    document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(tooltip => {
    new bootstrap.Tooltip(tooltip);
    });
});
});

const sortedUserList = computed(() => {
    if (!employeeId.value) return [];

    // 모든 사용자 포함 (관리자 필터링 제거)
    const myProfile = userList.value.find(user => user.MEMBERSEQ === employeeId.value);
    const otherUsers = userList.value.filter(user => user.MEMBERSEQ !== employeeId.value);

    return myProfile ? [myProfile, ...otherUsers] : otherUsers;
});

const getUserProfileImage = (profilePath) =>
profilePath && profilePath.trim() ? `${baseUrl}upload/img/profile/${profilePath}` : defaultProfile;

const setDefaultImage = (event) => (event.target.src = defaultProfile);
const showImage = (event) => (event.target.style.visibility = "visible");

const getDynamicStyle = (user) => ({
borderWidth: "3px",
borderColor: user.usercolor || "#ccc",
borderStyle: "solid",
});
</script>

<style scoped>
.crown-icon {
    width: 90%;
    height: 70%;
    z-index: 0;
    top: -7%
}
</style>
