<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/StatusBadge.vue";

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

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