<template>
    <div class="activate-container">
        <h1>{{ $t('activate.title') }}</h1>
        <p v-if="user">{{ $t('activate.message', { username: user.username }) }}</p>
        <form @submit.prevent="activateAccount">
            <div>
                <label>{{ $t('activate.token') }}</label>
                <input type="text" v-model="token" required />
            </div>
            <div>
                <button type="submit">{{ $t('activate.submit') }}</button>
            </div>
        </form>
        <ErrorDialog ref="errorDialog" />
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import apiClient from '@/utils/axios.js';
import ErrorDialog from '@/dialogues/standard/ErrorDialog.vue';

export default {
    name: 'ActivateView',
    data() {
        return {
            token: this.$route.query.token || ''
        };
    },
    components: {
        ErrorDialog,
    },
    computed: {
        ...mapGetters(['user'])
    },
    methods: {
        async activateAccount() {
            try {
                const response = await apiClient.post('/api/auth/activate', { token: this.token });
                if (response.status === 200) {
                    this.user.active = true;
                    this.$router.push('/'); // Redirect to login after activation
                }
            } catch (error) {
                console.error('Error activating account:', error);
                this.$refs.errorDialog.open(this.$t('activate.failure'));
            }
        }
    }
};
</script>

<style scoped>
.activate-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 2em;
    box-sizing: border-box;
}

form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

label {
    display: block;
    margin-bottom: 0.5em;
}

input[type="text"] {
    width: 100%;
    padding: 0.5em;
    margin-bottom: 1em;
    box-sizing: border-box;
}

button {
    padding: 0.5em 1em;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
}

button:hover {
    background-color: #0056b3;
}
</style>
