<template>
    <div>
        <div v-if="loading" class="min-h-screen flex items-center justify-center">
            <p class="text-lg">Memproses aktivasi akun...</p>
        </div>

        <div v-else>

            <div class="absolute inset-0">
                <img src="/assets/images/auth/bg-gradient.png" alt="image" class="h-full w-full object-cover" />
            </div>

            <div
                class="relative flex min-h-screen items-center justify-center bg-[url(/assets/images/auth/map.png)] bg-cover bg-center bg-no-repeat px-6 py-10 dark:bg-[#060818] sm:px-16"
            >
                <img src="/assets/images/auth/coming-soon-object1.png" alt="image" class="absolute left-0 top-1/2 h-full max-h-[893px] -translate-y-1/2" />
                <img src="/assets/images/auth/coming-soon-object2.png" alt="image" class="absolute left-24 top-0 h-40 md:left-[30%]" />
                <img src="/assets/images/auth/coming-soon-object3.png" alt="image" class="absolute right-0 top-0 h-[300px]" />
                <img src="/assets/images/auth/polygon-object.svg" alt="image" class="absolute bottom-0 end-[28%]" />
                <div
                    class="relative w-full max-w-[870px] rounded-md bg-[linear-gradient(45deg,#fff9f9_0%,rgba(255,255,255,0)_25%,rgba(255,255,255,0)_75%,_#fff9f9_100%)] p-2 dark:bg-[linear-gradient(52.22deg,#0E1726_0%,rgba(14,23,38,0)_18.66%,rgba(14,23,38,0)_51.04%,rgba(14,23,38,0)_80.07%,#0E1726_100%)]"
                >
                    <div class="relative flex flex-col justify-center rounded-md bg-white/60 px-6 py-20 backdrop-blur-lg dark:bg-black/50 lg:min-h-[758px]">
                        
                        <div class="mx-auto w-full max-w-[440px]">
                            <div class="mb-7">
                                <h1 class="mb-3 text-2xl font-bold !leading-snug dark:text-white">Aktivasi</h1>
                                <p>{{ message }}</p>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>
<script lang="ts" setup>
    import { computed } from 'vue';
    import appSetting from '@/app-setting';
    import { useAppStore } from '@/stores/index';
    import { useRouter } from 'vue-router';
    useHead({ title: 'Aktivasi' });

    const router = useRouter();
    const route = useRoute();
    const loading = ref(true);
    const message = ref('');

    definePageMeta({
        layout: 'auth-layout',
    });
    const store = useAppStore();
    const config = useRuntimeConfig();
    
    onMounted(async () => {
        const uid = route.params.uid as string | undefined;
        if (!uid) {
            message.value = 'UID tidak valid atau hilang.';
            loading.value = false;
            return;
        }   
        const token = route.params.token as string | undefined;
        if (!token) {
            message.value = 'Token tidak valid atau hilang.';
            loading.value = false;
            return;
        }

        try {
            const data = await $fetch(`${config.public.apiBase}/auth/users/activation/`, {
                method: 'POST',
                body: { "uid": uid, "token": token }, 
            });

            message.value = 'Akun kamu telah berhasil diaktivasi dan siap digunakan!';
        } catch (err) {
            console.error('Error during activation:', err);
            if (err.response && err.response.status === 400) {
                message.value = 'Aktivasi akun gagal. Pastikan link aktivasi yang kamu gunakan benar.';
            } else if (err.response && err.response.status === 403) {
                message.value = 'Aktivasi akun gagal. Token mungkin sudah kadaluarsa atau tidak valid.';
            }   else if (err.response && err.response.status === 404) {
                message.value = 'Akun tidak ditemukan atau sudah diaktivasi.';
            } else {
                message.value = 'Terjadi kesalahan saat menghubungi server.';
            }
        } finally {
            loading.value = false;
        }
    });
</script>
