<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref } from "vue";
import request from "@/utils/request";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import {
  createTaskApplication,
  deleteTaskApplication,
  getTaskApplications,
  updateTaskApplication,
  type TaskApplication,
} from "@/api/tasks";

const router = useRouter();
const route = useRoute();

const taskId = route.params.taskId ? Number(route.params.taskId) : null;
const buttonName = route.meta.buttonText as string;
const isUpdateMode = computed(() => route.meta.action === "update");

const taskNum = ref("");
const taskName = ref("");
const taskDescription = ref("");
const materialURL = ref("");
const priority = ref({
  urgency: 0,
  importance: 0,
  contentDifficulty: 0,
  futureValue: 0,
  subjectivePriority: 0,
});

const priorityOptions = [0, 1, 2, 3, 4, 5];
const applicationStatusOptions: { label: string; value: TaskApplication["status"] }[] = [
  { label: "待应用", value: "TODO" },
  { label: "进行中", value: "DOING" },
  { label: "已完成", value: "DONE" },
];

const applications = ref<TaskApplication[]>([]);
const applicationLoading = ref(false);
const applicationSaving = ref(false);
const editingApplicationId = ref<number | null>(null);
const applicationForm = ref<{
  title: string;
  description: string;
  resourceUrl: string;
  status: TaskApplication["status"];
}>({
  title: "",
  description: "",
  resourceUrl: "",
  status: "TODO",
});

const resetApplicationForm = () => {
  editingApplicationId.value = null;
  applicationForm.value = {
    title: "",
    description: "",
    resourceUrl: "",
    status: "TODO",
  };
};

const loadApplications = async (targetTaskNum: string) => {
  applicationLoading.value = true;
  try {
    const res = await getTaskApplications(targetTaskNum);
    applications.value = res?.data || [];
  } catch (error: any) {
    applications.value = [];
    ElMessage.error(error?.message || "应用场景加载失败");
  } finally {
    applicationLoading.value = false;
  }
};

const saveApplication = async () => {
  if (!taskNum.value) {
    ElMessage.warning("任务编号未加载，暂不能维护应用场景");
    return;
  }
  if (!applicationForm.value.title.trim()) {
    ElMessage.warning("应用项目标题不能为空");
    return;
  }
  applicationSaving.value = true;
  try {
    const payload = {
      title: applicationForm.value.title,
      description: applicationForm.value.description,
      resourceUrl: applicationForm.value.resourceUrl,
      status: applicationForm.value.status,
    };
    if (editingApplicationId.value) {
      await updateTaskApplication(editingApplicationId.value, payload);
      ElMessage.success("应用场景已更新");
    } else {
      await createTaskApplication(taskNum.value, payload);
      ElMessage.success("应用场景已添加");
    }
    resetApplicationForm();
    await loadApplications(taskNum.value);
  } finally {
    applicationSaving.value = false;
  }
};

const editApplication = (item: TaskApplication) => {
  editingApplicationId.value = item.id;
  applicationForm.value = {
    title: item.title || "",
    description: item.description || "",
    resourceUrl: item.resourceUrl || "",
    status: item.status || "TODO",
  };
};

const removeApplication = async (item: TaskApplication) => {
  await deleteTaskApplication(item.id);
  ElMessage.success("应用场景已删除");
  if (editingApplicationId.value === item.id) {
    resetApplicationForm();
  }
  if (taskNum.value) {
    await loadApplications(taskNum.value);
  }
};

const createTask = () => {
  request
    .post("/tasks", {
      taskName: taskName.value,
      taskDescription: taskDescription.value,
      materialURL: materialURL.value,
      ...priority.value,
    })
    .then((result) => {
      if (result.code === 200) {
        ElMessage.success("创建任务成功");
        router.push({ name: "study" });
      } else {
        ElMessage.error("任务创建失败：" + result.message);
      }
    });
};

const loadTask = () => {
  if (taskId !== null) {
    request.get(`/tasks/${taskId}`, {}).then((result) => {
      if (result.code === 200) {
        const data = result.data;
        taskNum.value = data.taskNum || "";
        taskName.value = data.taskName;
        taskDescription.value = data.taskDescription;
        materialURL.value = data.materialURL || data.materialUrl || "";
        priority.value = {
          urgency: data.urgency,
          importance: data.importance,
          contentDifficulty: data.contentDifficulty,
          futureValue: data.futureValue,
          subjectivePriority: data.subjectivePriority,
        };
        if (taskNum.value) {
          loadApplications(taskNum.value);
        }
      } else {
        ElMessage.error(`任务加载失败：${result.message}`);
      }
    });
  }
};

const updateTask = () => {
  request
    .put("/tasks/" + taskId, {
      id: taskId,
      taskName: taskName.value,
      taskDescription: taskDescription.value,
      materialURL: materialURL.value,
      ...priority.value,
    })
    .then((result) => {
      if (result.code === 200) {
        ElMessage.success("更新任务成功");
        router.push({ name: "study" });
      } else {
        ElMessage.error("任务更新失败：" + result.message);
      }
    });
};

const cancelTask = () => {
  ElMessage.info("已取消操作");
  router.push({ name: "study" });
};

const submitTask = () => {
  switch (route.name) {
    case "add-task":
      createTask();
      break;
    case "update-task":
      updateTask();
      break;
    default:
      ElMessage.error("未知操作类型");
  }
};

const screenWidth = ref(window.innerWidth);

const updateWidth = () => {
  screenWidth.value = window.innerWidth;
};

onMounted(() => {
  window.addEventListener("resize", updateWidth);
  if (route.meta.action === "update" && taskId !== null) {
    loadTask();
  }
});

onUnmounted(() => window.removeEventListener("resize", updateWidth));

const isMobile = computed(() => screenWidth.value <= 900);
</script>

<template>
  <section class="task-form-page">
    <el-form label-position="top" class="surface-card form-shell">
      <div class="group">
        <h3>基础信息</h3>
        <el-form-item label="任务名称">
          <el-input v-model="taskName" placeholder="例如：Vue3 组件通信实践" />
        </el-form-item>
        <el-form-item label="任务描述">
          <el-input v-model="taskDescription" type="textarea" :rows="5" placeholder="请输入任务描述" />
        </el-form-item>
        <el-form-item label="学习材料地址">
          <el-input v-model="materialURL" type="textarea" :rows="3" placeholder="每行输入一个链接&#10;例如：https://vuejs.org/guide&#10;https://github.com/vuejs/core" />
        </el-form-item>
      </div>

      <div class="group">
        <h3>优先级维度</h3>
        <div class="priority-grid" :class="{ mobile: isMobile }">
          <el-form-item label="急迫性">
            <el-select v-model="priority.urgency">
              <el-option v-for="item in priorityOptions" :key="'u' + item" :label="item" :value="item" />
            </el-select>
          </el-form-item>

          <el-form-item label="重要性">
            <el-select v-model="priority.importance">
              <el-option v-for="item in priorityOptions" :key="'i' + item" :label="item" :value="item" />
            </el-select>
          </el-form-item>

          <el-form-item label="内容难度">
            <el-select v-model="priority.contentDifficulty">
              <el-option v-for="item in priorityOptions" :key="'d' + item" :label="item" :value="item" />
            </el-select>
          </el-form-item>

          <el-form-item label="未来价值">
            <el-select v-model="priority.futureValue">
              <el-option v-for="item in priorityOptions" :key="'f' + item" :label="item" :value="item" />
            </el-select>
          </el-form-item>

          <el-form-item label="主观优先级">
            <el-select v-model="priority.subjectivePriority">
              <el-option v-for="item in priorityOptions" :key="'s' + item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
        </div>
      </div>

      <div class="group" v-if="isUpdateMode" v-loading="applicationLoading">
        <h3>应用场景</h3>
        <div class="application-list" v-if="applications.length > 0">
          <div class="application-item" v-for="item in applications" :key="item.id">
            <div class="application-main">
              <strong>{{ item.title }}</strong>
              <el-tag size="small" effect="plain">
                {{ applicationStatusOptions.find(option => option.value === item.status)?.label || item.status }}
              </el-tag>
            </div>
            <p v-if="item.description">{{ item.description }}</p>
            <el-link v-if="item.resourceUrl" :href="item.resourceUrl" target="_blank" type="primary">
              {{ item.resourceUrl }}
            </el-link>
            <div class="application-actions">
              <el-button text type="primary" size="small" @click="editApplication(item)">编辑</el-button>
              <el-button text type="danger" size="small" @click="removeApplication(item)">删除</el-button>
            </div>
          </div>
        </div>
        <p v-else class="empty-text">暂未设置应用场景</p>

        <div class="application-form">
          <el-input v-model="applicationForm.title" placeholder="应用项目" />
          <el-input
            v-model="applicationForm.description"
            type="textarea"
            :rows="3"
            placeholder="应用描述"
          />
          <el-input v-model="applicationForm.resourceUrl" placeholder="相关链接" />
          <div class="application-form-row">
            <el-select v-model="applicationForm.status" placeholder="状态">
              <el-option
                v-for="option in applicationStatusOptions"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              />
            </el-select>
            <el-button type="success" :loading="applicationSaving" @click="saveApplication">
              {{ editingApplicationId ? "更新" : "添加" }}
            </el-button>
            <el-button v-if="editingApplicationId" @click="resetApplicationForm">取消</el-button>
          </div>
        </div>
      </div>

      <div class="action-row">
        <el-button type="success" size="large" @click="submitTask">{{ buttonName }}</el-button>
        <el-button size="large" @click="cancelTask">取消</el-button>
      </div>
    </el-form>
  </section>
</template>

<style scoped>
.task-form-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.form-shell {
  padding: 22px;
}

.group + .group {
  margin-top: 12px;
}

.group h3 {
  margin: 0 0 12px;
  color: var(--green-900);
}

.priority-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 14px;
}

.priority-grid.mobile {
  grid-template-columns: 1fr;
}

.application-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.application-item {
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: #fbfefc;
}

.application-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.application-main strong {
  min-width: 0;
  color: var(--text-primary);
  word-break: break-word;
}

.application-item p {
  margin: 8px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
  word-break: break-word;
}

.application-actions {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 8px;
}

.application-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.application-form-row {
  display: grid;
  grid-template-columns: minmax(160px, 220px) auto auto;
  gap: 10px;
  align-items: center;
  justify-content: start;
}

.empty-text {
  margin: 0 0 12px;
  color: var(--text-secondary);
  font-size: 13px;
}

.action-row {
  margin-top: 8px;
  display: flex;
  gap: 10px;
}

@media (max-width: 768px) {
  .form-shell {
    padding: 16px;
  }

  .action-row {
    flex-direction: column;
  }

  .action-row .el-button {
    width: 100%;
    margin: 0;
  }

  .application-main {
    align-items: flex-start;
    flex-direction: column;
  }

  .application-form-row {
    grid-template-columns: 1fr;
  }

  .application-form-row .el-button {
    width: 100%;
    margin: 0;
  }
}
</style>
