<template>
    <section class="friendly-participant-column">
        <h4>{{ title }}</h4>
        <div v-if="!readonly && allowMembers" class="friendly-add-row">
            <select v-model="selectedMemberId">
                <option value="">Mitglied auswählen</option>
                <option v-for="member in availableMembers" :key="member.id" :value="member.id">
                    {{ member.firstName }} {{ member.lastName }}
                </option>
            </select>
            <button type="button" @click="addSelectedMember">Hinzufügen</button>
        </div>
        <p v-else-if="!readonly && memberHint" class="friendly-participant-hint">{{ memberHint }}</p>
        <div v-if="!readonly && allowManual" class="friendly-add-row">
            <input v-model="manualName" type="text" placeholder="Manueller Name" @keyup.enter="addManual" />
            <button type="button" @click="addManual">Hinzufügen</button>
        </div>
        <ul class="friendly-participant-list">
            <li v-for="(participant, index) in participants" :key="index">
                <span>{{ participantLabel(participant) }}</span>
                <button v-if="!readonly" type="button" @click="$emit('remove', index)">x</button>
            </li>
        </ul>
    </section>
</template>

<script>
export default {
    name: 'FriendlyParticipantsColumn',
    props: {
        title: { type: String, required: true },
        members: { type: Array, required: true },
        participants: { type: Array, required: true },
        allowMembers: { type: Boolean, default: true },
        allowManual: { type: Boolean, default: true },
        readonly: { type: Boolean, default: false },
        memberHint: { type: String, default: '' }
    },
    emits: ['add-member', 'add-manual', 'remove'],
    computed: {
        availableMembers() {
            const selected = new Set((this.participants || [])
                .filter((participant) => participant?.type === 'member')
                .map((participant) => Number(participant.memberId)));
            return (this.members || []).filter((member) => !selected.has(Number(member.id)));
        }
    },
    data() {
        return {
            selectedMemberId: '',
            manualName: ''
        };
    },
    methods: {
        memberLabel(id) {
            const member = this.members.find(m => Number(m.id) === Number(id));
            return member ? `${member.firstName} ${member.lastName}`.trim() : `Mitglied #${id}`;
        },
        participantLabel(participant) {
            if (participant.type === 'member') return this.memberLabel(participant.memberId);
            return `${participant.firstName || ''} ${participant.lastName || ''}`.trim();
        },
        addSelectedMember() {
            if (!this.selectedMemberId) return;
            this.$emit('add-member', Number(this.selectedMemberId));
            this.selectedMemberId = '';
        },
        addManual() {
            const value = this.manualName.trim();
            if (!value) return;
            this.$emit('add-manual', value);
            this.manualName = '';
        }
    }
};
</script>

<style scoped>
.friendly-participant-column {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 8px;
    padding: 0.75rem;
}

.friendly-add-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
}

.friendly-add-row input,
.friendly-add-row select {
    width: 100%;
    box-sizing: border-box;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 6px;
}

.friendly-participant-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.friendly-participant-list li {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    background: var(--background-soft, #f7f7f7);
    border-radius: 6px;
}

.friendly-participant-hint {
    margin: 0;
    color: var(--text-muted, #666);
    font-size: 0.9rem;
}
</style>
