<template>
  <div class="video-viewer">
    <div class="video-toolbar">
      <div class="toolbar-left">
        <el-button-group>
          <el-button
            size="small"
            :icon="isPlaying ? VideoPause : VideoPlay"
            @click="togglePlay"
            :title="isPlaying ? '暂停' : '播放'"
          />
          <el-button
            size="small"
            :icon="RefreshLeft"
            @click="skipBackward"
            title="后退10秒"
          />
          <el-button
            size="small"
            :icon="RefreshRight"
            @click="skipForward"
            title="前进10秒"
          />
        </el-button-group>
        <div class="time-display ml-10">
          {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
        </div>
        <div class="volume-control ml-10">
          <el-button
            size="small"
            :icon="isMuted ? TurnOff : Open"
            @click="toggleMute"
            :title="isMuted ? '取消静音' : '静音'"
          />
          <el-slider
            v-model="volume"
            :min="0"
            :max="100"
            @input="updateVolume"
            class="volume-slider"
          />
        </div>
        <el-button
          size="small"
          :icon="FullScreen"
          @click="toggleFullscreen"
          title="全屏"
          class="ml-10"
        />
      </div>
      <div class="toolbar-right">
        <el-button size="small" :icon="Download" @click="downloadFile"
          >下载</el-button
        >
      </div>
    </div>
    <div class="video-container" ref="videoContainerRef">
      <div v-if="loading" class="loading-container">
        <el-skeleton :rows="10" animated />
      </div>
      <div v-else-if="error" class="error-container">
        <el-icon class="error-icon"><WarningFilled /></el-icon>
        <p>{{ error }}</p>
        <el-button size="small" type="primary" @click="loadVideo"
          >重试</el-button
        >
      </div>
      <div v-else class="video-player">
        <video
          ref="videoElementRef"
          class="video-element"
          :src="videoUrl"
          @loadedmetadata="onLoadedMetadata"
          @timeupdate="onTimeUpdate"
          @ended="onEnded"
          @error="onError"
          @canplay="onCanPlay"
          @play="onPlay"
          @pause="onPause"
          @click="togglePlay"
          :poster="posterUrl"
        />
        <div
          class="video-controls"
          v-show="showControls"
          @mouseenter="resetControlsTimer"
          @mouseleave="startHideControlsTimer"
        >
          <div class="progress-bar">
            <el-slider
              v-model="currentTime"
              :min="0"
              :max="duration || 100"
              :format-tooltip="formatTime"
              @input="seek"
              class="progress-slider"
            />
          </div>
          <div class="control-buttons">
            <div class="left-controls">
              <el-button
                size="small"
                :icon="isPlaying ? VideoPause : VideoPlay"
                @click.stop="togglePlay"
              />
              <span class="time-display"
                >{{ formatTime(currentTime) }} /
                {{ formatTime(duration) }}</span
              >
            </div>
            <div class="right-controls">
              <div class="playback-speed">
                <el-dropdown trigger="click" @command="setPlaybackRate">
                  <el-button size="small">
                    {{ playbackRate }}x
                    <el-icon class="el-icon--right"><ArrowDown /></el-icon>
                  </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item :command="0.5">0.5x</el-dropdown-item>
                      <el-dropdown-item :command="1.0">1.0x</el-dropdown-item>
                      <el-dropdown-item :command="1.5">1.5x</el-dropdown-item>
                      <el-dropdown-item :command="2.0">2.0x</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
              <div class="volume-control-compact">
                <el-button
                  size="small"
                  :icon="isMuted ? TurnOff : Open"
                  @click.stop="toggleMute"
                />
                <el-slider
                  v-model="volume"
                  :min="0"
                  :max="100"
                  @input="updateVolume"
                  class="volume-slider-compact"
                />
              </div>
              <el-button
                size="small"
                :icon="FullScreen"
                @click.stop="toggleFullscreen"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";
import { ElMessage } from "element-plus";
import {
  VideoPlay,
  VideoPause,
  RefreshLeft,
  RefreshRight,
  TurnOff,
  Open,
  Download,
  FullScreen,
  WarningFilled,
  ArrowDown,
} from "@element-plus/icons-vue";
import { downloadFile as apiDownloadFile } from "@/api/files";

interface Props {
  fileId: string | number;
  fileName: string;
}

interface Emits {
  (e: "mounted"): void;
}

const props = withDefaults(defineProps<Props>(), {
  fileName: "未命名视频",
});
const emit = defineEmits<Emits>();

// 状态管理
const loading = ref(true);
const error = ref<string | null>(null);
const videoUrl = ref("");
const posterUrl = ref(""); // 视频封面URL
const isPlaying = ref(false);
const isMuted = ref(false);
const duration = ref(0);
const currentTime = ref(0);
const volume = ref(100);
const playbackRate = ref(1.0);
const isFullscreen = ref(false);
const showControls = ref(true);
const controlsTimer = ref<number | null>(null);

// 元素引用
const videoElementRef = ref<HTMLVideoElement | null>(null);
const videoContainerRef = ref<HTMLDivElement | null>(null);

// 加载视频
const loadVideo = async () => {
  try {
    loading.value = true;
    error.value = null;

    if (videoElementRef.value) {
      videoElementRef.value.pause();
      videoElementRef.value.src = "";
      videoElementRef.value.load();
    }

    if (videoUrl.value) {
      URL.revokeObjectURL(videoUrl.value);
    }

    // 下载文件
    const response = await apiDownloadFile(props.fileId);
    let blob = response;
    if (response && (response as any).code === 200 && (response as any).data) {
      blob = (response as any).data;
    } else if (response && (response as any).data) {
      blob = (response as any).data;
    }

    // 创建一个可播放的URL
    videoUrl.value = URL.createObjectURL(blob as unknown as Blob);
  } catch (err) {
    console.error("加载视频文件失败:", err);
    error.value = "加载视频文件失败，请重试";
  } finally {
    loading.value = false;
  }
};

// 视频事件处理
const onLoadedMetadata = () => {
  if (videoElementRef.value) {
    duration.value = videoElementRef.value.duration;

    // 尝试获取视频的第一帧作为封面
    try {
      const video = videoElementRef.value;

      // 保存当前时间
      const savedTime = video.currentTime;

      // 设置为0来获取第一帧
      video.currentTime = 0;

      // 当视频可以播放时，创建封面
      const createPoster = () => {
        try {
          // 创建canvas并绘制视频帧
          const canvas = document.createElement("canvas");
          canvas.width = video.videoWidth;
          canvas.height = video.videoHeight;
          const ctx = canvas.getContext("2d");
          if (ctx) {
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

            // 转换为图片URL
            posterUrl.value = canvas.toDataURL("image/jpeg");

            // 恢复时间
            video.currentTime = savedTime;
          }
        } catch (e) {
          console.error("创建视频封面失败:", e);
        }

        // 移除事件监听器
        video.removeEventListener("canplay", createPoster);
      };

      video.addEventListener("canplay", createPoster);
    } catch (e) {
      console.error("无法创建视频封面:", e);
    }
  }
};

const onTimeUpdate = () => {
  if (videoElementRef.value) {
    currentTime.value = videoElementRef.value.currentTime;
  }
};

const onEnded = () => {
  isPlaying.value = false;
};

const onError = () => {
  error.value = "视频播放失败，请重试";
  isPlaying.value = false;
};

const onCanPlay = () => {
  loading.value = false;
};

const onPlay = () => {
  isPlaying.value = true;
};

const onPause = () => {
  isPlaying.value = false;
};

// 播放控制
const togglePlay = () => {
  const video = videoElementRef.value;
  if (!video) return;

  if (isPlaying.value) {
    video.pause();
  } else {
    video.play().catch((err) => {
      console.error("播放失败:", err);
      error.value = "播放失败，请重试";
    });
  }
};

const toggleMute = () => {
  const video = videoElementRef.value;
  if (!video) return;

  video.muted = !video.muted;
  isMuted.value = video.muted;
};

const updateVolume = () => {
  const video = videoElementRef.value;
  if (!video) return;

  video.volume = volume.value / 100;
  if (volume.value === 0) {
    video.muted = true;
    isMuted.value = true;
  } else if (isMuted.value) {
    video.muted = false;
    isMuted.value = false;
  }
};

const seek = (time: number) => {
  const video = videoElementRef.value;
  if (!video) return;

  video.currentTime = time;
};

const skipBackward = () => {
  const video = videoElementRef.value;
  if (!video) return;

  video.currentTime = Math.max(0, video.currentTime - 10);
};

const skipForward = () => {
  const video = videoElementRef.value;
  if (!video) return;

  video.currentTime = Math.min(duration.value, video.currentTime + 10);
};

const setPlaybackRate = (rate: number) => {
  const video = videoElementRef.value;
  if (!video) return;

  video.playbackRate = rate;
  playbackRate.value = rate;
};

// 时间格式化
const formatTime = (seconds: number): string => {
  seconds = Math.floor(seconds);
  const hours = Math.floor(seconds / 3600);
  seconds = seconds % 3600;
  const minutes = Math.floor(seconds / 60);
  seconds = seconds % 60;

  if (hours > 0) {
    return `${hours}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
  } else {
    return `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
  }
};

// 全屏控制
const toggleFullscreen = () => {
  if (!isFullscreen.value) {
    enterFullscreen();
  } else {
    exitFullscreen();
  }
};

const enterFullscreen = () => {
  const elem = videoContainerRef.value;
  if (!elem) return;

  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if ((elem as any).mozRequestFullScreen) {
    (elem as any).mozRequestFullScreen();
  } else if ((elem as any).webkitRequestFullscreen) {
    (elem as any).webkitRequestFullscreen();
  } else if ((elem as any).msRequestFullscreen) {
    (elem as any).msRequestFullscreen();
  }
};

const exitFullscreen = () => {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if ((document as any).mozCancelFullScreen) {
    (document as any).mozCancelFullScreen();
  } else if ((document as any).webkitExitFullscreen) {
    (document as any).webkitExitFullscreen();
  } else if ((document as any).msExitFullscreen) {
    (document as any).msExitFullscreen();
  }
};

const fullscreenChangeHandler = () => {
  isFullscreen.value = !!(
    document.fullscreenElement ||
    (document as any).webkitFullscreenElement ||
    (document as any).mozFullScreenElement ||
    (document as any).msFullscreenElement
  );
};

// 控制栏显示/隐藏
const handleMouseMove = () => {
  showControls.value = true;
  resetControlsTimer();
};

const startHideControlsTimer = () => {
  if (controlsTimer.value) {
    clearTimeout(controlsTimer.value);
  }

  controlsTimer.value = window.setTimeout(() => {
    if (isPlaying.value) {
      showControls.value = false;
    }
  }, 3000);
};

const resetControlsTimer = () => {
  if (controlsTimer.value) {
    clearTimeout(controlsTimer.value);
  }

  startHideControlsTimer();
};

// 键盘快捷键
const handleKeyPress = (event: KeyboardEvent) => {
  if (document.activeElement === document.body) {
    switch (event.key) {
      case " ": // 空格键
        togglePlay();
        event.preventDefault();
        break;
      case "ArrowLeft": // 左箭头
        skipBackward();
        event.preventDefault();
        break;
      case "ArrowRight": // 右箭头
        skipForward();
        event.preventDefault();
        break;
      case "ArrowUp": // 上箭头
        volume.value = Math.min(100, volume.value + 5);
        updateVolume();
        event.preventDefault();
        break;
      case "ArrowDown": // 下箭头
        volume.value = Math.max(0, volume.value - 5);
        updateVolume();
        event.preventDefault();
        break;
      case "m": // M键静音
      case "M":
        toggleMute();
        event.preventDefault();
        break;
      case "f": // F键全屏
      case "F":
        toggleFullscreen();
        event.preventDefault();
        break;
    }
  }
};

// 下载文件
const downloadFile = async () => {
  try {
    const response = await apiDownloadFile(props.fileId);
    let blob = response;
    if (response && (response as any).code === 200 && (response as any).data) {
      blob = (response as any).data;
    } else if (response && (response as any).data) {
      blob = (response as any).data;
    }

    const url = window.URL.createObjectURL(blob as unknown as Blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = props.fileName;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);

    ElMessage.success("文件下载成功");
  } catch (err: any) {
    ElMessage.error(`文件下载失败: ${err.message}`);
  }
};

// 生命周期
onMounted(() => {
  loadVideo();

  // 监听鼠标移动事件，以显示/隐藏控件
  document.addEventListener("mousemove", handleMouseMove);

  // 监听全屏变化事件
  document.addEventListener("fullscreenchange", fullscreenChangeHandler);
  document.addEventListener("webkitfullscreenchange", fullscreenChangeHandler);
  document.addEventListener("mozfullscreenchange", fullscreenChangeHandler);
  document.addEventListener("MSFullscreenChange", fullscreenChangeHandler);

  // 监听键盘事件
  window.addEventListener("keydown", handleKeyPress);

  emit("mounted");
});

onBeforeUnmount(() => {
  // 清理资源
  if (videoElementRef.value) {
    videoElementRef.value.pause();
    videoElementRef.value.src = "";
    videoElementRef.value.load();
  }
  if (videoUrl.value) {
    URL.revokeObjectURL(videoUrl.value);
  }

  // 移除事件监听器
  document.removeEventListener("mousemove", handleMouseMove);

  document.removeEventListener("fullscreenchange", fullscreenChangeHandler);
  document.removeEventListener(
    "webkitfullscreenchange",
    fullscreenChangeHandler,
  );
  document.removeEventListener("mozfullscreenchange", fullscreenChangeHandler);
  document.removeEventListener("MSFullscreenChange", fullscreenChangeHandler);

  window.removeEventListener("keydown", handleKeyPress);

  // 清除计时器
  if (controlsTimer.value) {
    clearTimeout(controlsTimer.value);
  }
});
</script>

<style scoped lang="scss">
.video-viewer {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg, #141518);
  color: var(--color-text, #eee);
  overflow: hidden;
}

.video-toolbar {
  padding: 8px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-card, #232324);
  border-bottom: 1px solid var(--color-border, #333);
  flex-wrap: wrap;
  gap: 8px;
  z-index: 10;
}

.ml-10 {
  margin-left: 10px;
}

.file-info {
  font-size: 14px;
  color: var(--color-text-secondary, #999);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
  text-align: center;
}

.toolbar-left,
.toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.time-display {
  font-size: 14px;
  color: var(--color-text-secondary, #999);
  min-width: 100px;
  text-align: center;
}

.volume-control {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 120px;
}

.volume-slider {
  width: 80px;
}

.video-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #000;
}

.video-player {
  width: 100%;
  height: 100%;
  position: relative;
}

.video-element {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: pointer;
  background: var(--color-bg);
}

.video-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
  transition: opacity 0.3s ease;
}

.progress-bar {
  margin-bottom: 10px;
}

.progress-slider {
  width: 100%;
}

.control-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left-controls,
.right-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.playback-speed {
  margin: 0 10px;
}

.volume-control-compact {
  display: flex;
  align-items: center;
  gap: 5px;
}

.volume-slider-compact {
  width: 60px;
}

.loading-container,
.error-container {
  width: 100%;
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: var(--color-bg);
}

.error-container {
  color: var(--color-danger, #ff4d4f);
  text-align: center;

  .error-icon {
    font-size: 48px;
    margin-bottom: 16px;
  }

  p {
    margin-bottom: 16px;
  }
}

/* 全屏模式样式 */
:fullscreen .video-container {
  background: #000;
  padding: 0;
}

:fullscreen .video-element {
  width: 100%;
  height: 100%;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .video-toolbar {
    flex-direction: column;
    align-items: flex-start;
    padding: 8px;
  }

  .toolbar-left {
    width: 100%;
    flex-wrap: wrap;
  }

  .toolbar-right {
    width: 100%;
    justify-content: flex-start;
  }

  .file-info {
    width: 100%;
    text-align: left;
    margin: 8px 0;
  }

  .control-buttons {
    flex-direction: column;
    gap: 10px;
  }

  .left-controls,
  .right-controls {
    width: 100%;
    justify-content: space-between;
  }
}
</style>