<script setup>
// Vue 核心响应式 API
import { ref, watch, onMounted, onBeforeUnmount } from "vue";
// FullCalendar Vue 3 组件
import FullCalendar from "@fullcalendar/vue3";
// FullCalendar 插件：月视图
import dayGridPlugin from "@fullcalendar/daygrid";
// FullCalendar 插件：周视图（时间网格）
import timeGridPlugin from "@fullcalendar/timegrid";
// FullCalendar 插件：交互功能（拖拽、点击等）
import interactionPlugin from "@fullcalendar/interaction";
// FullCalendar 插件：列表视图
import listPlugin from "@fullcalendar/list";
// 国际化 hook
import { useI18n } from "vue-i18n";
// 页面标题 composable
import { usePageTitle } from "@/composables/usePageTitle";

import DatatimePickerForFullCalendar from "@/components/datatimePickerForFullCalendar.vue";

import { useToastStore } from "@/stores/toast";

const toast = useToastStore();

// 设置页面标题
usePageTitle("appname.schedule");

// 获取国际化翻译函数和当前语言
const { t, locale } = useI18n();

// FullCalendar 组件的引用，用于调用日历 API
const calendarRef = ref(null);
// 用于跟踪上次点击时间的响应式变量
const lastClickTime = ref(0);
// 用于跟踪上次点击event时间的响应式变量
const lastEventClickTime = ref(0);

// 模态框相关状态
const showModal = ref(false);
const modalTitle = ref("添加日程");
const eventData = ref({
  title: "",
  startDate: "",
  endDate: "",
  color: "#066FD1", // 默认蓝色工作事件
});

// 颜色选项
const colorOptions = ref([
  { value: "#066FD1", label: t("schedule.work"), name: t("schedule.work") },
  { value: "#09D119", label: t("schedule.duty"), name: t("schedule.duty") },
  { value: "#FF00FF", label: t("schedule.exam"), name: t("schedule.exam") },
  {
    value: "#FFFF00",
    label: t("schedule.standby"),
    name: t("schedule.standby"),
  },
  {
    value: "#D16C13",
    label: t("schedule.personal_holiday"),
    name: t("schedule.personal_holiday"),
  },
  {
    value: "#D10D21",
    label: t("schedule.public_holiday"),
    name: t("schedule.public_holiday"),
  },
]);

// 日历配置选项
const calendarOptions = ref({
  // 日历高度：占满可用空间
  height: "100%",
  // 内容高度自适应
  contentHeight: "auto",
  // 使用当前应用语言
  locale: locale.value,
  // 注册使用的插件
  plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin],
  // 显示当前时间指示线
  nowIndicator: true,
  // 显示周末
  weekends: true,
  // 初始视图：月视图
  initialView: "dayGridMonth",
  // 允许选择日期/时间段
  selectable: true,
  // 允许拖拽调整事件
  editable: true,
  // 日期格中事件过多时显示"+N more"
  dayMaxEvents: true,

  // 日期标题可点击跳转 //不跳转
  //navLinks: true,

  // 一周的第一天：1 = 周一
  firstDay: 1,
  // 自动展开行高
  expandRows: true,
  // 固定头部日期
  stickyHeaderDates: true,

  // 日期格子挂载时的样式处理
  dayCellDidMount(info) {
    // 周六周日显示灰色背景
    if (info.date.getDay() === 0 || info.date.getDay() === 6) {
      info.el.style.backgroundColor = "#f5f5f5";
    }
    // 添加边框样式
    info.el.style.border = "1px solid #e5e7eb";
  },

  // 顶部工具栏配置
  headerToolbar: {
    // 左侧：年份和月份导航按钮
    left: "prevYear,prev,today,next,nextYear",
    // 中间：标题（显示当前月份/年份）
    center: "title",
    // 右侧：留空（可通过 customButtons 扩展）
    right: "",
  },

  // 自定义按钮：扩展工具栏功能
  customButtons: {
    // 上一年按钮
    prevYear: {
      text: t("schedule.previous_year"),
      click() {
        calendarRef.value.getApi().prevYear();
      },
    },
    // 下一年按钮
    nextYear: {
      text: t("schedule.next_year"),
      click() {
        calendarRef.value.getApi().nextYear();
      },
    },
    // 上一个月按钮
    prev: {
      text: t("schedule.previous_month"),
      click() {
        calendarRef.value.getApi().prev();
      },
    },
    // 下一个月按钮
    next: {
      text: t("schedule.next_month"),
      click() {
        calendarRef.value.getApi().next();
      },
    },
    // 今天按钮：跳转到今天
    today: {
      text: t("schedule.today"),
      click() {
        calendarRef.value.getApi().today();
      },
    },
    // 周视图按钮：切换到周视图
    week: {
      text: t("schedule.week"),
      click() {
        calendarRef.value.getApi().changeView("timeGridWeek");
      },
    },
  },

  // 日历事件列表（目前为空，后续可接入数据源）
  events: [],

  // 日期点击事件处理函数
  dateClick(info) {
    const nowTime = new Date().getTime();
    const timeDifference = nowTime - lastClickTime.value;

    // 判断是否为双击（400ms 内连续点击）
    if (timeDifference < 400 && timeDifference > 0) {
      console.log("双击日期:", info.dateStr);
      // 双击功能：快速添加事件
      handleDoubleClick(info);
    } else {
      console.log("单击日期:", info.dateStr);
      // 单击功能：显示日期详情
      handleSingleClick(info);
    }

    // 更新上次点击时间
    lastClickTime.value = nowTime;
  },

  //选择日期
  select(info) {
    if (info.end - info.start > 86400000) {
      //选择了多日
      console.log("选择了多日:", info);
    } else {
      //选择单日
      console.log("选择单日:", info);
    }
  },

  //事件event点击处理函数
  eventClick(info) {
    const nowTime = new Date().getTime();
    const timeDifference = nowTime - lastEventClickTime.value;

    // 判断是否为双击（400ms 内连续点击）
    if (timeDifference < 400 && timeDifference > 0) {
      console.log("双击事件:", info);
      // 双击功能：快速添加事件
    } else {
      console.log("单击事件:", info);
      // 单击功能：显示日期详情
    }
    // 更新上次点击时间
    lastEventClickTime.value = nowTime;
  },

  //event拖动处理
  eventDrop(info) {},
});

// 打开模态框
const openEventModal = (dateStr) => {
  eventData.value = {
    title: "",
    startDate: dateStr,
    endDate: dateStr,
    color: "#066FD1",
  };

  showModal.value = true;
};

// 关闭模态框
const closeEventModal = () => {
  showModal.value = false;
};

// 处理双击事件：打开模态框添加事件
const handleDoubleClick = (info) => {
  openEventModal(info.dateStr);
};

// 处理单机事件：显示日期详情
const handleSingleClick = (info) => {
  const dateEvents = calendarOptions.value.events.filter(
    (event) =>
      event.start === info.dateStr ||
      (event.start <= info.dateStr && event.end > info.dateStr),
  );

  if (dateEvents.length > 0) {
    //alert(`${info.dateStr} 有 ${dateEvents.length} 个事件`)
  } else {
    //alert(`${info.dateStr} 没有事件`)
  }
};

// 保存日程事件
const saveEvent = () => {
  if (!eventData.value.title.trim()) {
    //alert("请输入日程内容");
    toast.warning(t("schedule.event_title_required"));
    return;
  }

  if (!eventData.value.startDate || !eventData.value.endDate) {
    //alert("请选择日期");
    toast.warning(t("schedule.date_required"));
    return;
  }

  const selectedColor = colorOptions.value.find(
    (color) => color.value === eventData.value.color,
  );
  const colorName = selectedColor ? selectedColor.name : eventData.value.color;

  const newEvent = {
    title: eventData.value.title.trim(),
    start: eventData.value.startDate,
    end: eventData.value.endDate,
    allDay: true,
    backgroundColor: eventData.value.color,
    borderColor: eventData.value.color,
    textColor: "#ffffff",
    extendedProps: {
      type: colorName,
      description: eventData.value.title.trim(),
    },
  };

  // 添加到日历事件列表
  calendarOptions.value.events.push(newEvent);

  console.log("事件添加成功:", newEvent);
  toast.success(t("schedule.event_added_successfully"));

  // 关闭模态框
  closeEventModal();
};

// 清除日期选择
const clearDates = () => {
  eventData.value.startDate = "";
  eventData.value.endDate = "";
};

// 颜色选择处理
const selectColor = (colorValue) => {
  eventData.value.color = colorValue;
};

// 监听语言变化，更新日历的本地化和按钮文字
watch(locale, () => {
  // 更新日历语言
  calendarOptions.value.locale = locale.value;
  // 更新自定义按钮的文字
  calendarOptions.value.customButtons.prevYear.text = t(
    "schedule.previous_year",
  );
  calendarOptions.value.customButtons.nextYear.text = t("schedule.next_year");
  calendarOptions.value.customButtons.prev.text = t("schedule.previous_month");
  calendarOptions.value.customButtons.next.text = t("schedule.next_month");
  calendarOptions.value.customButtons.today.text = t("schedule.today");
  calendarOptions.value.customButtons.week.text = t("schedule.week");

  colorOptions.value = [
    { value: "#066FD1", label: t("schedule.work"), name: t("schedule.work") },
    { value: "#09D119", label: t("schedule.duty"), name: t("schedule.duty") },
    { value: "#FF00FF", label: t("schedule.exam"), name: t("schedule.exam") },
    {
      value: "#FFFF00",
      label: t("schedule.standby"),
      name: t("schedule.standby"),
    },
    {
      value: "#D16C13",
      label: t("schedule.personal_holiday"),
      name: t("schedule.personal_holiday"),
    },
    {
      value: "#D10D21",
      label: t("schedule.public_holiday"),
      name: t("schedule.public_holiday"),
    },
  ];
});

onMounted(() => {
  const handleKeydown = (event) => {
    // Ctrl+C 事件
    if (event.ctrlKey && event.key === "c") {
      event.preventDefault(); // 可选：阻止默认复制行为
      console.log("Ctrl+C 被按下");
      // 你的业务逻辑
    }

    // Ctrl+V 事件
    if (event.ctrlKey && event.key === "v") {
      event.preventDefault(); // 可选：阻止默认粘贴行为
      console.log("Ctrl+V 被按下");
      // 你的业务逻辑
    }
  };

  document.addEventListener("keydown", handleKeydown);

  // 清理事件监听器
  onBeforeUnmount(() => {
    document.removeEventListener("keydown", handleKeydown);
  });
});
</script>

<template>
  <!-- 日历容器：占满视口高度减去顶部导航高度 -->
  <div class="flex h-[calc(100vh-3.5rem)] w-full flex-col relative">
    <!-- 事件编辑模态框 -->
    <div
      v-if="showModal"
      class="fixed inset-0 z-50 flex items-center justify-center bg-gray-800/20"
    >
      <div class="modal-content bg-white rounded-lg shadow-lg w-full max-w-2xl">
        <!-- 模态框头部 -->
        <div
          class="modal-header border-b p-4 flex justify-between items-center"
        >
          <h5 class="modal-title text-lg font-semibold">
            {{ t("schedule.add_event") }}
          </h5>
          <button
            @click="closeEventModal"
            class="btn-close text-gray-500 hover:text-gray-700"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="icon icon-tabler icons-tabler-outline icon-tabler-x"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
              <path d="M18 6l-12 12"></path>
              <path d="M6 6l12 12"></path>
            </svg>
          </button>
        </div>

        <!-- 模态框主体 -->
        <div class="modal-body p-4">
          <!-- 日期选择区域 -->
          <DatatimePickerForFullCalendar
            :start-date="eventData.startDate"
            :end-date="eventData.endDate"
          />

          <!-- 内容输入区域 -->
          <div class="mb-4">
            <div class="uni-easyinput input relative">
              <div
                class="uni-easyinput__content is-input-border border border-gray-300 rounded-md bg-white relative"
              >
                <input
                  v-model="eventData.title"
                  type="text"
                  maxlength="140"
                  class="uni-easyinput__content-input w-full px-3 py-2 outline-none"
                  :placeholder="t('schedule.event_title_placeholder')"
                  @keyup.enter="saveEvent"
                />
              </div>
            </div>
          </div>

          <!-- 颜色选择区域 -->
          <div class="mb-4">
            <div class="color_box grid grid-cols-3 gap-2">
              <div
                v-for="color in colorOptions"
                :key="color.value"
                class="color_box_item"
              >
                <label
                  class="uni-label-pointer form-colorinput flex items-center gap-2 cursor-pointer"
                  @click="selectColor(color.value)"
                >
                  <div class="uni-radio-wrapper">
                    <div
                      class="uni-radio-input flex items-center justify-center w-6 h-6 rounded-full transition-all"
                      :style="{
                        backgroundColor: color.value,
                        borderColor: color.value,
                      }"
                    >
                      <svg
                        v-if="eventData.color === color.value"
                        width="18"
                        height="18"
                        viewBox="0 0 32 32"
                      >
                        <path
                          d="M1.952 18.080q-0.32-0.352-0.416-0.88t0.128-0.976l0.16-0.352q0.224-0.416 0.64-0.528t0.8 0.176l6.496 4.704q0.384 0.288 0.912 0.272t0.88-0.336l17.312-14.272q0.352-0.288 0.848-0.256t0.848 0.352l-0.416-0.416q0.32 0.352 0.32 0.816t-0.32 0.816l-18.656 18.912q-0.32 0.352-0.8 0.352t-0.8-0.32l-7.936-8.064z"
                          fill="#ffffff"
                        ></path>
                      </svg>
                    </div>
                  </div>
                  <span class="text-gray-700">{{ color.label }}</span>
                </label>
              </div>
            </div>
          </div>
        </div>

        <!-- 模态框底部 -->
        <div
          class="modal-footer border-t p-4 flex justify-between items-center"
        >
          <button
            @click="closeEventModal"
            class="btn px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md"
          >
            {{ t("schedule.close") }}
          </button>
          <div class="flex gap-2">
            <button
              class="btn px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md"
              disabled
            >
              {{ t("schedule.copy") }}
            </button>
            <button
              class="btn px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md"
              disabled
            >
              {{ t("schedule.paste") }}
            </button>
            <button
              @click="saveEvent"
              class="btn btn-primary px-4 py-2 bg-blue-600 text-white hover:bg-blue-700 rounded-md"
            >
              {{ t("schedule.add_event_button") }}
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 日历主体区域，带边框和阴影 -->
    <div
      class="flex-1 rounded-lg border border-gray-200 bg-white p-0.5 shadow dark:border-dk-muted dark:bg-dk-card"
    >
      <!-- 内层容器：隐藏溢出内容 -->
      <div class="h-full w-full overflow-hidden rounded-md">
        <!-- FullCalendar 日历组件 -->
        <!-- ref="calendarRef" 用于获取组件实例调用日历 API -->
        <!-- :options 绑定日历配置对象 -->
        <FullCalendar ref="calendarRef" :options="calendarOptions" />
      </div>
    </div>
  </div>
</template>
