<script setup>
import { ref, onMounted, watch, computed } from "vue";
import dayjs from "dayjs";
import useSearchParam from "@/hooks/useSearchParam";
import { useI18n } from "vue-i18n";
const { t, locale } = useI18n();
const { searchParams, changeParams } = useSearchParam();

/**
 * 可調整 props：
 * - showQuickButton：是否顯示快捷按鈕（預設 true，可關掉）
 * - quickButtonType：快捷類型 '30d' | '7d'（預設 '30d'）
 */
const props = defineProps({
  showQuickButton: { type: Boolean, default: true },
  quickButtonType: { type: String, default: "30d" }, // '30d' | '7d'
});

// 統一設定區間的 helper
const setRange = (start, end) => {
  const newRange = [
    {
      key: "start_at",
      value: dayjs(start),
      dateFormat: "yyyy-MM-dd",
      placeholder: t("alert.start_date"),
    },
    {
      key: "end_at",
      value: dayjs(end),
      dateFormat: "yyyy-MM-dd",
      placeholder: t("alert.end_date"),
    },
  ];
  dateRange.value = newRange;

  // 同步到共用查詢參數（字串格式）
  changeParams({
    ...searchParams.value,
    Start_date: dayjs(start).format("YYYY-MM-DD"),
    End_date: dayjs(end).format("YYYY-MM-DD"),
  });
};

// 初始 dateRange：若有既有搜尋值就吃既有；否則依 quickButtonType
const dateRange = ref([
  {
    key: "start_at",
    value: searchParams.value.Start_date
      ? dayjs(searchParams.value.Start_date)
      : props.quickButtonType === "7d"
      ? dayjs().subtract(7, "day")
      : dayjs().subtract(30, "day"),
    dateFormat: "yyyy-MM-dd",
    placeholder: t("alert.start_date"),
  },
  {
    key: "end_at",
    value: searchParams.value.End_date
      ? dayjs(searchParams.value.End_date)
      : dayjs(),
    dateFormat: "yyyy-MM-dd",
    placeholder: t("alert.end_date"),
  },
]);

// 快捷按鈕：依 quickButtonType 決定區間
const changeTimeRange = () => {
  if (props.quickButtonType === "7d") {
    // 近7天：起始 = 今天往回 7 天，結束 = 今天
    setRange(dayjs().subtract(7, "day"), dayjs().endOf("day"));
  } else {
    // 近30天：起始 = 今天往回 30 天，結束 = 今天
    setRange(dayjs().subtract(30, "day"), dayjs().endOf("day"));
  }
};

// 進頁面初始化：若沒有既有 Start/End，依 quickButtonType 設定
onMounted(() => {
  if (!searchParams.value.Start_date || !searchParams.value.End_date) {
    changeTimeRange();
  } else {
    // 若已存在既有值，把區間同步回 dateRange（避免格式落差）
    setRange(searchParams.value.Start_date, searchParams.value.End_date);
  }
});

// 使用者調整日期 → 同步到共用查詢參數
watch(
  dateRange,
  () => {
    changeParams({
      ...searchParams.value,
      Start_date: dayjs(dateRange.value[0].value).format("YYYY-MM-DD"),
      End_date: dayjs(dateRange.value[1].value).format("YYYY-MM-DD"),
    });
  },
  { deep: true }
);

// 語系切換時，更新 placeholder
watch(locale, () => {
  dateRange.value[0].placeholder = t("alert.start_date");
  dateRange.value[1].placeholder = t("alert.end_date");
});

// 快捷按鈕顯示文字
const quickBtnLabel = computed(() =>
  props.quickButtonType === "7d" ? t("alert.7days") : t("alert.30days")
);
</script>

<template>
  <div class="flex flex-wrap items-center">
    <!-- 快捷按鈕：可關閉；可切換 30天 / 7天 -->
    <button
      v-if="showQuickButton"
      type="button"
      class="btn btn-outline-success mr-3"
      @click="changeTimeRange"
    >
      {{ quickBtnLabel }}
    </button>

    <!-- 日期群組 -->
    <DateGroup :items="dateRange" :withLine="true" />
  </div>
</template>

<style lang="scss" scoped></style>
