<template>
  <div class="min-h-screen bg-gray-900 text-white p-4">
    <div class="flex items-center justify-between mb-4">
      <h2 class="text-xl font-bold text-blue-400">V5: 3D Space-Time Cube</h2>
      <button @click="goBack" class="text-sm bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded">&larr; 返回</button>
    </div>
    <div class="text-xs text-gray-500 mb-3 flex gap-4">
      <span>X = 畫面水平位置（紅軸）</span>
      <span>Y = 畫面垂直位置（綠軸）</span>
      <span>Z = 深度 - bbox 面積（藍軸）</span>
      <span>T = 時間 - 顏色漸層藍&rarr;紅</span>
    </div>
    <div class="h-[calc(100vh-140px)]">
      <SpaceTimeCube
        :file-uuid="fileUuid"
        :traces="allTraces"
        :frame-width="1920"
        :frame-height="1080"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getCurrentConfig } from '@/api/client'
import SpaceTimeCube from '@/components/SpaceTimeCube.vue'

const route = useRoute()
const router = useRouter()
const fileUuid = route.params.file_uuid as string
const allTraces = ref<any[]>([])

// Auto-configure from query params (for demo)
const keyParam = route.query.key as string
const baseParam = route.query.base as string
if (keyParam && baseParam) {
  const existing = JSON.parse(localStorage.getItem('portal_config') || '{}')
  existing.api_key = keyParam
  existing.api_base_url = baseParam
  localStorage.setItem('portal_config', JSON.stringify(existing))
}

const goBack = () => router.back()

onMounted(async () => {
  const config = getCurrentConfig()
  try {
    const resp = await fetch(`${config.api_base_url}/api/v1/file/${fileUuid}/face_trace/sortby`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        ...(config.api_key ? { 'X-API-Key': config.api_key } : {})
      },
      body: JSON.stringify({ sort_by: 'face_count', limit: 200, min_faces: 1 })
    })
    const data = await resp.json()
    allTraces.value = data.traces || []
  } catch (e) {
    console.error('Failed to load traces:', e)
  }
})
</script>