<script setup>
const props = defineProps({
  title: { type: String, required: true },
  value: { type: [Number, String], default: 0 },
  previousValue: { type: [Number, String], default: null },
  format: { type: String, default: 'number' }, // number | currency | percent | duration
  icon: { type: String, default: '' },
  link: { type: String, default: '' },
  loading: { type: Boolean, default: false },
})

const emit = defineEmits(['click'])

const formattedValue = computed(() => {
  const v = Number(props.value) || 0
  if (props.format === 'currency') {
    return new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(v)
  }
  if (props.format === 'percent') {
    return v.toFixed(1) + '%'
  }
  if (props.format === 'duration') {
    // value is milliseconds — render as "X sec" / "X min Y sec" / "X hr Y min"
    const totalSec = Math.max(0, Math.floor(v / 1000))
    if (totalSec < 60) return `${totalSec} sec`
    const m = Math.floor(totalSec / 60)
    const s = totalSec % 60
    if (m < 60) return s ? `${m} min ${s} sec` : `${m} min`
    const h = Math.floor(m / 60)
    const rm = m % 60
    return rm ? `${h} hr ${rm} min` : `${h} hr`
  }
  return new Intl.NumberFormat('de-DE').format(v)
})

const trend = computed(() => {
  if (props.previousValue === null || props.previousValue === undefined) return null
  const current = Number(props.value) || 0
  const previous = Number(props.previousValue) || 0
  if (previous === 0) return current > 0 ? 100 : 0
  return Math.round(((current - previous) / previous) * 100 * 10) / 10
})

const trendDirection = computed(() => {
  if (trend.value === null) return 'neutral'
  if (trend.value > 0) return 'up'
  if (trend.value < 0) return 'down'
  return 'neutral'
})

const handleClick = () => {
  emit('click')
  if (props.link) {
    navigateTo(props.link)
  }
}
</script>

<template>
  <div
    class="card kpi-card"
    :class="{ 'is-clickable': link || $attrs.onClick }"
    @click="handleClick"
  >
    <div class="card-content">
      <div class="kpi-header">
        <span v-if="icon" class="kpi-icon">
          <i :class="icon"></i>
        </span>
        <span class="kpi-title">{{ title }}</span>
      </div>

      <div class="kpi-value-row">
        <p v-if="loading" class="kpi-value">
          <span class="kpi-loading">...</span>
        </p>
        <p v-else class="kpi-value">{{ formattedValue }}</p>

        <span
          v-if="trend !== null && !loading"
          class="kpi-trend"
          :class="{
            'has-text-success': trendDirection === 'up',
            'has-text-danger': trendDirection === 'down',
            'has-text-grey': trendDirection === 'neutral',
          }"
        >
          <span v-if="trendDirection === 'up'">&#9650;</span>
          <span v-else-if="trendDirection === 'down'">&#9660;</span>
          <span v-else>&mdash;</span>
          {{ Math.abs(trend) }}%
        </span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.kpi-card {
  transition: box-shadow 0.2s ease, transform 0.15s ease;
  /* Stretch to match the tallest sibling in the dashboard grid so a longer
     value like "54 min 4 sec" doesn't bump just one card taller. */
  height: 100%;
  display: flex;
  flex-direction: column;
}
.kpi-card .card-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.kpi-card.is-clickable {
  cursor: pointer;
}
.kpi-card.is-clickable:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}
.kpi-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.kpi-icon {
  font-size: 1.1rem;
  color: #485fc7;
}
.kpi-title {
  font-size: 0.85rem;
  font-weight: 500;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.kpi-value-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.kpi-value {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
}
.kpi-loading {
  opacity: 0.4;
}
.kpi-trend {
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Tablet */
@media (max-width: 768px) {
  .kpi-value {
    font-size: 1.4rem;
  }
  .card-content {
    padding: 0.75rem;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .kpi-value {
    font-size: 1.2rem;
  }
  .kpi-title {
    font-size: 0.75rem;
  }
  .kpi-value-row {
    flex-wrap: wrap;
    gap: 4px;
  }
}
</style>
