<template>
    <div class="members-overview">
        <div class="members-header">
            <div>
                <h2>{{ $t('members.title') }}</h2>
            </div>
            <div class="action-buttons">
                <button @click="$emit('toggle-new-member')" class="btn-primary">
                    {{ memberFormIsOpen ? $t('members.closeEditor') : $t('members.newMember') }}
                </button>
                <button @click="$emit('create-phone-list')">{{ $t('members.generatePhoneList') }}</button>
                <button @click="$emit('open-group-photo-crop')">{{ $t('members.groupPhotoCrop') }}</button>
                <button @click="$emit('update-ratings')" class="btn-update-ratings" :disabled="isUpdatingRatings">
                    {{ isUpdatingRatings ? $t('members.updating') : $t('members.updateRatings') }}
                </button>
                <button @click="$emit('open-transfer-dialog')" class="btn-transfer">
                    {{ $t('members.transferMembers') }}
                </button>
            </div>
        </div>

        <div class="filters-section">
            <div class="members-filter-topline members-filter-topline-compact">
                <div class="members-scope-buttons" role="tablist" :aria-label="$t('members.memberScope')">
                    <button
                        v-for="scope in memberScopeOptions"
                        :key="scope.value"
                        type="button"
                        class="scope-chip"
                        :class="{ 'scope-chip-active': selectedMemberScope === scope.value }"
                        @click="$emit('update:selected-member-scope', scope.value)"
                    >
                        <span class="scope-chip-label">{{ scope.label }}</span>
                        <span class="scope-chip-count">{{ scope.count }}</span>
                    </button>
                </div>
                <div class="members-quick-filter-group">
                    <label for="members-quick-training-group">{{ $t('members.trainingGroups') }}</label>
                    <select
                        id="members-quick-training-group"
                        :value="selectedTrainingGroup"
                        class="filter-select"
                        @change="$emit('update:selected-training-group', $event.target.value)"
                    >
                        <option value="">{{ $t('common.all') }}</option>
                        <option v-for="group in trainingGroupOptions" :key="group.id" :value="group.id">
                            {{ group.name }}
                        </option>
                    </select>
                </div>
            </div>

            <details class="members-advanced-filters">
                <summary>{{ $t('members.searchAndFilter') }}</summary>
                <div class="filter-controls">
                    <div class="member-search-group">
                        <label for="member-search-input">{{ $t('members.search') }}</label>
                        <input
                            id="member-search-input"
                            :value="searchQuery"
                            type="search"
                            class="member-search-input"
                            :placeholder="$t('members.searchPlaceholder')"
                            @input="$emit('update:search-query', $event.target.value.trim())"
                        >
                    </div>
                    <div class="checkbox-group">
                        <label class="checkbox-item">
                            <input
                                type="checkbox"
                                :checked="showInactiveMembers"
                                @change="$emit('update:show-inactive-members', $event.target.checked)"
                            >
                            <span>{{ $t('members.showInactiveMembers') }}</span>
                        </label>
                        <label class="checkbox-item">
                            <input
                                type="checkbox"
                                :checked="showTrainingParticipationsColumn"
                                @change="$emit('update:show-training-participations-column', $event.target.checked)"
                            >
                            <span>{{ $t('members.showTrainingParticipationsColumn') }}</span>
                        </label>
                    </div>
                    <div class="filter-group">
                        <label>{{ $t('members.ttSeasonFilter') }}</label>
                        <select
                            :value="selectedSeasonStartYear"
                            class="filter-select"
                            @change="$emit('update:selected-season-start-year', Number($event.target.value))"
                        >
                            <option v-for="opt in seasonFilterOptions" :key="opt.value" :value="opt.value">
                                {{ opt.label }}
                            </option>
                        </select>
                        <p class="filter-hint filter-hint-tt">{{ $t('members.ttStichtagHint') }}</p>
                    </div>
                    <div class="filter-group">
                        <label>{{ $t('members.ageGroup') }}:</label>
                        <select :value="selectedAgeGroup" class="filter-select" @change="$emit('update:selected-age-group', $event.target.value)">
                            <option value="">{{ $t('common.all') }}</option>
                            <option value="adult">{{ $t('members.ttAdult') }}</option>
                            <optgroup :label="$t('members.ttFilterGroupJ')">
                                <option value="J19">{{ $t('members.j19') }}</option>
                                <option value="J15">{{ $t('members.j15') }}</option>
                                <option value="J13">{{ $t('members.j13') }}</option>
                                <option value="J11">{{ $t('members.j11') }}</option>
                                <option value="J9">{{ $t('members.j9') }}</option>
                            </optgroup>
                            <optgroup :label="$t('members.ttFilterGroupM')">
                                <option value="M19">{{ $t('members.m19') }}</option>
                                <option value="M15">{{ $t('members.m15') }}</option>
                                <option value="M13">{{ $t('members.m13') }}</option>
                                <option value="M11">{{ $t('members.m11') }}</option>
                                <option value="M9">{{ $t('members.m9') }}</option>
                            </optgroup>
                            <option value="range">{{ $t('members.ageRange') }}</option>
                        </select>
                    </div>
                    <div v-if="selectedAgeGroup === 'range'" class="filter-group age-range-group">
                        <label>{{ $t('members.ageRange') }}:</label>
                        <div class="age-range-inputs">
                            <input
                                :value="selectedAgeFrom"
                                type="number"
                                min="0"
                                max="120"
                                class="filter-select age-range-input"
                                :placeholder="$t('members.ageFromPlaceholder')"
                                @input="$emit('update:selected-age-from', $event.target.value)"
                            >
                            <span class="age-range-separator">-</span>
                            <input
                                :value="selectedAgeTo"
                                type="number"
                                min="0"
                                max="120"
                                class="filter-select age-range-input"
                                :placeholder="$t('members.ageToPlaceholder')"
                                @input="$emit('update:selected-age-to', $event.target.value)"
                            >
                        </div>
                    </div>
                    <div class="filter-group">
                        <label>{{ $t('members.gender') }}:</label>
                        <select :value="selectedGender" class="filter-select" @change="$emit('update:selected-gender', $event.target.value)">
                            <option value="">{{ $t('common.all') }}</option>
                            <option value="female">{{ $t('members.genderFemale') }}</option>
                            <option value="male">{{ $t('members.genderMale') }}</option>
                            <option value="diverse">{{ $t('members.genderDiverse') }}</option>
                            <option value="unknown">{{ $t('members.genderUnknown') }}</option>
                        </select>
                    </div>
                    <div class="filter-group">
                        <label>{{ $t('members.lastTrainingFilter') }}</label>
                        <select
                            :value="selectedLastTrainingFilter"
                            class="filter-select"
                            @change="$emit('update:selected-last-training-filter', $event.target.value)"
                        >
                            <option value="">{{ $t('common.all') }}</option>
                            <option value="hasDate">{{ $t('members.lastTrainingFilterHasDate') }}</option>
                            <option value="noDate">{{ $t('members.lastTrainingFilterNoDate') }}</option>
                            <option value="notInTraining">{{ $t('members.lastTrainingFilterNotInTraining') }}</option>
                        </select>
                        <p class="filter-hint filter-hint-tt">{{ $t('members.lastTrainingFilterHint') }}</p>
                    </div>
                    <button @click="$emit('clear-filters')" class="btn-clear-filters">{{ $t('members.clearFilters') }}</button>
                </div>
            </details>
        </div>

        <div class="members-results-bar">
            <div class="members-results-summary">
                <div class="members-results-copy">
                    <strong>{{ visibleMembersCount }}</strong> {{ $t('members.resultsVisible') }}
                </div>
                <div class="members-results-stats">
                    <span class="results-stat-pill">{{ $t('members.activeMembers') }}: {{ activeMembersCount }}</span>
                    <span class="results-stat-pill">{{ $t('members.testMembers') }}: {{ testMembersCount }}</span>
                    <span class="results-stat-pill">{{ $t('members.inactiveMembers') }}: {{ inactiveMembersCount }}</span>
                </div>
            </div>
            <div class="members-results-actions">
                <label class="members-sort-group">
                    <span>{{ $t('members.sortBy') }}</span>
                    <select :value="selectedSort" class="filter-select" @change="$emit('update:selected-sort', $event.target.value)">
                        <option value="lastName">{{ $t('members.sortLastName') }}</option>
                        <option value="firstName">{{ $t('members.sortFirstName') }}</option>
                        <option value="birthday">{{ $t('members.sortBirthday') }}</option>
                        <option value="age">{{ $t('members.sortAge') }}</option>
                        <option value="qttr">{{ $t('members.sortQttr') }}</option>
                        <option value="lastTraining">{{ $t('members.sortLastTraining') }}</option>
                        <option value="openTasks">{{ $t('members.sortOpenTasks') }}</option>
                    </select>
                </label>
                <button type="button" class="member-icon-button" :title="$t('members.toggleSortDirection')" @click="$emit('toggle-sort-direction')">
                    {{ sortDirection === 'asc' ? '↑' : '↓' }}
                </button>
                <div class="members-results-hint">{{ $t('members.editHint') }}</div>
            </div>
        </div>
        <details class="members-bulk-actions">
            <summary>{{ $t('members.bulkActions') }}</summary>
            <div class="members-bulk-actions-grid">
                <button type="button" @click="$emit('create-phone-list-for-filtered')" :disabled="visibleMembersCount === 0">
                    {{ $t('members.phoneListForSelection') }}
                </button>
                <button type="button" @click="$emit('mark-filtered-forms-handed-over')" :disabled="filteredMembersWithoutFormCount === 0">
                    {{ $t('members.markFormsForSelection') }}
                </button>
                <button type="button" @click="$emit('mark-filtered-as-regular')" :disabled="filteredTestMembersCount === 0">
                    {{ $t('members.markRegularForSelection') }}
                </button>
                <button type="button" @click="$emit('export-filtered-members-csv')" :disabled="visibleMembersCount === 0">
                    {{ $t('members.exportCsv') }}
                </button>
                <button type="button" @click="$emit('copy-filtered-phones')" :disabled="filteredMembersWithPhonesCount === 0">
                    {{ $t('members.copyPhones') }}
                </button>
                <button type="button" @click="$emit('copy-filtered-emails')" :disabled="filteredMembersWithEmailsCount === 0">
                    {{ $t('members.copyEmails') }}
                </button>
                <button type="button" @click="$emit('compose-email-to-filtered')" :disabled="filteredMembersWithEmailsCount === 0">
                    {{ $t('members.composeEmail') }}
                </button>
                <button type="button" @click="$emit('copy-filtered-contact-summary')" :disabled="visibleMembersCount === 0">
                    {{ $t('members.copyContactSummary') }}
                </button>
            </div>
            <div class="members-bulk-preview">
                {{ exportPreviewNames.length ? exportPreviewNames.join(', ') : $t('members.exportPreviewEmpty') }}
            </div>
        </details>
    </div>
</template>

<script>
export default {
    name: 'MembersOverviewSection',
    props: {
        memberFormIsOpen: { type: Boolean, required: true },
        isUpdatingRatings: { type: Boolean, required: true },
        activeMembersCount: { type: Number, required: true },
        testMembersCount: { type: Number, required: true },
        inactiveMembersCount: { type: Number, required: true },
        visibleMembersCount: { type: Number, required: true },
        searchQuery: { type: String, required: true },
        memberScopeOptions: { type: Array, required: true },
        selectedMemberScope: { type: String, required: true },
        showInactiveMembers: { type: Boolean, required: true },
        showTrainingParticipationsColumn: { type: Boolean, required: true },
        selectedAgeGroup: { type: String, required: true },
        selectedSeasonStartYear: { type: Number, required: true },
        seasonFilterOptions: { type: Array, required: true },
        selectedAgeFrom: { type: [String, Number], required: true },
        selectedAgeTo: { type: [String, Number], required: true },
        selectedGender: { type: String, required: true },
        selectedTrainingGroup: { type: String, required: true },
        selectedLastTrainingFilter: { type: String, required: true },
        trainingGroupOptions: { type: Array, required: true },
        selectedSort: { type: String, required: true },
        sortDirection: { type: String, required: true },
        filteredMembersWithoutFormCount: { type: Number, required: true },
        filteredTestMembersCount: { type: Number, required: true },
        filteredMembersWithPhonesCount: { type: Number, required: true },
        filteredMembersWithEmailsCount: { type: Number, required: true },
        exportPreviewNames: { type: Array, required: true }
    },
    emits: [
        'toggle-new-member',
        'create-phone-list',
        'open-group-photo-crop',
        'update-ratings',
        'open-transfer-dialog',
        'update:search-query',
        'update:selected-member-scope',
        'update:show-inactive-members',
        'update:show-training-participations-column',
        'update:selected-age-group',
        'update:selected-season-start-year',
        'update:selected-age-from',
        'update:selected-age-to',
        'update:selected-gender',
        'update:selected-training-group',
        'update:selected-last-training-filter',
        'clear-filters',
        'update:selected-sort',
        'toggle-sort-direction',
        'create-phone-list-for-filtered',
        'mark-filtered-forms-handed-over',
        'mark-filtered-as-regular',
        'export-filtered-members-csv',
        'copy-filtered-phones',
        'copy-filtered-emails',
        'compose-email-to-filtered',
        'copy-filtered-contact-summary'
    ]
};
</script>

<style scoped>
.members-overview {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.members-header,
.members-filter-topline,
.members-results-bar {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.action-buttons,
.filter-controls,
.members-results-actions,
.members-export-actions,
.members-scope-buttons {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
}

.filters-section,
.members-results-bar,
.members-bulk-actions {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--background-light);
    padding: 0.85rem;
}

.filters-section,
.members-results-bar {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

.members-results-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.member-search-group,
.members-sort-group,
.filter-group,
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.filter-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0;
    max-width: 24rem;
    line-height: 1.35;
}

.member-search-group {
    flex: 1 1 18rem;
}

.member-search-input,
.filter-select {
    min-width: 11rem;
}

.age-range-group {
    min-width: 14rem;
}

.age-range-inputs {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.age-range-input {
    min-width: 5.5rem;
}

.age-range-separator {
    color: var(--text-muted);
    font-weight: 600;
}

.scope-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    background: white;
    color: var(--text-primary);
    box-shadow: none;
}

.scope-chip-active {
    background: var(--primary-light);
    color: var(--primary-strong);
    border-color: var(--primary-color);
}

.scope-chip-label {
    white-space: nowrap;
}

.scope-chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: #eef2f5;
    color: #4b5563;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
}

.scope-chip-active .scope-chip-count {
    background: rgba(24, 70, 54, 0.12);
    color: var(--primary-strong);
}

.members-filter-topline-compact {
    align-items: center;
}

.members-quick-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 16rem;
}

.members-advanced-filters {
    margin-top: 0.75rem;
    border-top: 1px solid var(--border-color);
    padding-top: 0.75rem;
}

.members-advanced-filters summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-primary);
    user-select: none;
}

.members-advanced-filters .filter-controls {
    margin-top: 0.85rem;
}

.members-results-summary {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.members-results-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.results-stat-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: #eef2f5;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 600;
}

.members-bulk-actions summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-primary);
    user-select: none;
}

.members-bulk-actions-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.85rem;
}

.members-bulk-preview {
    margin-top: 0.75rem;
    color: var(--text-muted);
    font-size: 0.82rem;
}

@media (max-width: 900px) {
    .members-header {
        flex-direction: column;
        align-items: stretch;
    }

    .action-buttons,
    .filter-controls,
    .members-results-actions {
        width: 100%;
    }

    .action-buttons > button,
    .members-bulk-actions-grid > button {
        flex: 1 1 14rem;
    }

    .members-results-actions {
        justify-content: flex-start;
    }

    .members-quick-filter-group {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 640px) {
    .members-overview {
        gap: 0.85rem;
    }

    .filters-section,
    .members-results-bar,
    .members-bulk-actions {
        padding: 0.75rem;
    }

    .scope-chip {
        width: 100%;
        justify-content: space-between;
    }

    .member-search-group,
    .members-sort-group,
    .filter-group,
    .checkbox-group,
    .age-range-group {
        width: 100%;
        min-width: 0;
        flex: 1 1 100%;
    }

    .member-search-input,
    .filter-select,
    .age-range-input {
        width: 100%;
        min-width: 0;
    }

    .age-range-inputs {
        flex-wrap: wrap;
    }

    .age-range-separator {
        width: 100%;
        text-align: center;
    }

    .members-sort-group {
        align-items: stretch;
    }

    .members-sort-group span {
        margin-bottom: 0.15rem;
    }

    .members-results-actions > * {
        width: 100%;
    }

    .member-icon-button {
        width: 100%;
    }

    .members-results-hint {
        line-height: 1.35;
    }

    .action-buttons > button,
    .members-bulk-actions-grid > button,
    .btn-clear-filters {
        width: 100%;
        flex: 1 1 100%;
    }
}
</style>
