<template>
  <el-dialog
    v-model="dialogVisible"
    width="350px"
    class="custom-repeat-dialog"
    @close="handleClose"
  >
    <div class="custom-repeat-form" v-if="customRepeatData">
      <div class="from-title">{{ t("welcomeSidebar.customRepeat") }}</div>

      <!-- 频率 -->
      <div class="form-item form-item-horizontal">
        <label class="form-label">{{ t("welcomeSidebar.frequency") }}</label>
        <div class="form-content">
          <el-select
            v-model="customRepeatData.frequency"
            :placeholder="t('welcomeSidebar.frequency')"
            class="form-select"
            @change="handleFrequencyChange"
          >
            <el-option
              :label="t('welcomeSidebar.customRepeatDaily')"
              value="days"
            />
            <el-option
              :label="t('welcomeSidebar.customRepeatWeekly')"
              value="weekly"
            />
            <el-option
              :label="t('welcomeSidebar.customRepeatMonthly')"
              value="monthly"
            />
          </el-select>
        </div>
      </div>

      <!-- 每X天 -->
      <div
        v-if="customRepeatData.frequency === 'days'"
        class="form-item form-item-horizontal"
      >
        <label class="form-label">{{ t("welcomeSidebar.every") }}</label>
        <div class="form-content">
          <div class="interval-wrapper">
            <el-input-number
              v-model="customRepeatData.interval"
              :min="1"
              :max="intervalMax"
              :controls="true"
              class="interval-input"
            />
            <span class="interval-unit">{{ t("welcomeSidebar.day") }}</span>
          </div>
        </div>
      </div>

      <!-- 每周的（按周重复时显示） -->
      <div
        v-if="customRepeatData.frequency === 'weekly'"
        class="form-item form-item-horizontal"
      >
        <label class="form-label">{{ t("welcomeSidebar.ofTheWeek") }}</label>
        <div class="form-content">
          <div class="weekdays-wrapper">
            <button
              v-for="(day, index) in weekdays"
              :key="index"
              :class="[
                'weekday-btn',
                {
                  active: customRepeatData.selectedDays.includes(index),
                },
              ]"
              @click="toggleWeekday(index)"
            >
              {{ day }}
            </button>
          </div>
        </div>
      </div>

      <!-- 每月的（按月重复时显示） -->
      <div
        v-if="customRepeatData.frequency === 'monthly'"
        class="form-item form-item-horizontal"
      >
        <label class="form-label">{{ t("welcomeSidebar.ofTheMonth") }}</label>
        <div class="form-content">
          <div class="month-days-wrapper">
            <div
              v-for="day in 31"
              :key="day"
              :class="[
                'month-day-btn',
                {
                  active: customRepeatData.selectedMonthDays.includes(day),
                },
              ]"
              @click="toggleMonthDay(day)"
            >
              {{ day }}
            </div>
          </div>
        </div>
      </div>

      <!-- 结束于 -->
      <div class="form-item form-item-horizontal">
        <label class="form-label">{{ t("welcomeSidebar.endsOn") }}</label>
        <div class="form-content">
          <el-date-picker
            v-model="endsOn"
            type="date"
            :placeholder="t('welcomeSidebar.endsOn')"
            format="YYYY年M月D日"
            value-format="YYYY-MM-DD"
            class="ends-on-picker"
          />
        </div>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">{{ t("common.cancel") }}</el-button>
        <el-button type="primary" @click="handleConfirm">{{
          t("common.confirm")
        }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch, computed } from "vue";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";

const { t } = useI18n();

// Props
interface Props {
  modelValue: boolean;
  repeatEndTime?: string;
}

const props = defineProps<Props>();

// Emits
const emit = defineEmits<{
  "update:modelValue": [value: boolean];
  "update:repeatEndTime": [value: string | undefined];
  confirm: [data: CustomRepeatData, endsOn: string | undefined];
}>();

// 自定义重复数据接口
export interface CustomRepeatData {
  frequency: "days" | "weekly" | "monthly"; // 频率类型
  interval: number; // 每X天/周/月
  selectedDays: number[]; // 每周的星期几（0-6，0是周一）
  selectedMonthDays: number[]; // 每月的日期（1-31）
}

// 弹窗显示状态
const dialogVisible = ref(false);

// 自定义重复数据
const customRepeatData = ref<CustomRepeatData>({
  frequency: "days",
  interval: 1,
  selectedDays: [],
  selectedMonthDays: [],
});

// 结束日期
const endsOn = ref<string | undefined>(undefined);

// 星期数组
const weekdays = computed(() => [
  t("welcomeSidebar.sunday"),
  t("welcomeSidebar.monday"),
  t("welcomeSidebar.tuesday"),
  t("welcomeSidebar.wednesday"),
  t("welcomeSidebar.thursday"),
  t("welcomeSidebar.friday"),
  t("welcomeSidebar.saturday"),
]);

// 间隔最大值（根据频率动态变化）
const intervalMax = computed(() => {
  const frequency = customRepeatData.value.frequency;
  if (frequency === "days") {
    return 99;
  } else if (frequency === "weekly") {
    return 12;
  } else {
    return 12; // monthly
  }
});

// 监听 modelValue 变化
watch(
  () => props.modelValue,
  (newVal) => {
    dialogVisible.value = newVal;
    if (newVal) {
      // 重置数据
      customRepeatData.value = {
        frequency: "days",
        interval: 1,
        selectedDays: [],
        selectedMonthDays: [],
      };
      endsOn.value = props.repeatEndTime;
    }
  },
  { immediate: true },
);

// 监听 dialogVisible 变化，同步到父组件
watch(dialogVisible, (newVal) => {
  emit("update:modelValue", newVal);
});

// 处理频率变化
const handleFrequencyChange = () => {
  // 切换频率时重置相关数据
  if (customRepeatData.value.frequency === "weekly") {
    customRepeatData.value.selectedMonthDays = [];
  } else if (customRepeatData.value.frequency === "monthly") {
    customRepeatData.value.selectedDays = [];
  }
  // 如果当前 interval 超过新频率的最大值，重置为1
  const max = intervalMax.value;
  if (customRepeatData.value.interval > max) {
    customRepeatData.value.interval = 1;
  }
};

// 切换星期几
const toggleWeekday = (index: number) => {
  const idx = customRepeatData.value.selectedDays.indexOf(index);
  if (idx > -1) {
    customRepeatData.value.selectedDays.splice(idx, 1);
  } else {
    customRepeatData.value.selectedDays.push(index);
  }
};

// 切换月份日期
const toggleMonthDay = (day: number) => {
  const idx = customRepeatData.value.selectedMonthDays.indexOf(day);
  if (idx > -1) {
    customRepeatData.value.selectedMonthDays.splice(idx, 1);
  } else {
    customRepeatData.value.selectedMonthDays.push(day);
  }
};

// 处理关闭
const handleClose = () => {
  // 用户关闭弹窗但没有确认，直接关闭
  dialogVisible.value = false;
};

// 处理取消
const handleCancel = () => {
  dialogVisible.value = false;
};

// 处理确认
const handleConfirm = () => {
  // 验证数据
  if (
    customRepeatData.value.frequency === "weekly" &&
    customRepeatData.value.selectedDays.length === 0
  ) {
    ElMessage.warning(t("welcomeSidebar.selectAtLeastOneDay"));
    return;
  }
  if (
    customRepeatData.value.frequency === "monthly" &&
    customRepeatData.value.selectedMonthDays.length === 0
  ) {
    ElMessage.warning(t("welcomeSidebar.selectAtLeastOneDate"));
    return;
  }
  // 发射确认事件，传递数据
  console.log("发射确认事件，传递数据", customRepeatData.value);
  emit("confirm", customRepeatData.value, endsOn.value);
  emit("update:repeatEndTime", endsOn.value);
  dialogVisible.value = false;
};
</script>

<style lang="scss" scoped>
// 自定义重复弹窗样式
.custom-repeat-dialog {
  :deep(.el-dialog__header) {
    display: none;
  }

  .custom-repeat-form {
    .from-title {
      color: var(--color-text, #333);
      font-size: 16px;
      padding-bottom: 18px;
      display: flex;
      justify-content: center;
    }

    .form-item {
      margin-bottom: 12px;

      &.form-item-horizontal {
        display: flex;
        align-items: flex-start;
        gap: 16px;

        .form-label {
          min-width: 42px;
          text-align: right;
          padding-top: 8px;
          margin-bottom: 0;
          color: var(--color-text, #333);
          font-size: 14px;
          flex-shrink: 0;
        }

        .form-content {
          flex: 1;
          min-width: 0;
        }
      }
    }

    .interval-wrapper {
      display: flex;
      align-items: center;
      gap: 8px;

      .interval-input {
        width: 120px;
      }

      .interval-unit {
        font-size: 14px;
        color: var(--color-text, #333);
      }
    }

    .weekdays-wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: 2px;

      .weekday-btn {
        padding: 4px 6px;
        border: 1px solid var(--color-border, #dcdfe6);
        border-radius: 4px;
        background: var(--color-bg, #fff);
        color: var(--color-text, #333);
        font-size: 14px;
        cursor: pointer;
        transition: all 0.2s;
        min-width: 50px;

        &:hover {
          border-color: #1890ff;
          color: #1890ff;
        }

        &.active {
          background: #1890ff;
          border-color: #1890ff;
          color: #fff;
        }
      }
    }

    .month-days-wrapper {
      display: grid;
      grid-template-columns: repeat(7, 0fr);
      gap: 8px;

      .month-day-btn {
        padding: 4px;
        width: 30px;
        height: 30px;
        border: 1px solid var(--color-border, #dcdfe6);
        border-radius: 4px;
        background: var(--color-bg, #fff);
        color: var(--color-text, #333);
        font-size: 14px;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;

        &:hover {
          border-color: #1890ff;
          color: #1890ff;
        }

        &.active {
          background: #1890ff;
          border-color: #1890ff;
          color: #fff;
        }
      }
    }

    // 确保频率下拉框和结束于日期选择器宽度一致，都占满父容器宽度
    .form-select {
      width: 100% !important;

      :deep(.el-select__wrapper) {
        width: 100% !important;
      }
    }

    .ends-on-picker {
      width: 100% !important;
      max-width: 100% !important;

      // 覆盖 Element Plus 默认的 220px 宽度
      :deep(.el-date-editor) {
        width: 100% !important;
        max-width: 100% !important;
      }

      :deep(.el-input__wrapper) {
        width: 100% !important;
        max-width: 100% !important;
      }

      :deep(.el-input__inner) {
        width: 100% !important;
      }
    }
  }
}

// 深色主题下的自定义重复弹窗样式
@media (prefers-color-scheme: dark) {
  .custom-repeat-dialog {
    .custom-repeat-form {
      .from-title {
        color: var(--color-text, #ccc);
      }

      .form-item {
        &.form-item-horizontal {
          .form-label {
            color: var(--color-text, #ccc);
          }
        }
      }

      .interval-wrapper {
        .interval-unit {
          color: var(--color-text, #ccc);
        }
      }

      .weekdays-wrapper {
        .weekday-btn {
          background: var(--color-bg, #1a1a1a);
          border-color: var(--color-border, #444);
          color: var(--color-text, #ccc);

          &:hover {
            border-color: #1890ff;
            color: #1890ff;
          }

          &.active {
            background: #1890ff;
            border-color: #1890ff;
            color: #fff;
          }
        }
      }

      .month-days-wrapper {
        .month-day-btn {
          background: var(--color-bg, #1a1a1a);
          border-color: var(--color-border, #444);
          color: var(--color-text, #ccc);

          &:hover {
            border-color: #1890ff;
            color: #1890ff;
          }

          &.active {
            background: #1890ff;
            border-color: #1890ff;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>