<template>
  <div v-if="show" class="modal modal-open overflow-hidden">
    <div
      class="modal-box w-full max-w-6xl h-[90vh] max-h-[90vh] p-0 overflow-hidden"
    >
      <div
        class="flex justify-between items-center p-6 border-b border-base-300"
      >
        <h2 class="text-2xl font-bold text-base-content">
          {{ selectedExam.id }} - {{ selectedExam.name }}
        </h2>
        <button
          @click="closeExamDetail"
          class="btn btn-sm btn-circle btn-ghost"
        >
          <svg
            class="w-6 h-6"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M6 18L18 6M6 6l12 12"
            />
          </svg>
        </button>
      </div>

      <div class="flex h-[calc(90vh-5rem)]">
        <!-- 左侧：实验信息和描述 -->
        <div class="flex-1 p-6 overflow-y-auto border-r border-base-300">
          <div class="space-y-6">
            <!-- 实验信息 -->
            <div class="card bg-base-200">
              <div class="card-body">
                <h3 class="card-title text-lg mb-4">实验信息</h3>
                <div class="space-y-3">
                  <div class="flex">
                    <span class="font-medium text-base-content w-24"
                      >实验ID：</span
                    >
                    <span class="text-base-content/70">{{
                      selectedExam.id
                    }}</span>
                  </div>
                  <div class="flex">
                    <span class="font-medium text-base-content w-24"
                      >实验名称：</span
                    >
                    <span class="text-base-content/70">{{
                      selectedExam.name
                    }}</span>
                  </div>
                  <div class="flex">
                    <span class="font-medium text-base-content w-24"
                      >难度等级：</span
                    >
                    <div class="flex items-center gap-2">
                      <div class="rating rating-sm">
                        <span
                          v-for="i in 5"
                          :key="i"
                          class="mask mask-star-2"
                          :class="
                            i <= selectedExam.difficulty
                              ? 'bg-orange-400'
                              : 'bg-base-300'
                          "
                        ></span>
                      </div>
                      <span class="text-sm text-base-content/50"
                        >({{ selectedExam.difficulty }}/5)</span
                      >
                    </div>
                  </div>
                  <div
                    v-if="selectedExam.tags && selectedExam.tags.length > 0"
                    class="flex"
                  >
                    <span class="font-medium text-base-content w-24"
                      >标签：</span
                    >
                    <div class="flex flex-wrap gap-1">
                      <span
                        v-for="tag in selectedExam.tags"
                        :key="tag"
                        class="badge badge-outline badge-sm"
                        >{{ tag }}</span
                      >
                    </div>
                  </div>
                  <div class="flex">
                    <span class="font-medium text-base-content w-24"
                      >创建时间：</span
                    >
                    <span class="text-base-content/70">{{
                      formatDate(selectedExam.createdTime)
                    }}</span>
                  </div>
                  <div class="flex">
                    <span class="font-medium text-base-content w-24"
                      >更新时间：</span
                    >
                    <span class="text-base-content/70">{{
                      formatDate(selectedExam.updatedTime)
                    }}</span>
                  </div>
                  <div class="flex">
                    <span class="font-medium text-base-content w-24"
                      >可见性：</span
                    >
                    <span class="text-base-content/70">{{
                      selectedExam.isVisibleToUsers
                        ? "对学生可见"
                        : "仅管理员可见"
                    }}</span>
                  </div>
                </div>
              </div>
            </div>

            <!-- 实验描述 -->
            <div class="card bg-base-200">
              <div class="card-body">
                <h3 class="card-title text-lg mb-4">实验描述</h3>
                <div class="prose prose-sm max-w-none">
                  <p class="text-base-content/70">
                    {{ selectedExam.description }}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧：完成情况和控制 -->
        <div class="w-80 p-6 bg-base-200 overflow-y-auto">
          <div class="space-y-6">
            <!-- 完成情况 -->
            <div class="card bg-base-100">
              <div class="card-body">
                <h3 class="card-title text-lg mb-4">完成情况</h3>

                <div class="space-y-4">
                  <div class="flex justify-between items-center">
                    <span class="text-base-content/70">当前状态</span>
                    <div class="badge badge-error">未完成</div>
                  </div>

                  <div class="flex justify-between items-center">
                    <span class="text-base-content/70">批阅状态</span>
                    <div class="badge badge-ghost">待提交</div>
                  </div>

                  <div class="flex justify-between items-center">
                    <span class="text-base-content/70">成绩</span>
                    <span class="text-base-content/50">未评分</span>
                  </div>
                </div>

                <div class="divider"></div>

                <!-- 提交历史 -->
                <div class="space-y-3">
                  <h4 class="font-medium text-base-content">提交历史</h4>
                  <div
                    v-if="isUndefined(commitsList)"
                    class="text-sm text-base-content/50 text-center py-4"
                  >
                    暂无提交记录
                  </div>
                  <div v-else class="overflow-y-auto">
                    <ul class="steps steps-vertical">
                      <li class="step step-primary">Register</li>
                      <li class="step step-primary">Choose plan</li>
                      <li class="step">Purchase</li>
                      <li class="step">Receive Product</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>

            <!-- 操作按钮 -->
            <div class="space-y-3">
              <button @click="startExam" class="btn btn-primary w-full">
                <svg
                  class="w-5 h-5 mr-2"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M14.828 14.828a4 4 0 01-5.656 0M9 10h1m4 0h1m-6 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                  />
                </svg>
                开始实验
              </button>

              <button
                @click="downloadResources"
                class="btn btn-outline w-full"
                :disabled="downloadingResources"
              >
                <svg
                  class="w-5 h-5 mr-2"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
                  />
                </svg>
                <span v-if="downloadingResources">下载中...</span>
                <span v-else>下载资源包</span>
              </button>

              <button class="btn btn-outline w-full">
                <svg
                  class="w-5 h-5 mr-2"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
                  />
                </svg>
                查看记录
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="modal-backdrop" @click="closeExamDetail"></div>
  </div>
</template>
<script setup lang="ts">
import type { Commit, ExamInfo } from "@/APIClient";
import { useAlertStore } from "@/components/Alert";
import { AuthManager } from "@/utils/AuthManager";
import { useRequiredInjection } from "@/utils/Common";
import { defineModel, ref } from "vue";
import { useRouter } from "vue-router";
import { formatDate } from "@/utils/Common";
import { computed } from "vue";
import { watch } from "vue";
import { isNull, isUndefined } from "lodash";

const alertStore = useRequiredInjection(useAlertStore);
const router = useRouter();

const show = defineModel<boolean>("show", {
  default: false,
});

const props = defineProps<{
  selectedExam: ExamInfo;
}>();

const commitsList = ref<Commit[]>();
async function updateCommits() {
  const client = AuthManager.createAuthenticatedExamClient();
  const list = await client.getCommitsByExamId(props.selectedExam.id);
  commitsList.value = list;
}
watch(() => props.selectedExam, updateCommits);

// Download resources
const downloadingResources = ref(false);
const downloadResources = async () => {
  if (!props.selectedExam || downloadingResources.value) return;

  downloadingResources.value = true;

  try {
    const resourceClient = AuthManager.createAuthenticatedResourceClient();

    // 获取资源包列表（模板资源）
    const resourceList = await resourceClient.getResourceList(
      props.selectedExam.id,
      "resource",
      "template",
    );

    if (resourceList && resourceList.length > 0) {
      // 使用新的ResourceClient API获取第一个资源包
      const resourceId = resourceList[0].id;
      const fileResponse = await resourceClient.getResourceById(resourceId);

      // 创建Blob URL
      const blobUrl = URL.createObjectURL(fileResponse.data);

      // 创建下载链接
      const link = document.createElement("a");
      link.href = blobUrl;
      link.download =
        fileResponse.fileName ||
        resourceList[0].name ||
        `${props.selectedExam.name}_资源包`;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);

      // 清理Blob URL
      URL.revokeObjectURL(blobUrl);

      alertStore.success("资料下载成功");
      console.log("资料下载成功:", props.selectedExam.id);
    } else {
      alertStore.error("该实验暂无资料包");
    }
  } catch (err: any) {
    alertStore.error(err.message || "下载资料失败");
    console.error("下载资料失败:", err);
  } finally {
    downloadingResources.value = false;
  }
};

// 开始实验
const startExam = () => {
  if (props.selectedExam) {
    // 跳转到项目页面，传递实验ID
    console.log("开始实验:", props.selectedExam.id);
    router.push({
      name: "project",
      query: { examId: props.selectedExam.id },
    });
  }
};

const closeExamDetail = () => {
  show.value = false;
};
</script>

<style lang="postcss" scoped></style>
