<script setup>
const props = defineProps({
  params: Object
})

const overdueDays = computed(() => {
  const data = props.params?.data
  if (!data) return 0

  const isPaid = data.isPaid === true || data.isPaid === 'Y'
  const payAmt = data.payAmt || 0
  const grandTotal = data.grandTotal || 0

  // If paid, no overdue days
  if (isPaid || (payAmt > 0 && payAmt >= grandTotal)) {
    return 0
  }

  const netDays = data.netDays || 0
  const dateInvoiced = data.dateInvoiced

  if (dateInvoiced) {
    const invoiceDate = new Date(dateInvoiced)
    const dueDate = new Date(invoiceDate)
    dueDate.setDate(dueDate.getDate() + netDays)
    dueDate.setHours(0, 0, 0, 0)

    const today = new Date()
    today.setHours(0, 0, 0, 0)

    if (today > dueDate) {
      const diffTime = today.getTime() - dueDate.getTime()
      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
      return diffDays
    }
  }

  return 0
})
</script>

<template>
  <div v-if="params?.data" class="d-inlineFlex items-center justify-center">
    <span v-if="overdueDays > 0" class="overdue-badge">
      {{ overdueDays }}
    </span>
    <span v-else class="no-overdue">-</span>
  </div>
</template>

<style scoped>
.overdue-badge {
  background-color: #dc3545;
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
}

.no-overdue {
  color: #999;
}
</style>
