<template>
	<div class="member-form">
		<div class="member-form__grid">
			<!-- Row 1: Names -->
			<div class="member-form__field">
				<label>Vorname *</label>
				<NcTextField :model-value="member.vorname"
					:disabled="!editing"
					:required="true"
					:error="!!errors.vorname"
					@update:model-value="$emit('update', 'vorname', $event)" />
				<span v-if="editing && errors.vorname" class="member-form__error">{{ errors.vorname }}</span>
			</div>
			<div class="member-form__field">
				<label>Nachname *</label>
				<NcTextField :model-value="member.nachname"
					:disabled="!editing"
					:required="true"
					:error="!!errors.nachname"
					@update:model-value="$emit('update', 'nachname', $event)" />
				<span v-if="editing && errors.nachname" class="member-form__error">{{ errors.nachname }}</span>
			</div>

			<!-- Row 2: Dates -->
			<div class="member-form__field">
				<label>Geburtsdatum</label>
				<NcTextField :model-value="member.geburtsdatum || ''"
					type="date"
					:disabled="!editing"
					@update:model-value="$emit('update', 'geburtsdatum', $event || null)" />
			</div>
			<div class="member-form__field">
				<label>Geschlecht</label>
				<NcSelect :model-value="member.geschlecht"
					:options="geschlechtOptions"
					:reduce="o => o.value"
					label="label"
					:disabled="!editing"
					:clearable="true"
					@update:model-value="$emit('update', 'geschlecht', $event)" />
			</div>

			<!-- Row 3: Organisational -->
			<div class="member-form__field">
				<label>Rolle *</label>
				<NcSelect :model-value="member.rolle"
					:options="rolleOptions"
					:reduce="o => o.value"
					label="label"
					:disabled="!editing"
					@update:model-value="$emit('update', 'rolle', $event)" />
				<span v-if="editing && errors.rolle" class="member-form__error">{{ errors.rolle }}</span>
			</div>
			<div class="member-form__field">
				<label>Status</label>
				<NcSelect :model-value="member.status"
					:options="statusOptions"
					:reduce="o => o.value"
					label="label"
					:disabled="!editing || isNew"
					@update:model-value="$emit('update', 'status', $event)" />
			</div>

			<!-- Row 4: Dates -->
			<div class="member-form__field">
				<label>Eintrittsdatum *</label>
				<NcTextField :model-value="member.eintritt"
					type="date"
					:disabled="!editing"
					:required="true"
					:error="!!errors.eintritt"
					@update:model-value="$emit('update', 'eintritt', $event)" />
				<span v-if="editing && errors.eintritt" class="member-form__error">{{ errors.eintritt }}</span>
			</div>
			<div class="member-form__field">
				<label>Austrittsdatum</label>
				<NcTextField :model-value="member.austritt || ''"
					type="date"
					:disabled="!editing"
					@update:model-value="$emit('update', 'austritt', $event || null)" />
			</div>

			<!-- Krankenversicherung (only for Mitglied role) -->
			<template v-if="member.rolle === 'mitglied'">
				<div class="member-form__field">
					<label>Krankenversicherung Typ</label>
					<NcSelect :model-value="member.kvTyp"
						:options="kvTypOptions"
						:reduce="o => o.value"
						label="label"
						:disabled="!editing"
						:clearable="true"
						@update:model-value="$emit('update', 'kvTyp', $event)" />
				</div>
				<div class="member-form__field">
					<label>Krankenversicherung Name</label>
					<NcTextField :model-value="member.kvName || ''"
						:disabled="!editing"
						placeholder="Name der Versicherung"
						@update:model-value="$emit('update', 'kvName', $event || null)" />
				</div>
			</template>
		</div>

		<!-- Juleica section -->
		<div class="member-form__section">
			<h4>Juleica</h4>
			<div class="member-form__grid">
				<div class="member-form__field">
					<label>Juleica-Nummer</label>
					<NcTextField :model-value="member.juleicaNummer || ''"
						:disabled="!editing"
						placeholder="Kartennummer"
						@update:model-value="$emit('update', 'juleicaNummer', $event || null)" />
				</div>
				<div class="member-form__field">
					<label>Ablaufdatum</label>
					<NcTextField :model-value="member.juleicaAblaufdatum || ''"
						type="date"
						:disabled="!editing"
						@update:model-value="$emit('update', 'juleicaAblaufdatum', $event || null)" />
					<span v-if="!editing && juleicaStatus === 'expired'" class="member-form__juleica-warning member-form__juleica-warning--expired">
						abgelaufen
					</span>
					<span v-else-if="!editing && juleicaStatus === 'expiring'" class="member-form__juleica-warning member-form__juleica-warning--expiring">
						laeuft bald ab
					</span>
				</div>
			</div>
		</div>

		<!-- Full-width text areas -->
		<div class="member-form__field member-form__field--full">
			<label>Allergien</label>
			<textarea :value="member.allergienEncrypted || ''"
				:disabled="!editing"
				rows="3"
				class="member-form__textarea"
				@input="$emit('update', 'allergienEncrypted', $event.target.value || null)" />
		</div>

		<div class="member-form__field member-form__field--full">
			<label>Notizen</label>
			<textarea :value="member.notizen || ''"
				:disabled="!editing"
				rows="3"
				class="member-form__textarea"
				@input="$emit('update', 'notizen', $event.target.value || null)" />
		</div>

		<div class="member-form__field member-form__field--full">
			<label>Zusätzliche Notizen</label>
			<textarea :value="member.zusatzNotizen || ''"
				:disabled="!editing"
				rows="3"
				class="member-form__textarea"
				@input="$emit('update', 'zusatzNotizen', $event.target.value || null)" />
		</div>
	</div>
</template>

<script setup>
import { computed } from 'vue'
import { NcTextField, NcSelect } from '@nextcloud/vue'

const props = defineProps({
	member: {
		type: Object,
		required: true,
	},
	isNew: {
		type: Boolean,
		default: false,
	},
	editing: {
		type: Boolean,
		default: false,
	},
	errors: {
		type: Object,
		default: () => ({}),
	},
})

defineEmits(['update'])

/**
 * Compute Juleica status: 'expired', 'expiring', or null.
 * 'expired' = Ablaufdatum is in the past
 * 'expiring' = Ablaufdatum is within the next 2 months
 */
const juleicaStatus = computed(() => {
	const dateStr = props.member.juleicaAblaufdatum
	if (!dateStr) return null
	const expiry = new Date(dateStr)
	const now = new Date()
	now.setHours(0, 0, 0, 0)
	if (expiry < now) return 'expired'
	const twoMonths = new Date(now)
	twoMonths.setMonth(twoMonths.getMonth() + 2)
	if (expiry <= twoMonths) return 'expiring'
	return null
})

const geschlechtOptions = [
	{ value: 'maennlich', label: 'Männlich' },
	{ value: 'weiblich', label: 'Weiblich' },
	{ value: 'divers', label: 'Divers' },
]

const rolleOptions = [
	{ value: 'mitglied', label: 'Mitglied' },
	{ value: 'erziehungsberechtigter', label: 'Erziehungsberechtigter' },
]

const statusOptions = [
	{ value: 'aktiv', label: 'Aktiv' },
	{ value: 'inaktiv', label: 'Inaktiv' },
]

const kvTypOptions = [
	{ value: 'gesetzlich', label: 'Gesetzlich' },
	{ value: 'privat', label: 'Privat' },
]
</script>

<style scoped>
.member-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.member-form__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.member-form__field label {
	font-weight: 500;
	font-size: 0.9em;
	color: var(--color-text-lighter);
}

.member-form__field--full {
	margin-top: 16px;
}

.member-form__error {
	color: var(--color-error);
	font-size: 0.8em;
}

/* Prevent long option labels (e.g. "Erziehungsberechtigter") from wrapping */
.member-form__field :deep(.vs__dropdown-menu) {
	min-width: 220px;
	white-space: nowrap;
}

.member-form__textarea {
	width: 100%;
	padding: 8px 12px;
	border: 2px solid var(--color-border);
	border-radius: var(--border-radius);
	font-family: inherit;
	font-size: inherit;
	resize: vertical;
	background: var(--color-main-background);
	color: var(--color-main-text);
}

.member-form__textarea:disabled {
	background: var(--color-background-dark);
	color: var(--color-text-lighter);
}

.member-form__textarea:focus {
	border-color: var(--color-primary);
	outline: none;
}

.member-form__section {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--color-border);
}

.member-form__section h4 {
	margin: 0 0 12px 0;
	font-size: 1em;
	color: var(--color-text-lighter);
}

.member-form__juleica-warning {
	font-size: 0.85em;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: var(--border-radius-pill);
	display: inline-block;
}

.member-form__juleica-warning--expired {
	color: var(--color-error);
	background-color: var(--color-error-hover, rgba(204, 0, 0, 0.1));
}

.member-form__juleica-warning--expiring {
	color: var(--color-warning);
	background-color: var(--color-warning-hover, rgba(204, 153, 0, 0.1));
}
</style>
