<script setup>
import {format, parseISO} from "date-fns";

const props = defineProps({
    formData: Object,
    event: Object,
    summaryAmount: String,
    summaryLoading: Boolean,
    submitting: Boolean,
})
const emit = defineEmits(['back', 'submit'])

function formatDate(dateString) {
    if (!dateString) return ''
    return format(parseISO(dateString), 'dd.MM.yyyy')
}
</script>

<template>
    <div>
        <h3>Zusammenfassung</h3>

        <div v-if="summaryLoading" style="color: #6b7280; padding: 20px 0;">Wird geladen…</div>
        <div v-else>
            <table class="form-table" style="margin-bottom: 20px;">
                <tr><td>Veranstaltung:</td><td><strong>{{ event.name }}</strong></td></tr>
                <tr><td>Anreise:</td><td>{{ formatDate(formData.arrival) }}</td></tr>
                <tr><td>Abreise:</td><td>{{ formatDate(formData.departure) }}</td></tr>
            </table>

            <div style="display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px;">
                <label style="display: flex; gap: 10px; cursor: pointer;">
                    <input type="checkbox" v-model="formData.summary_information_correct" />
                    Ich bestätige, dass alle Angaben korrekt sind.
                </label>
                <label style="display: flex; gap: 10px; cursor: pointer;">
                    <input type="checkbox" v-model="formData.summary_accept_terms" />
                    Ich akzeptiere die Teilnahmebedingungen.
                </label>
                <label style="display: flex; gap: 10px; cursor: pointer;">
                    <input type="checkbox" v-model="formData.legal_accepted" />
                    Ich stimme der Datenschutzerklärung zu.
                </label>
                <label style="display: flex; gap: 10px; cursor: pointer;">
                    <input type="checkbox" v-model="formData.payment" />
                    Ich bestätige, den Betrag von <strong>{{ summaryAmount }}</strong> zu überweisen.
                </label>
            </div>

            <div class="btn-row">
                <button type="button" class="btn-secondary" @click="emit('back', 8)">← Zurück</button>
                <button
                    type="submit"
                    class="btn-primary"
                    :disabled="!formData.summary_information_correct || !formData.summary_accept_terms || !formData.legal_accepted || !formData.payment || submitting"
                    style="background: #059669;"
                >
                    {{ submitting ? 'Wird gesendet…' : 'Jetzt anmelden ✓' }}
                </button>
            </div>
        </div>
    </div>
</template>
