<template>
  <van-popup
    v-model:show="show"
    position="bottom"
    :style="{ height: '50%' }"
  >
    <div class="upload-video-popup">
      <van-nav-bar
        title="上传视频"
        left-text="取消"
        right-text="提交"
        @click-left="onCancel"
        @click-right="onSubmit"
      />

      <div class="upload-content">
        <van-uploader
          :max-count="1"
          :max-size="maxSize"
          :before-read="beforeRead"
          :after-read="afterRead"
          accept="video/*"
          @oversize="onOversize"
        >
          <van-button type="default">请选择视频</van-button>
        </van-uploader>

        <div v-if="uploadProgress > 0 && uploadProgress < 100" class="progress">
          <van-progress :percentage="uploadProgress" :show-pivot="true" pivot-color="#7232dd" color="linear-gradient(to right, #be99ff, #7232dd)" />
        </div>

        <div v-if="videoUrl" class="video-preview">
          <VideoPlayer ref="videoPlayerRef" :video-url="videoUrl" :use-native-on-ios="false" :autoplay="false" />
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script setup>
import { ref, watch } from 'vue';
import { showToast } from 'vant';
import VideoPlayer from '@/components/ui/VideoPlayer.vue';
import { uploadFile, validateFile } from '@/utils/upload';

const props = defineProps({
  /** 是否显示弹窗 (v-model) */
  modelValue: {
    type: Boolean,
    required: true
  }
});

const emit = defineEmits([
  /** 更新显示状态 */
  'update:modelValue',
  /** 
   * 提交视频事件
   * @property {Object} payload
   * @property {string} payload.url - 视频URL
   * @property {string} payload.id - 视频ID/Hash
   * @property {string} payload.name - 视频文件名
   */
  'submit', 
  /** 取消事件 */
  'cancel'
]);

const show = ref(false);

watch(() => props.modelValue, (newVal) => {
  show.value = newVal;
  if (newVal) {
    // 重置所有状态
    videoUrl.value = '';
    videoId.value = '';
    videoName.value = '';
    uploadProgress.value = 0;
  }
});

watch(show, (newVal) => {
  emit('update:modelValue', newVal);
});

const videoUrl = ref('');
const videoId = ref('');
const videoName = ref('');
const uploadProgress = ref(0);
const maxSize = 100 * 1024 * 1024; // 100MB

/**
 * @description 文件读取前校验
 * @param {File} file 文件对象
 * @returns {boolean} 是否通过校验
 */
const beforeRead = (file) => {
  const validation = validateFile(file);
  if (!validation.valid) {
    showToast(validation.message);
    return false;
  }
  return true;
};

/**
 * @description 文件读取后上传
 * @param {Object} file 读取的文件对象
 */
const afterRead = async (file) => {
  // 清除之前的上传结果
  videoUrl.value = '';
  videoId.value = '';
  videoName.value = '';
  uploadProgress.value = 0;

  try {
    // 实际上传逻辑
    const fileCode = 'video'; // 视频上传的fileCode
    const result = await uploadFile(file.file, fileCode, (progress) => {
      uploadProgress.value = progress;
    });

    if (result && result.src) {
      videoUrl.value = result.src;
      videoId.value = result.meta_id || result.hash;
      videoName.value = file.file.name;
    } else {
      throw new Error('上传失败');
    }
  } catch (error) {
    uploadProgress.value = 0;
    showToast('上传失败');
    console.error('Upload error:', error);
  }
};

/**
 * @description 文件超过大小限制回调
 */
const onOversize = () => {
  showToast('文件大小不能超过100MB');
};

const videoPlayerRef = ref(null);

/**
 * @description 提交视频
 */
const onSubmit = () => {
  if (!videoUrl.value || !videoId.value) {
    showToast('请先上传视频');
    return;
  }
  videoPlayerRef.value?.pause();
  emit('submit', {
    url: videoUrl.value,
    id: videoId.value,
    name: videoName.value
  });
  emit('update:modelValue', false);
};

/**
 * @description 取消上传
 */
const onCancel = () => {
  videoPlayerRef.value?.pause();
  emit('cancel');
  emit('update:modelValue', false);
};
</script>

<style scoped>
.upload-video-popup {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.upload-content {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

.progress {
  margin: 16px 0;
}

.video-preview {
  margin-top: 16px;
  width: 100%;
  max-width: 600px;
}
</style>