<template>
    <UiModal v-model="open" title="Exporter l'inventaire bovin" max-width="max-w-2xl">
        <p class="mb-5 text-sm text-slate-600">
            Aucun filtre coché&nbsp;: export complet (tous les bovins actifs).
        </p>

        <div class="mb-5">
            <h3 class="mb-3 text-sm font-semibold uppercase tracking-wide text-slate-600">
                Tranches d'âge
            </h3>
            <div class="flex flex-col gap-2">
                <label
                    v-for="bucket in ageBuckets"
                    :key="bucket.value"
                    class="flex items-center gap-3 cursor-pointer text-primary-700"
                >
                    <input
                        v-model="filters.ageRanges"
                        type="checkbox"
                        :value="bucket.value"
                        class="h-4 w-4 cursor-pointer accent-primary-500"
                    />
                    <span :class="['inline-block rounded px-2 py-0.5 text-xs font-semibold text-white', bucket.colorClass]">
                        {{ bucket.badge }}
                    </span>
                    <span>{{ bucket.label }}</span>
                </label>
            </div>
        </div>

        <template #footer>
            <div class="flex justify-center">
                <button
                    type="button"
                    :disabled="loading"
                    class="inline-flex h-[50px] items-center justify-center gap-2 rounded bg-primary-500 px-6 text-base text-white uppercase hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-60"
                    @click="onSubmit"
                >
                    <Icon
                        v-if="loading"
                        name="mdi:loading"
                        size="20"
                        class="animate-spin"
                    />
                    <Icon v-else name="mdi:file-excel-outline" size="20" />
                    Exporter
                </button>
            </div>
        </template>
    </UiModal>
</template>

<script setup lang="ts">
import { computed, reactive, watch } from 'vue'

export interface InventoryExportFilters {
    ageRanges: string[]
}

const props = withDefaults(defineProps<{
    modelValue: boolean
    loading?: boolean
}>(), {
    loading: false
})

const emit = defineEmits<{
    (e: 'update:modelValue', value: boolean): void
    (e: 'submit', filters: InventoryExportFilters): void
}>()

const open = computed({
    get: () => props.modelValue,
    set: (value: boolean) => emit('update:modelValue', value)
})

const ageBuckets = [
    { value: 'over24', label: '≥ 24 mois', badge: '24+', colorClass: 'bg-red-500' },
    { value: 'between22And24', label: '22 à 24 mois', badge: '22-24', colorClass: 'bg-orange-500' },
    { value: 'between20And22', label: '20 à 22 mois', badge: '20-22', colorClass: 'bg-yellow-500' }
]

const filters = reactive<InventoryExportFilters>({
    ageRanges: []
})

watch(open, (isOpen) => {
    if (isOpen) {
        filters.ageRanges = []
    }
})

const onSubmit = () => {
    emit('submit', { ageRanges: [...filters.ageRanges] })
}
</script>
