<template>
  <div class="min-h-screen bg-base-100 p-5">
    <div class="max-w-7xl mx-auto">
      <div
        class="flex justify-between items-center mb-8 pb-6 border-b border-base-300"
      >
        <h1 class="text-3xl font-bold text-base-content">实验列表</h1>
      </div>

      <div
        v-if="loading"
        class="flex flex-col items-center justify-center min-h-[300px]"
      >
        <div class="loading loading-spinner loading-lg text-primary mb-4"></div>
        <p class="text-base-content/70">正在加载实验列表...</p>
      </div>

      <div
        v-else-if="error"
        class="flex flex-col items-center justify-center min-h-[300px]"
      >
        <div class="alert alert-error max-w-md">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="stroke-current shrink-0 h-6 w-6"
            fill="none"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
            />
          </svg>
          <div>
            <h3 class="font-bold">加载失败</h3>
            <div class="text-xs">{{ error }}</div>
          </div>
        </div>
        <button @click="refreshExams" class="btn btn-primary mt-4">重试</button>
      </div>

      <div v-else class="space-y-6">
        <div
          v-if="exams.length === 0 && !isAdmin"
          class="flex flex-col items-center justify-center min-h-[300px] text-center"
        >
          <h3 class="text-xl font-semibold text-base-content/70 mb-2">
            暂无实验
          </h3>
          <p class="text-base-content/50">
            当前没有可用的实验，请联系管理员添加实验内容。
          </p>
        </div>

        <div
          v-else
          class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
        >
          <!-- 管理员添加实验卡片 -->
          <div
            v-if="isAdmin"
            class="card bg-base-200 shadow-lg hover:shadow-xl transition-all duration-200 cursor-pointer hover:scale-[1.02]"
            @click="() => examEditModalRef?.show()"
          >
            <div class="card-body flex items-center justify-center text-center">
              <div class="text-primary text-6xl mb-4">+</div>
              <h3 class="text-lg font-semibold text-primary">添加新实验</h3>
              <p class="text-sm text-primary/70">点击创建新的实验</p>
            </div>
          </div>

          <div
            v-for="exam in exams"
            :key="exam.id"
            class="card bg-base-200 shadow-lg hover:shadow-xl transition-all duration-200 cursor-pointer hover:scale-[1.02] relative overflow-hidden"
            @click="handleCardClicked($event, exam.id)"
          >
            <div class="card-body">
              <div class="flex justify-between items-start mb-4">
                <h3 class="card-title text-base-content">{{ exam.name }}</h3>
                <div class="flex flex-row items-center gap-2">
                  <button
                    class="btn btn-ghost text-error hover:underline group"
                    @click="handleEditExamClicked($event, exam.id)"
                  >
                    <EditIcon
                      class="w-4 h-4 transition-transform duration-200 group-hover:scale-110"
                    />
                    编辑
                  </button>
                  <span
                    class="card-title text-sm text-blue-600/50 dark:text-sky-400/50"
                    >{{ exam.id }}</span
                  >
                </div>
              </div>

              <!-- 实验标签 -->
              <div
                v-if="exam.tags && exam.tags.length > 0"
                class="flex flex-wrap gap-1 mb-3"
              >
                <span
                  v-for="tag in exam.tags"
                  :key="tag"
                  class="badge badge-outline badge-sm"
                  >{{ tag }}</span
                >
              </div>

              <div class="space-y-2 text-sm text-base-content/70">
                <div class="flex items-center gap-2">
                  <svg
                    class="w-4 h-4"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                    />
                  </svg>
                  <span>创建：{{ formatDate(exam.createdTime) }}</span>
                </div>
                <div class="flex items-center gap-2">
                  <svg
                    class="w-4 h-4"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
                    />
                  </svg>
                  <span>更新：{{ formatDate(exam.updatedTime) }}</span>
                </div>
              </div>
            </div>

            <!-- 难度书角标识 -->
            <div
              class="difficulty-corner"
              :class="{
                'difficulty-1': exam.difficulty === 1,
                'difficulty-2': exam.difficulty === 2,
                'difficulty-3': exam.difficulty === 3,
                'difficulty-4': exam.difficulty === 4,
                'difficulty-5': exam.difficulty === 5,
              }"
            ></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 实验详情模态框 -->
    <ExamInfoModal
      v-if="selectedExam"
      v-model:show="showInfoModal"
      :selectedExam="selectedExam"
    />

    <!-- 创建实验模态框 -->
    <ExamEditModal
      ref="examEditModalRef"
      v-model:is-show-modal="showEditModal"
      @edit-finished="handleEditExamFinished"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { AuthManager } from "@/utils/AuthManager";
import { ExamClient, type ExamInfo } from "@/APIClient";
import { formatDate } from "@/utils/Common";
import ExamInfoModal from "./ExamInfoModal.vue";
import ExamEditModal from "./ExamEditModal.vue";
import { EditIcon } from "lucide-vue-next";
import { templateRef } from "@vueuse/core";
import { isArray, isNull } from "lodash";
import { watch } from "vue";
import { watchEffect } from "vue";
import { nextTick } from "vue";

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

// 响应式数据
const exams = ref<ExamInfo[]>([]);
const selectedExam = ref<ExamInfo | null>(null);
const loading = ref(false);
const error = ref<string>("");
const isAdmin = ref(false);

// Modal
const examEditModalRef = templateRef("examEditModalRef");
const showInfoModal = ref(false);
const showEditModal = ref(false);

watch(
  () => showInfoModal.value,
  () => {
    if (isNull(selectedExam.value) || showInfoModal.value == false) {
      router.replace({ path: "/exam" });
    } else {
      router.replace({ path: `/exam/${selectedExam.value.id}` });
    }
  },
);

watch(
  () => showEditModal.value,
  () => {
    if (showEditModal.value) {
      router.replace({
        path: `/exam/edit/${examEditModalRef.value?.editExamInfo.id}`,
      });
    } else {
      router.replace({ path: `/exam` });
    }
  },
);

async function refreshExams() {
  loading.value = true;
  error.value = "";

  try {
    const client = AuthManager.createClient(ExamClient);
    exams.value = await client.getExamList();
  } catch (err: any) {
    error.value = err.message || "获取实验列表失败";
    console.error("获取实验列表失败:", err);
  } finally {
    loading.value = false;
  }
}

async function viewExam(examId: string) {
  try {
    const client = AuthManager.createClient(ExamClient);
    selectedExam.value = await client.getExam(examId);
    showInfoModal.value = true;
  } catch (err: any) {
    error.value = err.message || "获取实验详情失败";
    console.error("获取实验详情失败:", err);
    showInfoModal.value = false;
  }
}

async function handleEditExamFinished() {
  await refreshExams();
}

async function handleCardClicked(event: MouseEvent, examId: string) {
  if (event.target instanceof HTMLButtonElement) return;
  await viewExam(examId);
}

async function handleEditExamClicked(event: MouseEvent, examId: string) {
  await examEditModalRef?.value?.editExam(examId);
  router.replace(`/exam/edit/${examId}`);
}

// 生命周期
onMounted(async () => {
  const isAuthenticated = await AuthManager.isAuthenticated();
  if (!isAuthenticated) {
    router.push("/login");
  }

  isAdmin.value = await AuthManager.isAdminAuthenticated();

  await refreshExams();
});

async function loadBasicPage(page: string) {
  if (page === "") return;
  else if (page === "edit") showEditModal.value = true;
  else if (page) await viewExam(page);
  else router.push("/exam");
}

onMounted(async () => {
  // 处理路由参数，如果有examId则自动打开该实验的详情模态框
  const page = route.params.page;

  if (Array.isArray(page)) {
    if (page.length == 1) await loadBasicPage(page[0]);
    else if (page.length == 2) {
      if (page[0] === "edit") {
        await examEditModalRef.value?.editExam(page[1]);
      } else {
        router.push("/exam");
      }
    } else router.push("/exam");
  } else {
    await loadBasicPage(page);
  }
});
</script>

<style scoped>
/* 难度书角样式 */
.difficulty-corner {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 10;
}

.difficulty-corner::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 48px 48px 0;
  transition: all 0.3s ease;
}

/* 难度颜色渐变：绿色到红色 */
.difficulty-1::before {
  border-color: transparent transparent rgba(6, 199, 77, 0.6) transparent; /* 绿色 80% 透明度 */
}

.difficulty-2::before {
  border-color: transparent transparent rgba(127, 204, 11, 0.6) transparent; /* 黄绿色 80% 透明度 */
}

.difficulty-3::before {
  border-color: transparent transparent rgba(255, 191, 0, 0.6) transparent; /* 黄色 80% 透明度 */
}

.difficulty-4::before {
  border-color: transparent transparent rgba(255, 106, 0, 0.6) transparent; /* 橙色 80% 透明度 */
}

.difficulty-5::before {
  border-color: transparent transparent rgba(245, 35, 35, 0.6) transparent; /* 红色 80% 透明度 */
}

/* 悬停效果 */
.card:hover .difficulty-corner::before {
  filter: brightness(1.1);
}
</style>
