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

// iDempiere returns `Created` / `DateOrdered` as Berlin wall-clock time with a
// spurious "Z" (UTC marker). Parse the wall-clock verbatim into a local Date so
// the time shows exactly as recorded — no +1h/+2h drift, no DST-dependent hack.
// (see app/composables/useIdempiereDate.ts)
const created = computed(() => parseIdempiereTimestamp(props.params?.data?.created))
const ordered = computed(() => parseIdempiereTimestamp(props.params?.data?.dateOrdered))

const pad = (n) => String(n).padStart(2, '0')

// Cell label: "vor X Min." / "vor X Std." while recent, then dd.MM (+ year if old).
const newdate = computed(() => {
  const d = created.value
  if (!d) return 'No date'

  const now = new Date()
  const totalMinutes = Math.floor((now.getTime() - d.getTime()) / 60000)
  const totalHours = Math.floor(totalMinutes / 60)

  if (totalMinutes < 60) {
    if (totalMinutes <= 0) return 'jetzt'
    if (totalMinutes === 1) return 'vor 1 Min.'
    return `vor ${totalMinutes} Min.`
  }

  if (totalHours < 24) {
    return totalHours === 1 ? 'vor 1 Std.' : `vor ${totalHours} Std.`
  }

  // 24h+ → absolute date, append year only when it isn't the current year.
  let formatted = `${pad(d.getDate())}.${pad(d.getMonth() + 1)}`
  if (d.getFullYear() !== now.getFullYear()) formatted += `.${d.getFullYear()}`
  return formatted
})

// Tooltip helper: "dd.MM.YYYY - HH:MM"
const formatFull = (d) => d
  ? `${pad(d.getDate())}.${pad(d.getMonth() + 1)}.${d.getFullYear()} - ${pad(d.getHours())}:${pad(d.getMinutes())}`
  : ''

const newdatetitle = computed(() => formatFull(created.value))
const dateordered = computed(() => formatFull(ordered.value))
</script>


<template>
  <div class="d-inlineFlex items-center gap-5px">
    <div class="tags" :title="'Bestellt: ' + dateordered + ' / Importiert: ' + newdatetitle">
      {{ newdate }}
    </div>
  </div>
</template>

<style scoped>
.tag {
  width: 40px;
  height: 20px;
}
.greenbt {
  color: white;
  background-color: #00a500;
  border: 1px solid #00a500;
}

.greybt {
  color: grey;
  border: 1px solid grey;
}

.icons {
  color: white;
}

span[class^='i-mdi'] {
  font-size: 19px;
  margin-top: 4px;
}
</style>
