<template>
     <div id="modal_account_edit" class="w-[600px] h-[536px] bg-[#FFFFFF] rounded
        shadow-lg flex flex-col">
        <ModalHeader :headerText='i18next.t("AcctMgmt.AccountInformation")'/>
        <main class="flex main-part flex-col px-6 mt-6">
            <h1 id="acct_info_user_name" class="text-[32px] leading-[64px] font-medium mb-2">{{ name }}</h1>
            <div class="status-container">
                <Badge displayText="Admin" :isActivated="is_admin"/>
                <Badge displayText="Suspended" :isActivated="!is_active"/>
            </div>
            <div id="account_visit_info" class="border-b border-b-[#CBD5E1] border-b-[1px] pb-4">
                Account: <span class="text-[#0099FF]">{{ username }}</span>, total visits <span class="text-[#0099FF]">
                    {{ visitTime }}
                </span> times.
            </div>
        </main>
        <main class="flex main-part flex-col px-6 py-4">
            <ul class="leading-[21px] list-disc list-inside">
                <li>[2023-01-01 08:30:25] Account created by</li>
            </ul>
        </main>
    </div>
</template>

<script setup>
// The Lucia project.
// Copyright 2024-2026 DSP, inc.  All rights reserved.
// Authors:
//   cindy.chang@dsp.im (Cindy Chang), 2024/5/30
//   imacat.yang@dsp.im (imacat), 2023/9/23
/**
 * @module views/AccountManagement/ModalAccountInfo Account
 *   information modal displaying user details, admin/suspended
 *   status badges, and visit count.
 */

import { onBeforeMount, computed, ref } from 'vue';
import i18next from '@/i18n/i18n.js';
import { useAcctMgmtStore } from '@/stores/acctMgmt';
import ModalHeader from './ModalHeader.vue';
import Badge from '../../components/Badge.vue';

const acctMgmtStore = useAcctMgmtStore();
const visitTime = ref(0);
const currentViewingUser = computed(() => acctMgmtStore.currentViewingUser);
const {
    username,
    name,
    is_admin,
    is_active,
} = currentViewingUser.value;

onBeforeMount(async() => {
    await acctMgmtStore.getUserDetail(currentViewingUser.value.username);
    visitTime.value = currentViewingUser.value.detail.visits;
});
</script>
