<template>
  <ul v-if="items.length" class="dashboard-widget__list">
    <li
      v-for="(item, i) in items"
      :key="i"
      class="dashboard-widget__list-item"
    >
      <span v-if="item.datum" class="dashboard-widget__date">{{ formatDatum(item.datum) }}</span>
      <span v-if="item.titel" class="dashboard-widget__title-text">{{ item.titel }}</span>
      <span v-else-if="item.label" class="dashboard-widget__title-text">{{ item.label }}</span>
      <p v-if="item.beschreibung" class="dashboard-widget__desc">{{ item.beschreibung }}</p>
    </li>
  </ul>
  <span v-else>{{ fallbackText }}</span>
</template>

<script>
export default {
  name: 'ListWidget',
  props: {
    data: { type: [Array, Object], default: null }
  },
  computed: {
    items() {
      if (!Array.isArray(this.data) || this.data.length === 0) return [];
      const first = this.data[0];
      if (first !== null && typeof first === 'object') return this.data;
      return [];
    },
    fallbackText() {
      if (this.data == null) return '';
      if (Array.isArray(this.data)) {
        return this.data.length === 0 ? 'Keine Einträge' : `(${this.data.length} Einträge)`;
      }
      if (typeof this.data === 'object') {
        const keys = Object.keys(this.data);
        return keys.length === 0 ? '—' : `(${keys.length} Felder)`;
      }
      return String(this.data);
    }
  },
  methods: {
    formatDatum(dateStr) {
      if (!dateStr) return '';
      const d = new Date(dateStr);
      if (Number.isNaN(d.getTime())) return String(dateStr);
      return d.toLocaleDateString('de-DE', {
        weekday: 'short',
        day: 'numeric',
        month: 'short',
        year: 'numeric'
      });
    }
  }
};
</script>

<style scoped>
.dashboard-widget__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dashboard-widget__list-item {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.dashboard-widget__list-item:last-child {
  border-bottom: none;
}

.dashboard-widget__date {
  display: block;
  font-size: 0.8rem;
  color: #666;
  margin-bottom: 2px;
}

.dashboard-widget__title-text {
  font-weight: 600;
  color: #333;
}

.dashboard-widget__desc {
  margin: 4px 0 0 0;
  font-size: 0.85rem;
  color: #555;
  line-height: 1.4;
}
</style>
