<template>
  <BaseDialog
    :model-value="modelValue"
    @update:model-value="$emit('update:modelValue', $event)"
    :title="`${$t('activityStats.title')} ${member ? member.firstName + ' ' + member.lastName : ''}`"
    size="medium"
    @close="handleClose"
  >
    <div class="activity-stats-content">
      <!-- Letzte 3 Teilnahmen -->
      <div class="section">
        <h3 class="section-title">{{ $t('activityStats.last3Participations') }}</h3>
        <div v-if="groupedParticipations && groupedParticipations.length" class="participations-list">
          <div v-for="dateGroup in groupedParticipations" :key="dateGroup.date" class="participation-date-group">
            <div class="participation-date-header">{{ formatDate(dateGroup.date) }}</div>
            <div class="participation-activities">
              <div v-for="(activity, index) in dateGroup.activities" :key="index" class="participation-item">
                <div class="participation-name" :title="getActivityTooltip(activity)">{{ getActivityDisplay(activity) }}</div>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="no-data">
          <em>{{ $t('activityStats.noParticipations') }}</em>
        </div>
      </div>

      <!-- Statistik der Übungen -->
      <div class="section">
        <h3 class="section-title">{{ $t('activityStats.activityStatistics') }}</h3>
        <div v-if="activityStats && activityStats.length" class="stats-list">
          <div v-for="stat in activityStats" :key="stat.code || stat.name" class="stat-item">
            <div class="stat-name" :title="stat.name">{{ stat.code || stat.name }}</div>
            <div class="stat-count">{{ stat.count }}x</div>
          </div>
        </div>
        <div v-else class="no-data">
          <em>{{ $t('activityStats.noStatistics') }}</em>
        </div>
      </div>
    </div>
  </BaseDialog>
</template>

<script>
import BaseDialog from './BaseDialog.vue';

export default {
  name: 'MemberActivityStatsDialog',
  components: {
    BaseDialog
  },
  props: {
    modelValue: {
      type: Boolean,
      default: false
    },
    member: {
      type: Object,
      default: null
    },
    lastParticipations: {
      type: Array,
      default: () => []
    },
    activityStats: {
      type: Array,
      default: () => []
    }
  },
  emits: ['update:modelValue', 'close'],
  computed: {
    groupedParticipations() {
      if (!this.lastParticipations || this.lastParticipations.length === 0) {
        return [];
      }
      
      // Gruppiere nach Datum
      const grouped = new Map();
      this.lastParticipations.forEach(participation => {
        const date = participation.date;
        if (!grouped.has(date)) {
          grouped.set(date, {
            date: date,
            activities: []
          });
        }
        const dateGroup = grouped.get(date);
        // Füge Aktivität nur hinzu, wenn sie noch nicht vorhanden ist
        // Unterstütze sowohl alte (String) als auch neue (Objekt) Datenstruktur
        const activityEntry = participation.activityFullName 
          ? { code: participation.activityName, name: participation.activityFullName }
          : participation.activityName;
        
        const exists = typeof activityEntry === 'string'
          ? dateGroup.activities.includes(activityEntry)
          : dateGroup.activities.some(a => 
              (typeof a === 'string' ? a === activityEntry.code : (a.code || a.name) === activityEntry.code)
            );
        
        if (!exists) {
          dateGroup.activities.push(activityEntry);
        }
      });
      
      // Sortiere nach Datum (neueste zuerst) und nehme die ersten 3
      return Array.from(grouped.values())
        .sort((a, b) => {
          const dateA = new Date(a.date);
          const dateB = new Date(b.date);
          return dateB - dateA;
        })
        .slice(0, 3);
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:modelValue', false);
      this.$emit('close');
    },
    formatDate(dateString) {
      if (!dateString) return '';
      const date = new Date(dateString);
      return date.toLocaleDateString('de-DE');
    },
    getActivityDisplay(activity) {
      // Wenn activity ein String ist (alte Datenstruktur), verwende es direkt
      if (typeof activity === 'string') {
        return activity;
      }
      // Wenn activity ein Objekt ist, verwende code oder name
      return activity.code || activity.name || activity;
    },
    getActivityTooltip(activity) {
      // Wenn activity ein String ist (alte Datenstruktur), kein Tooltip
      if (typeof activity === 'string') {
        return '';
      }
      // Wenn activity ein Objekt ist, verwende name als Tooltip
      return activity.name || '';
    }
  }
};
</script>

<style scoped>
.activity-stats-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.section-title {
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--primary-strong);
  margin: 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
}

.participations-list,
.stats-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.participation-date-group {
  margin-bottom: 1rem;
}

.participation-date-header {
  font-weight: 600;
  color: var(--primary-strong);
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--border-color);
}

.participation-activities {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-left: 0.5rem;
}

.participation-item,
.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  background: var(--surface-muted);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  transition: background-color 0.3s ease;
}

.participation-item:hover,
.stat-item:hover {
  background: rgba(47, 122, 95, 0.08);
}

.participation-name,
.stat-name {
  font-weight: 500;
  color: var(--text-color);
  flex: 1;
}

.participation-date {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.stat-count {
  font-weight: 600;
  color: var(--primary-strong);
  font-size: 1.1rem;
}

.no-data {
  padding: 2rem;
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
}
</style>
