<template>
  <el-dialog
    v-model="dialogVisible"
    :title="t('welcomeSidebar.scheduledTaskList')"
    width="900px"
    class="scheduled-task-list-dialog"
    @close="handleClose"
  >
    <div class="dialog-content-layout">
      <!-- 左侧按钮区域 -->
      <div class="left-actions">
        <div class="action-button action-button-primary" @click="handleAddTask">
          {{ t("welcomeSidebar.addTask") }}
        </div>
      </div>
      <!-- 右侧任务列表区域 -->
      <div class="right-task-list">
        <div class="task-list-container">
          <div v-if="taskList.length === 0" class="empty-state">
            <p>{{ t("welcomeSidebar.noScheduledTasks") }}</p>
          </div>
          <div v-else class="task-list">
            <div
              v-for="(task, index) in taskList"
              :key="task.id ?? index"
              class="task-item"
            >
              <!-- 第一行：描述 -->
              <div class="task-description">
                <span class="task-title">
                  {{ task.question || t("welcomeSidebar.noDescription") }}
                </span>
                <div class="task-actions">
                  <el-switch
                    :model-value="task.enabled"
                    size="small"
                    @change="handleToggleTask(task, $event)"
                  />
                  <el-icon
                    class="task-delete-icon"
                    @click="handleDeleteTask(task)"
                  >
                    <Delete />
                  </el-icon>
                </div>
              </div>
              <!-- 第二行：开始时间和重复选项 -->
              <div class="task-time-info">
                <span class="time-value">
                  {{ formatDateTime(task.nextRunAt) }}
                </span>
                <span v-if="getRecurrenceText(task)" class="repeat-info">
                  (&nbsp;{{ getRecurrenceText(task) }}
                  <el-popover
                    v-if="task.endTime"
                    placement="top"
                    :width="200"
                    trigger="hover"
                    popper-class="ends-on-popover"
                  >
                    <template #reference>
                      <el-icon class="ends-on-icon">
                        <Warning />
                      </el-icon>
                    </template>
                    <div class="ends-on-content">
                      {{ formatEndsOnDate(task.endTime) }}
                    </div> </el-popover
                  >)
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">{{ t("common.close") }}</el-button>
      </div>
    </template> -->
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { useI18n } from "vue-i18n";
import { Delete, Warning } from "@element-plus/icons-vue";
import {
  getScheduleList,
  pauseSchedule,
  resumeSchedule,
  deleteSchedule,
} from "@/api/schedules";
import type { ScheduleItem } from "@/api/schedules";

const { t } = useI18n();

// Props
interface Props {
  modelValue: boolean;
  reloadKey?: number;
}

const props = defineProps<Props>();

// Emits
const emit = defineEmits<{
  "update:modelValue": [value: boolean];
  close: [];
  "add-task": [];
  "manage-task": [];
}>();

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

// 任务列表
const taskList = ref<ScheduleItem[]>([]);

// 从接口获取任务列表
const loadTaskList = async () => {
  try {
    const { data } = await getScheduleList();
    console.log("111111111111111", data);
    if (Array.isArray(data)) {
      taskList.value = data;
      console.log("222222222222222", taskList.value);
    } else {
      taskList.value = [];
    }
  } catch (error) {
    console.error("获取定时任务列表失败：", error);
    taskList.value = [];
  }
};

// 格式化日期时间
const formatDateTime = (dateTime?: string): string => {
  if (!dateTime) return "";

  const dateObj = new Date(dateTime);
  const month = dateObj.getMonth() + 1;
  const day = dateObj.getDate();
  // getDay() 返回 0-6，0 是星期日，1 是星期一，以此类推
  const weekdays = [
    t("welcomeSidebar.sunday"), // 0
    t("welcomeSidebar.monday"), // 1
    t("welcomeSidebar.tuesday"), // 2
    t("welcomeSidebar.wednesday"), // 3
    t("welcomeSidebar.thursday"), // 4
    t("welcomeSidebar.friday"), // 5
    t("welcomeSidebar.saturday"), // 6
  ];
  const weekday = weekdays[dateObj.getDay()];

  const hours = String(dateObj.getHours()).padStart(2, "0");
  const minutes = String(dateObj.getMinutes()).padStart(2, "0");

  const dateStr = `${month}月${day}日 ${weekday}`;
  const timeStr = `${hours}:${minutes}`;

  return `${dateStr} ${timeStr}`;
};

// 格式化结束日期
const formatEndsOnDate = (date?: string): string => {
  if (!date) return "";

  const dateObj = new Date(date);
  const year = dateObj.getFullYear();
  const month = dateObj.getMonth() + 1;
  const day = dateObj.getDate();

  return `直到${year}年${month}月${day}日 结束`;
};

const getRecurrenceText = (task: ScheduleItem): string => {
  if (!task) return "";
  if (task.recurrenceType === "custom" && task.recurrenceExpr) {
    return task.recurrenceExpr;
  }
  const typeMap: Record<string, string> = {
    daily: t("welcomeSidebar.repeatDaily"),
    weekly: t("welcomeSidebar.repeatWeekly"),
    monthly: t("welcomeSidebar.repeatMonthly"),
  };
  return typeMap[task.recurrenceType] || task.recurrenceExpr || "";
};

// 获取文件图标

// 监听 modelValue 变化
watch(
  () => props.modelValue,
  async (newVal) => {
    dialogVisible.value = newVal;
    if (newVal) {
      await loadTaskList();
    }
  },
  { immediate: true },
);

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

// 外部请求刷新列表
watch(
  () => props.reloadKey,
  async () => {
    if (dialogVisible.value) {
      await loadTaskList();
    }
  },
);

// 处理关闭
const handleClose = () => {
  dialogVisible.value = false;
  emit("close");
};

// 处理添加任务
const handleAddTask = () => {
  emit("add-task");
};

// 启用任务、暂停任务
const handleToggleTask = async (task: ScheduleItem, value: boolean) => {
  if (task.id == null) return;
  try {
    if (value) {
      await resumeSchedule(task.id);
    } else {
      await pauseSchedule(task.id);
    }
    await loadTaskList();
  } catch (error) {
    console.error("更新任务状态失败：", error);
  }
};
// 删除任务
const handleDeleteTask = async (task: ScheduleItem) => {
  if (task.id == null) return;
  try {
    await deleteSchedule(task.id);
    await loadTaskList();
  } catch (error) {
    console.error("删除任务失败：", error);
  }
};
</script>

<style lang="scss" scoped>
.scheduled-task-list-dialog {
  .dialog-content-layout {
    display: flex;
    gap: 20px;
    min-height: 400px;
    max-height: 600px;
  }

  .left-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 160px;
    flex-shrink: 0;
    padding-top: 8px;

    .action-button {
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
      border: 1px solid transparent;
      user-select: none;

      &.action-button-primary {
        background: var(--color-primary, #409eff);
        color: #fff;
        border-color: var(--color-primary, #409eff);

        &:hover {
          background: var(--color-primary-light, #66b1ff);
          border-color: var(--color-primary-light, #66b1ff);
        }

        &:active {
          background: var(--color-primary-dark, #3a8ee6);
          border-color: var(--color-primary-dark, #3a8ee6);
        }
      }
    }
  }

  .right-task-list {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .task-list-container {
    flex: 1;
    min-height: 300px;
    max-height: 600px;
    overflow-y: auto;
    padding: 8px 0;

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background: var(--color-border);
      border-radius: 3px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    .empty-state {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 300px;
      color: var(--color-text-secondary, #999);
      font-size: 14px;
    }

    .task-list {
      display: flex;
      flex-direction: column;
      gap: 16px;

      .task-item {
        padding: 16px;
        border: 1px solid var(--color-border, #dcdfe6);
        border-radius: 8px;
        background: var(--color-bg, #fff);
        transition: all 0.2s;

        &:hover {
          border-color: var(--color-primary, #409eff);
          box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
        }

        .task-description {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          font-size: 14px;
          font-weight: 700;
          color: var(--color-text, #333);
          margin-bottom: 12px;
          line-height: 1.5;
          word-break: break-word;

          .task-title {
            flex: 1;
          }

          .task-actions {
            display: inline-flex;
            align-items: center;
            gap: 8px;

            .task-delete-icon {
              font-size: 16px;
              color: var(--color-text-secondary, #999);
              cursor: pointer;
              transition: color 0.2s;

              &:hover {
                color: var(--color-danger, #f56c6c);
              }
            }
          }
        }

        .task-time-info {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 12px;
          font-size: 14px;
          color: var(--color-text-secondary, #666);
          flex-wrap: wrap;

          .time-label {
            font-weight: 500;
          }

          .time-value {
            color: var(--color-text, #333);
          }

          .repeat-info {
            color: var(--color-primary, #409eff);
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: 4px;

            .ends-on-icon {
              font-size: 14px;
              color: var(--color-primary, #409eff);
              cursor: pointer;
              transition: color 0.2s;
              margin-left: 2px;

              &:hover {
                color: var(--color-primary-dark, #3a8ee6);
              }
            }
          }
        }

        .task-attachments {
          display: flex;
          flex-direction: column;
          gap: 8px;

          .attachments-label {
            font-size: 14px;
            font-weight: 500;
            color: var(--color-text-secondary, #666);
          }

          .attachments-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;

            .attachment-item {
              display: flex;
              align-items: center;
              gap: 6px;
              padding: 4px 8px;
              background: var(--color-bg-secondary, #f5f5f5);
              border-radius: 4px;
              border: 1px solid var(--color-border, #dcdfe6);

              .file-icon {
                width: 16px;
                height: 16px;
                flex-shrink: 0;
                object-fit: contain;
              }

              .file-name {
                font-size: 12px;
                color: var(--color-text, #333);
                max-width: 200px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
        }
      }
    }
  }
}

// 深色主题样式
@media (prefers-color-scheme: dark) {
  .scheduled-task-list-dialog {
    .task-list-container {
      .task-list {
        .task-item {
          background: var(--color-bg, #1a1a1a);
          border-color: var(--color-border, #444);

          .task-description {
            color: var(--color-text, #ccc);
          }

          .task-time-info {
            color: var(--color-text-secondary, #999);

            .time-value {
              color: var(--color-text, #ccc);
            }
          }

          .task-attachments {
            .attachments-label {
              color: var(--color-text-secondary, #999);
            }

            .attachments-list {
              .attachment-item {
                background: var(--color-bg-secondary, #2a2a2a);
                border-color: var(--color-border, #444);

                .file-name {
                  color: var(--color-text, #ccc);
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>

<style lang="scss">
// 全局弹窗样式（Element Plus 的 popover 需要全局样式）
.ends-on-popover {
  padding: 8px 12px !important;
  background: #fff !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
  border: none !important;

  .ends-on-content {
    font-size: 14px;
    color: #333;
    line-height: 1.5;
    white-space: nowrap;
  }

  // 弹窗箭头样式
  .el-popper__arrow {
    &::before {
      background: #fff !important;
      border: none !important;
    }
  }
}

// 深色主题下的弹窗样式
@media (prefers-color-scheme: dark) {
  .ends-on-popover {
    background: #1a1a1a !important;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3) !important;

    .ends-on-content {
      color: #ccc;
    }

    .el-popper__arrow {
      &::before {
        background: #1a1a1a !important;
      }
    }
  }
}
</style>