<template>
    <!-- Padding vertical piloté par la page (1er bloc sans pt, dernier sans pb). -->
    <div>
        <!-- En-tête du bloc : titre + boutons de pesée (bascule / manuelle). -->
        <div class="flex items-center justify-between">
            <h2 class="text-[20px] font-semibold text-m-primary">{{ title }}</h2>
            <div class="flex items-center gap-8">
                <MalioButton
                    variant="secondary"
                    icon-name="mdi:weight"
                    icon-position="left"
                    :label="t('logistique.weighingTickets.form.weighbridge.auto')"
                    :disabled="disabled"
                    @click="$emit('request-auto')"
                />
                <MalioButton
                    variant="primary"
                    icon-name="mdi:weight"
                    icon-position="left"
                    :label="t('logistique.weighingTickets.form.weighbridge.manual')"
                    :disabled="disabled"
                    @click="$emit('request-manual')"
                />
            </div>
        </div>

        <!-- Ligne : Date/heure, Poids, DSD. L'immatriculation et « Tout format »
             vivent désormais dans les 4 champs du haut, hors des blocs (ERP-193). -->
        <div class="mt-6 grid grid-cols-3 xl:grid-cols-4 gap-x-[44px] gap-y-4">
            <!-- Date/heure de la pesée — date du jour + heure courante par défaut
                 (RG-5.07), ré-horodatée à la validation de la pesée. -->
            <MalioDateTime
                :model-value="block.date"
                :label="t('logistique.weighingTickets.form.date')"
                :required="true"
                :editable="true"
                :disabled="disabled"
                :error="errors.date"
                @update:model-value="(v: string | null) => emitBlock('date', v)"
            />

            <!-- Poids : champ texte verrouillé sur les chiffres, toujours désactivé
                 (rempli par la pesée, jamais saisi à la main — RG-5.07). -->
            <MalioInputText
                :model-value="weightDisplay"
                :mask="NUMERIC_MASK"
                :label="t('logistique.weighingTickets.form.weight')"
                :required="true"
                :disabled="true"
                :error="errors.weight"
            />

            <!-- DSD : champ texte verrouillé sur les chiffres, toujours désactivé
                 (rempli par la pesée — RG-5.04 / RG-5.07). -->
            <MalioInputText
                :model-value="dsdDisplay"
                :mask="NUMERIC_MASK"
                :label="t('logistique.weighingTickets.form.dsd')"
                :required="true"
                :disabled="true"
                :error="errors.dsd"
            />
        </div>
    </div>
</template>

<script setup lang="ts">
import type { WeighingBlockState } from '~/modules/logistique/composables/useWeighingTicketForm'
import { NUMERIC_MASK } from '~/modules/logistique/utils/weighingMasks'

/**
 * Bloc de pesée (« Poids à vide » ou « Poids à plein ») de l'écran Ticket de pesée.
 * Champs Date/heure / Poids / DSD + boutons de pesée (bascule / manuelle). Depuis
 * ERP-193, la contrepartie, l'immatriculation et « Tout format » sont remontés dans
 * les 4 champs du haut de page (hors blocs). Masque numérique factorisé dans
 * `utils/weighingMasks`.
 */

const props = withDefaults(defineProps<{
    /** Identifiant technique du bloc (pour les `id` de champs uniques). */
    blockId: string
    title: string
    block: WeighingBlockState
    /** Erreurs 422 par champ (propertyPath → message). */
    errors?: Record<string, string>
    disabled?: boolean
}>(), {
    errors: () => ({}),
    disabled: false,
})

const emit = defineEmits<{
    'update:block': [field: keyof WeighingBlockState, value: unknown]
    'request-auto': []
    'request-manual': []
}>()

const { t } = useI18n()

// Poids / DSD : champs texte → on présente l'entier sous forme de chaîne (vide
// tant que la pesée n'a pas rempli la valeur).
const weightDisplay = computed(() => (props.block.weight === null ? '' : String(props.block.weight)))
const dsdDisplay = computed(() => (props.block.dsd === null ? '' : String(props.block.dsd)))

/** Remonte la mutation d'un champ du bloc au parent (état des pesées centralisé). */
function emitBlock(field: keyof WeighingBlockState, value: unknown): void {
    emit('update:block', field, value)
}
</script>
