<script setup>
import { ref, watch, onMounted, onUnmounted } from "vue";
import { getEnergyInfo } from "@/apis/dashboard";
import useBuildingStore from "@/stores/useBuildingStore";
import { twMerge } from "tailwind-merge";
import { useI18n } from "vue-i18n";

const { locale, t } = useI18n();
const store = useBuildingStore();
const energyData = ref([]);
let intervalId = null;

const getEnergyInfos = async () => {
  try {
    const res = await getEnergyInfo(store.selectedBuilding.building_guid);
    const apiData = res?.data || {};

    energyData.value = [
      {
        value: apiData.todayKWH ? apiData.todayKWH : "N/A",
        label: t("dashboard.today_electricity_consumption"),
      },
      {
        value: apiData.yesterdayKWH ? apiData.yesterdayKWH : "N/A",
        label: t("dashboard.yesterday_electricity_consumption"),
      },
      {
        value: apiData.instantKW ? apiData.instantKW : "N/A",
        label: t("dashboard.instant_power"),
      },
      {
        value: apiData.instantContractRatio
          ? apiData.instantContractRatio
          : "N/A",
        label: t("dashboard.instant_contract_capacity_ratio"),
      },
    ];
  } catch (error) {
    console.error("Error fetching energy info:", error);
    energyData.value = [
      { value: "N/A", label: "Today's electricity consumption in kWH" },
      { value: "N/A", label: "Yesterday's electricity consumption in kWH" },
      { value: "N/A", label: "Instant power kW" },
      { value: "N/A", label: "Instant contract capacity ratio %" },
    ];
  }
};

watch(
  () => store.selectedBuilding,
  (newBuilding) => {
    if (newBuilding) {
      getEnergyInfos();
      
      if (intervalId) {
        clearInterval(intervalId); 
      }
      intervalId = setInterval(() => {
        getEnergyInfos();
      }, 30000);
    }
  },
  { immediate: true }
);

watch(locale, () => {
  if (energyData.value.length) {
    energyData.value = [
      {
        ...energyData.value[0],
        label: t("dashboard.today_electricity_consumption"),
      },
      {
        ...energyData.value[1],
        label: t("dashboard.yesterday_electricity_consumption"),
      },
      {
        ...energyData.value[2],
        label: t("dashboard.instant_power"),
      },
      {
        ...energyData.value[3],
        label: t("dashboard.instant_contract_capacity_ratio"),
      },
    ];
  }
});

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

<template>
  <div class="flex flex-wrap">
    <div
      v-for="(item, index) in energyData"
      :key="index"
      class="xl:w-1/4 md:w-1/2 w-full item-data-box relative px-3"
    >
      <div :class="twMerge('item-data', index % 2 === 0 ? 'blue' : 'green')">
        <h2>{{ item.value }}</h2>
        <div class="text-center text-xs">
          <span>{{ item.label }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.item-data {
  @apply relative mb-4 min-h-[100px] h-full flex flex-col justify-center;
}

.item-data-box:after {
  @apply absolute w-[20px] h-[20px] top-9 right-7 bg-no-repeat z-10;
  content: "";
  background: url(@ASSET/img/chart-data-background03.svg) center center;
}

/* 將 before 和 after 的通用樣式抽取出來，避免重複 */
.item-data::before,
.item-data::after {
  @apply absolute top-[5px] w-[30px] h-full z-10;
  content: "";
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

/* blue 類別的 before 和 after */
.item-data.blue::before {
  @apply -left-[10px];
  background-image: url(@ASSET/img/item-data-left.svg);
}

.item-data.blue::after {
  @apply -right-[10px];
  background-image: url(@ASSET/img/item-data-right.svg);
}

/* green 類別的 before 和 after */
.item-data.green::before {
  @apply -left-[10px];
  background-image: url(@ASSET/img/item-data-left-2.svg);
}

.item-data.green::after {
  @apply -right-[10px];
  background-image: url(@ASSET/img/item-data-right-2.svg);
}

.item-data h2 {
  @apply text-4xl font-medium m-1 pb-1 inline-block text-center relative leading-tight;
}

.item-data h2:before {
  @apply absolute left-0 right-0 -bottom-[2px] m-auto w-[5px] h-[5px] bg-[#58bfe8] rounded-sm;
  content: "";
}

.item-data h2:after {
  @apply absolute left-[5%] right-[5%] bottom-0 w-[90%] h-[10px] box-border border-b-2 border-[#58bfe8];
  content: "";
}

.item-data.blue h2:before {
  @apply bg-[#58bfe8];
}

.item-data.blue h2:after {
  @apply border-[#58bfe8];
}

.item-data.green h2:before {
  @apply bg-[#23c8cc];
}

.item-data.green h2:after {
  @apply border-[#23c8cc];
}
</style>
