<script lang="ts" setup>
import { object, string } from 'yup'
import type { FormSubmitEvent } from '#ui/types'

const toast = useToast()
const loginState = useLoginState()

interface Props {
  modelValue: boolean
}

interface Emits {
  (e: 'update:modelValue', value: boolean): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const isOpen = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

// 表单状态
const formState = reactive({
  dh_name: '',
  organization: '',
})

// 文件上传状态
const videoFile = ref<File | null>(null)
const authVideoFile = ref<File | null>(null)
const isSubmitting = ref(false)

// 上传进度状态
const uploadProgress = reactive({
  step: 0,
  total: 3,
  message: ''
})

// 表单验证
const schema = object({
  dh_name: string()
    .required('请输入数字人名称')
    .max(50, '数字人名称不能超过50个字符'),
  organization: string()
    .required('请输入单位名称')
    .max(100, '单位名称不能超过100个字符'),
})

// 更新上传进度
const updateProgress = (step: number, message: string) => {
  uploadProgress.step = step
  uploadProgress.message = message
}

// 处理数字人视频上传
const handleVideoUpload = (files: FileList) => {
  const file = files[0]
  if (!file) return

  // 验证文件类型
  if (!['video/mp4', 'video/mov'].includes(file.type)) {
    toast.add({
      title: '文件格式错误',
      description: '仅支持MP4和MOV格式的视频文件',
      color: 'red',
      icon: 'i-tabler-alert-triangle',
    })
    return
  }

  // 验证文件大小 (1GB)
  if (file.size > 1024 * 1024 * 1024) {
    toast.add({
      title: '文件过大',
      description: '视频文件大小不能超过1GB',
      color: 'red',
      icon: 'i-tabler-alert-triangle',
    })
    return
  }

  videoFile.value = file
  toast.add({
    title: '文件上传成功',
    description: '数字人视频已选择',
    color: 'green',
    icon: 'i-tabler-check',
  })
}

// 处理授权视频上传
const handleAuthVideoUpload = (files: FileList) => {
  const file = files[0]
  if (!file) return

  // 验证文件类型
  if (!['video/mp4', 'video/mov'].includes(file.type)) {
    toast.add({
      title: '文件格式错误',
      description: '仅支持MP4和MOV格式的视频文件',
      color: 'red',
      icon: 'i-tabler-alert-triangle',
    })
    return
  }

  // 验证文件大小
  if (file.size > 1024 * 1024 * 1024) {
    toast.add({
      title: '文件过大',
      description: '视频文件大小不能超过1GB',
      color: 'red',
      icon: 'i-tabler-alert-triangle',
    })
    return
  }

  authVideoFile.value = file
  toast.add({
    title: '文件上传成功',
    description: '授权视频已选择',
    color: 'green',
    icon: 'i-tabler-check',
  })
}

// 提交表单
const onSubmit = async (event: FormSubmitEvent<typeof formState>) => {
  // 验证文件是否已上传
  if (!videoFile.value) {
    toast.add({
      title: '请上传数字人视频素材',
      color: 'red',
      icon: 'i-tabler-alert-triangle',
    })
    return
  }

  if (!authVideoFile.value) {
    toast.add({
      title: '请上传形象授权视频',
      color: 'red',
      icon: 'i-tabler-alert-triangle',
    })
    return
  }

  if (isSubmitting.value) return

  try {
    isSubmitting.value = true
    updateProgress(0, '开始创建数字人...')

    // 上传数字人视频素材
    updateProgress(1, '上传数字人视频素材...')
    const videoUrl = await useFileGo(videoFile.value, 'material')

    // 上传形象授权视频
    updateProgress(2, '上传形象授权视频...')
    const authVideoUrl = await useFileGo(authVideoFile.value, 'material')

    // 创建数字人定制记录
    updateProgress(3, '创建数字人定制记录...')
    const response = await useFetchWrapped<
      {
        user_id: number
        dh_name: string
        organization: string
        video_url: string
        auth_video_url: string
      } & AuthedRequest,
      BaseResponse<{ train_id: number }>
    >('App.Digital_Train.Create', {
      token: loginState.token!,
      user_id: loginState.user.id,
      dh_name: event.data.dh_name,
      organization: event.data.organization,
      video_url: videoUrl,
      auth_video_url: authVideoUrl,
    })

    if (response.ret === 200 && response.data.train_id) {
      toast.add({
        title: '数字人定制提交成功',
        description: '您的数字人定制请求已提交，请等待管理员处理',
        color: 'green',
        icon: 'i-tabler-check',
      })
      
      // 重置表单
      formState.dh_name = ''
      formState.organization = ''
      videoFile.value = null
      authVideoFile.value = null
      uploadProgress.step = 0
      uploadProgress.message = ''
      
      // 关闭弹窗
      isOpen.value = false
    } else {
      throw new Error(response.msg || '创建失败')
    }
  } catch (error) {
    console.error('数字人定制失败:', error)
    const errorMessage = error instanceof Error ? error.message : '数字人定制失败，请重试'
    toast.add({
      title: '提交失败',
      description: errorMessage,
      color: 'red',
      icon: 'i-tabler-alert-triangle',
    })
  } finally {
    isSubmitting.value = false
    uploadProgress.step = 0
    uploadProgress.message = ''
  }
}

// 重置表单
const resetForm = () => {
  formState.dh_name = ''
  formState.organization = ''
  videoFile.value = null
  authVideoFile.value = null
  uploadProgress.step = 0
  uploadProgress.message = ''
}

// 监听弹窗关闭事件，重置表单
watch(isOpen, (newValue) => {
  if (!newValue) {
    resetForm()
  }
})

// 显示授权文案弹窗
const showAuthModal = ref(false)
</script>

<template>
  <UModal v-model="isOpen" :ui="{ width: 'sm:max-w-6xl' }">
    <UCard
      :ui="{
        ring: '',
        divide: 'divide-y divide-gray-100 dark:divide-gray-800',
      }"
    >
      <template #header>
        <div class="flex items-center justify-between">
          <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
            数字人定制
          </h3>
          <UButton
            color="gray"
            variant="ghost"
            icon="i-heroicons-x-mark-20-solid"
            class="-my-1"
            @click="isOpen = false"
          />
        </div>
      </template>

      <div class="grid grid-cols-7 gap-6">
        <!-- 左侧表单 -->
        <div class="col-span-3 p-4 rounded-lg bg-gray-50 dark:bg-gray-800">
          <UForm
            :schema="schema"
            :state="formState"
            class="space-y-4"
            @submit="onSubmit"
          >
            <!-- 数字人视频素材 -->
            <UFormGroup label="数字人视频素材" required>
              <UniFileDnD
                accept="video/mp4,video/mov"
                class="h-36"
                @change="handleVideoUpload"
              >
                <template #default>
                  <div class="text-center">
                    <UIcon
                      name="i-heroicons-video-camera"
                      class="mx-auto h-12 w-12 text-gray-400"
                    />
                    <div class="mt-2">
                      <span class="text-sm text-gray-600 dark:text-gray-400">
                        {{ videoFile ? videoFile.name : '点击或拖拽上传视频' }}
                      </span>
                    </div>
                    <p class="text-xs text-gray-500 mt-1">
                      小于 1GB 的 mov/mp4 格式，比例 9:16，帧率 25FPS，分辨率 1080P，时长 3-6 分钟
                    </p>
                  </div>
                </template>
              </UniFileDnD>
            </UFormGroup>

            <!-- 数字人名称 -->
            <UFormGroup label="数字人名称" name="dh_name" required>
              <UInput
                v-model="formState.dh_name"
                placeholder="请输入数字人名称"
              />
            </UFormGroup>

            <!-- 单位名称 -->
            <UFormGroup label="单位名称" name="organization" required>
              <UInput
                v-model="formState.organization"
                placeholder="请输入单位名称"
              />
            </UFormGroup>

            <!-- 形象授权视频 -->
            <UFormGroup label="形象授权视频" required>
              <template #description>
                <div class="flex items-center justify-between">
                  <span class="text-xs text-gray-500">
                    请确保本人进行形象授权视频录制，否则脸部比对将不通过导致制作失败
                  </span>
                  <UButton
                    variant="link"
                    size="xs"
                    icon="i-heroicons-document-text"
                    @click="showAuthModal = true"
                  >
                    授权文案
                  </UButton>
                </div>
              </template>
              <UniFileDnD
                accept="video/mp4,video/mov"
                class="h-36"
                @change="handleAuthVideoUpload"
              >
                <template #default>
                  <div class="text-center">
                    <UIcon
                      name="i-heroicons-shield-check"
                      class="mx-auto h-12 w-12 text-gray-400"
                    />
                    <div class="mt-2">
                      <span class="text-sm text-gray-600 dark:text-gray-400">
                        {{ authVideoFile ? authVideoFile.name : '点击或拖拽上传授权视频' }}
                      </span>
                    </div>
                  </div>
                </template>
              </UniFileDnD>
            </UFormGroup>

            <!-- 提交按钮 -->
            <UButton
              type="submit"
              class="w-full"
              :loading="isSubmitting"
              :disabled="isSubmitting"
              color="primary"
            >
              {{ isSubmitting ? '提交中...' : '确认提交' }}
            </UButton>

            <!-- 上传进度 -->
            <div v-if="isSubmitting" class="mt-4 space-y-2">
              <div class="flex justify-between text-sm">
                <span>{{ uploadProgress.message }}</span>
                <span>{{ uploadProgress.step }}/{{ uploadProgress.total }}</span>
              </div>
              <UProgress
                :value="(uploadProgress.step / uploadProgress.total) * 100"
                color="primary"
              />
            </div>
          </UForm>
        </div>

        <!-- 右侧教程和提示 -->
        <div class="col-span-4 p-4 rounded-lg border dark:border-gray-700">
          <div class="flex flex-col h-full gap-6">
            <!-- 教程视频 -->
            <div class="flex-1">
              <h3 class="text-lg font-semibold mb-3 text-gray-800 dark:text-white flex items-center gap-2">
                <UIcon name="i-heroicons-video-camera" class="h-5 w-5" />
                视频录制教程
              </h3>
              <div class="w-full aspect-video border rounded-lg bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
                <UIcon name="i-heroicons-video-camera" class="h-12 w-12 text-gray-400" />
              </div>
            </div>

            <!-- 联系方式 -->
            <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 border border-blue-200 dark:border-blue-700">
              <div class="flex items-center gap-3">
                <div class="bg-blue-100 dark:bg-blue-900 p-2 rounded-lg">
                  <UIcon name="i-heroicons-chat-bubble-left-right" class="h-5 w-5 text-blue-600 dark:text-blue-400" />
                </div>
                <div>
                  <p class="text-sm font-medium text-gray-800 dark:text-white">需要帮助？</p>
                  <p class="text-sm text-gray-600 dark:text-gray-300">
                    客服微信：<span class="font-mono text-blue-600 dark:text-blue-400">xxxxxx</span>
                  </p>
                </div>
              </div>
            </div>

            <!-- 录制指南 -->
            <div class="bg-amber-50 dark:bg-amber-900/20 rounded-lg p-4 border border-amber-200 dark:border-amber-700">
              <div class="flex items-start gap-3">
                <div class="bg-amber-100 dark:bg-amber-900 p-2 rounded-lg mt-0.5">
                  <UIcon name="i-heroicons-light-bulb" class="h-5 w-5 text-amber-600 dark:text-amber-400" />
                </div>
                <div class="flex-1">
                  <h4 class="text-sm font-semibold text-gray-800 dark:text-white mb-3">录制注意事项</h4>
                  <div class="space-y-2">
                    <div class="flex items-center gap-2">
                      <UIcon name="i-heroicons-sun" class="h-4 w-4 text-amber-500 mt-0.5 flex-shrink-0" />
                      <span class="text-xs text-gray-600 dark:text-gray-300">确保光线充足，避免背光</span>
                    </div>
                    <div class="flex items-center gap-2">
                      <UIcon name="i-heroicons-speaker-wave" class="h-4 w-4 text-green-500 mt-0.5 flex-shrink-0" />
                      <span class="text-xs text-gray-600 dark:text-gray-300">选择安静环境，减少噪音干扰</span>
                    </div>
                    <div class="flex items-center gap-2">
                      <UIcon name="i-heroicons-viewfinder-circle" class="h-4 w-4 text-blue-500 mt-0.5 flex-shrink-0" />
                      <span class="text-xs text-gray-600 dark:text-gray-300">人脸占画面比例控制在 1/4 以内</span>
                    </div>
                    <div class="flex items-center gap-2">
                      <UIcon name="i-heroicons-face-smile" class="h-4 w-4 text-purple-500 mt-0.5 flex-shrink-0" />
                      <span class="text-xs text-gray-600 dark:text-gray-300">保持自然表情，使用恰当手势</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </UCard>

    <!-- 授权文案弹窗 -->
    <UModal v-model="showAuthModal">
      <UCard>
        <template #header>
          <div class="flex items-center justify-between">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
              授权视频文案
            </h3>
            <UButton
              color="gray"
              variant="ghost"
              icon="i-heroicons-x-mark-20-solid"
              class="-my-1"
              @click="showAuthModal = false"
            />
          </div>
        </template>

        <div class="p-4">
          <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
            请确保您是视频中人物的合法授权人，在授权视频中朗读以下文案：
          </p>
          <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4">
            <p class="text-sm leading-relaxed text-gray-800 dark:text-gray-200">
              我是在"AI智慧职教平台"定制上传视频的模特本人，我承诺已经按照平台规则进行合法授权，特此承诺。
            </p>
          </div>
        </div>
      </UCard>
    </UModal>
  </UModal>
</template>

<style scoped></style>