<template>
    <div class="members-overview">
        <div class="members-header">
            <div>
                <h2>{{ $t('members.title') }}</h2>
                <p class="members-subtitle">{{ $t('members.subtitle') }}</p>
            </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('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="members-stats-grid">
            <div class="members-stat-card">
                <span class="members-stat-label">{{ $t('members.activeMembers') }}</span>
                <strong class="members-stat-value">{{ activeMembersCount }}</strong>
            </div>
            <div class="members-stat-card">
                <span class="members-stat-label">{{ $t('members.testMembers') }}</span>
                <strong class="members-stat-value">{{ testMembersCount }}</strong>
            </div>
            <div class="members-stat-card">
                <span class="members-stat-label">{{ $t('members.inactiveMembers') }}</span>
                <strong class="members-stat-value">{{ inactiveMembersCount }}</strong>
            </div>
            <div class="members-stat-card members-stat-card-accent">
                <span class="members-stat-label">{{ $t('members.visibleMembers') }}</span>
                <strong class="members-stat-value">{{ visibleMembersCount }}</strong>
            </div>
        </div>

        <div class="filters-section">
            <div class="members-filter-topline">
                <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="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)"
                    >
                        {{ scope.label }} <span class="scope-chip-count">{{ scope.count }}</span>
                    </button>
                </div>
            </div>

            <div class="filter-controls">
                <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>
                </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.adults') }}</option>
                        <option value="J19">{{ $t('members.j19') }}</option>
                        <option value="J17">{{ $t('members.j17') }}</option>
                        <option value="J15">{{ $t('members.j15') }}</option>
                        <option value="J13">{{ $t('members.j13') }}</option>
                        <option value="J11">{{ $t('members.j11') }}</option>
                    </select>
                </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>
                <button @click="$emit('clear-filters')" class="btn-clear-filters">{{ $t('members.clearFilters') }}</button>
            </div>
        </div>

        <div class="members-results-bar">
            <div class="members-results-copy">
                <strong>{{ visibleMembersCount }}</strong> {{ $t('members.resultsVisible') }}
            </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="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>
                <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>
                <div class="members-results-hint">{{ $t('members.editHint') }}</div>
            </div>
        </div>

        <div class="members-export-preview">
            <div class="members-export-card">
                <span class="members-export-label">{{ $t('members.exportPreview') }}</span>
                <strong class="members-export-value">{{ visibleMembersCount }}</strong>
                <span class="members-export-copy">{{ $t('members.exportMembersSelected') }}</span>
                <div class="members-export-actions">
                    <button type="button" @click="$emit('export-filtered-members-csv')" :disabled="visibleMembersCount === 0">
                        {{ $t('members.exportCsv') }}
                    </button>
                </div>
            </div>
            <div class="members-export-card">
                <span class="members-export-label">{{ $t('members.exportPhones') }}</span>
                <strong class="members-export-value">{{ filteredMembersWithPhonesCount }}</strong>
                <span class="members-export-copy">{{ $t('members.exportReachableByPhone') }}</span>
                <div class="members-export-actions">
                    <button type="button" @click="$emit('copy-filtered-phones')" :disabled="filteredMembersWithPhonesCount === 0">
                        {{ $t('members.copyPhones') }}
                    </button>
                </div>
            </div>
            <div class="members-export-card">
                <span class="members-export-label">{{ $t('members.exportEmails') }}</span>
                <strong class="members-export-value">{{ filteredMembersWithEmailsCount }}</strong>
                <span class="members-export-copy">{{ $t('members.exportReachableByEmail') }}</span>
                <div class="members-export-actions">
                    <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>
                </div>
            </div>
            <div class="members-export-card members-export-card-wide">
                <span class="members-export-label">{{ $t('members.exportPreviewNames') }}</span>
                <span class="members-export-copy">
                    {{ exportPreviewNames.length ? exportPreviewNames.join(', ') : $t('members.exportPreviewEmpty') }}
                </span>
                <div class="members-export-actions">
                    <button type="button" @click="$emit('copy-filtered-contact-summary')" :disabled="visibleMembersCount === 0">
                        {{ $t('members.copyContactSummary') }}
                    </button>
                </div>
            </div>
        </div>
    </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 },
        selectedAgeGroup: { type: String, required: true },
        selectedGender: { type: String, 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',
        'update-ratings',
        'open-transfer-dialog',
        'update:search-query',
        'update:selected-member-scope',
        'update:show-inactive-members',
        'update:selected-age-group',
        'update:selected-gender',
        '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;
}

.members-subtitle {
    margin: 0.2rem 0 0;
    color: var(--text-muted);
}

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

.members-stats-grid,
.members-export-preview {
    display: grid;
    gap: 0.85rem;
}

.members-stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.members-export-preview {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

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

.members-stat-card-accent {
    background: linear-gradient(135deg, var(--primary-soft), var(--background-light));
}

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

.members-stat-value,
.members-export-value {
    display: block;
    margin-top: 0.2rem;
    font-size: 1.3rem;
}

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

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

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

.scope-chip {
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.4rem 0.7rem;
    background: white;
    color: var(--text-color);
}

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

.scope-chip-count {
    opacity: 0.75;
}

.members-export-card-wide {
    grid-column: 1 / -1;
}

@media (max-width: 900px) {
    .members-results-actions {
        width: 100%;
    }
}
</style>
