<script lang="ts" setup>
import type { PropType } from 'vue'

const props = defineProps({
  video: {
    type: Object as PropType<GBVideoItem>,
    required: true,
  },
})

const emit = defineEmits({
  delete: (video: GBVideoItem) => video,
})

const dayjs = useDayjs()
const toast = useToast()

const isPreviewModalOpen = ref(false)
const isFullContentOpen = ref(false)
const downloadingState = reactive({
  subtitle: 0,
  video: 0,
})

const startDownload = (url: string, filename: string) => {
  if (url.endsWith('.ass')) {
    downloadingState.subtitle = 0
  } else {
    downloadingState.video = 0
  }

  const {
    download,
    progressEmitter,
  } = useDownload(url, filename)

  progressEmitter.on('progress', progress => {
    if (url.endsWith('.ass')) {
      downloadingState.subtitle = progress
    } else {
      downloadingState.video = progress
    }
    console.log(downloadingState)
  })

  progressEmitter.on('done', () => {
    if (url.endsWith('.ass')) {
      downloadingState.subtitle = 100
    } else {
      downloadingState.video = 100
    }
    toast.add({
      title: '下载完成',
      description: '资源下载已完成',
      color: 'green',
      icon: 'i-tabler-check',
    })
  })

  progressEmitter.on('error', err => {
    if (url.endsWith('.ass')) {
      downloadingState.subtitle = 0
    } else {
      downloadingState.video = 0
    }
    toast.add({
      title: '下载失败',
      description: err.message || '下载失败，未知错误',
      color: 'red',
      icon: 'i-tabler-alert-triangle',
    })
  })

  download()
}

const onClick = () => {
  console.log('click delete')
}
</script>

<template>
  <div
    class="w-full flex gap-2 rounded-xl border border-neutral-200 dark:border-neutral-700 hover:shadow transition overflow-hidden p-3"
  >
    <div class="flex-0 h-48 aspect-[10/16] flex flex-col items-center justify-center rounded-lg shadow overflow-hidden relative group">
      <div v-if="!video.video_cover" class="w-full h-full bg-primary flex flex-col justify-center items-center gap-2">
        <UIcon class="animate-spin text-4xl text-white" name="tabler:loader"/>
        <div class="flex flex-col items-center gap-0.5">
          <span class="text-sm font-bold text-white/90">火速生成中</span>
          <span class="text-xs font-medium text-white/50">{{ video.progress }}%</span>
        </div>
      </div>
      <NuxtImg v-else :src="video.video_cover" class="w-full h-full brightness-90 object-cover"/>
      <div class="absolute inset-0 bg-black/10 backdrop-blur-md flex justify-center items-center rounded-lg opacity-0 group-hover:opacity-100 duration-300">
        <div class="rounded-full w-14 aspect-square bg-gray-300/50 backdrop-blur-md flex justify-center items-center cursor-pointer" @click="isPreviewModalOpen = true">
          <Icon name="i-tabler-play" class="text-white text-3xl" />
        </div>
      </div>
    </div>
    <div class="flex-1 flex flex-col justify-between gap-2">
      <div class="flex-1 rounded-lg bg-neutral-100 dark:bg-neutral-800 p-2 px-2.5">
        <ul class="grid grid-cols-2 gap-1.5">
          <li class="col-span-2">
            <!--            <h2 class="text-2xs font-medium text-primary-500">标题</h2>-->
            <p class="text-sm font-bold line-clamp-1">{{ video.title || '无标题' }}</p>
          </li>
          <li class="">
            <h2 class="text-2xs font-medium text-primary-500">完成时间</h2>
            <p class="text-xs line-clamp-1">{{ video.complete_time ? dayjs(video.complete_time * 1000).format('YYYY-MM-DD HH:mm:ss') : '进行中' }}</p>
          </li>
          <li class="">
            <h2 class="text-2xs font-medium text-primary-500">生成耗时</h2>
            <p class="text-xs line-clamp-1">{{ video.duration ? dayjs.duration(video.duration || 0).format('HH:mm:ss') : '进行中' }}</p>
          </li>
          <li class="col-span-2 cursor-pointer" @click="isFullContentOpen = true">
            <h2 class="text-2xs font-medium text-primary-500">驱动文本</h2>
            <p class="text-xs line-clamp-4 text-justify">{{ video.content }}</p>
          </li>
        </ul>
      </div>
      <div class="flex justify-end sm:justify-between items-center group flex-nowrap whitespace-nowrap">
<!--        <div-->
<!--          class="hidden sm:flex items-center gap-1 transition-all group-hover:opacity-0 group-hover:pointer-events-none">-->
<!--          <UIcon class="text-primary text-lg" name="i-tabler-user-square-rounded"/>-->
<!--          <p class="text-xs">数字人 {{ video.digital_human_id }}</p>-->
<!--        </div>-->
        <div
          class="w-fit hidden sm:flex items-center gap-1 transition-all group-hover:opacity-0 group-hover:pointer-events-none">
          <p class="text-2xs text-neutral-400 dark:text-neutral-500">{{ video.digital_human_id }}</p>
        </div>
        <div class="space-x-2">
          <UButton
            class="transition-all sm:opacity-0 sm:translate-x-4 sm:pointer-events-none group-hover:opacity-100 group-hover:translate-x-0 group-hover:pointer-events-auto"
            color="red"
            icon="i-tabler-trash"
            size="xs"
            variant="soft"
            @click="emit('delete', video)"
          />
          <UButtonGroup size="xs">
            <UButton
              :label="downloadingState.subtitle > 0 && downloadingState.subtitle < 100 ? `${downloadingState.subtitle.toFixed(0)}%` : '字幕'"
              :loading="downloadingState.subtitle > 0 && downloadingState.subtitle < 100"
              :disabled="!video.subtitle"
              color="primary"
              leading-icon="i-tabler-file-download"
              variant="soft"
              @click="startDownload(video.subtitle!, (video.title || video.task_id) + '.ass')"
            />
            <UButton
              :label="downloadingState.video > 0 && downloadingState.video < 100 ? `${downloadingState.video.toFixed(0)}%` : '视频'"
              :loading="downloadingState.video > 0 && downloadingState.video < 100"
              :disabled="!video.video_url"
              color="primary"
              leading-icon="i-tabler-download"
              variant="soft"
              @click="startDownload(video.video_url!, (video.title || video.task_id) + '.mp4')"
            />
          </UButtonGroup>
        </div>
      </div>
    </div>
    <!-- Full video content -->
    <UModal v-model="isFullContentOpen">
      <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-base font-semibold leading-6 text-gray-900 dark:text-white">
              {{ video.title || '无标题' }}
              <span class="block text-xs text-primary">驱动内容</span>
            </h3>
            <UButton
              color="gray"
              icon="i-tabler-x"
              variant="ghost"
              @click="isFullContentOpen = false"
            />
          </div>
        </template>

        <div>
          <article class="prose">
            <p class="text-justify">{{ video.content }}</p>
          </article>
        </div>

        <template #footer>
          <div class="flex justify-end gap-2">
            <UButton color="primary" @click="isFullContentOpen = false">关闭</UButton>
          </div>
        </template>
      </UCard>
    </UModal>
    <UModal v-model="isPreviewModalOpen">
      <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
        <template #header>
          <div class="flex items-center justify-between">
            <div class="text-base font-semibold leading-6 text-gray-900 dark:text-white overflow-hidden">
              <p>绿幕视频预览</p>
              <p class="text-xs text-blue-500 w-full overflow-hidden text-nowrap text-ellipsis">
                {{ video.title }}
              </p>
            </div>
            <UButton class="-my-1" color="gray" icon="i-tabler-x" variant="ghost" @click="isPreviewModalOpen = false" />
          </div>
        </template>

        <video class="w-full rounded shadow" controls autoplay :src="video.video_url" />
      </UCard>
    </UModal>
  </div>
</template>

<style scoped>

</style>