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

// 원래 비활성화된 사용자 목록 저장
const originalDisabledUsers = ref([]);


const resetSelection = async () => {
    // 모든 사용자를 활성화 상태로 초기화
    if (props.projctSeq) {
        // 프로젝트 수정 모드일 경우
        userList.value = userList.value.map(user => ({
            ...user,
            PROJCTYON: '1'
        }));

        // 프로젝트 참여 정보 다시 가져오기
        await fetchProjectParticipation();
    } else {
        // 프로젝트 생성 모드일 경우
        userList.value = userList.value.map(user => ({
            ...user,
            disabled: false  // 모든 사용자 활성화
        }));
    }

    emitUserListUpdate();
};

// 활성화된 회원을 앞으로 정렬하는 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'
            }));

            // 원래 비활성화된 사용자 목록 저장
            originalDisabledUsers.value = userList.value
                .filter(user => user.PROJCTYON === '0')
                .map(user => user.MEMBERSEQ);

            emitUserListUpdate();
        }
    }
};
// 사용자별 프로젝트 참여 기간 조회
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, oldVal) => {
    if (newVal !== oldVal) {
        await fetchProjectParticipation();
        await fetchUserProjectPeriods();
    }
}, { immediate: true });

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

    if (props.projctSeq) {
        await fetchProjectParticipation();
        await fetchUserProjectPeriods();
    } else {
        // projctSeq가 없는 경우, 초기 상태 emit
        emitUserListUpdate();
    }

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

// 사용자 선택 토글 (즉시 API 호출 없이 상태만 변경)
const toggleDisable = (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) {
        // 프로젝트 수정 모드인 경우
        if (props.projctSeq) {
            user.PROJCTYON = user.PROJCTYON === '1' ? '0' : '1';
        } else {
            user.disabled = !user.disabled;
        }

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


const hasUserChanges = () => {
    if (!props.projctSeq) return false;

    const currentDisabledUserIds = userList.value
        .filter(user => user.PROJCTYON === '0')
        .map(user => user.MEMBERSEQ);

    // 길이가 다르면 변경된 것임
    if (currentDisabledUserIds.length !== originalDisabledUsers.value.length) {
        return true;
    }

    // 길이가 같더라도 포함된 ID가 다르면 변경된 것임
    return currentDisabledUserIds.some(id => !originalDisabledUsers.value.includes(id)) ||
            originalDisabledUsers.value.some(id => !currentDisabledUserIds.includes(id));
};

// expose에 메서드 추가
defineExpose({
    resetSelection,
    fetchProjectParticipation,
    hasUserChanges
});
</script>

