<!-- CountdownTimer.vue -->
<template>
  <div class="countdown-wrapper">
    <span
      v-if="isExpired"
      class="tag is-danger"
    >
      {{ isVietnamese ? "Hết giờ" : "Expired" }}
    </span>
    <span
      v-else
      class="tag"
      :class="tagClass"
    >
      <span class="countdown-text">{{ formattedTime }}</span>
    </span>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
import { useStore } from "~/stores/index";

const props = defineProps({
  dateValue: {
    type: [String, Date],
    required: true,
  },
  format: {
    type: String,
    default: "HH:mm:ss",
  },
});

const store = useStore();
const { $dayjs } = useNuxtApp();

const timeRemaining = ref({
  days: 0,
  hours: 0,
  minutes: 0,
  seconds: 0,
});

const isExpired = ref(false);
let intervalId = null;

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

const tagClass = computed(() => {
  const totalSeconds =
    timeRemaining.value.days * 86400 +
    timeRemaining.value.hours * 3600 +
    timeRemaining.value.minutes * 60 +
    timeRemaining.value.seconds;

  if (totalSeconds <= 0) return "is-danger";
  if (totalSeconds <= 3600) return "is-warning"; // <= 1 hour
  if (totalSeconds <= 86400) return "is-info"; // <= 1 day
  return "is-primary"; // > 1 day
});

const formattedTime = computed(() => {
  const { days, hours, minutes, seconds } = timeRemaining.value;

  if (days > 0) {
    return isVietnamese ? `${days}d ${hours}h ${minutes}m` : `${days}d ${hours}h ${minutes}m`;
  }

  if (hours > 0) {
    return isVietnamese ? `${hours}h ${minutes}m ${seconds}s` : `${hours}h ${minutes}m ${seconds}s`;
  }

  return isVietnamese ? `${minutes}m ${seconds}s` : `${minutes}m ${seconds}s`;
});

const calculateTimeRemaining = () => {
  try {
    const targetDate = $dayjs(props.dateValue);
    const now = $dayjs();

    if (now.isAfter(targetDate)) {
      isExpired.value = true;
      timeRemaining.value = { days: 0, hours: 0, minutes: 0, seconds: 0 };
      return;
    }

    isExpired.value = false;
    const diff = targetDate.diff(now, "second");

    const days = Math.floor(diff / 86400);
    const hours = Math.floor((diff % 86400) / 3600);
    const minutes = Math.floor((diff % 3600) / 60);
    const seconds = diff % 60;

    timeRemaining.value = { days, hours, minutes, seconds };
  } catch (error) {
    console.error("Error calculating countdown:", error);
    isExpired.value = true;
  }
};

const startCountdown = () => {
  calculateTimeRemaining();

  if (intervalId) clearInterval(intervalId);

  intervalId = setInterval(() => {
    calculateTimeRemaining();

    if (isExpired.value && intervalId) {
      clearInterval(intervalId);
      intervalId = null;
    }
  }, 1000);
};

watch(
  () => props.dateValue,
  () => {
    startCountdown();
  },
  { deep: true },
);

onMounted(() => {
  startCountdown();
});

onBeforeUnmount(() => {
  if (intervalId) {
    clearInterval(intervalId);
  }
});
</script>

<style scoped>
.countdown-wrapper {
  display: inline-block;
}
</style>
