<template>
    <div class="px-[86px]">
        <div class="flex items-center justify-start gap-10 relative">
            <Icon
                @click="router.push('/')"
                name="gg:arrow-left-o"
                size="44"
                class="cursor-pointer text-primary-500 absolute -left-[60px]"
            />
            <h1 class="font-bold text-3xl uppercase text-primary-500">Entrée / Sortie</h1>
        </div>

        <div class="mt-8 mb-16 grid grid-cols-2 gap-8">
            <section>
                <h2 class="text-xl font-bold uppercase text-primary-500 mb-4">Entrées en attente</h2>
                <UiDataTable
                    v-model:page="entryPage"
                    v-model:per-page="entryPerPage"
                    :columns="entryColumns"
                    :items="entries"
                    :total-items="totalEntries"
                    :loading="entriesLoading"
                    row-clickable
                    @row-click="goToEntry"
                >
                    <template #cell-receptionDate="{ item }">
                        {{ formatDate(item.receptionDate) }}
                    </template>
                    <template #cell-declaredCount="{ item }">
                        {{ declaredCount(item) }}
                    </template>
                    <template #cell-registeredBovineCount="{ item }">
                        {{ item.registeredBovineCount ?? 0 }}
                    </template>
                </UiDataTable>
            </section>

            <section>
                <h2 class="text-xl font-bold uppercase text-primary-500 mb-4">Sorties en attente</h2>
                <div class="rounded border border-dashed border-slate-300 p-8 text-center text-slate-500">
                    À venir
                </div>
            </section>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { ReceptionData } from '~/services/dto/reception-data'
import { useDataTableServerState } from '~/composables/useDataTableServerState'

const router = useRouter()

const {
    items: entries,
    totalItems: totalEntries,
    page: entryPage,
    perPage: entryPerPage,
    loading: entriesLoading,
    reload
} = useDataTableServerState<ReceptionData>(
    'receptions',
    {
        'isValid': 'true',
        'entryCompleted': 'false',
        'receptionType.code': 'BOVINS'
    },
    { initialPerPage: 10 }
)

const entryColumns = [
    { key: 'receptionDate', label: 'Date réception', width: '160px' },
    { key: 'supplier.name', label: 'Fournisseur', width: '1.5fr' },
    { key: 'declaredCount', label: 'Bovins déclarés', width: '140px' },
    { key: 'registeredBovineCount', label: 'Bovins saisis', width: '140px' }
]

const declaredCount = (reception: ReceptionData): number => {
    const fromTypes = (reception.bovinesTypes ?? []).reduce((sum: number, bt: any) => {
        return sum + (typeof bt.quantity === 'number' ? bt.quantity : 0)
    }, 0)
    const fromOther = parseInt(reception.bovineDetail ?? '0', 10) || 0
    return fromTypes + fromOther
}

const formatDate = (date: string | null) => {
    if (!date) return '—'
    const d = new Date(date.replace(' ', 'T'))
    if (isNaN(d.getTime())) return date
    return d.toLocaleDateString('fr-FR', {
        day: '2-digit',
        month: '2-digit',
        year: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
    })
}

const goToEntry = (reception: ReceptionData) => {
    router.push(`/entry-exit/entry/${reception.id}`)
}

onMounted(() => {
    reload()
})
</script>
