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

const { isGerman } = useTranslation()

const paymentStatus = computed(() => {
  const data = props.params?.data
  if (!data) return 'pending'

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

  // Fully paid
  if (isPaid || (payAmt > 0 && payAmt >= grandTotal)) {
    return 'paid'
  }

  // Partially paid
  if (payAmt > 0 && grandTotal > 0) {
    return 'partial'
  }

  // Check if overdue based on NetDays from payment term using DateInvoiced
  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) {
      return 'overdue'
    }
  }

  return 'pending'
})

const paidPercent = computed(() => {
  const data = props.params?.data
  if (!data) return 0
  const payAmt = data.payAmt || 0
  const grandTotal = data.grandTotal || 0
  if (grandTotal <= 0) return 0
  return Math.round((payAmt / grandTotal) * 100)
})

const statusText = computed(() => {
  if (paymentStatus.value === 'paid') {
    return isGerman.value ? 'Bezahlt' : 'Paid'
  } else if (paymentStatus.value === 'partial') {
    return `${paidPercent.value}%`
  } else if (paymentStatus.value === 'overdue') {
    return isGerman.value ? 'Überfällig' : 'Overdue'
  } else {
    return isGerman.value ? 'Offen' : 'Open'
  }
})
</script>

<template>
  <span v-if="params?.data" class="payment-tag" :class="'tag-' + paymentStatus">
    <span class="tag-dot"></span>
    <span class="tag-label">{{ statusText }}</span>
  </span>
</template>

<style scoped>
.payment-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 10px 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1;
  white-space: nowrap;
}

.tag-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tag-paid {
  background: rgba(5, 150, 105, 0.15);
  color: #059669;
  border: 1px solid rgba(5, 150, 105, 0.3);
}
.tag-paid .tag-dot {
  background: #059669;
  box-shadow: 0 0 4px rgba(5, 150, 105, 0.5);
}

.tag-partial {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.tag-partial .tag-dot {
  background: #d97706;
  box-shadow: 0 0 4px rgba(245, 158, 11, 0.5);
}

.tag-overdue {
  background: rgba(220, 38, 38, 0.15);
  color: #dc2626;
  border: 1px solid rgba(220, 38, 38, 0.3);
}
.tag-overdue .tag-dot {
  background: #dc2626;
  box-shadow: 0 0 4px rgba(220, 38, 38, 0.5);
}

.tag-pending {
  background: rgba(107, 114, 128, 0.12);
  color: #6b7280;
  border: 1px solid rgba(107, 114, 128, 0.25);
}
.tag-pending .tag-dot {
  background: #9ca3af;
}
</style>
