<template>
    <div class="absence-date-field">
        <label class="mb-1 block text-sm font-medium text-neutral-700">{{ label }}</label>
        <MalioDate
            :model-value="modelValue"
            :min="min ?? undefined"
            :max="max ?? undefined"
            :error="error"
            :clearable="true"
            group-class="w-full"
            @update:model-value="$emit('update:modelValue', $event)"
        />

        <div v-if="showPills" class="mt-2 flex flex-wrap gap-2">
            <button
                v-for="opt in pillOptions"
                :key="String(opt.value)"
                type="button"
                class="rounded-full border px-4 py-1.5 text-sm font-medium transition"
                :class="half === opt.value
                    ? 'border-primary-500 bg-primary-50 text-primary-600'
                    : 'border-neutral-300 text-neutral-600 hover:border-neutral-400'"
                @click="$emit('update:half', opt.value)"
            >
                {{ opt.label }}
            </button>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { HalfDay } from '~/modules/absence/services/dto/absence'

const props = withDefaults(defineProps<{
    /** ISO date string "YYYY-MM-DD" or null. */
    modelValue: string | null
    half: HalfDay | null
    label: string
    /** 'start' shows full/morning/afternoon, 'end' shows full/morning only. */
    mode?: 'start' | 'end'
    error?: string
    /** ISO date string "YYYY-MM-DD" or null. */
    min?: string | null
    max?: string | null
    showPills?: boolean
}>(), {
    mode: 'start',
    error: '',
    min: null,
    max: null,
    showPills: true,
})

defineEmits<{
    'update:modelValue': [value: string | null]
    'update:half': [value: HalfDay | null]
}>()

const { t } = useI18n()

type PillOption = { label: string; value: HalfDay | null }

const pillOptions = computed<PillOption[]>(() => {
    const base: PillOption[] = [
        { label: t('absences.form.fullDay'), value: null },
        { label: t('absences.halfDay.matin'), value: 'matin' },
    ]
    if (props.mode === 'start') {
        base.push({ label: t('absences.halfDay.apres_midi'), value: 'apres_midi' })
    }
    return base
})
</script>
