<template>
  <div class="">
    <p class="has-text-centered title is-4 has-text-danger mb-4">
      Vui lòng kiểm tra kỹ thông tin trước khi thay đổi ngày đến hạn
    </p>

    <div
      v-if="loadingData"
      class="has-text-centered py-5"
    >
      <SvgIcon v-bind="{ name: 'loading.svg', type: 'primary', size: 18 }" />
      <p class="mt-2">
        {{ isVietnamese ? "Đang tải thông tin công nợ..." : "Loading payment schedule information..." }}
      </p>
    </div>

    <div v-else-if="paymentScheduleData">
      <div class="content">
        <div class="columns is-multiline is-mobile">
          <div class="column is-4">
            <strong>{{ isVietnamese ? "Mã:" : "Schedule Code:" }}</strong>
            <p>{{ paymentScheduleData.code || "-" }}</p>
          </div>
          <div class="column is-4">
            <strong>{{ isVietnamese ? "Trạng thái:" : "Status:" }}</strong>
            <p
              :class="{
                'has-text-success': paymentScheduleData.status__name === 'Đã xác nhận',
                'has-text-warning': paymentScheduleData.status__name === 'Chưa xác nhận',
              }"
            >
              {{ paymentScheduleData.status__name || "-" }}
            </p>
          </div>
          <div class="column is-4">
            <strong>{{ isVietnamese ? "Loại thanh toán:" : "Payment Type:" }}</strong>
            <p>{{ paymentScheduleData.type__name || "-" }}</p>
          </div>

          <div class="column is-4">
            <strong>{{ isVietnamese ? "Tiền gốc theo kỳ thanh toán:" : "Amount:" }}</strong>
            <p class="has-text-weight-bold has-text-primary">
              {{ $numtoString(paymentScheduleData.amount) }}
            </p>
          </div>
          <div class="column is-4">
            <strong>{{ isVietnamese ? "Ngày đến hạn hiện tại:" : "Current Due Date:" }}</strong>
            <p class="has-text-weight-bold">
              {{ formatDate(paymentScheduleData.to_date) }}
            </p>
          </div>
          <div class="column is-4">
            <strong>{{ isVietnamese ? "Ngày tính lãi:" : "Penalty Date:" }}</strong>
            <p :class="paymentScheduleData.batch_date ? 'has-text-danger' : ''">
              {{ formatDate(paymentScheduleData.batch_date) || "Chưa tính lãi" }}
            </p>
          </div>
        </div>

        <hr />

        <p class="title is-6">
          {{ isVietnamese ? "Thông tin Giao dịch liên quan" : "Related Transaction Information" }}
        </p>
        <div class="columns is-multiline is-mobile">
          <div class="column is-4">
            <strong>{{ isVietnamese ? "Mã giao dịch:" : "Transaction Code:" }}</strong>
            <p>
              {{ paymentScheduleData.txn_detail__transaction__code || "-" }}
            </p>
          </div>
          <div class="column is-4">
            <strong>{{ isVietnamese ? "Khách hàng:" : "Customer:" }}</strong>
            <p>
              {{ paymentScheduleData.txn_detail__transaction__customer__fullname || "-" }}
            </p>
          </div>
          <div class="column is-4">
            <strong>{{ isVietnamese ? "Chính sách:" : "Policy:" }}</strong>
            <p>
              {{ paymentScheduleData.txn_detail__transaction__policy__code || "-" }}
            </p>
          </div>
        </div>
      </div>

      <hr />

      <div v-if="canEditDueDate">
        <Caption
          class="mb-4"
          v-bind="{ title: 'Thay đổi ngày đến hạn', size: 20 }"
        />

        <div class="field">
          <label class="label has-text-weight-bold">{{ isVietnamese ? "Ngày đến hạn mới" : "New Due Date" }}</label>
          <div class="control">
            <Datepicker
              :record="dateRecord"
              attr="newDueDate"
              @date="updateDueDate"
              position="is-bottom-left"
              :mindate="minDate"
            />
          </div>
          <p
            v-if="dateError"
            class="help is-danger"
          >
            {{ dateError }}
          </p>
        </div>

        <div class="field mt-5">
          <label class="label has-text-weight-bold">{{ isVietnamese ? "Mã xác nhận" : "Confirmation Code" }}</label>
          <div class="control">
            <div class="field has-addons">
              <div class="control is-expanded">
                <input
                  class="input"
                  type="text"
                  :placeholder="isVietnamese ? 'Nhập mã xác nhận' : 'Enter confirmation code'"
                  v-model="userInputCaptcha"
                  @keydown.enter="handleUpdate"
                />
              </div>
              <div class="control">
                <a
                  class="button is-static has-text-weight-bold has-background-grey-lighter"
                  style="font-family: &quot;Courier New&quot;, monospace; letter-spacing: 2px"
                >
                  {{ captchaCode }}
                </a>
              </div>
              <div class="control">
                <button
                  class="button is-info is-light"
                  @click="generateCaptcha"
                  :title="isVietnamese ? 'Tạo mã mới' : 'Generate new code'"
                >
                  <SvgIcon v-bind="{ name: 'refresh.svg', type: 'primary', size: 23 }"></SvgIcon>
                </button>
              </div>
            </div>
          </div>
          <p
            v-if="!isCaptchaValid && userInputCaptcha.length > 0"
            class="help is-danger"
          >
            Mã xác nhận không đúng.
          </p>
        </div>
      </div>

      <div
        v-else
        class="notification is-warning"
      >
        <p class="has-text-weight-bold">
          {{ isVietnamese ? "Không thể thay đổi ngày đến hạn" : "Cannot change due date" }}
        </p>
      </div>
    </div>

    <div class="field is-grouped is-grouped-left mt-5">
      <p class="control">
        <button
          v-if="canEditDueDate"
          class="button is-success has-text-white"
          :class="{ 'is-loading': isLoading }"
          @click="handleUpdate"
          :disabled="!isUpdateValid || isLoading"
        >
          <span>{{ isVietnamese ? "Cập nhật ngày đến hạn" : "Update Due Date" }}</span>
        </button>
        <button
          class="button"
          @click="emit('close')"
        >
          <span>{{ isVietnamese ? "Đóng" : "Close" }}</span>
        </button>
      </p>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { useNuxtApp } from "#app";
import { useStore } from "@/stores/index";
import dayjs from "dayjs";

const props = defineProps({
  scheduleItemId: {
    type: [Number, String],
    required: true,
  },
});

const emit = defineEmits(["close", "updated"]);

const store = useStore();
const { $getdata, $patchapi, $snackbar } = useNuxtApp();

const isLoading = ref(false);
const loadingData = ref(true);
const paymentScheduleData = ref(null);
const dateRecord = ref({ newDueDate: null });
const captchaCode = ref("");
const userInputCaptcha = ref("");

const isVietnamese = computed(() => store.lang === "vi");

// Kiểm tra xem có thể sửa ngày đến hạn không (chưa tính lãi và chưa thanh toán)
const canEditDueDate = computed(() => {
  const hasNoPenaltyCalculated =
    paymentScheduleData.value?.batch_date === null || paymentScheduleData.value?.batch_date === undefined;
  const isNotPaid = paymentScheduleData.value?.status !== 2;
  return hasNoPenaltyCalculated && isNotPaid;
});

// Ngày tối thiểu (phải lớn hơn ngày hiện tại)
const minDate = computed(() => {
  const currentDate = paymentScheduleData.value?.to_date;
  if (currentDate) {
    return dayjs(currentDate).add(1, "day").format("YYYY-MM-DD");
  }
  return dayjs().add(1, "day").format("YYYY-MM-DD");
});

// Kiểm tra lỗi ngày
const dateError = computed(() => {
  if (!dateRecord.value.newDueDate) return "";

  const selectedDate = dayjs(dateRecord.value.newDueDate);
  const currentDueDate = dayjs(paymentScheduleData.value?.to_date);

  if (selectedDate.isBefore(currentDueDate) || selectedDate.isSame(currentDueDate)) {
    return isVietnamese.value
      ? "Ngày đến hạn mới phải lớn hơn ngày đến hạn hiện tại"
      : "New due date must be after current due date";
  }

  return "";
});

const updateDueDate = (date) => {
  dateRecord.value.newDueDate = date;
};

const generateCaptcha = () => {
  captchaCode.value = Math.random().toString(36).substring(2, 7).toUpperCase();
  userInputCaptcha.value = "";
};

const isCaptchaValid = computed(() => {
  return userInputCaptcha.value.toLowerCase() === captchaCode.value.toLowerCase();
});

const isUpdateValid = computed(() => {
  return (
    canEditDueDate.value &&
    dateRecord.value.newDueDate &&
    !dateError.value &&
    isCaptchaValid.value &&
    userInputCaptcha.value.length > 0
  );
});

const formatDate = (dateString) => {
  if (!dateString) return "-";
  return dayjs(dateString).format("L");
};

const fetchPaymentScheduleData = async () => {
  loadingData.value = true;
  try {
    const data = await $getdata("payment_schedule", { id: props.scheduleItemId }, undefined, true);
    paymentScheduleData.value = data;

    // Set initial value for new due date
    if (data?.to_date) {
      dateRecord.value.newDueDate = data.to_date;
    }
  } catch (e) {
    console.error("Error fetching payment schedule data:", e);
    $snackbar(
      isVietnamese.value ? "Không thể tải thông tin công nợ." : "Failed to load payment schedule information.",
      "Lỗi",
      "Error",
    );
  } finally {
    loadingData.value = false;
  }
};

const handleUpdate = async () => {
  if (!isUpdateValid.value) {
    if (!isCaptchaValid.value) {
      $snackbar(
        isVietnamese.value ? "Vui lòng nhập đúng mã xác nhận." : "Please enter the correct confirmation code.",
        "Cảnh báo",
        "Warning",
      );
    } else if (dateError.value) {
      $snackbar(dateError.value, "Cảnh báo", "Warning");
    } else if (!canEditDueDate.value) {
      $snackbar(
        isVietnamese.value ? "Không thể thay đổi ngày đến hạn." : "Cannot change due date.",
        "Cảnh báo",
        "Warning",
      );
    }
    return;
  }

  isLoading.value = true;

  try {
    const response = await $patchapi("payment_schedule", {
      id: props.scheduleItemId,
      to_date: dateRecord.value.newDueDate,
    });

    if (response !== "error") {
      $snackbar(
        isVietnamese.value ? "Cập nhật ngày đến hạn thành công!" : "Due date updated successfully!",
        "Thành công",
        "Success",
      );
      emit("updated");
      emit("close");
    } else {
      $snackbar(
        isVietnamese.value ? "Có lỗi xảy ra khi cập nhật ngày đến hạn." : "An error occurred while updating due date.",
        "Lỗi",
        "Error",
      );
    }
  } catch (e) {
    console.error("Error updating due date:", e);
    $snackbar(
      isVietnamese.value ? "Có lỗi xảy ra khi cập nhật ngày đến hạn." : "An error occurred while updating due date.",
      "Lỗi",
      "Error",
    );
  } finally {
    isLoading.value = false;
  }
};

onMounted(() => {
  fetchPaymentScheduleData();
  generateCaptcha();
});
</script>

<style scoped>
.notification {
  margin-top: 1rem;
}
</style>
