<template>
  <div class="column q-gutter-xs">
    <!-- 동네 찰떡지수 (전체 노출) -->
    <div v-if="hood" class="text-caption row items-center no-wrap">
      <q-icon name="groups" size="14px" color="teal" class="q-mr-xs" />
      <span class="text-weight-medium text-teal-8">동네 찰떡지수 {{ hood.percent }}%</span>
      <span class="text-grey-6 q-ml-xs">({{ hood.label }})</span>
    </div>

    <!-- 우리 찰떡지수 (매칭 이력 있는 쌍만) -->
    <div v-if="pair?.matched" class="text-caption row items-center no-wrap">
      <q-icon name="favorite" size="14px" color="pink-5" class="q-mr-xs" />
      <template v-if="pair.locked">
        <span class="text-weight-medium text-pink-6">우리 찰떡지수</span>
        <q-badge color="amber-7" class="q-ml-xs" text-color="white">유료회원 전용</q-badge>
      </template>
      <template v-else>
        <span class="text-weight-medium text-pink-6">우리 찰떡지수 {{ pair.percent }}%</span>
        <span class="text-grey-6 q-ml-xs">({{ pair.label }})</span>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { affinityApi, type NeighborhoodScore, type PairScore } from '@/api/affinity'

const props = defineProps<{ myDogId: number; otherDogId: number }>()

const hood = ref<NeighborhoodScore | null>(null)
const pair = ref<PairScore | null>(null)

watch(
  () => [props.myDogId, props.otherDogId] as const,
  () => void load(),
  { immediate: true },
)

async function load() {
  // 부가 정보 — 실패해도 카드 나머지는 정상 표시
  try {
    hood.value = await affinityApi.neighborhood(props.otherDogId)
  } catch {
    hood.value = null
  }
  try {
    pair.value = await affinityApi.pair(props.myDogId, props.otherDogId)
  } catch {
    pair.value = null
  }
}
</script>