<template>
  <v-dialog
    v-model="dialog"
    fullscreen-breakpoint="sm"
    max-width="600"
    persistent
  >
    <v-card
      border
      class="random-picker-card"
      rounded="xl"
    >
      <v-card-title class="text-h5 d-flex align-center">
        <v-icon
          class="mr-2"
          icon="mdi-account-question"
        />
        随机点名
        <v-spacer />
        <v-btn
          icon="mdi-close"
          variant="text"
          @click="dialog = false"
        />
      </v-card-title>

      <v-card-text
        v-if="!isPickingStarted"
        class="text-center py-6"
      >
        <div class="text-h6 mb-4">
          请选择抽取人数
        </div>

        <div class="d-flex justify-center align-center counter-container">
          <v-btn
            :disabled="count <= 1"
            class="counter-btn"
            color="primary"
            icon="mdi-minus"
            size="x-large"
            variant="tonal"
            @click="decrementCount"
          />

          <div class="count-display mx-8">
            <span class="text-h2 font-weight-bold">{{ count }}</span>
            <span class="text-subtitle-1 ml-2">人</span>
          </div>

          <v-btn
            :disabled="count >= maxAllowedCount"
            class="counter-btn"
            color="primary"
            icon="mdi-plus"
            size="x-large"
            variant="tonal"
            @click="incrementCount"
          />
        </div>

        <!-- 添加模式切换 -->
        <div class="mode-switch-container mt-6">
          <v-btn-toggle
            v-model="pickerMode"
            class="mode-toggle"
            color="primary"
            mandatory
            rounded="pill"
          >
            <v-btn
              prepend-icon="mdi-account"
              value="name"
            >
              姓名模式
            </v-btn>
            <v-btn
              prepend-icon="mdi-numeric"
              value="number"
            >
              学号模式
            </v-btn>
          </v-btn-toggle>
        </div>

        <!-- 学号范围设置 -->
        <div
          v-if="pickerMode === 'number'"
          class="number-range-container mt-4"
        >
          <div class="text-subtitle-1 mb-2">
            学号范围设置
          </div>
          <div class="d-flex justify-center align-center gap-4">
            <v-text-field
              v-model.number="minNumber"
              class="number-input"
              density="compact"
              hide-details
              label="最小值"
              max="100"
              min="1"
              type="number"
            />
            <span class="mx-2">至</span>
            <v-text-field
              v-model.number="maxNumber"
              class="number-input"
              density="compact"
              hide-details
              label="最大值"
              max="100"
              min="1"
              type="number"
            />
          </div>
        </div>

        <div class="mt-4">
          <v-btn
            :disabled="filteredStudents.length === 0"
            class="start-btn"
            color="primary"
            prepend-icon="mdi-dice-multiple"
            size="x-large"
            @click="startPicking"
          >
            开始抽取
          </v-btn>
        </div>

        <div
          v-if="filteredStudents.length === 0"
          class="mt-4 text-error"
        >
          <template v-if="pickerMode === 'name'">
            没有可抽取的学生，请调整过滤选项
          </template>
          <template v-else>
            请设置有效的学号范围
          </template>
        </div>

        <div class="mt-4 text-caption">
          当前可抽取学生: {{ filteredStudents.length }}人
          <v-tooltip
            v-if="pickerMode === 'name'"
            location="bottom"
          >
            <template #activator="{ props }">
              <v-icon
                class="ml-1"
                icon="mdi-information-outline"
                size="small"
                v-bind="props"
              />
            </template>
            <div class="pa-2">
              <div v-if="tempFilters.excludeAbsent">
                • 已排除请假学生 ({{ absentCount }}人)
              </div>
              <div v-if="tempFilters.excludeLate">
                • 已排除迟到学生 ({{ lateCount }}人)
              </div>
              <div v-if="tempFilters.excludeExcluded">
                • 已排除不参与学生 ({{ excludedCount }}人)
              </div>
            </div>
          </v-tooltip>

          <!-- 添加临时过滤选项 -->
          <div
            v-if="pickerMode === 'name'"
            class="d-flex flex-wrap justify-center gap-2 mt-4"
          >
            <v-chip
              :color="tempFilters.excludeLate ? 'warning' : 'default'"
              :variant="tempFilters.excludeLate ? 'elevated' : 'text'"
              class="filter-chip"
              prepend-icon="mdi-clock-alert"
              @click="tempFilters.excludeLate = !tempFilters.excludeLate"
            >
              {{ tempFilters.excludeLate ? "排除" : "包含" }}迟到学生
            </v-chip>
            <v-chip
              :color="tempFilters.excludeAbsent ? 'error' : 'default'"
              :variant="tempFilters.excludeAbsent ? 'elevated' : 'text'"
              class="filter-chip"
              prepend-icon="mdi-account-off"
              @click="tempFilters.excludeAbsent = !tempFilters.excludeAbsent"
            >
              {{ tempFilters.excludeAbsent ? "排除" : "包含" }}请假学生
            </v-chip>

            <v-chip
              :color="tempFilters.excludeExcluded ? 'grey' : 'default'"
              :variant="tempFilters.excludeExcluded ? 'elevated' : 'text'"
              class="filter-chip"
              prepend-icon="mdi-account-cancel"
              @click="tempFilters.excludeExcluded = !tempFilters.excludeExcluded"
            >
              {{ tempFilters.excludeExcluded ? "排除" : "包含" }}不参与学生
            </v-chip>
          </div>
        </div>
      </v-card-text>

      <v-card-text
        v-else
        class="text-center py-6"
      >
        <div
          v-if="isAnimating"
          class="animation-container"
        >
          <div class="animation-wrapper">
            <transition-group
              class="shuffle-container"
              name="shuffle"
              tag="div"
            >
              <div
                v-for="(student, index) in animationStudents"
                :key="student.id"
                :class="{ highlighted: highlightedIndices.includes(index) }"
                class="student-item"
              >
                {{ student.name }}
              </div>
            </transition-group>
          </div>
        </div>

        <div
          v-else
          class="result-container"
        >
          <div class="text-h6 mb-4">
            抽取结果
          </div>
          <v-card
            v-for="(student, index) in pickedStudents"
            :key="index"
            class="mb-2 result-card"
            color="primary"
            variant="outlined"
          >
            <v-card-text
              class="text-h4 text-center py-4 d-flex align-center justify-center"
            >
              {{ student }}
              <v-btn
                :disabled="remainingStudents.length === 0"
                :title="
                  remainingStudents.length === 0
                    ? '没有更多可用学生'
                    : '重新抽取此学生'
                "
                class="ml-2 refresh-btn"
                icon="mdi-refresh"
                size="small"
                variant="text"
                @click="refreshSingleStudent(index)"
              />
            </v-card-text>
          </v-card>

          <div class="mt-8 d-flex justify-center">
            <v-btn
              class="mx-2"
              color="primary"
              prepend-icon="mdi-refresh"
              size="large"
              @click="resetPicker"
            >
              重新抽取
            </v-btn>
            <v-btn
              class="mx-2"
              color="grey"
              size="large"
              variant="outlined"
              @click="dialog = false"
            >
              关闭
            </v-btn>
          </div>
        </div>
      </v-card-text>
    </v-card>
  </v-dialog>
</template>

<script>
import {getSetting, setSetting} from "@/utils/settings";

export default {
  name: "RandomPicker",
  props: {
    studentList: {
      type: Array,
      required: true,
    },
    attendance: {
      type: Object,
      required: true,
      default: () => ({absent: [], late: [], exclude: []}),
    },
  },
  data() {
    return {
      dialog: false,
      count: getSetting("randomPicker.defaultCount"),
      isPickingStarted: false,
      isAnimating: false,
      pickedStudents: [],
      animationStudents: [],
      highlightedIndices: [],
      animationTimer: null,
      getSetting,
      // 添加临时过滤选项
      tempFilters: {
        excludeAbsent: getSetting("randomPicker.excludeAbsent"),
        excludeLate: getSetting("randomPicker.excludeLate"),
        excludeExcluded: getSetting("randomPicker.excludeExcluded"),
      },
      pickerMode: getSetting("randomPicker.mode"),
      minNumber: getSetting("randomPicker.minNumber"),
      maxNumber: getSetting("randomPicker.maxNumber"),
    };
  },
  computed: {
    // 计算请假、迟到、不参与的学生数量
    absentCount() {
      return this.attendance.absent ? this.attendance.absent.length : 0;
    },
    lateCount() {
      return this.attendance.late ? this.attendance.late.length : 0;
    },
    excludedCount() {
      return this.attendance.exclude ? this.attendance.exclude.length : 0;
    },

    // 添加数字模式的学生列表
    numberModeStudents() {
      if (this.pickerMode !== "number") return [];
      const students = [];
      for (let i = this.minNumber; i <= this.maxNumber; i++) {
        students.push(i.toString().padStart(2, "0") + "号");
      }
      return students;
    },

    // 修改 filteredStudents 计算属性
    filteredStudents() {
      if (this.pickerMode === "number") {
        return this.numberModeStudents;
      }

      if (!this.studentList || !this.studentList.length) return [];

      return this.studentList.filter((student) => {
        if (
          this.tempFilters.excludeAbsent &&
          this.attendance.absent.includes(student)
        ) {
          return false;
        }
        if (
          this.tempFilters.excludeLate &&
          this.attendance.late.includes(student)
        ) {
          return false;
        }
        if (
          this.tempFilters.excludeExcluded &&
          this.attendance.exclude.includes(student)
        ) {
          return false;
        }
        return true;
      });
    },

    // 兼容性：保留原有的 availableStudents 计算属性，但使用新的过滤逻辑
    availableStudents() {
      return this.filteredStudents;
    },

    maxAllowedCount() {
      return Math.min(10, this.filteredStudents.length);
    },

    // 计算剩余可用学生（排除已抽取的学生）
    remainingStudents() {
      return this.filteredStudents.filter(
        (student) => !this.pickedStudents.includes(student)
      );
    },
  },
  watch: {
    dialog(newVal) {
      if (newVal) {
        // 打开对话框时重置状态
        this.count = getSetting("randomPicker.defaultCount");
        this.isPickingStarted = false;
        this.isAnimating = false;
        this.pickedStudents = [];

        // 重置临时过滤选项为设置中的值
        this.tempFilters = {
          excludeAbsent: getSetting("randomPicker.excludeAbsent"),
          excludeLate: getSetting("randomPicker.excludeLate"),
          excludeExcluded: getSetting("randomPicker.excludeExcluded"),
        };
      } else {
        // 关闭对话框时清除计时器
        if (this.animationTimer) {
          clearTimeout(this.animationTimer);
          this.animationTimer = null;
        }
      }
    },

    // 监听过滤选项变化，确保count不超过可用学生数
    tempFilters: {
      handler() {
        if (this.count > this.maxAllowedCount) {
          this.count = Math.max(1, this.maxAllowedCount);
        }
      },
      deep: true,
    },

    // 添加模式切换监听
    pickerMode: {
      handler(newMode) {
        setSetting("randomPicker.mode", newMode);
      },
    },
    minNumber: {
      handler(newValue) {
        if (newValue > this.maxNumber) {
          this.minNumber = this.maxNumber;
        }
        if (newValue < 1) {
          this.minNumber = 1;
        }
        setSetting("randomPicker.minNumber", this.minNumber);
      },
    },
    maxNumber: {
      handler(newValue) {
        if (newValue < this.minNumber) {
          this.maxNumber = this.minNumber;
        }
        if (newValue > 100) {
          this.maxNumber = 100;
        }
        setSetting("randomPicker.maxNumber", this.maxNumber);
      },
    },
  },
  methods: {
    open() {
      this.dialog = true;
    },
    incrementCount() {
      if (this.count < this.maxAllowedCount) {
        this.count++;
      }
    },
    decrementCount() {
      if (this.count > 1) {
        this.count--;
      }
    },
    startPicking() {
      if (this.filteredStudents.length === 0) return;

      this.isPickingStarted = true;

      if (getSetting("randomPicker.animation")) {
        this.startAnimation();
      } else {
        this.finishPicking();
      }
    },
    startAnimation() {
      this.isAnimating = true;

      // 创建动画用的学生列表（添加ID以便于动画）
      this.animationStudents = this.filteredStudents.map((name, index) => ({
        id: `student-${index}`,
        name,
      }));

      // 随机高亮显示
      this.animateHighlight();
    },
    animateHighlight() {
      const totalSteps = 5; // 动画总步数
      let currentStep = 0;
      const intervalTime = 50; // 初始间隔时间

      const animate = () => {
        // 清除之前的高亮
        this.highlightedIndices = [];

        // 随机选择要高亮的索引
        const indices = [];
        for (let i = 0; i < this.count; i++) {
          let randomIndex;
          do {
            randomIndex = Math.floor(
              Math.random() * this.animationStudents.length
            );
          } while (indices.includes(randomIndex));
          indices.push(randomIndex);
        }

        this.highlightedIndices = indices;

        currentStep++;

        // 逐渐增加间隔时间，使动画变慢
        const nextInterval = intervalTime + currentStep * 20;

        if (currentStep < totalSteps) {
          this.animationTimer = setTimeout(animate, nextInterval);
        } else {
          // 动画结束，显示最终结果
          setTimeout(() => {
            this.finishPicking();
          }, 500);
        }
      };

      // 开始动画
      animate();
    },
    finishPicking() {
      this.isAnimating = false;

      // 随机选择学生
      const shuffled = [...this.filteredStudents].sort(
        () => 0.5 - Math.random()
      );
      this.pickedStudents = shuffled.slice(0, this.count);
    },
    resetPicker() {
      this.isPickingStarted = false;
      this.isAnimating = false;
      this.pickedStudents = [];
      if (this.animationTimer) {
        clearTimeout(this.animationTimer);
        this.animationTimer = null;
      }
    },
    // 刷新单个学生
    refreshSingleStudent(index) {
      if (this.remainingStudents.length === 0) return;

      // 从剩余学生中随机选择一个
      const randomIndex = Math.floor(
        Math.random() * this.remainingStudents.length
      );
      const newStudent = this.remainingStudents[randomIndex];

      // 替换指定位置的学生
      this.pickedStudents[index] = newStudent;

      // 添加动画效果
      const resultCards = document.querySelectorAll(".result-card");
      if (resultCards[index]) {
        resultCards[index].classList.add("refresh-animation");
        setTimeout(() => {
          resultCards[index].classList.remove("refresh-animation");
        }, 500);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.random-picker-card {
  overflow: hidden;
}

.counter-container {
  margin: 2rem 0;
}

.counter-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

.count-display {
  min-width: 100px;
  text-align: center;
}

.start-btn {
  min-width: 200px;
  height: 64px;
  border-radius: 32px;
  font-size: 1.2rem;
}

// 过滤选项卡片样式
.filter-options-card {
  max-width: 450px;
  margin: 0 auto;
}

.filter-chip {
  cursor: pointer;
  transition: all 0.2s ease;

  &:active {
    transform: scale(0.95);
  }
}

// 学生列表提示框样式
.student-list-tooltip {
  max-height: 200px;
  overflow-y: auto;
  margin-top: 5px;
  font-size: 0.9em;
}

.animation-container {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.animation-wrapper {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.shuffle-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.student-item {
  padding: 10px 15px;
  background-color: rgba(var(--v-theme-surface-variant), 0.7);
  border-radius: 8px;
  transition: all 0.3s ease;
  font-size: 1.2rem;

  &.highlighted {
    background-color: rgb(var(--v-theme-primary));
    color: rgb(var(--v-theme-on-primary));
    transform: scale(1.1);
    font-weight: bold;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
}

.result-container {
  min-height: 300px;
}

.result-card {
  max-width: 400px;
  margin: 0 auto;
  transition: transform 0.3s ease;

  &:hover {
    transform: translateY(-4px);

    .refresh-btn {
      opacity: 1;
    }
  }
}

.refresh-btn {
  opacity: 0.7;
  transition: opacity 0.3s ease;

  &:hover {
    opacity: 1;
  }
}

// 刷新动画
@keyframes refresh-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(var(--v-theme-primary), 0.5);
  }

  50% {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(var(--v-theme-primary), 0.7);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(var(--v-theme-primary), 0.5);
  }
}

.refresh-animation {
  animation: refresh-pulse 0.5s ease;
}

// 动画效果
.shuffle-enter-active,
.shuffle-leave-active {
  transition: all 0.5s ease;
}

.shuffle-enter-from,
.shuffle-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

.shuffle-move {
  transition: transform 0.5s ease;
}

// 触摸屏优化
@media (hover: none) {
  .counter-btn,
  .start-btn {
    min-height: 72px;
  }

  .student-item {
    padding: 12px 20px;
    font-size: 1.4rem;
  }

  .refresh-btn {
    opacity: 1;
    min-width: 36px;
    min-height: 36px;
  }

  .filter-chip {
    min-height: 40px;
    font-size: 1rem;
  }
}

// 添加模式切换样式
.mode-switch-container {
  .mode-toggle {
    border: 1px solid rgba(var(--v-theme-primary), 0.2);
    border-radius: 50px;
    padding: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    .v-btn {
      min-width: 120px;
      height: 40px;
      font-weight: 500;
      letter-spacing: 0.5px;

      &.v-btn--active {
        transform: scale(1.02);
        font-weight: 600;
      }
    }
  }
}

// 添加学号范围设置样式
.number-range-container {
  max-width: 300px;
  margin: 0 auto;
  padding: 16px;
  background: rgba(var(--v-theme-surface-variant), 0.1);
  border-radius: 12px;
  border: 1px solid rgba(var(--v-theme-primary), 0.1);

  .number-input {
    width: 100px;

    :deep(.v-field) {
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }
  }
}
</style>
