<template>
  <div class="space-y-6">
    <div class="flex justify-between items-center">
      <h2 class="text-2xl font-bold">身分管理</h2>
      <button @click="loadPersons" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg transition">重新整理</button>
    </div>

    <div class="bg-gray-800 rounded-lg p-4 border border-gray-700">
      <input v-model="filterQuery" @keyup.enter="loadPersons" placeholder="搜尋身分..."
        class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-white focus:outline-none focus:border-blue-500" />
    </div>

    <div v-if="persons.length > 0" class="grid gap-4">
      <div v-for="person in persons" :key="person.id" class="bg-gray-800 rounded-lg p-6 border border-gray-700">
        <div class="flex items-start gap-6">
          <div class="w-16 h-16 bg-gray-700 rounded-lg overflow-hidden border border-gray-600 flex-shrink-0 flex items-center justify-center">
            <svg class="w-6 h-6 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
          </div>
          <div class="flex-1">
            <div class="flex items-center space-x-3 mb-2">
              <h3 class="text-xl font-semibold text-blue-400">{{ person.name || '未命名' }}</h3>
              <span class="bg-green-900 text-green-300 px-2 py-1 rounded text-xs">{{ person.source || 'system' }}</span>
            </div>
            <div class="grid grid-cols-2 gap-4 text-sm text-gray-400 mb-3">
              <div>ID: {{ person.id }}</div>
              <div v-if="person.metadata?.tmdb_movie_title">電影: {{ person.metadata.tmdb_movie_title }}</div>
              <div v-if="person.metadata?.tmdb_character">角色: {{ person.metadata.tmdb_character }}</div>
            </div>
          </div>
          <div class="flex flex-col space-y-2">
            <button @click="viewDetails(person)" class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-lg text-sm transition">查看詳情</button>
          </div>
        </div>
      </div>
    </div>

    <div v-else-if="loading" class="text-center py-12 text-gray-500">載入中...</div>
    <div v-else class="text-center py-12 text-gray-500">尚無身分資料</div>
  </div>
</template>

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

const persons = ref<any[]>([])
const loading = ref(false)
const filterQuery = ref('')
const router = useRouter()

const loadPersons = async () => {
  loading.value = true
  try {
    const config = getCurrentConfig()
    const params = new URLSearchParams({ page: '1', page_size: '50' })
    if (filterQuery.value.trim()) params.set('query', filterQuery.value.trim())
    const result = await httpFetch<any>(`${config.api_base_url}/api/v1/identities?${params}`)
    persons.value = result.identities || []
  } catch (error) {
    console.error('Failed to load identities:', error)
  } finally {
    loading.value = false
  }
}

const viewDetails = (person: any) => {
  router.push({
    name: 'identity-detail',
    params: { identity_uuid: person.id }
  })
}

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