<template>
  <div class="space-y-6">
    <!-- Header with Actions -->
    <div class="flex items-center justify-between">
      <div class="flex items-center space-x-4">
        <button @click="goBack" class="flex items-center space-x-2 px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition">
          <span class="text-xl">←</span>
          <span>返回納管檔案列表</span>
        </button>
        <h2 class="text-2xl font-bold">
          {{ video?.file_name || '檔案詳情' }}
          <span v-if="video?.file_type" class="ml-2 text-sm px-2 py-1 bg-blue-900 text-blue-200 rounded uppercase">
            {{ video.file_type }}
          </span>
        </h2>
      </div>
      <div class="flex items-center space-x-3">
        <button 
          v-if="video && !video.registration_time" 
          @click="handleRegister"
          :disabled="actionLoading"
          class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded transition"
        >
          {{ actionLoading ? '處理中...' : '立即註冊' }}
        </button>
        <button 
          v-if="video && video.registration_time" 
          @click="handleUnregister"
          :disabled="actionLoading"
          class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded transition"
        >
          {{ actionLoading ? '處理中...' : '取消註冊' }}
        </button>
        <button 
          v-if="video && video.registration_time" 
          @click="handleProcess"
          :disabled="actionLoading || video.status === 'processing'"
          class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded transition disabled:opacity-50"
        >
          {{ actionLoading ? '處理中...' : '分析處理' }}
        </button>
      </div>
    </div>

    <!-- Loading -->
    <div v-if="loading" class="flex justify-center py-12">
      <div class="animate-spin rounded-full h-10 w-10 border-b-2 border-blue-500"></div>
    </div>

    <!-- Main Content -->
    <div v-else-if="video" class="space-y-6">

      <!-- 1. Common Info Card -->
      <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
        <h3 class="text-lg font-semibold mb-4 text-blue-400">基本檔案資訊</h3>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
          <div>
            <span class="text-xs text-gray-500 uppercase">File UUID</span>
            <p class="text-sm font-mono text-gray-300 truncate">{{ video.file_uuid }}</p>
          </div>
          <div>
            <span class="text-xs text-gray-500 uppercase">狀態</span>
            <p class="text-white">
              <span :class="getStatusColor(video.status)" class="px-2 py-1 rounded text-sm">
                {{ video.status }}
              </span>
            </p>
          </div>
          <div>
            <span class="text-xs text-gray-500 uppercase">註冊時間</span>
            <p class="text-sm text-gray-300">{{ formatTimestamp(video.registration_time) || '-' }}</p>
          </div>
          <div>
            <span class="text-xs text-gray-500 uppercase">檔案大小</span>
            <p class="text-sm text-gray-300">{{ formatFileSize(probeInfo?.format?.size) }}</p>
          </div>
        </div>
      </div>

      <!-- 2. Video Specific Sections -->
      <template v-if="video.file_type === 'video'">
        
        <!-- Processing Status -->
        <div v-if="video.processing_status" class="bg-gray-800 rounded-lg p-6 border border-gray-700">
          <h3 class="text-lg font-semibold mb-4 text-blue-400">處理狀態 (Processing Status)</h3>
          <div class="bg-gray-900 p-4 rounded space-y-3">
            <!-- Phase -->
            <div class="flex items-center space-x-3">
              <span class="text-gray-500 w-20">階段:</span>
              <span class="text-white font-semibold">{{ video.processing_status.phase || '-' }}</span>
            </div>

            <!-- Active Processors -->
            <div v-if="video.processing_status.active_processors?.length && video.processing_status.phase !== 'COMPLETED'" class="flex items-start space-x-3">
              <span class="text-gray-500 w-20">處理器:</span>
              <div class="flex flex-wrap gap-2">
                <span v-for="p in video.processing_status.active_processors" :key="p"
                  class="px-2 py-1 bg-blue-900 text-blue-300 rounded text-xs">
                  {{ p }}
                </span>
              </div>
            </div>

            <!-- Progress by Processor -->
            <div v-if="video.processing_status.progress && video.processing_status.phase !== 'COMPLETED'" class="space-y-2">
              <span class="text-gray-500">進度:</span>
              <div v-for="(progress, processor) in video.processing_status.progress" :key="processor"
                class="flex items-center space-x-3 bg-gray-800 p-2 rounded">
                <span class="text-gray-400 w-16">{{ processor }}</span>
                <div class="flex-1">
                  <div class="flex items-center space-x-2">
                    <div class="flex-1 bg-gray-700 rounded-full h-2">
                      <div :class="getProgressColor(progress.status)"
                        class="h-2 rounded-full transition-all"
                        :style="{ width: `${progress.percentage || 0}%` }">
                      </div>
                    </div>
                    <span class="text-xs text-gray-400">{{ (progress.percentage || 0).toFixed(1) }}%</span>
                  </div>
                  <div class="text-xs text-gray-500 mt-1">
                    {{ progress.current_frame || 0 }} / {{ progress.total_frames || 0 }} frames
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Face Clusters -->
        <div v-if="clusters.length > 0" class="space-y-4">
          <h3 class="text-xl font-semibold">臉部群組 ({{ clusters.length }})</h3>
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div v-for="cluster in clusters" :key="cluster.cluster_id"
              class="bg-gray-800 rounded-lg p-4 border border-gray-700">
              <div class="flex justify-between items-start mb-3">
                <h4 class="font-semibold">{{ cluster.cluster_id }}</h4>
                <span :class="cluster.status === 'registered' ? 'bg-green-900 text-green-300' : 'bg-yellow-900 text-yellow-300'"
                  class="px-2 py-1 rounded text-xs">
                  {{ cluster.status === 'registered' ? '已註冊' : '未註冊' }}
                </span>
              </div>
              <div class="space-y-2 text-sm text-gray-400 mb-3">
                <div>臉孔數: {{ cluster.face_count }}</div>
                <div v-if="cluster.identity?.name">姓名: {{ cluster.identity.name }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- Face Traces -->
        <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
          <FaceTraceTimeline
            :file-uuid="uuid"
            :total-duration="probeInfo?.format?.duration || 0"
            @select="handleTraceSelect" />
        </div>
      </template>

      <!-- 3. Generic Probe Info -->
      <div v-if="probeInfo" class="bg-gray-800 rounded-lg p-6 border border-gray-700">
        <h3 class="text-lg font-semibold mb-4 text-blue-400">Probe 訊息 (ffprobe)</h3>
        
        <!-- Basic Info Grid -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
          <div>
            <span class="text-xs text-gray-500 uppercase">Duration</span>
            <p class="text-white">{{ formatDuration(probeInfo.format?.duration) }}</p>
          </div>
          <div>
            <span class="text-xs text-gray-500 uppercase">Bitrate</span>
            <p class="text-white">{{ (probeInfo.format?.bit_rate / 1000).toFixed(0) }} kbps</p>
          </div>
          <div>
            <span class="text-xs text-gray-500 uppercase">Format</span>
            <p class="text-white">{{ probeInfo.format?.format_long_name || '-' }}</p>
          </div>
          <div>
            <span class="text-xs text-gray-500 uppercase">Size</span>
            <p class="text-white">{{ formatFileSize(probeInfo.format?.size) }}</p>
          </div>
        </div>

        <!-- Full Probe JSON (Lazy Loaded via Computed) -->
        <details class="mt-4">
          <summary class="text-sm text-gray-400 cursor-pointer hover:text-white flex items-center space-x-2">
            <span>完整 Probe JSON</span>
            <span class="text-xs bg-blue-900 text-blue-300 px-2 py-1 rounded">詳細</span>
          </summary>
          <div class="bg-gray-900 p-3 rounded text-xs font-mono text-gray-300 overflow-x-auto max-h-96 mt-2">
            <pre>{{ probeJsonString }}</pre>
          </div>
        </details>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getVideos, registerVideo, unregisterVideo, processVideo } from '@/api/client'
import FaceTraceTimeline from '@/components/FaceTraceTimeline.vue'

const route = useRoute()
const router = useRouter()
const uuid = route.params.uuid as string

const video = ref<any>(null)
const probeInfo = ref<any>(null)
const clusters = ref<any[]>([])
const loading = ref(false)
const actionLoading = ref(false)

// Computed for safe JSON string rendering
const probeJsonString = computed(() => {
  if (!probeInfo.value) return ''
  try {
    return JSON.stringify(probeInfo.value, null, 2)
  } catch {
    return 'Error parsing JSON'
  }
})

function goBack() {
  router.push('/files')
}

function formatDuration(seconds: number | undefined): string {
  if (!seconds) return '-'
  const m = Math.floor(seconds / 60)
  const s = Math.floor(seconds % 60)
  if (m > 60) {
    const h = Math.floor(m / 60)
    return `${h}h ${m % 60}m ${s}s`
  }
  return `${m}m ${s}s`
}

function formatFileSize(bytes: number | undefined): string {
  if (!bytes) return '-'
  if (bytes < 1024) return `${bytes} B`
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
  return `${(bytes / 1024 / 1024).toFixed(1)} MB`
}

function getStatusColor(status: string): string {
  switch (status) {
    case 'completed': return 'bg-green-500'
    case 'processing': return 'bg-yellow-500'
    case 'pending': return 'bg-gray-500'
    case 'failed': return 'bg-red-500'
    default: return 'bg-gray-500'
  }
}

function formatTimestamp(timestamp: string | undefined): string {
  if (!timestamp) return '-'
  try {
    const date = new Date(timestamp)
    return date.toLocaleString('zh-TW', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    })
  } catch {
    return timestamp
  }
}

function getProgressColor(status: string): string {
  switch (status) {
    case 'completed': return 'bg-green-500'
    case 'running': return 'bg-blue-500'
    case 'pending': return 'bg-gray-500'
    case 'failed': return 'bg-red-500'
    default: return 'bg-gray-500'
  }
}

async function handleRegister() {
  actionLoading.value = true
  try {
    if (!video.value?.file_path) return
    await registerVideo(video.value.file_path)
    await loadVideoDetail()
  } catch (e) {
    console.error('Registration failed:', e)
  } finally {
    actionLoading.value = false
  }
}

async function handleUnregister() {
  if (!confirm('確定要取消註冊嗎？這將刪除相關數據。')) return
  actionLoading.value = true
  try {
    if (!video.value?.file_uuid) return
    await unregisterVideo(video.value.file_uuid)
    await loadVideoDetail()
  } catch (e) {
    console.error('Unregistration failed:', e)
  } finally {
    actionLoading.value = false
  }
}

async function handleProcess() {
  actionLoading.value = true
  try {
    if (!video.value?.file_uuid) return
    await processVideo(video.value.file_uuid)
    await loadVideoDetail()
  } catch (e) {
    console.error('Processing failed:', e)
  } finally {
    actionLoading.value = false
  }
}

function handleTraceSelect(traceId: number) {
  // Navigate to face candidates filtered by this trace
  router.push(`/faces/candidates?trace_id=${traceId}&file_uuid=${uuid}`)
}

async function loadVideoDetail() {
  loading.value = true
  try {
    // Use getVideos and extract from files array
    const result = await getVideos(undefined, undefined, 1, 1, uuid)
    
    if (result.files?.[0]) {
      const v = result.files[0]
      video.value = v
      
      // Parse processing_status
      if (v.processing_status) {
        try {
          video.value.processing_status = typeof v.processing_status === 'string' 
            ? JSON.parse(v.processing_status) 
            : v.processing_status
        } catch (e) {
          console.error('Failed to parse processing_status:', e)
        }
      }
      
      // Parse probe_json
      if (v.probe_json) {
        try {
          probeInfo.value = JSON.parse(v.probe_json)
        } catch (e) {
          console.error('Failed to parse probe_json:', e)
        }
      }
    }
  } catch (e) {
    console.error('Failed to load detail:', e)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadVideoDetail()
})
</script>