<template>
    <SocketEnvironment>
        <div class="container">
                <Box>
                    <Button @click="router.push('/servers')">Choisir un serveur</Button>
                    <Button @click="router.push('/terms')">Terms</Button>
                    <Button @click="router.push('/privacy')">Privacy</Button>
                    <Button @click="globalStore.toogleTheme()">Changer le thème</Button>
                    <p>{{ guildId }}</p>
                </Box>
                <UserAction/>
        </div>
    </SocketEnvironment>
</template>
<script setup>
import Box from '@/components/UI/Box.vue';
import Button from '@/components/UI/Button.vue';
import SocketEnvironment from '@/utils/SocketEnvironment.vue';
import UserAction from '@/components/Features/UserAction.vue';
import { watch } from 'vue';
import { useRouter } from 'vue-router';
import { useGlobalStore } from '@/stores/globalStore';
import { useUserStore } from '@/stores/userStore';
import { IOListener, IORequest } from '@/utils/IORequest';
import { onMounted, ref } from 'vue';

const props = defineProps({
    guildId: {
        type: String,
        default: null
    }
});

const guildId = props.guildId;
if (!guildId) {
    globalStore.setLastGuild(null);
    router.push('/servers');
} 

const globalStore = useGlobalStore();
const userStore = useUserStore();
const router = useRouter();
const alreadyLoaded = ref(false);

watch(() => globalStore.isLoading, (value, oldValue) => {
    if(!value && oldValue != value) {
        loadInteface();
    }
})

onMounted(() => {
    if(globalStore.lastGuild && !globalStore.isLoading) {
        loadInteface();
    } 
});

watch(() => userStore.userInfo, (newValue, oldValue) => {
    if(userStore.userInfo) {
        checkGuildAvailability();
    }
}, { immediate: true });    

function loadInteface() {
    if(alreadyLoaded.value) return;
    console.log("Loading interface")
    console.log("Guild ID:", guildId);
    checkGuildAvailability();

    IORequest("/USERS/LIST", (data) => {
        console.log("User list received:", data);
    })

    alreadyLoaded.value = true;
}

function checkGuildAvailability() {
    console.log("Checking guild availability for ID:", guildId);
   if(userStore.userInfo.guilds.filter(guild => guild.id === guildId).length === 0) {
        globalStore.setLastGuild(null);
        console.warn("Guild not found, redirecting to servers list.");
        router.push('/servers');
    } else {
        globalStore.setLastGuild(guildId);
        IORequest("/GUILD/JOIN", (response) => {
            if(response === true) {
                console.log("Successfully joined guild:", guildId);
            } else {
                console.error("Failed to join guild:", response);
                globalStore.setLastGuild(null);
                router.push('/servers');
            }
        }, guildId);
    }
}





</script>
<style scoped>  
.container {
    padding: 20px;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.container {
    padding: 20px;;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}
</style>