<template>
  <dl v-if="falukantData" class="dashboard-widget__falukant">
    <dt>{{ $t('falukant.overview.metadata.name') }}</dt>
    <dd>{{ falukantDisplayName }}</dd>
    <dt>{{ $t('falukant.create.gender') }}</dt>
    <dd class="falukant-gender">{{ falukantGenderLabel }}</dd>
    <dt>{{ $t('falukant.overview.metadata.age') }}</dt>
    <dd class="falukant-age">{{ falukantAgeLabel }}</dd>
    <dt>{{ $t('falukant.overview.metadata.money') }}</dt>
    <dd>{{ formatMoney(falukantData.money) }}</dd>
    <dt>{{ $t('falukant.messages.title') }}</dt>
    <dd>{{ falukantData.unreadNotificationsCount }}</dd>
    <dt>{{ $t('falukant.statusbar.children') }}</dt>
    <dd>{{ falukantData.childrenCount }}</dd>
  </dl>
  <span v-else>—</span>
</template>

<script>
export default {
  name: 'FalukantWidget',
  props: {
    data: { type: Object, default: null }
  },
  computed: {
    falukantData() {
      const d = this.data;
      if (d && typeof d === 'object' && 'characterName' in d && 'money' in d) return d;
      return null;
    },
    falukantDisplayName() {
      const d = this.falukantData;
      if (!d) return '—';
      const titleKey = d.titleLabelTr;
      const gender = d.gender;
      const nameWithoutTitle = d.nameWithoutTitle ?? d.characterName;
      if (titleKey && gender) {
        const key = `falukant.titles.${gender}.${titleKey}`;
        const translatedTitle = this.$t(key);
        if (translatedTitle !== key) return `${translatedTitle} ${nameWithoutTitle}`.trim();
      }
      return d.characterName || nameWithoutTitle || '—';
    },
    falukantGenderLabel() {
      const g = this.falukantData?.gender;
      if (g == null || g === '') return '—';

  // Altersabhängige Bezeichnung (sprachlich natürlicher im Widget)
  // Default: unter 18 = Junge/Mädchen, sonst Mann/Frau
  const age = Number(this.falukantData?.age);
  const isChild = !Number.isNaN(age) && age < 18;
  if (g === 'female') return isChild ? 'Mädchen' : 'Frau';
  if (g === 'male') return isChild ? 'Junge' : 'Mann';

  // Fallback auf vorhandene Übersetzungen
  const key = `falukant.create.${g}`;
  const t = this.$t(key);
  return t === key ? this.$t(`general.gender.${g}`) || g : t;
    },
    falukantAgeLabel() {
      const ageValue = this.falukantData?.age;
      if (ageValue == null) return '—';
      const numAge = Number(ageValue);
      return `${numAge} ${this.$t('falukant.overview.metadata.years')}`;
    }
  },
  methods: {
    formatMoney(value) {
      const n = Number(value);
      if (Number.isNaN(n)) return '—';
      return n.toLocaleString('de-DE');
    }
  }
};
</script>

<style scoped>
.dashboard-widget__falukant {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  align-items: baseline;
}

.dashboard-widget__falukant dt {
  margin: 0;
  font-weight: 600;
  color: #555;
  font-size: 0.85rem;
}

.dashboard-widget__falukant dd {
  margin: 0;
  font-size: 0.9rem;
}

.dashboard-widget__falukant dd.falukant-gender {
  color: var(--color-text-secondary);
  font-weight: 600;
}

.dashboard-widget__falukant dd.falukant-age {
  color: #198754;
  font-weight: 600;
}
</style>
