<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.excusedParticipants') }}</span>
              <strong class="diary-stat-value">{{ excusedCount }}</strong>
            </div>
            <div class="diary-stat-card">
              <span class="diary-stat-label">{{ $t('diary.availableParticipants') }}</span>
              <strong class="diary-stat-value">{{ availableParticipantCount }}</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.activeMembers') }}</span>
              <strong class="diary-stat-value">{{ activeMemberCount }}</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>
          <div class="diary-billing-toggle-wrap">
            <label class="diary-billing-toggle" for="editExcludeFromBilling">
              <input
                id="editExcludeFromBilling"
                type="checkbox"
                :checked="excludeFromBilling"
                @change="$emit('update:exclude-from-billing', $event.target.checked)"
              />
              <span>{{ $t('diary.excludeFromBilling') }}</span>
            </label>
          </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 },
    excusedCount: { type: Number, default: 0 },
    activeMemberCount: { type: Number, default: 0 },
    availableParticipantCount: { type: Number, default: 0 },
    trainingPlanCount: { type: Number, default: 0 },
    activitiesCount: { type: Number, default: 0 },
    trainingStart: { type: String, default: '' },
    trainingEnd: { type: String, default: '' },
    excludeFromBilling: { type: Boolean, default: false },
    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', 'update:exclude-from-billing', 'edit-group', 'update-group-field', 'save-group', 'cancel-edit-group', 'delete-group', 'update:new-group-count', 'create-groups']
};
</script>

<style scoped>
.diary-overview-panels {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.diary-overview-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.diary-overview-switch {
  padding: 0.5rem 0.8rem;
  border: 1px solid #cfdbe3;
  border-radius: 8px;
  background: #fff;
  color: #315066;
  font-weight: 600;
  cursor: pointer;
}

.diary-overview-switch.active {
  background: #e6f0f6;
  border-color: #9bb9cb;
  color: #173042;
}

.diary-toggle-card {
  border: 1px solid #d9e4ec;
  border-radius: 8px;
  background: #f9fbfd;
  overflow: hidden;
}

.diary-toggle-body {
  padding: 0 0.9rem 0.9rem;
}

.diary-toggle-body-open {
  padding-top: 0.9rem;
}

.diary-workspace-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.diary-workspace-copy h3 {
  margin: 0.1rem 0 0.25rem;
  font-size: 1.15rem;
}

.diary-workspace-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #517287;
}

.diary-workspace-status {
  margin: 0;
  font-size: 0.92rem;
  color: #45606f;
}

.diary-workspace-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(110px, 1fr));
  gap: 0.75rem;
  width: min(840px, 100%);
}

.diary-stat-card {
  padding: 0.8rem 0.9rem;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #d9e4ec;
}

.diary-stat-label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #5f7b8b;
}

.diary-stat-value {
  display: block;
  font-size: 1rem;
  color: #173042;
}

.diary-general-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem;
  margin-top: 1rem;
}

.diary-general-form label {
  display: block;
  margin-bottom: 0.25rem;
}

.diary-billing-toggle-wrap {
  display: flex;
  align-items: center;
  min-height: 2.5rem;
}

.diary-billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  color: #173042;
}

.diary-groups-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1rem;
}

@media (min-width: 769px) and (max-width: 1100px) {
  .diary-overview-panels {
    gap: 0.65rem;
    margin-bottom: 0.8rem;
  }

  .diary-overview-switcher {
    gap: 0.4rem;
  }

  .diary-overview-switch {
    padding: 0.42rem 0.68rem;
    font-size: 0.9rem;
  }

  .diary-toggle-body {
    padding: 0 0.85rem 0.8rem;
  }

  .diary-workspace-header {
    gap: 0.75rem;
    margin-bottom: 0;
  }

  .diary-workspace-copy h3 {
    font-size: 1rem;
  }

  .diary-workspace-status {
    font-size: 0.88rem;
  }

  .diary-workspace-stats {
    grid-template-columns: repeat(3, minmax(92px, 1fr));
    gap: 0.5rem;
    width: 100%;
  }

  .diary-stat-card {
    padding: 0.6rem 0.7rem;
  }

  .diary-stat-label {
    font-size: 0.68rem;
  }

  .diary-stat-value {
    font-size: 0.92rem;
  }
}

@media (max-width: 768px) {
  .diary-workspace-header {
    flex-direction: column;
  }

  .diary-workspace-stats {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }

  .diary-groups-grid {
    grid-template-columns: 1fr;
  }
}
</style>
