<template>
    <ul class="list-unstyled users-list d-flex align-items-center gap-1 flex-wrap">
        <li
            v-for="(user, index) in displayedUserList"
            :key="index"
            class="avatar pull-up"
            :class="{ 'opacity-100': isUserDisabled(user) }"
            @click.stop="showOnlyActive ? null : toggleDisable(index)"
            :style="showOnlyActive ? 'cursor: default' : ''"
            data-bs-toggle="tooltip"
            data-popup="tooltip-custom"
            data-bs-placement="top"
            :aria-label="user.MEMBERSEQ"
            :data-bs-original-title="getTooltipTitle(user)"
        >
            <img
                class="rounded-circle user-avatar border border-3"
                :class="{ 'grayscaleImg': isUserDisabled(user) }"
                :src="`${baseUrl}upload/img/profile/${user.MEMBERPRF}`"
                :style="`border-color: ${user.usercolor} !important;`"
                @error="$event.target.src = '/img/icons/icon.png'"
                alt="user"
            />
        </li>
    </ul>
</template>

<script setup>
import { onMounted, ref, nextTick, computed, watch } from 'vue';
import { useUserStore } from '@s/userList';
import { useProjectStore } from '@s/useProjectStore';
import $api from '@api';
import { useToastStore } from "@s/toastStore";

const emit = defineEmits(['user-list-update']);
const userStore = useUserStore();
const userList = ref([]);
const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
const userProjectPeriods = ref([]);
const toastStore = useToastStore();

const props = defineProps({
    projctSeq: {
        type: Number,
        required: false,
    },
    showOnlyActive: {
        type: Boolean,
        default: false
    },
    role: {
        type:String,
        required:false
    }
});

// 활성화된 회원을 앞으로 정렬하는 computed 속성
const sortedUserList = computed(() => {
    return [...userList.value].sort((a, b) => {
        const aDisabled = isUserDisabled(a);
        const bDisabled = isUserDisabled(b);

        // 활성화된 사용자가 먼저 오도록 정렬
        if (!aDisabled && bDisabled) return -1;
        if (aDisabled && !bDisabled) return 1;
        return 0;
    });
});

// showOnlyActive가 true면 활성화된 사용자만 표시, 아니면 모든 사용자 표시
const displayedUserList = computed(() => {
    if (props.showOnlyActive) {
        return sortedUserList.value.filter(user => !isUserDisabled(user));
    }
    return sortedUserList.value;
});

// 사용자의 프로젝트 참여 상태 확인
const fetchProjectParticipation = async () => {
    if (props.projctSeq) {
        const response = await $api.get(`project/members/${props.projctSeq}`);
        if (response.status === 200) {
            const projectMembers = response.data.data;
            userList.value = userList.value.map(user => ({
                ...user,
                PROJCTYON: projectMembers.find(pm => pm.MEMBERSEQ === user.MEMBERSEQ)?.PROJCTYON ?? '1'
            }));
        }
    }
};

// 사용자별 프로젝트 참여 기간 조회
const fetchUserProjectPeriods = async () => {
    if (props.projctSeq) {
        try {
            const response = await $api.get(`project/period/${props.projctSeq}`);
            if (response.status === 200) {
                userProjectPeriods.value = response.data.data;
            }
        } catch (error) {
            console.error('프로젝트 참여 기간 조회 실패:', error);
        }
    }
};

// projctSeq가 변경될 때마다 참여 기간 데이터 다시 불러오기
watch(() => props.projctSeq, async (newVal) => {
    if (newVal) {
        await fetchUserProjectPeriods();
    }
}, { immediate: true });

// 사용자 목록 호출
onMounted(async () => {
    await userStore.fetchUserList();
    userList.value = userStore.userList;

    if (props.projctSeq) {
        await fetchProjectParticipation();
        await fetchUserProjectPeriods();
    }

    nextTick(() => {
        initTooltips();
    });
});

// 툴팁 초기화 함수
const initTooltips = () => {
    const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
    tooltips.forEach((tooltip) => {
        if (tooltip._tooltip) {
            tooltip._tooltip.dispose();
        }
        new bootstrap.Tooltip(tooltip);
    });
};

// 사용자 비활성화 상태 확인
const isUserDisabled = (user) => {
    return props.projctSeq ? user.PROJCTYON === '0' : user.disabled;
};

// 클릭 시 활성화/비활성화 및 DB 업데이트
// showOnlyActive가 true일 때는 toggleDisable 함수가 실행되지 않음
const toggleDisable = async (index) => {
    if (props.showOnlyActive) return;
    const user = displayedUserList.value[index];

    // 본인 계정이면 비활성화 방지
    if (props.role === 'vote') {
        if(user.MEMBERSEQ === userStore.userInfo.id) {
            toastStore.onToast('본인은 비활성화할 수 없습니다.', 'e');
            return;
        }
    }

    if (user) {
        const newParticipationStatus = props.projctSeq
            ? user.PROJCTYON === '1'
            : !user.disabled;
        if (props.projctSeq) {
            const response = await $api.patch('project/updateYon', {
                memberSeq: user.MEMBERSEQ,
                projctSeq: props.projctSeq,
                projctYon: newParticipationStatus ? '0' : '1'
            });
            if (response.status === 200) {
                // 원래 userList에서 해당 사용자를 찾아 업데이트
                const originalIndex = userList.value.findIndex(u => u.MEMBERSEQ === user.MEMBERSEQ);
                if (originalIndex !== -1) {
                    userList.value[originalIndex].PROJCTYON = newParticipationStatus ? '0' : '1';
                }

                // 변경 후 프로젝트 목록 새로고침
                const projectStore = useProjectStore();
                await projectStore.getProjectList('', '', 'true');
                await projectStore.getMemberProjects();
            }
        } else {
            // 원래 userList에서 해당 사용자를 찾아 업데이트
            const originalIndex = userList.value.findIndex(u => u.MEMBERSEQ === user.MEMBERSEQ);
            if (originalIndex !== -1) {
                userList.value[originalIndex].disabled = newParticipationStatus;
                emitUserListUpdate();
            }
        }
    }
};

// emit
const emitUserListUpdate = () => {
    const activeUsers = userList.value.filter(user => !isUserDisabled(user));
    const disabledUsers = userList.value.filter(user => isUserDisabled(user));
    emit('user-list-update', { activeUsers, disabledUsers });
};

// 날짜 포맷 함수
const formatDate = (dateString) => {
    if (!dateString) return '';
    const date = new Date(dateString);
    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
};

// 툴팁 제목 생성 함수
const getTooltipTitle = (user) => {
    const userName = user.MEMBERSEQ === userStore.userInfo.id ? '나' : user.MEMBERNAM;

    if (props.projctSeq) {
        const periodInfo = userProjectPeriods.value.find(p => p.MEMBERSEQ === user.MEMBERSEQ);

        if (periodInfo) {
            return `${formatDate(periodInfo.userStartDate)} ~ ${formatDate(periodInfo.userEndDate)}`;
        }
    }

    return userName;
};
</script>

