<template>
  <div class="diary-overview-panels">
    <div class="diary-overview-switcher">
      <button type="button" class="diary-overview-switch" :class="{ active: activeOverviewPanel === 'trainingDay' }" @click="$emit('toggle-panel', 'trainingDay')">
        {{ $t('diary.trainingDaySection') }}
      </button>
      <button type="button" class="diary-overview-switch" :class="{ active: activeOverviewPanel === 'details' }" @click="$emit('toggle-panel', 'details')">
        {{ $t('common.details') }}
      </button>
      <button type="button" class="diary-overview-switch" :class="{ active: activeOverviewPanel === 'groups' }" @click="$emit('toggle-panel', 'groups')">
        {{ $t('diary.groupsSection') }}
      </button>
    </div>
    <section v-if="activeOverviewPanel === 'trainingDay'" class="diary-toggle-card">
      <div class="diary-toggle-body diary-toggle-body-open">
        <div class="diary-workspace-header">
          <div class="diary-workspace-copy">
            <div class="diary-workspace-label">{{ $t('diary.activeTrainingDay') }}</div>
            <h3>{{ formattedDate }}</h3>
            <p class="diary-workspace-status">{{ diaryStatusText }}</p>
          </div>
          <div class="diary-workspace-stats">
            <div class="diary-stat-card">
              <span class="diary-stat-label">{{ $t('diary.trainingWindow') }}</span>
              <strong class="diary-stat-value">{{ diaryTimeRangeLabel }}</strong>
            </div>
            <div class="diary-stat-card">
              <span class="diary-stat-label">{{ $t('diary.participants') }}</span>
              <strong class="diary-stat-value">{{ participantCount }}</strong>
            </div>
            <div class="diary-stat-card">
              <span class="diary-stat-label">{{ $t('diary.trainingPlan') }}</span>
              <strong class="diary-stat-value">{{ trainingPlanCount }}</strong>
            </div>
            <div class="diary-stat-card">
              <span class="diary-stat-label">{{ $t('diary.freeActivities') }}</span>
              <strong class="diary-stat-value">{{ activitiesCount }}</strong>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section v-if="activeOverviewPanel === 'details'" class="diary-toggle-card">
      <div class="diary-toggle-body diary-toggle-body-open">
        <form @submit.prevent="$emit('update-training-times')" class="diary-general-form">
          <div>
            <label for="editTrainingStart">{{ $t('diary.trainingStart') }}:</label>
            <input id="editTrainingStart" :value="trainingStart" type="time" step="300" @input="$emit('update:training-start', $event.target.value)" />
          </div>
          <div>
            <label for="editTrainingEnd">{{ $t('diary.trainingEnd') }}:</label>
            <input id="editTrainingEnd" :value="trainingEnd" type="time" step="300" @input="$emit('update:training-end', $event.target.value)" />
          </div>
          <button type="submit">{{ $t('diary.updateTimes') }}</button>
        </form>
      </div>
    </section>
    <section v-if="activeOverviewPanel === 'groups'" class="diary-toggle-card">
      <div class="diary-toggle-body diary-toggle-body-open">
        <div class="diary-groups-grid">
          <div>
            <h4>{{ $t('diary.existingGroups') }}</h4>
            <ul>
              <li v-for="group in groups" :key="group.id">
                <span v-if="editingGroupId !== group.id" @click="$emit('edit-group', group.id)">{{ group.name }}</span>
                <input
                  v-else
                  type="text"
                  :value="group.name"
                  style="display: inline; width: 10em"
                  @input="$emit('update-group-field', { groupId: group.id, field: 'name', value: $event.target.value })"
                  @blur="$emit('save-group', group)"
                  @keyup.enter="$emit('save-group', group)"
                  @keyup.esc="$emit('cancel-edit-group')"
                />
                <span v-if="editingGroupId !== group.id" @click="$emit('edit-group', group.id)"> ({{ $t('diary.leader') }}: {{ group.lead }}) </span>
                <input
                  v-else
                  type="text"
                  :value="group.lead"
                  style="display: inline; width: 10em"
                  @input="$emit('update-group-field', { groupId: group.id, field: 'lead', value: $event.target.value })"
                  @blur="$emit('save-group', group)"
                  @keyup.enter="$emit('save-group', group)"
                  @keyup.esc="$emit('cancel-edit-group')"
                />
                <button v-if="editingGroupId !== group.id" class="trash-btn" style="margin-left: 10px" :title="$t('diary.deleteGroup')" @click="$emit('delete-group', group.id)">🗑️</button>
              </li>
            </ul>
          </div>
          <div>
            <h4>{{ $t('diary.createGroups') }}</h4>
            <div class="groups">
              <div>
                <label for="groupCount">{{ $t('diary.numberOfGroups') }}:</label>
                <input id="groupCount" :value="newGroupCount" type="number" :min="groups.length > 0 ? 1 : 2" max="10" required @input="$emit('update:new-group-count', Number($event.target.value))" />
              </div>
              <div>
                <label>&nbsp;</label>
                <button type="button" @click="$emit('create-groups')">{{ groups.length > 0 ? $t('diary.addGroup') : $t('diary.createGroups') }}</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: 'DiaryOverviewPanels',
  props: {
    activeOverviewPanel: { type: String, default: null },
    formattedDate: { type: String, default: '' },
    diaryStatusText: { type: String, default: '' },
    diaryTimeRangeLabel: { type: String, default: '' },
    participantCount: { type: Number, default: 0 },
    trainingPlanCount: { type: Number, default: 0 },
    activitiesCount: { type: Number, default: 0 },
    trainingStart: { type: String, default: '' },
    trainingEnd: { type: String, default: '' },
    groups: { type: Array, required: true },
    editingGroupId: { type: [Number, String, null], default: null },
    newGroupCount: { type: Number, default: 2 }
  },
  emits: ['toggle-panel', 'update-training-times', 'update:training-start', 'update:training-end', 'edit-group', 'update-group-field', 'save-group', 'cancel-edit-group', 'delete-group', 'update:new-group-count', 'create-groups']
};
</script>
