<template>
    <section class="diary-sidebar-section">
        <h3>{{ $t('diary.participants') }} ({{ participants.length }})</h3>
        <p class="participant-summary">
            {{ $t('diary.excusedParticipants') }}: {{ excusedCount }} | {{ $t('diary.availableParticipants') }}: {{ availableParticipantCount }} | {{ $t('diary.activeMembers') }}: {{ activeMemberCount }}
        </p>
        <div class="participant-toolbar">
            <div class="participant-toolbar-actions">
                <button
                    type="button"
                    class="participant-gallery-button"
                    :disabled="galleryLoading"
                    @click="$emit('open-gallery')"
                >
                    <span class="participant-gallery-button-icon" aria-hidden="true">{{ galleryLoading ? '⏳' : '🖼️' }}</span>
                    <span>{{ galleryLoading ? $t('diary.galleryCreating') : $t('diary.gallery') }}</span>
                </button>
                <button
                    type="button"
                    class="participant-group-photo-button"
                    @click="$emit('open-group-photo-crop')"
                >
                    <span aria-hidden="true">📷</span>
                    <span>{{ $t('members.groupPhotoCrop') }}</span>
                </button>
            </div>
            <input
                :value="participantSearchQuery"
                type="search"
                class="participant-search-input"
                :placeholder="$t('diary.searchParticipants')"
                @input="$emit('update:participantSearchQuery', $event.target.value)"
            >
            <div class="participant-filter-chips">
                <button type="button" class="participant-filter-chip" :class="{ active: participantFilter === 'all' }" @click="$emit('update:participantFilter', 'all')">{{ $t('diary.filterAll') }}</button>
                <button type="button" class="participant-filter-chip" :class="{ active: participantFilter === 'present' }" @click="$emit('update:participantFilter', 'present')">{{ $t('diary.filterPresent') }}</button>
                <button type="button" class="participant-filter-chip" :class="{ active: participantFilter === 'absent' }" @click="$emit('update:participantFilter', 'absent')">{{ $t('diary.filterAbsent') }}</button>
                <button type="button" class="participant-filter-chip" :class="{ active: participantFilter === 'excused' }" @click="$emit('update:participantFilter', 'excused')">{{ $t('diary.filterExcused') }}</button>
                <button type="button" class="participant-filter-chip" :class="{ active: participantFilter === 'test' }" @click="$emit('update:participantFilter', 'test')">{{ $t('diary.filterTest') }}</button>
            </div>
        </div>
        <ul>
            <li v-for="member in members" :key="member.id" class="checkbox-item participant-row"
                :class="{
                    'row-inactive': !member.active,
                    'row-test': member.testMembership && !member.memberFormHandedOver,
                    'row-test-form': member.testMembership && member.memberFormHandedOver
                }">
                <label class="checkbox-label">
                    <input
                        type="checkbox"
                        :value="member.id"
                        :checked="participants.includes(member.id)"
                        :disabled="participantStatusMap[member.id] === 'excused'"
                        @change="$emit('toggle-participant', member.id)"
                    >
                </label>
                <span class="clickable participant-name" @click.stop="$emit('open-notes', member)">
                    <span v-if="member.testMembership && member.trainingParticipations >= 6" class="warning-icon warning-icon-severe" :title="$t('members.sixOrMoreParticipations')">🛑</span>
                    <span v-else-if="member.testMembership && member.trainingParticipations >= 3" class="warning-icon" :title="$t('members.threeOrMoreParticipations')">⚠️</span>
                    <span :class="{ 'participant-name-excused': participantStatusMap[member.id] === 'excused' }">
                        {{ member.firstName }} {{ member.lastName }}
                    </span>
                </span>
                <div class="participant-actions">
                    <select
                        v-if="participants.includes(member.id) && groups.length > 0"
                        :value="memberGroupsMap[member.id] ?? ''"
                        class="member-group-select"
                        @change="$emit('update-member-group', { memberId: member.id, groupId: $event.target.value })"
                    >
                        <option value="">-</option>
                        <option v-for="group in groups" :key="group.id" :value="String(group.id)">
                            {{ group.name }}
                        </option>
                    </select>
                    <button
                        type="button"
                        class="participant-status-toggle"
                        :class="{ active: participantStatusMap[member.id] === 'excused' }"
                        :title="$t('diary.participantStatusExcused')"
                        @click="$emit('toggle-member-status', member.id)"
                    >
                        📴
                    </button>
                    <span @click="$emit('show-pic', member)" class="img-icon" v-if="member.hasImage">&#x1F5BC;</span>
                    <span
                        v-if="member.testMembership === true && member.memberFormHandedOver !== true"
                        @click.stop="$emit('mark-form', member)"
                        class="pointer form-handover-icon"
                        :title="$t('diary.formHandedOver')"
                    >
                        📄
                    </span>
                    <span class="pointer" :title="$t('orders.title')" @click.stop="$emit('open-orders', member)">📦</span>
                    <span class="pointer" @click="$emit('open-tags', member)">ℹ️</span>
                </div>
            </li>
        </ul>
        <div class="add-participant">
            <button @click="$emit('open-quick-add')" class="quick-add-btn">{{ $t('diary.quickAdd') }}</button>
        </div>
    </section>
</template>

<script>
export default {
    name: 'DiaryParticipantsPanel',
    props: {
        members: {
            type: Array,
            required: true
        },
        participants: {
            type: Array,
            required: true
        },
        excusedCount: {
            type: Number,
            default: 0
        },
        activeMemberCount: {
            type: Number,
            default: 0
        },
        availableParticipantCount: {
            type: Number,
            default: 0
        },
        galleryLoading: {
            type: Boolean,
            default: false
        },
        participantSearchQuery: {
            type: String,
            required: true
        },
        participantFilter: {
            type: String,
            required: true
        },
        groups: {
            type: Array,
            required: true
        },
        memberGroupsMap: {
            type: Object,
            required: true
        },
        participantStatusMap: {
            type: Object,
            required: true
        }
    },
    emits: [
        'update:participantSearchQuery',
        'update:participantFilter',
        'toggle-participant',
        'toggle-member-status',
        'update-member-group',
        'open-notes',
        'show-pic',
        'mark-form',
        'open-orders',
        'open-tags',
        'open-quick-add',
        'open-gallery',
        'open-group-photo-crop'
    ]
};
</script>

<style scoped>
.diary-sidebar-section {
    margin-top: 1rem;
    min-width: 0;
    overflow-x: auto;
}

.participant-summary {
    margin: -0.35rem 0 0.85rem;
    color: var(--text-muted, #5f7b8b);
    font-size: 0.92rem;
}

.participant-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-bottom: 0.85rem;
}

.participant-toolbar-actions {
    display: flex;
    justify-content: flex-end;
}

.participant-gallery-button {
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--primary-soft);
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: var(--text-on-primary);
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    box-shadow: 0 2px 8px rgba(47, 122, 95, 0.18);
}

.participant-gallery-button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(47, 122, 95, 0.26);
}

.participant-gallery-button-icon {
    font-size: 1rem;
    line-height: 1;
}

.participant-gallery-button:disabled {
    opacity: 0.6;
    cursor: default;
    transform: none;
    box-shadow: none;
}

.participant-group-photo-button {
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--surface-muted);
    color: var(--text-color);
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.participant-search-input {
    width: 100%;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--surface-color);
    color: var(--text-color);
}

.participant-search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(47, 122, 95, 0.14);
}

.participant-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.participant-filter-chip {
    border: 1px solid var(--border-color);
    background: var(--surface-muted);
    color: var(--text-color);
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    cursor: pointer;
    font-weight: 600;
}

.participant-filter-chip.active {
    background: rgba(47, 122, 95, 0.12);
    border-color: var(--primary-soft);
    color: var(--primary-strong);
    font-weight: 600;
}

.participant-row {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0;
    min-width: 0;
}

.checkbox-label {
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.participant-name {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.participant-actions {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.35rem;
    min-width: max-content;
}

.member-group-select {
    margin-left: 10px;
    font-size: 10px;
    width: 5em;
    padding: 2px 4px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--surface-color);
    color: var(--text-color);
}

.participant-status-toggle {
    margin-left: 10px;
    padding: 0.28rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--surface-color);
    color: var(--text-color);
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
}

.participant-status-toggle.active {
    background: rgba(217, 164, 65, 0.14);
    color: #8b6113;
    border-color: rgba(217, 164, 65, 0.3);
}

.participant-name-excused {
    color: #7a6a48;
    font-style: italic;
    opacity: 0.72;
}

@media (max-width: 768px) {
    .participant-row {
        grid-template-columns: 1.75rem minmax(10rem, 1fr) auto;
        align-items: center;
    }

    .participant-name {
        min-width: 10rem;
    }

    .participant-actions {
        margin-left: 0;
        justify-content: flex-end;
    }

    .member-group-select,
    .participant-status-toggle {
        margin-left: 0;
    }

    .participant-gallery-button,
    .participant-search-input {
        width: 100%;
    }

    .participant-toolbar-actions {
        justify-content: stretch;
    }
}

</style>
