<template>
  <div v-if="kycProfileUuid && companyData" class="space-y-2">
    <div class="flex items-center gap-2">
      <span class="badge badge-outline badge-sm">{{ companyData.companyType || 'Компания' }}</span>
      <span v-if="companyData.registrationYear" class="text-xs text-base-content/60">
        с {{ companyData.registrationYear }} г.
      </span>
      <span v-if="companyData.isActive" class="badge badge-success badge-xs">Активна</span>
    </div>
    <div v-if="companyData.sourcesCount" class="text-xs text-base-content/60">
      {{ companyData.sourcesCount }} {{ pluralize(companyData.sourcesCount, 'источник', 'источника', 'источников') }} данных
    </div>
  </div>
  <div v-else-if="kycProfileUuid && pending" class="text-xs text-base-content/60">
    Загрузка данных...
  </div>
</template>

<script setup lang="ts">
import { GetKycProfileTeaserDocument } from '~/composables/graphql/public/kyc-generated'

const props = defineProps<{
  kycProfileUuid?: string | null
}>()

const { execute } = useGraphQL()

const companyData = ref<{
  companyType?: string | null
  registrationYear?: number | null
  isActive?: boolean | null
  sourcesCount?: number | null
} | null>(null)

const pending = ref(false)

const loadCompanyData = async () => {
  if (!props.kycProfileUuid) return
  pending.value = true
  try {
    const data = await execute(
      GetKycProfileTeaserDocument,
      { profileUuid: props.kycProfileUuid },
      'public',
      'kyc'
    )
    companyData.value = data?.kycProfileTeaser || null
  } catch (error) {
    console.error('Error loading company data:', error)
  } finally {
    pending.value = false
  }
}

watch(() => props.kycProfileUuid, (uuid) => {
  if (uuid) {
    loadCompanyData()
  } else {
    companyData.value = null
  }
}, { immediate: true })

const pluralize = (n: number, one: string, few: string, many: string) => {
  const mod10 = n % 10
  const mod100 = n % 100
  if (mod10 === 1 && mod100 !== 11) return one
  if (mod10 >= 2 && mod10 <= 4 && (mod100 < 10 || mod100 >= 20)) return few
  return many
}
</script>
