<template>
    <BaseLayout>
        <main class="content">
            <div class="container-fluid p-0">
                <h1 class="h3 mb-3">Settings</h1>
                <div class="row">
                    <div class="col-md-3 col-xl-2">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">Profile Settings</h5>
                            </div>
                            <div class="list-group list-group-flush" role="tablist">
                                <router-link class="list-group-item list-group-item-action" :to="{name: 'account'}"
                                             active-class="dummy" exact-active-class="active">Account
                                </router-link>
                                <router-link class="list-group-item list-group-item-action" :to="{name: 'password'}"
                                             active-class="active">Password
                                </router-link>
                                <router-link class="list-group-item list-group-item-action" :to="{name: 'privacy'}"
                                             active-class="active">Privacy and safety
                                </router-link>
                                <router-link class="list-group-item list-group-item-action" :to="{name: 'email'}"
                                             active-class="active">Email notifications
                                </router-link>
                                <router-link class="list-group-item list-group-item-action"
                                             :to="{name: 'notifications'}" active-class="active">Web notifications
                                </router-link>
                                <router-link class="list-group-item list-group-item-action" :to="{name: 'preferences'}"
                                             active-class="active">Preferences
                                </router-link>
                                <router-link class="list-group-item list-group-item-action" :to="{name: 'data'}"
                                             active-class="active">Your data
                                </router-link>
                                <a class="list-group-item list-group-item-action delete" @click="deleteAccount"
                                   href="#">
                                    Delete account
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-9 col-xl-10">
                        <div class="tab-content">
                            <router-view></router-view>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </BaseLayout>
</template>

<script>
import BaseLayout from "@/components/BaseLayout.vue";
import {mapActions, mapGetters, mapMutations} from "vuex";

export default {
    name: 'Settings',
    components: {BaseLayout},
    computed: {
        ...mapGetters(['signAuth'])
    },
    methods: {
        ...mapActions(['getHomeServers']),
        ...mapMutations(['logout']),
        async deleteAccount() {
            if (!confirm('Are you sure you want to permanently delete your account? ' +
                'All your data will be deleted and you will not be able to log back in. This cannot be undone.')) {
                return;
            }
            try {
                const servers = await this.getHomeServers();
                const response = await servers.delete(this.signAuth, '/api/account/');
                if (!response || !response.ok) {
                    const errorBody = response ? await response.json().catch(() => ({})) : {};
                    alert('Account deletion failed: ' + (errorBody.detail || response?.statusText || 'unknown error'));
                    return;
                }
                alert('Your account has been permanently deleted.');
                this.logout();
            } catch (error) {
                console.error('Account deletion failed', error);
                alert('Account deletion failed: ' + error);
            }
        },
    }
}
</script>

<style scoped>
.delete {
    color: var(--bs-danger);
}

.delete:hover {
    color: var(--bs-light);
    background-color: var(--bs-danger);
}
</style>