<template>
  <div
    id="modal_delete_acct_alert"
    class="flex shadow-lg rounded-lg w-[564px] flex-col bg-[#ffffff]"
  >
    <div class="flex decoration-bar bg-[#FF3366] h-2 rounded-t"></div>
    <main
      id="delete_acct_modal_main"
      class="flex flex-col items-center justify-center"
    >
      <img
        src="@/assets/icon-large-exclamation.svg"
        alt="!"
        class="flex mt-[36px]"
      />
      <h1 class="flex mt-4 text-xl font-medium">
        {{ i18next.t("AcctMgmt.DelteQuestion").toUpperCase() }}
      </h1>
      <div class="clauses flex flex-col mt-4 mb-8 px-8">
        <h2 class="flex leading-[21px]">
          {{ i18next.t("The") }}&nbsp;<span class="text-[#FF3366]">
            {{ i18next.t("AcctMgmt.DeleteFirstClause").toUpperCase() }}
          </span>
        </h2>
        <h2 class="flex leading-[21px]">
          {{ i18next.t("AcctMgmt.DeleteSecondClause") }}
        </h2>
      </div>
    </main>
    <footer class="flex justify-center py-3 border-t-2 border-t-gray-50 gap-4">
      <button
        id="calcel_delete_acct_btn"
        class="flex justify-center items-center rounded-full cursor-pointer w-[100px] h-[40px] bg-[#FF3366] text-[#ffffff]"
        @click="onNoBtnClick"
      >
        {{ i18next.t("No") }}
      </button>
      <button
        id="sure_to_delete_acct_btn"
        class="flex justify-center items-center rounded-full cursor-pointer w-[100px] h-[40px] border-2 border-[#FF3366] text-[#FF3366]"
        @click="onDeleteConfirmBtnClick"
      >
        {{ i18next.t("Yes") }}
      </button>
    </footer>
  </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/ModalDeleteAlert Confirmation
 *   modal for account deletion with yes/no buttons.
 */

import { useModalStore } from "@/stores/modal";
import { useRouter } from "vue-router";
import { useAcctMgmtStore } from "@/stores/acctMgmt";
import i18next from "@/i18n/i18n.js";
import { useToast } from "vue-toast-notification";

const acctMgmtStore = useAcctMgmtStore();
const modalStore = useModalStore();
const toast = useToast();
const router = useRouter();

/** Confirms account deletion, shows success toast, and navigates to account admin page. */
const onDeleteConfirmBtnClick = async () => {
  if (
    await acctMgmtStore.deleteAccount(acctMgmtStore.currentViewingUser.username)
  ) {
    toast.success(i18next.t("AcctMgmt.MsgAccountDeleteSuccess"));
    modalStore.closeModal();
    acctMgmtStore.setShouldUpdateList(true);
    await router.push("/account-admin");
  }
};

/** Cancels deletion and closes the modal. */
const onNoBtnClick = () => {
  modalStore.closeModal();
};
</script>
