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

// 사용자 목록 가져오기
async function fetchUsers() {
    try {
        const response = await axios.get('admin/users'); // API 경로 확인 필요

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

        // 데이터 매핑 (올바른 형식으로 변환)
        users.value = response.data.data.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) {
        console.error('사용자 목록을 불러오는 중 오류 발생:', 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); // API 경로 수정

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

onMounted(fetchUsers);
</script>

<style scoped>
.user-card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-top: 20px;
}
.user-card {
    width: 200px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.profile-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
}
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
    margin-top: 5px;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
input:checked + .slider {
    background-color: #4CAF50;
}

input:checked + .slider:before {
    transform: translateX(24px);
}
</style>
