<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"
                @click="handleToggle($event, 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 경로 확인
    if (!response.data || !Array.isArray(response.data.data)) {
    throw new Error("올바른 데이터 형식이 아닙니다.");
    }
    users.value = response.data.data
    .filter(user => user.MEMBERSEQ !== allowedUserId)
    .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 handleToggle(event, user) {
// Prevent the default checkbox toggle behavior
event.preventDefault();

// 저장: 현재 상태를 기반으로 변경 요청 (체크박스는 아직 변하지 않았음)
const originalState = user.isAdmin;
const newState = !originalState;

const requestData = {
    id: user.id,
    role: originalState ? 'MEMBER' : 'ADMIN'
};

try {
    const response = await axios.put('admin/role', requestData);
    if (response.status === 200) {
    // 서버 요청 성공 시에만 상태를 업데이트
    user.isAdmin = newState;
    toastStore.onToast(`'${user.name}'의 권한이 '${requestData.role}'(으)로 변경되었습니다.`, 's');
    } else {
    throw new Error('권한 변경 실패');
    }
} catch (error) {
    // 에러 발생 시 상태를 변경하지 않음
    toastStore.onToast('권한 변경에 실패했습니다.', 'e');
}
}

onMounted(fetchUsers);
</script>

<style scoped>
/* 필요에 따라 스타일 추가 */
</style>
