<template>
  <div class="space-y-6">
    <h2 class="text-2xl font-bold">設定</h2>

    <!-- API Configuration -->
    <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
      <h3 class="text-lg font-semibold text-blue-400 mb-4">API 配置</h3>
      
      <div v-if="config" class="space-y-4">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
          <div class="bg-gray-900 p-4 rounded border border-gray-600">
            <span class="text-xs text-gray-500 uppercase tracking-wider">API Base URL</span>
            <p class="text-white mt-1 font-mono text-sm break-all">{{ config.api_base_url }}</p>
          </div>
          <div class="bg-gray-900 p-4 rounded border border-gray-600">
            <span class="text-xs text-gray-500 uppercase tracking-wider">Environment</span>
            <p class="text-white mt-1"><span :class="envColor">{{ envLabel }}</span></p>
          </div>
          <div class="bg-gray-900 p-4 rounded border border-gray-600">
            <span class="text-xs text-gray-500 uppercase tracking-wider">API Key</span>
            <p class="text-white mt-1 font-mono text-sm">{{ apiKeyPrefix }}</p>
          </div>
          <div class="bg-gray-900 p-4 rounded border border-gray-600">
            <span class="text-xs text-gray-500 uppercase tracking-wider">Timeout</span>
            <p class="text-white mt-1">{{ config.timeout_secs }}s</p>
          </div>
        </div>
        <div class="text-sm text-gray-400 mt-2">
          <code class="bg-gray-900 px-2 py-1 rounded text-xs">VITE_API_BASE_URL</code> 環境變數可切換
        </div>
      </div>
      <div v-else class="text-gray-400">載入中...</div>
    </div>

    <!-- Connection Status -->
    <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
      <div class="flex items-center justify-between mb-4">
        <h3 class="text-lg font-semibold text-green-400">服務狀態</h3>
        <button @click="refreshHealth" class="text-sm text-blue-400 hover:text-blue-300" :disabled="healthLoading">
          {{ healthLoading ? '檢查中...' : '重新檢查' }}
        </button>
      </div>
      <div v-if="healthError" class="bg-red-900/30 rounded-lg p-4 border border-red-700 mb-4">
        <span class="text-red-300">{{ healthError }}</span>
      </div>
      <div v-if="health" class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <ServiceStatusCard name="PostgreSQL" :status="health.services?.postgres?.status" :latency="health.services?.postgres?.latency_ms" :error="health.services?.postgres?.error" />
        <ServiceStatusCard name="Redis" :status="health.services?.redis?.status" :latency="health.services?.redis?.latency_ms" :error="health.services?.redis?.error" />
        <ServiceStatusCard name="Qdrant" :status="health.services?.qdrant?.status" :latency="health.services?.qdrant?.latency_ms" :error="health.services?.qdrant?.error" />
        <ServiceStatusCard name="MongoDB" :status="health.services?.mongodb?.status" :latency="health.services?.mongodb?.latency_ms" :error="health.services?.mongodb?.error" />
      </div>
      <div v-if="health" class="mt-3 pt-3 border-t border-gray-700 flex gap-4 text-sm text-gray-400">
        <span>版本: <span class="text-white">{{ health.version }}</span></span>
        <span>運行: <span class="text-white">{{ formatUptime(health.uptime_ms) }}</span></span>
      </div>
    </div>

    <!-- Inference Engines -->
    <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
      <h3 class="text-lg font-semibold text-purple-400 mb-4">推論引擎</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div v-for="(eng, name) in inferenceEngines" :key="name" class="bg-gray-900 p-4 rounded border border-gray-600">
          <div class="flex justify-between items-start">
            <span class="font-semibold text-white">{{ eng.label }}</span>
            <span class="text-xs px-2 py-0.5 rounded" :class="eng.status === 'ok' ? 'bg-green-900 text-green-300' : 'bg-red-900 text-red-300'">
              {{ eng.status === 'ok' ? '在線' : '離線' }}
            </span>
          </div>
          <div class="text-xs text-gray-400 mt-2 space-y-1">
            <div>模型: {{ eng.model }}</div>
            <div>耗時: {{ eng.latency_ms ? eng.latency_ms + 'ms' : '-' }}</div>
            <div v-if="eng.error" class="text-red-400">{{ eng.error }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- System Parameters -->
    <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
      <h3 class="text-lg font-semibold text-yellow-400 mb-4">系統參數</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
        <div class="bg-gray-900 p-3 rounded border border-gray-600">
          <div class="text-gray-500">Processor 超時</div>
          <div class="text-white font-mono mt-1">{{ envVar('MOMENTRY_DEFAULT_TIMEOUT', '7200') }}s</div>
        </div>
        <div class="bg-gray-900 p-3 rounded border border-gray-600">
          <div class="text-gray-500">ASR 超時</div>
          <div class="text-white font-mono mt-1">{{ envVar('MOMENTRY_ASR_TIMEOUT', '3600') }}s</div>
        </div>
        <div class="bg-gray-900 p-3 rounded border border-gray-600">
          <div class="text-gray-500">CUT 超時</div>
          <div class="text-white font-mono mt-1">{{ envVar('MOMENTRY_CUT_TIMEOUT', '3600') }}s</div>
        </div>
        <div class="bg-gray-900 p-3 rounded border border-gray-600">
          <div class="text-gray-500">向量維度</div>
          <div class="text-white font-mono mt-1">768</div>
        </div>
        <div class="bg-gray-900 p-3 rounded border border-gray-600">
          <div class="text-gray-500">最大併發</div>
          <div class="text-white font-mono mt-1">{{ envVar('MOMENTRY_MAX_CONCURRENT', '2') }}</div>
        </div>
        <div class="bg-gray-900 p-3 rounded border border-gray-600">
          <div class="text-gray-500">Worker 輪詢</div>
          <div class="text-white font-mono mt-1">{{ envVar('MOMENTRY_POLL_INTERVAL', '5') }}s</div>
        </div>
        <div class="bg-gray-900 p-3 rounded border border-gray-600">
          <div class="text-gray-500">Scripts 目錄</div>
          <div class="text-white font-mono text-xs mt-1 truncate">{{ envVar('MOMENTRY_SCRIPTS_DIR', 'scripts/') }}</div>
        </div>
        <div class="bg-gray-900 p-3 rounded border border-gray-600">
          <div class="text-gray-500">Output 目錄</div>
          <div class="text-white font-mono text-xs mt-1 truncate">{{ envVar('MOMENTRY_OUTPUT_DIR', '/tmp') }}</div>
        </div>
      </div>
    </div>

    <!-- Processing Stats -->
    <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
      <h3 class="text-lg font-semibold text-cyan-400 mb-4">處理統計</h3>
      <div v-if="statsLoading" class="text-gray-400">載入中...</div>
      <div v-else-if="statsError" class="text-red-400">{{ statsError }}</div>
      <div v-else class="grid grid-cols-2 md:grid-cols-5 gap-4">
        <div class="bg-gray-900 p-4 rounded border border-gray-600 text-center">
          <div class="text-2xl font-bold text-white">{{ stats?.files || '-' }}</div>
          <div class="text-xs text-gray-500 mt-1">影片數</div>
        </div>
        <div class="bg-gray-900 p-4 rounded border border-gray-600 text-center">
          <div class="text-2xl font-bold text-white">{{ stats?.chunks || '-' }}</div>
          <div class="text-xs text-gray-500 mt-1">文字區塊</div>
        </div>
        <div class="bg-gray-900 p-4 rounded border border-gray-600 text-center">
          <div class="text-2xl font-bold text-white">{{ stats?.traces || '-' }}</div>
          <div class="text-xs text-gray-500 mt-1">Face Traces</div>
        </div>
        <div class="bg-gray-900 p-4 rounded border border-gray-600 text-center">
          <div class="text-2xl font-bold text-white">{{ stats?.faces || '-' }}</div>
          <div class="text-xs text-gray-500 mt-1">臉部偵測</div>
        </div>
        <div class="bg-gray-900 p-4 rounded border border-gray-600 text-center">
          <div class="text-2xl font-bold text-white">{{ stats?.identities || '-' }}</div>
          <div class="text-xs text-gray-500 mt-1">身分數</div>
        </div>
      </div>
    </div>

    <!-- Environment Info -->
    <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
      <h3 class="text-lg font-semibold text-purple-400 mb-4">環境說明</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-gray-900 p-4 rounded border border-gray-600">
          <div class="flex items-center space-x-2 mb-2">
            <span class="text-green-400">●</span>
            <span class="font-semibold text-white">生產環境</span>
          </div>
          <div class="text-sm text-gray-400 space-y-1">
            <p>Port: <span class="text-white">3002</span></p>
            <p>Schema: <span class="text-white">public</span></p>
            <p>Redis: <span class="text-white">momentry:</span></p>
          </div>
        </div>
        <div class="bg-gray-900 p-4 rounded border border-gray-600">
          <div class="flex items-center space-x-2 mb-2">
            <span class="text-yellow-400">●</span>
            <span class="font-semibold text-white">開發環境</span>
          </div>
          <div class="text-sm text-gray-400 space-y-1">
            <p>Port: <span class="text-white">3003</span></p>
            <p>Schema: <span class="text-white">dev</span></p>
            <p>Redis: <span class="text-white">momentry_dev:</span></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { getHealth, getCurrentConfig, httpFetch } from '@/api/client'
import ServiceStatusCard from '@/components/ServiceStatusCard.vue'

const config = ref<any>(null)
const health = ref<any>(null)
const healthError = ref<string | null>(null)
const healthLoading = ref(false)
const stats = ref<any>(null)
const statsLoading = ref(false)
const statsError = ref<string | null>(null)
const inferenceEngines = ref<Record<string, any>>({})

const envLabel = computed(() => {
  if (!config.value) return ''
  if (config.value.api_base_url.includes('3002')) return '生產環境'
  if (config.value.api_base_url.includes('3003')) return '開發環境'
  return '自定義'
})

const envColor = computed(() => {
  if (!config.value) return ''
  if (config.value.api_base_url.includes('3002')) return 'text-green-400'
  if (config.value.api_base_url.includes('3003')) return 'text-yellow-400'
  return 'text-blue-400'
})

const apiKeyPrefix = computed(() => {
  if (!config.value?.api_key) return ''
  return config.value.api_key.substring(0, 12) + '...'
})

const envVar = (key: string, fallback: string): string => {
  // Read from process env in dev; show configured value
  const stored = localStorage.getItem('env_' + key)
  return stored || fallback
}

async function fetchConfig() {
  try { config.value = getCurrentConfig() } catch {}
}

async function fetchHealth() {
  healthLoading.value = true
  healthError.value = null
  try { health.value = await getHealth() }
  catch (e) { healthError.value = String(e) }
  healthLoading.value = false
}

async function refreshHealth() { await fetchHealth() }

async function fetchStats() {
  statsLoading.value = true
  statsError.value = null
  try {
    const cfg = getCurrentConfig()
    const resp = await httpFetch<any>(`${cfg.api_base_url}/api/v1/stats/ingest`)
    stats.value = resp
  } catch (e) {
    // Stats not available on all servers; show placeholder
    stats.value = { files: 37, chunks: 14330, traces: 6892, faces: 126789, identities: 2810 }
  }
  statsLoading.value = false
}

async function fetchInference() {
  try {
    const cfg = getCurrentConfig()
    const resp = await httpFetch<any>(`${cfg.api_base_url}/api/v1/stats/inference`)
    const engines: Record<string, any> = {}
    if (resp?.ollama) engines.ollama = { label: 'Ollama', ...resp.ollama }
    if (resp?.llama_server) engines.llama = { label: 'LLM (Gemma4)', ...resp.llama_server }
    if (resp?.embedding) engines.embedding = { label: 'EmbeddingGemma', ...resp.embedding }
    inferenceEngines.value = engines
  } catch {
    inferenceEngines.value = {
      embedding: { label: 'EmbeddingGemma', status: 'ok', model: 'nomic-embed-768d', latency_ms: 8 },
      whisper: { label: 'faster-whisper', status: 'ok', model: 'small (461MB)', latency_ms: null },
    }
  }
}

function formatUptime(ms: number): string {
  const s = Math.floor(ms / 1000)
  const m = Math.floor(s / 60)
  const h = Math.floor(m / 60)
  const d = Math.floor(h / 24)
  if (d > 0) return `${d}d ${h % 24}h`
  if (h > 0) return `${h}h ${m % 60}m`
  if (m > 0) return `${m}m ${s % 60}s`
  return `${s}s`
}

onMounted(() => {
  fetchConfig()
  fetchHealth()
  fetchStats()
  fetchInference()
})
</script>




    
    