<script setup>
import {computed} from "vue";
import {nextVisibleFrom, prevVisibleFrom, STEP_PARTICIPATION_OPTIONS} from "../composables/stepFlow.js";

const props = defineProps({formData: Object, event: Object})
const emit = defineEmits(['next', 'back'])

const questions = computed(() => props.event.participationOptions ?? [])

// Pflichtfeld: "Weiter" erst möglich, wenn jede Frage beantwortet ist.
const canProceed = computed(() =>
    questions.value.every(q => {
        const value = props.formData.participationOptions[q.key]
        return value !== undefined && value !== null && String(value).trim() !== ''
    })
)

const back = () => emit('back', prevVisibleFrom(props.event, STEP_PARTICIPATION_OPTIONS))
const next = () => emit('next', nextVisibleFrom(props.event, STEP_PARTICIPATION_OPTIONS))
</script>

<template>
    <div>
        <h3>Teilnahmeoptionen</h3>
        <p style="color: #6b7280; font-size: 0.95rem; margin-bottom: 20px;">
            Bitte triff für jede Auswahl eine Entscheidung.
        </p>

        <table class="form-table">
            <tr v-for="question in questions" :key="question.key">
                <td>
                    {{ question.title || question.label }}:
                    <span v-if="question.title && question.label" class="option-hint">{{ question.label }}</span>
                </td>
                <td>
                    <select v-model="formData.participationOptions[question.key]">
                        <option value="">Bitte wählen</option>
                        <option v-for="option in question.options" :key="option.value" :value="option.value">
                            {{ option.label }}
                        </option>
                    </select>
                </td>
            </tr>
        </table>

        <div class="btn-row">
            <button type="button" class="btn-secondary" @click="back">← Zurück</button>
            <button type="button" class="btn-primary" :disabled="!canProceed" @click="next">Weiter →</button>
        </div>
    </div>
</template>

<style scoped>
.option-hint {
    display: block;
    margin-top: 2px;
    font-size: 0.8rem;
    font-style: italic;
    font-weight: 400;
    color: #6b7280;
}
</style>
