<script setup>
import Template1 from "@/lib/email/templates/Template1.vue";
import { render } from "@vue-email/render";
import { forEachAsync, isEqual } from "es-toolkit";

const {
  $dayjs,
  $getdata,
  $insertapi,
  $numtoString,
  $numberToVietnamese,
  $numberToVietnameseCurrency,
  $formatDateVN,
  $getFirstAndLastName,
  $snackbar,
  $store,
} = useNuxtApp();

const payables = ref(null);
const defaultFilter = {
  status: 1,
  to_date__gte: $dayjs().format("YYYY-MM-DD"),
  to_date__lte: undefined,
};
const filter = ref(defaultFilter);
const activeDateFilter = ref(null);
const key = ref(0);

function setDateFilter(detail) {
  activeDateFilter.value = isEqual(activeDateFilter.value, detail) ? null : detail;
}

function resetDateFilter() {
  activeDateFilter.value = null;
}

onMounted(async () => {
  const payablesData = await $getdata("bizsetting", undefined, {
    filter: { classify: "duepayables" },
    sort: "index",
  });
  payables.value = payablesData;
});

watch(
  activeDateFilter,
  (val) => {
    if (!val) {
      filter.value = defaultFilter;
      contents.value = null;
    } else {
      const cutoffDate = $dayjs().add(val.time, "day").format("YYYY-MM-DD");
      const filterField = `to_date__${val.lookup}`;
      filter.value = {
        ...defaultFilter,
        [filterField]: cutoffDate,
      };
    }
  },
  { deep: true },
);

const contents = ref(null);
const isSending = ref(false);

function sanitizeContentPayment(text, maxLength = 80) {
  if (!text) return "";

  return text
    .normalize("NFD") // bỏ dấu tiếng Việt
    .replace(/[\u0300-\u036f]/g, "")
    .replace(/[^a-zA-Z0-9 _-]/g, "") // bỏ ký tự lạ
    .replace(/\s+/g, " ")
    .trim()
    .slice(0, maxLength);
}

const buildQrHtml = (url) => `
<div style="text-align: center; margin-top: 16px">
  <img
    src="${url}"
    alt="VietQR"
    width="500"
    style="display: inline-block"
  />
</div>
`;

const buildContentPayment = (data) => {
  const {
    txn_detail__transaction__customer__type__code: customerType,
    txn_detail__transaction__customer__code: customerCode,
    txn_detail__transaction__customer__fullname: customerName,
    txn_detail__transaction__product__trade_code: productCode,
    cycle,
  } = data;

  if (customerType.toLowerCase() === "cn") {
    if (customerName.length < 14) {
      return `${productCode} ${customerCode} ${customerName} TT ${cycle == 0 ? "Dat Coc" : `Dot ${cycle}`}`;
    } else {
      return `${productCode} ${customerCode} ${$getFirstAndLastName(customerName)} TT ${cycle == 0 ? "Dat Coc" : `Dot ${cycle}`}`;
    }
  } else {
    return `${productCode} ${customerCode} TT ${cycle == 0 ? "Dat Coc" : `Dot ${cycle}`}`;
  }
};

function replaceTemplateVars(html, paymentScheduleItem) {
  const {
    txn_detail__transaction__product__trade_code,
    txn_detail__transaction__customer__code,
    txn_detail__transaction__customer__fullname,
    txn_detail__transaction__customer__legal_code,
    txn_detail__transaction__customer__type__code,
    txn_detail__transaction__customer__contact_address,
    txn_detail__transaction__customer__address,
    txn_detail__transaction__customer__phone,
    from_date,
    to_date,
    remain_amount,
    cycle,
  } = paymentScheduleItem;
  return html
    .replace(/\[day]/g, String(new Date().getDate()).padStart(2, "0") || "")
    .replace(/\[month]/g, String(new Date().getMonth() + 1).padStart(2, "0") || "")
    .replace(/\[year]/g, new Date().getFullYear() || "")
    .replace(/\[product\.trade_code\]/g, txn_detail__transaction__product__trade_code)
    .replace(/\[product\.trade_code_payment\]/g, sanitizeContentPayment(txn_detail__transaction__product__trade_code))
    .replace(/\[customer\.fullname\]/g, txn_detail__transaction__customer__fullname)
    .replace(
      /\[customer\.name\]/g,
      `${txn_detail__transaction__customer__type__code.toLowerCase() == "cn" ? (txn_detail__transaction__customer__fullname.length < 14 ? txn_detail__transaction__customer__fullname : $getFirstAndLastName(txn_detail__transaction__customer__fullname)) : ""}` ||
        "",
    )
    .replace(/\[customer\.code\]/g, txn_detail__transaction__customer__code || "")
    .replace(/\[customer\.legal_code\]/g, txn_detail__transaction__customer__legal_code || "")
    .replace(
      /\[customer\.contact_address\]/g,
      txn_detail__transaction__customer__contact_address || txn_detail__transaction__customer__address || "",
    )
    .replace(/\[customer\.phone\]/g, txn_detail__transaction__customer__phone || "")
    .replace(/\[payment_schedule\.from_date\]/g, $formatDateVN(from_date) || "")
    .replace(/\[payment_schedule\.to_date\]/g, $formatDateVN(to_date) || "")
    .replace(/\[payment_schedule\.amount\]/g, $numtoString(remain_amount) || "")
    .replace(/\[payment_schedule\.amount_in_word\]/g, $numberToVietnameseCurrency(remain_amount) || "")
    .replace(/\[payment_schedule\.cycle\]/g, $numtoString(cycle) || "")
    .replace(
      /\[payment_schedule\.cycle-in-words\]/g,
      `${cycle == 0 ? "đặt cọc" : `đợt thứ ${$numberToVietnamese(cycle).toLowerCase()}`}` || "",
    )
    .replace(/\[payment_schedule\.note\]/g, `${cycle == 0 ? "Dat coc" : `Dot ${cycle}`}` || "");
}

function quillToEmailHtml(html) {
  return (
    html
      // ALIGN
      .replace(/class="([^"]*?)ql-align-center([^"]*?)"/g, 'style="text-align:center;"')
      .replace(/class="([^"]*?)ql-align-right([^"]*?)"/g, 'style="text-align:right;"')
      .replace(/class="([^"]*?)ql-align-left([^"]*?)"/g, 'style="text-align:left;"')
      .replace(/class="([^"]*?)ql-align-justify([^"]*?)"/g, 'style="text-align:justify;"')

      // FONT SIZE
      .replace(/ql-size-small/g, "")
      .replace(/ql-size-large/g, "")
      .replace(/ql-size-huge/g, "")

      // REMOVE EMPTY CLASS
      .replace(/class=""/g, "")
  );
}

const showmodal = ref(null);

function openConfirmModal() {
  showmodal.value = {
    component: "dialog/Confirm",
    title: "Xác nhận",
    width: "500px",
    height: "100px",
    vbind: {
      content: "Bạn có đồng ý gửi thông báo hàng loạt không?",
    },
  };
}

async function sendEmails() {
  isSending.value = true;
  $snackbar("Hệ thống đang xử lý ngầm yêu cầu gửi email hàng loạt...");

  const paymentScheduleData = await $getdata("payment_schedule", undefined, {
    filter: filter.value,
    sort: "to_date",
    values:
      "penalty_paid,penalty_remain,penalty_amount,penalty_reduce,batch_date,amount_remain,paid_amount,remain_amount,code,status,txn_detail,txn_detail__transaction__product,txn_detail__transaction__product__trade_code,txn_detail__transaction__code,txn_detail__code,txn_detail__transaction__customer__code,txn_detail__transaction__customer__fullname,txn_detail__transaction__customer__email,txn_detail__transaction__customer__type__code,txn_detail__transaction__customer__legal_code,txn_detail__transaction__customer__contact_address,txn_detail__transaction__customer__address,txn_detail__transaction__customer__phone,txn_detail__transaction__policy__code,txn_detail__phase__name,type__name,from_date,to_date,amount,cycle,cycle_days,status__name,detail,entry",
  });

  const emailTemplate = await $getdata("emailtemplate", { id: activeDateFilter.value.emailTemplate }, undefined, true);

  let message = emailTemplate.content.content;

  contents.value = paymentScheduleData.map((paymentSchedule) => {
    message = message.replace(/<div[^>]*>\s*<img[^>]*img\.vietqr\.io[^>]*>\s*<\/div>/g, "");
    const transfer = {
      bank: {
        code: "MB",
        name: "MB Bank",
      },
      account: {
        number: "146768686868",
        name: "CONG TY CO PHAN BAT DONG SAN UTOPIA",
      },
      content: "Thanh toán đơn #xyz",
    };

    transfer.content = buildContentPayment(paymentSchedule);
    const params = new URLSearchParams({
      addInfo: transfer.content,
      accountName: transfer.account.name,
    });
    const qrImageUrl = `https://img.vietqr.io/image/${transfer.bank.code}-${transfer.account.number}-print.png?${params.toString()}`;

    message = `
      ${message.trim()}

      ${buildQrHtml(qrImageUrl)}
    `;
    return {
      ...emailTemplate.content,
      content: undefined,
      message: replaceTemplateVars(message, paymentSchedule),
    };
  });

  await forEachAsync(contents.value, async (bigContent, i) => {
    const { imageUrl, keyword, message, subject } = bigContent;
    const tempEm = {
      content: toRaw(bigContent),
      previewMode: true,
    };

    // ===== QUILL → HTML EMAIL (INLINE STYLE) =====
    tempEm.content.message = quillToEmailHtml(message);
    let emailHtml = await render(Template1, tempEm);

    // If no image URL provided, remove image section from HTML
    if ((imageUrl ?? "").trim() === "") {
      emailHtml = emailHtml
        .replace(/<tr\s+class=["']header-row["'][^>]*>[\s\S]*?<\/tr>/gi, "")
        .replace(/\n\s*\n\s*\n/g, "\n\n");
    }

    // Replace keywords in HTML
    let finalEmailHtml = emailHtml;
    if (keyword && keyword.length > 0) {
      keyword.forEach(({ keyword, value }) => {
        if (keyword && value) {
          const regex = new RegExp(`\\{\\{${keyword}\\}\\}`, "g");
          finalEmailHtml = finalEmailHtml.replace(regex, value);
        }
      });
    }

    const response = await $insertapi(
      "sendemail",
      {
        to: paymentScheduleData[i].txn_detail__transaction__customer__email,
        content: finalEmailHtml,
        subject: replaceTemplateVars(subject, paymentScheduleData[i]) || "Thông báo từ Utopia Villas & Resort",
      },
      undefined,
      false,
    );

    if (response !== null) {
      await $insertapi(
        "productnote",
        {
          ref: paymentScheduleData[i].txn_detail__transaction__product,
          user: $store.login.id,
          detail: `Đã gửi email thông báo nhắc nợ cho sản phẩm ${paymentScheduleData[i].txn_detail__transaction__product__trade_code} vào lúc ${$dayjs().format("HH:mm ngày L")}.`,
        },
        undefined,
        false,
      );
    }
  });

  setTimeout(() => {
    $snackbar("Thông báo đã được gửi thành công đến các khách hàng.");
    isSending.value = false;
  }, 1000);
}

watch(
  filter,
  () => {
    key.value += 1;
  },
  { deep: true },
);
</script>
<template>
  <div class="is-flex is-justify-content-space-between is-align-content-center mb-4">
    <div class="buttons m-0">
      <p>Đến hạn:</p>
      <button
        v-for="payable in payables"
        :key="payable.id"
        @click="setDateFilter(payable.detail)"
        :class="['button', { 'is-primary': isEqual(activeDateFilter, payable.detail) }]"
      >
        {{ payable.detail.lookup === "lte" ? "≤" : ">" }}
        {{ payable.detail.time }} ngày
      </button>
      <button
        v-if="activeDateFilter"
        @click="resetDateFilter()"
        class="button is-white"
      >
        Xoá lọc
      </button>
    </div>
    <button
      v-if="activeDateFilter"
      @click="openConfirmModal()"
      :class="['button', 'is-light', { 'is-loading': isSending }]"
    >
      Gửi thông báo
    </button>
  </div>
  <DataView
    :key="key"
    v-bind="{
      pagename: 'payment-schedule-due',
      api: 'payment_schedule',
      setting: 'payment-schedule-debt-due',
      realtime: { time: '5', update: 'true' },
      params: {
        filter,
        sort: 'to_date',
        values:
          'penalty_paid,penalty_remain,penalty_amount,penalty_reduce,batch_date,ovd_days,amount_remain,paid_amount,remain_amount,code,status,txn_detail,txn_detail__transaction__product,txn_detail__transaction__product__trade_code,txn_detail__transaction__code,txn_detail__code,txn_detail__transaction__customer__code,txn_detail__transaction__customer__fullname,txn_detail__transaction__customer__email,txn_detail__transaction__policy__code,txn_detail__phase__name,type__name,from_date,to_date,amount,cycle,cycle_days,status__name,detail,entry',
      },
    }"
  />
  <Modal
    v-if="showmodal"
    v-bind="showmodal"
    @confirm="sendEmails()"
    @close="showmodal = undefined"
  />
  <!-- <div class="is-flex is-gap-1">
      // debug
      <Template1
        v-if="contents"
        v-for="content in contents"
        :content="content"
        previewMode
      />
    </div> -->
</template>
