<script setup>
import { computed, ref, watch } from 'vue'

const props = defineProps({
  person: { type: Object, required: true },
  types: { type: Object, default: () => ({}) },
  // Allow overriding the default active tab: 'addresses' | 'phones' | 'emails' | 'bank'
  defaultTab: { type: String, default: 'addresses' },
})

const phoneTypes = computed(() => {
  const arr = props.types?.phone_types || []
  const map = {}
  for (const t of arr) { map[t.id] = t.name }
  return map
})

const displayName = computed(() => {
  const p = props.person || {}
  const full = p.full_name?.trim()
  if (full) { return full }
  const first = p.first_name?.trim() || ''
  const last = p.last_name?.trim() || ''
  return `${first} ${last}`.trim()
})

const primaryAddress = computed(() => props.person?.addresses?.[0] || null)
const primaryEmail = computed(() => props.person?.emails?.[0]?.value || null)
// Backend phone model uses `nu` as the number
const allPhones = computed(() => props.person?.phones || [])
const allAddresses = computed(() => props.person?.addresses || [])
const allEmails = computed(() => props.person?.emails || [])
// Laravel serializes relation names to snake_case, so prefer bank_accounts, fallback to bankAccounts
const allBankAccounts = computed(() => props.person?.bank_accounts || props.person?.bankAccounts || [])
const bankIban = computed(() => allBankAccounts.value?.[0]?.iban || null)
const taxNumber = computed(() => props.person?.tax_number || null)
const ssn = computed(() => props.person?.social_security_number || null)

// Summary sizing
const showMore = ref(false)
const summaryPhones = computed(() => allPhones.value.slice(0, showMore.value ? 2 : 1))

// Tabs
const activeTab = ref(props.defaultTab || 'addresses')
watch(() => props.defaultTab, (val) => { if (val) activeTab.value = val })

function maskIban(iban) {
  if (!iban || typeof iban !== 'string') return null
  const clean = iban.replace(/\s+/g, '')
  if (clean.length <= 8) return clean
  return `${clean.slice(0, 4)} **** **** ${clean.slice(-4)}`
}
</script>

<template>
  <div class="text-sm">
    <div v-if="displayName" class="font-medium text-gray-900">{{ displayName }}</div>

    <div v-if="primaryAddress" class="mt-1 text-gray-700">
      <span>{{ primaryAddress.address }}</span>
      <span v-if="primaryAddress.country" class="text-gray-500 text-xs ml-1">({{ primaryAddress.country }})</span>
    </div>

    <div v-if="summaryPhones?.length" class="mt-1 space-y-0.5">
      <div v-for="p in summaryPhones" :key="p.id" class="text-gray-700">
        <span>{{ p.nu }}</span>
        <span v-if="(p.type_id && phoneTypes[p.type_id]) || p.type?.name" class="text-gray-500 text-xs ml-1">({{ p.type?.name || phoneTypes[p.type_id] }})</span>
      </div>
    </div>

    <div v-if="showMore && primaryEmail" class="mt-1 text-gray-700">{{ primaryEmail }}</div>

    <div v-if="showMore && bankIban" class="mt-1 text-gray-700">TRR: <span class="font-mono">{{ maskIban(bankIban) }}</span></div>

  <div v-if="showMore && taxNumber" class="mt-1 text-gray-700">Davčna: <span class="font-mono">{{ taxNumber }}</span></div>
  <div v-if="showMore && ssn" class="mt-1 text-gray-700">EMŠO: <span class="font-mono">{{ ssn }}</span></div>

    <button type="button" class="mt-2 text-xs text-blue-600 hover:underline" @click="showMore = !showMore">
      {{ showMore ? 'Skrij' : 'Prikaži več' }}
    </button>
  </div>

  <!-- Tabs -->
  <div class="mt-3">
    <div class="flex gap-2 overflow-x-auto">
      <button type="button" @click="activeTab = 'addresses'" :class="['px-3 py-1 rounded text-xs inline-flex items-center gap-1', activeTab==='addresses' ? 'bg-gray-200 text-gray-900' : 'bg-white text-gray-700 border']">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor"><path d="M10 2a1 1 0 0 1 .832.445l6 8.5a1 1 0 0 1 .168.555V17a1 1 0 0 1-1 1h-4v-4H8v4H4a1 1 0 0 1-1-1v-5.5a1 1 0 0 1 .168-.555l6-8.5A1 1 0 0 1 10 2Z"/></svg>
        Naslovi ({{ allAddresses.length }})
      </button>
      <button type="button" @click="activeTab = 'phones'" :class="['px-3 py-1 rounded text-xs inline-flex items-center gap-1', activeTab==='phones' ? 'bg-gray-200 text-gray-900' : 'bg-white text-gray-700 border']">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor"><path d="M2.3 3.3c.6-1 1.9-1.3 2.9-.7l1.7 1a2 2 0 0 1 .9 2.5l-.5 1.2a2 2 0 0 0 .4 2.2l2.8 2.8a2 2 0 0 0 2.2.4l1.2-.5a2 2 0 0 1 2.5.9l1 1.7c.6 1 .3 2.3-.7 2.9-2 1.1-4.5 1.1-6.5 0-2.5-1.3-4.8-3.6-6.1-6.1-1.1-2-1.1-4.5 0-6.5Z"/></svg>
        Telefoni ({{ allPhones.length }})
      </button>
      <button type="button" @click="activeTab = 'emails'" :class="['px-3 py-1 rounded text-xs inline-flex items-center gap-1', activeTab==='emails' ? 'bg-gray-200 text-gray-900' : 'bg-white text-gray-700 border']">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor"><path d="M2.5 5A1.5 1.5 0 0 1 4 3.5h12A1.5 1.5 0 0 1 17.5 5v10A1.5 1.5 0 0 1 16 16.5H4A1.5 1.5 0 0 1 2.5 15V5Zm2.1.5 5.4 3.6a1 1 0 0 0 1.1 0l5.4-3.6V5H4.6Z"/></svg>
        E-pošta ({{ allEmails.length }})
      </button>
      <button type="button" @click="activeTab = 'bank'" :class="['px-3 py-1 rounded text-xs inline-flex items-center gap-1', activeTab==='bank' ? 'bg-gray-200 text-gray-900' : 'bg-white text-gray-700 border']">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor"><path d="M10 2 2 6v2h16V6l-8-4Zm-6 7h12v7H4V9Zm-1 8h14v1H3v-1Z"/></svg>
        TRR ({{ allBankAccounts.length }})
      </button>
    </div>

    <div class="mt-2">
      <!-- Addresses -->
      <div v-if="activeTab==='addresses'">
        <div v-if="!allAddresses.length" class="text-gray-500 text-xs">Ni naslovov.</div>
        <div v-for="(a,idx) in allAddresses" :key="a.id || idx" class="py-1">
          <div class="text-gray-800">{{ a.address }}</div>
          <div v-if="a.country" class="text-gray-600 text-xs">{{ a.country }}</div>
        </div>
      </div>

      <!-- Phones -->
      <div v-else-if="activeTab==='phones'">
        <div v-if="!allPhones.length" class="text-gray-500 text-xs">Ni telefonov.</div>
        <div v-for="(p,idx) in allPhones" :key="p.id || idx" class="py-1">
          <div class="text-gray-800">{{ p.nu }} <span v-if="(p.type_id && phoneTypes[p.type_id]) || p.type?.name" class="text-gray-500 text-xs">({{ p.type?.name || phoneTypes[p.type_id] }})</span></div>
        </div>
      </div>

      <!-- Emails -->
      <div v-else-if="activeTab==='emails'">
        <div v-if="!allEmails.length" class="text-gray-500 text-xs">Ni e-poštnih naslovov.</div>
        <div v-for="(e,idx) in allEmails" :key="e.id || idx" class="py-1">
          <div class="text-gray-800">{{ e.value }}<span v-if="e.label" class="text-gray-500 text-xs ml-1">({{ e.label }})</span></div>
        </div>
      </div>

      <!-- Bank accounts -->
      <div v-else>
        <div v-if="!allBankAccounts.length" class="text-gray-500 text-xs">Ni TRR računov.</div>
        <div v-for="(b,idx) in allBankAccounts" :key="b.id || idx" class="py-1">
          <div class="text-gray-800">{{ maskIban(b.iban) }}</div>
          <div v-if="b.bank_name" class="text-gray-600 text-xs">{{ b.bank_name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
</style>
