<template>
    <div class="relative grid grid-cols-4 gap-x-[44px] gap-y-4 bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
        <!-- Suppression : ouvre une modal de confirmation côté parent. Masquée si
             non supprimable (1er bloc) ou en lecture seule. -->
        <MalioButtonIcon
            v-if="removable && !readonly"
            icon="mdi:delete-outline"
            variant="ghost"
            button-class="absolute top-3 right-3"
            v-bind="{ ariaLabel: t('transport.carriers.form.contact.remove') }"
            @click="$emit('remove')"
        />

        <MalioInputText
            :model-value="model.lastName"
            :label="t('transport.carriers.form.contact.lastName')"
            :readonly="readonly"
            :error="errors?.lastName"
            @update:model-value="(v: string) => update('lastName', v)"
        />
        <MalioInputText
            :model-value="model.firstName"
            :label="t('transport.carriers.form.contact.firstName')"
            :readonly="readonly"
            :error="errors?.firstName"
            @update:model-value="(v: string) => update('firstName', v)"
        />
        <!-- Fonction sur 2 colonnes : on wrappe car MalioInputText (inheritAttrs:false)
             renvoie `class` sur l'input interne, pas sur la cellule de grille. -->
        <div class="col-span-2">
            <MalioInputText
                :model-value="model.jobTitle"
                :label="t('transport.carriers.form.contact.jobTitle')"
                :readonly="readonly"
                :error="errors?.jobTitle"
                @update:model-value="(v: string) => update('jobTitle', v)"
            />
        </div>
        <MalioInputEmail
            :model-value="model.email"
            :label="t('transport.carriers.form.contact.email')"
            :readonly="readonly"
            :lowercase="true"
            :error="errors?.email"
            @update:model-value="(v: string) => update('email', v)"
        />
        <!-- Téléphone principal + bouton « + » révélant le 2e numéro (max 2). -->
        <MalioInputPhone
            :model-value="model.phonePrimary"
            :label="t('transport.carriers.form.contact.phonePrimary')"
            :mask="PHONE_MASK"
            :readonly="readonly"
            :error="errors?.phonePrimary"
            :addable="!model.hasSecondaryPhone && !readonly"
            :add-button-label="t('transport.carriers.form.contact.addPhone')"
            @update:model-value="(v: string) => update('phonePrimary', v)"
            @add="revealSecondaryPhone"
        />
        <!-- 2e numéro : révélé à la demande (max 2 téléphones — RG-4.08). -->
        <MalioInputPhone
            v-if="model.hasSecondaryPhone"
            :model-value="model.phoneSecondary"
            :label="t('transport.carriers.form.contact.phoneSecondary')"
            :mask="PHONE_MASK"
            :readonly="readonly"
            :error="errors?.phoneSecondary"
            @update:model-value="(v: string) => update('phoneSecondary', v)"
        />
    </div>
</template>

<script setup lang="ts">
import type { CarrierContactFormDraft } from '~/modules/transport/types/carrierForm'

// Masque téléphone FR : 5 groupes de 2 chiffres (la normalisation finale reste serveur).
const PHONE_MASK = '## ## ## ## ##'

const props = defineProps<{
    /** Brouillon du contact (v-model). */
    modelValue: CarrierContactFormDraft
    /** Affiche l'icône de suppression (1er bloc non supprimable). */
    removable?: boolean
    /** Bloc en lecture seule (onglet validé). */
    readonly?: boolean
    /** Erreurs serveur 422 de cette ligne, indexées par champ (ERP-101). */
    errors?: Record<string, string>
}>()

const emit = defineEmits<{
    'update:modelValue': [value: CarrierContactFormDraft]
    'remove': []
}>()

const { t } = useI18n()

// Alias local pour la lisibilité du template.
const model = computed(() => props.modelValue)

/** Émet un nouveau brouillon avec le champ modifié (immutabilité). */
function update<K extends keyof CarrierContactFormDraft>(field: K, value: CarrierContactFormDraft[K]): void {
    emit('update:modelValue', { ...props.modelValue, [field]: value })
}

/** Révèle le 2e numéro (max 1 secondaire, le « + » disparaît). */
function revealSecondaryPhone(): void {
    emit('update:modelValue', { ...props.modelValue, hasSecondaryPhone: true })
}
</script>
