<template>
  <div class="page-container">
    <!-- 搜索区域 -->
    <div class="search-form">
      <el-form :model="queryParams" inline>
        <el-form-item label="视频名称">
          <el-input v-model="queryParams.search" placeholder="请输入视频名称" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryParams.status" placeholder="请选择" clearable style="width: 120px">
            <el-option label="就绪" value="ready" />
            <el-option label="处理中" value="inprogress" />
            <el-option label="排队中" value="queued" />
            <el-option label="错误" value="error" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
          <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 操作按钮 -->
    <div class="table-actions">
      <el-button type="primary" :icon="Upload" @click="showUploadDialog">上传视频</el-button>
      <el-button plain :icon="Link" @click="showImportDialog">从URL导入</el-button>
      <el-button plain :icon="Refresh" @click="getList">刷新列表</el-button>
    </div>

    <!-- 视频列表 -->
    <el-table v-loading="loading" :data="videoList" border>
      <el-table-column label="缩略图" width="160" align="center">
        <template #default="{ row }">
          <el-image
            :src="getThumbnailUrl(row.uid)"
            :preview-src-list="[getThumbnailUrl(row.uid)]"
            fit="cover"
            class="thumbnail-image"
            :preview-teleported="true"
          >
            <template #error>
              <div class="image-error">
                <el-icon>
                  <Picture />
                </el-icon>
              </div>
            </template>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="uid" label="Video ID" min-width="280" show-overflow-tooltip>
        <template #default="{ row }">
          <div class="video-info">
            <span class="video-id">{{ row.uid }}</span>
            <el-button link type="primary" :icon="CopyDocument" @click="copyToClipboard(row.uid)" />
          </div>
          <div v-if="row.meta?.name" class="video-name">{{ row.meta.name }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="duration" label="时长" width="100" align="center">
        <template #default="{ row }">
          {{ formatDuration(row.duration) }}
        </template>
      </el-table-column>
      <el-table-column prop="size" label="大小" width="100" align="center">
        <template #default="{ row }">
          {{ formatSize(row.size) }}
        </template>
      </el-table-column>
      <el-table-column label="分辨率" width="100" align="center">
        <template #default="{ row }">
          <span v-if="row.input">{{ row.input.width }}x{{ row.input.height }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100" align="center">
        <template #default="{ row }">
          <el-tag :type="getStatusType(row.status?.state)">
            {{ getStatusText(row.status?.state) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="created" label="创建时间" width="170" align="center">
        <template #default="{ row }">
          {{ formatTime(row.created) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" align="center" fixed="right">
        <template #default="{ row }">
          <el-button type="primary" link :icon="VideoPlay" @click="handlePlay(row)" :disabled="!row.readyToStream">
            播放
          </el-button>
          <el-button type="info" link :icon="View" @click="handleDetail(row)">详情</el-button>
          <el-button type="danger" link :icon="Delete" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      v-model:current-page="queryParams.pageNum"
      v-model:page-size="queryParams.pageSize"
      :page-sizes="[10, 20, 50, 100]"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
      class="pagination"
      @size-change="getList"
      @current-change="getList"
    />

    <!-- 上传弹窗 -->
    <el-dialog v-model="uploadDialogVisible" title="上传视频" width="500px" destroy-on-close>
      <el-upload drag :auto-upload="false" :limit="1" accept="video/*" :on-change="handleFileChange">
        <el-icon class="el-icon--upload">
          <UploadFilled />
        </el-icon>
        <div class="el-upload__text">
          拖拽视频文件到此处，或
          <em>点击上传</em>
        </div>
        <template #tip>
          <div class="el-upload__tip">支持 MP4、MOV、MKV、AVI 等常见视频格式</div>
        </template>
      </el-upload>
      <el-form v-if="uploadFile" :model="uploadForm" label-width="80px" style="margin-top: 20px">
        <el-form-item label="视频名称">
          <el-input v-model="uploadForm.name" placeholder="请输入视频名称" />
        </el-form-item>
      </el-form>
      <el-progress
        v-if="uploadProgress > 0"
        :percentage="uploadProgress"
        :status="uploadProgress === 100 ? 'success' : undefined"
      />
      <template #footer>
        <el-button @click="uploadDialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="uploading" :disabled="!uploadFile" @click="handleUpload">上传</el-button>
      </template>
    </el-dialog>

    <!-- URL导入弹窗 -->
    <el-dialog v-model="importDialogVisible" title="从URL导入视频" width="500px">
      <el-form :model="importForm" label-width="80px">
        <el-form-item label="视频URL" required>
          <el-input v-model="importForm.url" placeholder="请输入视频URL" />
        </el-form-item>
        <el-form-item label="视频名称">
          <el-input v-model="importForm.name" placeholder="请输入视频名称（可选）" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="importDialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="importing" @click="handleImport">导入</el-button>
      </template>
    </el-dialog>

    <!-- 详情弹窗 -->
    <el-dialog v-model="detailDialogVisible" title="视频详情" width="700px">
      <el-descriptions :column="2" border v-if="currentVideo">
        <el-descriptions-item label="Video ID" :span="2">
          {{ currentVideo.uid }}
          <el-button link type="primary" :icon="CopyDocument" @click="copyToClipboard(currentVideo.uid)" />
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="getStatusType(currentVideo.status?.state)">
            {{ getStatusText(currentVideo.status?.state) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="时长">{{ formatDuration(currentVideo.duration) }}</el-descriptions-item>
        <el-descriptions-item label="大小">{{ formatSize(currentVideo.size) }}</el-descriptions-item>
        <el-descriptions-item label="分辨率">
          {{ currentVideo.input?.width }}x{{ currentVideo.input?.height }}
        </el-descriptions-item>
        <el-descriptions-item label="创建时间" :span="2">{{ formatTime(currentVideo.created) }}</el-descriptions-item>
        <el-descriptions-item label="HLS 地址" :span="2">
          <div class="url-item">
            <span class="url-text">{{ currentVideo.playback?.hls }}</span>
            <el-button link type="primary" :icon="CopyDocument" @click="copyToClipboard(currentVideo.playback?.hls)" />
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="DASH 地址" :span="2">
          <div class="url-item">
            <span class="url-text">{{ currentVideo.playback?.dash }}</span>
            <el-button link type="primary" :icon="CopyDocument" @click="copyToClipboard(currentVideo.playback?.dash)" />
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="预览地址" :span="2">
          <div class="url-item">
            <span class="url-text">{{ currentVideo.preview }}</span>
            <el-button link type="primary" :icon="CopyDocument" @click="copyToClipboard(currentVideo.preview)" />
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <!-- 播放弹窗 -->
    <el-dialog v-model="playDialogVisible" title="视频播放" width="900px" destroy-on-close>
      <div class="player-container">
        <VideoPlayer
          v-if="playDialogVisible && playVideoId"
          :player-type="'hls'"
          :src="getHlsUrl(playVideoId)"
          :autoplay="true"
          :controls="true"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox, type UploadFile } from 'element-plus'
import {
  Search,
  Refresh,
  Upload,
  Link,
  VideoPlay,
  View,
  Delete,
  CopyDocument,
  Picture,
  UploadFilled
} from '@element-plus/icons-vue'
import VideoPlayer from '@/components/VideoPlayer.vue'
import { useStreamStore } from '@/store/stream'
import type { CloudflareVideo } from '@/types/cloudflare'

const streamStore = useStreamStore()

const loading = ref(false)
const videoList = ref<CloudflareVideo[]>([])
const total = ref(0)

const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  search: '',
  status: ''
})

// 上传相关
const uploadDialogVisible = ref(false)
const uploadFile = ref<File | null>(null)
const uploadForm = reactive({ name: '' })
const uploading = ref(false)
const uploadProgress = ref(0)

// 导入相关
const importDialogVisible = ref(false)
const importForm = reactive({ url: '', name: '' })
const importing = ref(false)

// 详情相关
const detailDialogVisible = ref(false)
const currentVideo = ref<CloudflareVideo | null>(null)

// 播放相关
const playDialogVisible = ref(false)
const playVideoId = ref('')

function getThumbnailUrl(videoId: string): string {
  return streamStore.getThumbnailUrl(videoId, { width: 280, height: 160 })
}

function getHlsUrl(videoId: string): string {
  return streamStore.getHlsUrl(videoId)
}

function formatDuration(seconds: number): string {
  if (!seconds) return '-'
  const h = Math.floor(seconds / 3600)
  const m = Math.floor((seconds % 3600) / 60)
  const s = Math.floor(seconds % 60)
  if (h > 0) {
    return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
  }
  return `${m}:${s.toString().padStart(2, '0')}`
}

function formatSize(bytes: number): string {
  if (!bytes) return '-'
  const units = ['B', 'KB', 'MB', 'GB']
  let i = 0
  while (bytes >= 1024 && i < units.length - 1) {
    bytes /= 1024
    i++
  }
  return `${bytes.toFixed(1)} ${units[i]}`
}

function formatTime(time: string): string {
  if (!time) return '-'
  return new Date(time).toLocaleString('zh-CN')
}

function getStatusType(state: string): 'primary' | 'success' | 'warning' | 'danger' | 'info' {
  const map: Record<string, 'primary' | 'success' | 'warning' | 'danger' | 'info'> = {
    ready: 'success',
    inprogress: 'warning',
    queued: 'info',
    error: 'danger'
  }
  return map[state] || 'info'
}

function getStatusText(state: string): string {
  const map: Record<string, string> = {
    ready: '就绪',
    inprogress: '处理中',
    queued: '排队中',
    downloading: '下载中',
    pendingupload: '待上传',
    error: '错误'
  }
  return map[state] || state || '-'
}

async function copyToClipboard(text: string) {
  if (!text) return
  try {
    await navigator.clipboard.writeText(text)
    ElMessage.success('已复制到剪贴板')
  } catch {
    ElMessage.error('复制失败')
  }
}

async function getList() {
  loading.value = true
  try {
    // 模拟数据，实际项目中调用 API
    // const res = await listVideos(queryParams)
    // videoList.value = res.data.rows
    // total.value = res.data.total

    // 示例数据
    videoList.value = []
    total.value = 0
    ElMessage.info('请配置 Cloudflare Stream 并连接后端 API')
  } finally {
    loading.value = false
  }
}

function handleQuery() {
  queryParams.pageNum = 1
  getList()
}

function resetQuery() {
  queryParams.pageNum = 1
  queryParams.search = ''
  queryParams.status = ''
  getList()
}

function showUploadDialog() {
  uploadFile.value = null
  uploadForm.name = ''
  uploadProgress.value = 0
  uploadDialogVisible.value = true
}

function showImportDialog() {
  importForm.url = ''
  importForm.name = ''
  importDialogVisible.value = true
}

function handleFileChange(file: UploadFile) {
  uploadFile.value = file.raw || null
  if (uploadFile.value) {
    uploadForm.name = file.name.replace(/\.[^/.]+$/, '')
  }
}

async function handleUpload() {
  if (!uploadFile.value) return

  uploading.value = true
  uploadProgress.value = 0

  try {
    // 1. 获取上传 URL
    // const urlRes = await getUploadUrl({ meta: { name: uploadForm.name } })
    // const { uploadURL, uid } = urlRes.data

    // 2. 使用 TUS 协议上传
    // await streamApi.uploadWithTus(uploadFile.value, uploadURL, (progress) => {
    //   uploadProgress.value = progress
    // })

    ElMessage.success('上传成功')
    uploadDialogVisible.value = false
    getList()
  } catch (error) {
    console.error('上传失败:', error)
    ElMessage.error('上传失败')
  } finally {
    uploading.value = false
  }
}

async function handleImport() {
  if (!importForm.url) {
    ElMessage.warning('请输入视频URL')
    return
  }

  importing.value = true
  try {
    // await importVideoFromUrl({
    //   url: importForm.url,
    //   name: importForm.name,
    //   meta: { name: importForm.name }
    // })
    ElMessage.success('导入成功，视频正在处理中')
    importDialogVisible.value = false
    getList()
  } catch (error) {
    console.error('导入失败:', error)
    ElMessage.error('导入失败')
  } finally {
    importing.value = false
  }
}

function handlePlay(row: CloudflareVideo) {
  playVideoId.value = row.uid
  playDialogVisible.value = true
}

function handleDetail(row: CloudflareVideo) {
  currentVideo.value = row
  detailDialogVisible.value = true
}

async function handleDelete(row: CloudflareVideo) {
  try {
    await ElMessageBox.confirm(`确定要删除视频 "${row.meta?.name || row.uid}" 吗？`, '提示', {
      type: 'warning'
    })
    // await deleteVideo(row.uid)
    ElMessage.success('删除成功')
    getList()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败:', error)
    }
  }
}

onMounted(() => {
  streamStore.loadConfig()
  getList()
})
</script>

<style lang="scss" scoped>
.page-container {
}

.search-form {
  background-color: #fff;
  border-radius: var(--radius-base);
  margin-bottom: 0;
  padding: 0;
}

.thumbnail-image {
  width: 140px;
  height: 80px;
  border-radius: var(--radius-base);
}

.table-actions {
  margin-bottom: 15px;
}

.pagination {
  margin-top: 20px;
  justify-content: flex-end;
}

.video-info {
  display: flex;
  align-items: center;
  gap: 4px;

  .video-id {
    font-family: monospace;
    font-size: 12px;
  }
}

.video-name {
  margin-top: 4px;
  font-size: 13px;
  color: #606266;
}

.image-error {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 80px;
  background-color: #f5f7fa;
  color: #c0c4cc;
  font-size: 24px;
}

.url-item {
  display: flex;
  align-items: center;
  gap: 8px;

  .url-text {
    flex: 1;
    font-size: 12px;
    word-break: break-all;
    color: #606266;
  }
}

.player-container {
  width: 100%;
  height: 480px;
  background-color: #000;
  border-radius: var(--radius-base);
  overflow: hidden;
}
</style>
