<template>
    <div class="container text-center flex-grow-1 container-p-y">
        <div class="card">
            <div class="card-header d-flex flex-column">
                <h3>관리자 권한 부여</h3>
                <div class="user-card-container">
                    <div v-for="user in users" :key="user.id" class="user-card">
                        <!-- 프로필 사진 -->
                        <img :src="getProfileImage(user.photo)" class="profile-img" alt="프로필 사진" @error="setDefaultImage" />
                        <!-- 사용자 정보 -->
                        <div class="user-info">
                            <h5>{{ user.name }}</h5>
                        </div>
                        <!-- 권한 토글 버튼 -->
                        <label class="switch me-0">
                            <input type="checkbox" :checked="user.isAdmin" @change="toggleAdmin(user)" />
                            <span class="slider round"></span>
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from '@api';
import { useToastStore } from '@s/toastStore';

const users = ref([]);
const toastStore = useToastStore();
const baseUrl = axios.defaults.baseURL.replace(/api\/$/, "");
const defaultProfile = "/img/icons/icon.png";
const allowedUserId = 1;  // 특정 ID (변경필요!!)
// 사용자 목록 가져오기
async function fetchUsers() {
    try {
        const response = await axios.get('admin/users'); // API 경로 확인 필요

        // API 응답 구조 확인 후 데이터가 배열인지 체크
        if (!response.data || !Array.isArray(response.data.data)) {
            throw new Error("올바른 데이터 형식이 아닙니다.");
        }

        // MEMBERSEQ가 1이 아닌 회원만 필터링하여 데이터 매핑
        users.value = response.data.data
            .filter(user => user.MEMBERSEQ !== allowedUserId) // MEMBERSEQ가 1이면 제외
            .map(user => ({
                id: user.MEMBERSEQ,
                name: user.MEMBERNAM,
                photo: user.MEMBERPRF ? `${baseUrl}upload/img/profile/${user.MEMBERPRF}` : defaultProfile,
                color: user.MEMBERCOL,
                isAdmin: user.MEMBERROL === 'ROLE_ADMIN',
            }));

    } catch (error) {
        toastStore.onToast('사용자 목록을 불러오지 못했습니다.', 'e');
    }
}

// 프로필 이미지 가져오기
function getProfileImage(photo) {
    return photo || defaultProfile;
}

// 이미지 로드 오류 시 기본 이미지 설정
function setDefaultImage(event) {
    event.target.src = defaultProfile;
}

// 관리자 권한 토글 함수
async function toggleAdmin(user) {
    const requestData = {
        id: user.id,
        role: user.isAdmin ? 'MEMBER' : 'ADMIN'
    };
    try {
        const response = await axios.put('admin/role', requestData);

        if (response.status === 200) {
            user.isAdmin = !user.isAdmin;
            toastStore.onToast(`'${user.name}'의 권한이 '${requestData.role}'(으)로 변경되었습니다.`, 's');
        } else {
            throw new Error('권한 변경 실패');
        }
    } catch (error) {
        toastStore.onToast('권한 변경에 실패했습니다.', 'e');
    }
}

onMounted(fetchUsers);
</script>

<style scoped>
</style>
