<template>
    <div>
        <!-- En-tete : retour vers le repertoire + titre. -->
        <div class="flex items-center gap-3 pt-11">
            <MalioButtonIcon
                icon="mdi:arrow-left-bold"
                icon-size="24"
                variant="ghost"
                v-bind="{ ariaLabel: t('commercial.clients.form.back') }"
                @click="goBack"
            />
            <h1 class="text-[30px] font-semibold text-m-primary">{{ t('commercial.clients.form.title') }}</h1>
        </div>

        <!-- ── Formulaire principal (pre-onglets) ─────────────────────────────
             Sans validation de ce bloc, les onglets restent inaccessibles. Au
             succes du POST, les champs passent en lecture seule et on bascule
             automatiquement sur l'onglet Information. -->
        <div class="mt-[48px] grid grid-cols-3 xl:grid-cols-4 gap-x-[44px] gap-y-4">
            <MalioInputText
                v-model="main.companyName"
                :label="t('commercial.clients.form.main.companyName')"
                :required="true"
                :readonly="mainLocked"
                :error="mainErrors.errors.companyName"
            />
            <MalioSelectCheckbox
                :model-value="main.categoryIris"
                :options="referentials.categories.value"
                :label="t('commercial.clients.form.main.categories')"
                :display-tag="true"
                :readonly="mainLocked"
                :required="true"
                :error="mainErrors.errors.categories"
                @update:model-value="(v: (string | number)[]) => main.categoryIris = v.map(String)"
            />
            <MalioSelect
                v-if="showRelationAndTriage"
                :model-value="main.relationType"
                :options="relationOptions"
                :label="t('commercial.clients.form.main.relation')"
                :empty-option-label="t('commercial.clients.form.main.relationNone')"
                :readonly="mainLocked"
                @update:model-value="onRelationChange"
            />
            <MalioSelect
                v-if="showRelationAndTriage && main.relationType === 'courtier'"
                :model-value="main.brokerIri"
                :options="referentials.brokers.value"
                :label="t('commercial.clients.form.main.brokerName')"
                :readonly="mainLocked"
                :required="true"
                :error="mainErrors.errors.broker"
                @update:model-value="(v: string | number | null) => main.brokerIri = v === null ? null : String(v)"
            />
            <MalioSelect
                v-if="showRelationAndTriage && main.relationType === 'distributeur'"
                :model-value="main.distributorIri"
                :options="referentials.distributors.value"
                :label="t('commercial.clients.form.main.distributorName')"
                :readonly="mainLocked"
                :required="true"
                :error="mainErrors.errors.distributor"
                @update:model-value="(v: string | number | null) => main.distributorIri = v === null ? null : String(v)"
            />
            <MalioCheckbox
                v-if="showRelationAndTriage"
                v-model="main.triageService"
                :label="t('commercial.clients.form.main.triageService')"
                group-class="self-center"
                :readonly="mainLocked"
            />
        </div>

        <div v-if="!mainLocked" class="mt-12 flex justify-center">
            <MalioButton
                variant="primary"
                :label="t('commercial.clients.form.submit')"
                :disabled="mainSubmitting"
                @click="submitMain"
            />
        </div>

        <!-- ── Onglets a validation incrementale ─────────────────────────────-->
        <MalioTabList v-model="activeTab" :tabs="tabs" class="mt-[60px]">
            <!-- Onglet Information -->
            <template #information>
                <div class="mt-12 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)]">
                    <!-- pt-1/pb-1 alignent le textarea (h-full) sur les inputs, dont
                         le champ de 40px est centre dans un conteneur h-12 (~4px de
                         coussin en HAUT et en BAS). Sans pb-1, le textarea descend ~4px
                         plus bas que les champs voisins. -->
                    <MalioInputTextArea
                        v-model="information.description"
                        :label="t('commercial.clients.form.information.description')"
                        resize="none"
                        group-class="row-span-2 pt-1 pb-1"
                        text-input="h-full text-lg"
                        :readonly="isValidated('information')"
                        :error="informationErrors.errors.description"
                    />
                    <MalioInputText
                        v-model="information.competitors"
                        :label="t('commercial.clients.form.information.competitors')"
                        :readonly="isValidated('information')"
                        :error="informationErrors.errors.competitors"
                    />
                    <MalioDate
                        v-model="information.foundedAt"
                        :label="t('commercial.clients.form.information.foundedAt')"
                        :readonly="isValidated('information')"
                        :editable="true"
                        :error="informationErrors.errors.foundedAt"
                        @update:raw-value="(v: string) => information.foundedAtRaw = v"
                    />
                    <MalioInputText
                        v-model="information.employeesCount"
                        :label="t('commercial.clients.form.information.employeesCount')"
                        :mask="EMPLOYEES_MASK"
                        :readonly="isValidated('information')"
                        :error="informationErrors.errors.employeesCount"
                    />
                    <MalioInputAmount
                        v-model="information.revenueAmount"
                        :label="t('commercial.clients.form.information.revenueAmount')"
                        :readonly="isValidated('information')"
                        :error="informationErrors.errors.revenueAmount"
                    />
                    <MalioInputText
                        v-model="information.directorName"
                        :label="t('commercial.clients.form.information.directorName')"
                        :readonly="isValidated('information')"
                        :error="informationErrors.errors.directorName"
                    />
                    <MalioInputAmount
                        v-model="information.profitAmount"
                        :label="t('commercial.clients.form.information.profitAmount')"
                        :readonly="isValidated('information')"
                        :error="informationErrors.errors.profitAmount"
                    />
                </div>
                <div v-if="!isValidated('information')" class="mt-12 flex justify-center">
                    <!-- Desactive tant que le client n'est pas cree (evite un PATCH
                         avant le POST si clic trop tot, Information etant l'onglet
                         actif par defaut). Onglet facultatif : un enregistrement a
                         vide reste possible, c'est le back qui valide. -->
                    <MalioButton
                        variant="primary"
                        :label="t('commercial.clients.form.submit')"
                        :disabled="tabSubmitting || clientId === null"
                        @click="submitInformation"
                    />
                </div>
            </template>

            <!-- Onglet Contact -->
            <template #contact>
                <div class="mt-12 flex flex-col gap-6">
                    <!-- ERP-172 : poubelle visible seulement s'il reste un AUTRE bloc deja
                         enregistre (id en base) — cf. isRowRemovable. Empeche de supprimer un
                         bloc tant que rien n'est sauvegarde, et de supprimer son dernier
                         bloc enregistre. -->
                    <ClientContactBlock
                        v-for="(contact, index) in contacts"
                        :key="index"
                        :model-value="contact"
                        :title="t('commercial.clients.form.contact.title', { n: index + 1 })"
                        :removable="isRowRemovable(contacts, index)"
                        :readonly="isValidated('contact')"
                        :errors="contactErrors[index]"
                        @update:model-value="(v) => contacts[index] = v"
                        @remove="askRemoveContact(index)"
                    />
                    <div v-if="!isValidated('contact')" class="flex justify-center gap-6">
                        <MalioButton
                            variant="secondary"
                            icon-name="mdi:add-bold"
                            icon-position="left"
                            :label="t('commercial.clients.form.contact.add')"
                            :disabled="!canAddContact"
                            @click="addContact"
                        />
                        <MalioButton
                            variant="primary"
                            :label="t('commercial.clients.form.submit')"
                            :disabled="tabSubmitting"
                            @click="submitContacts"
                        />
                    </div>
                </div>
            </template>

            <!-- Onglet Adresse -->
            <template #address>
                <div class="mt-12 flex flex-col gap-6">
                    <ClientAddressBlock
                        v-for="(address, index) in addresses"
                        :key="index"
                        :model-value="address"
                        :title="t('commercial.clients.form.address.title', { n: index + 1 })"
                        :category-options="addressCategoryOptions"
                        :site-options="referentials.sites.value"
                        :contact-options="contactOptions"
                        :country-options="countryOptions"
                        :removable="isRowRemovable(addresses, index)"
                        :readonly="isValidated('address')"
                        :errors="addressErrors[index]"
                        @update:model-value="(v) => addresses[index] = v"
                        @remove="askRemoveAddress(index)"
                        @degraded="onAddressDegraded"
                    />
                    <div v-if="!isValidated('address')" class="flex justify-center gap-6">
                        <MalioButton
                            variant="secondary"
                            icon-name="mdi:add-bold"
                            icon-position="left"
                            :label="t('commercial.clients.form.address.add')"
                            :disabled="!canAddAddress"
                            @click="addAddress"
                        />
                        <MalioButton
                            variant="primary"
                            :label="t('commercial.clients.form.submit')"
                            :disabled="tabSubmitting"
                            @click="submitAddresses"
                        />
                    </div>
                </div>
            </template>

            <!-- Onglet Comptabilite (present uniquement si accounting.view) -->
            <template v-if="canAccountingView" #accounting>
                <div class="mt-12 flex flex-col gap-6">
                    <div class="bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]">
                        <div class="grid grid-cols-4 gap-x-[44px] gap-y-4">
                            <MalioInputText
                                v-model="accounting.siren"
                                :label="t('commercial.clients.form.accounting.siren')"
                                :mask="SIREN_MASK"
                                :readonly="accountingReadonly"
                                :required="true"
                                :error="accountingErrors.errors.siren"
                            />
                            <MalioInputText
                                v-model="accounting.accountNumber"
                                :label="t('commercial.clients.form.accounting.accountNumber')"
                                :readonly="accountingReadonly"
                                :required="true"
                                :error="accountingErrors.errors.accountNumber"
                            />
                            <MalioSelect
                                :model-value="accounting.tvaModeIri"
                                :options="referentials.tvaModes.value"
                                :label="t('commercial.clients.form.accounting.tvaMode')"
                                :readonly="accountingReadonly"
                                empty-option-label=""
                                :required="true"
                                :error="accountingErrors.errors.tvaMode"
                                @update:model-value="(v: string | number | null) => accounting.tvaModeIri = v === null ? null : String(v)"
                            />
                            <MalioInputText
                                v-model="accounting.nTva"
                                :label="t('commercial.clients.form.accounting.nTva')"
                                :readonly="accountingReadonly"
                                :required="true"
                                :error="accountingErrors.errors.nTva"
                            />
                            <MalioSelect
                                :model-value="accounting.paymentDelayIri"
                                :options="referentials.paymentDelays.value"
                                :label="t('commercial.clients.form.accounting.paymentDelay')"
                                :readonly="accountingReadonly"
                                empty-option-label=""
                                :required="true"
                                :error="accountingErrors.errors.paymentDelay"
                                @update:model-value="(v: string | number | null) => accounting.paymentDelayIri = v === null ? null : String(v)"
                            />
                            <MalioSelect
                                :model-value="accounting.paymentTypeIri"
                                :options="referentials.paymentTypes.value"
                                :label="t('commercial.clients.form.accounting.paymentType')"
                                :readonly="accountingReadonly"
                                empty-option-label=""
                                :required="true"
                                :error="accountingErrors.errors.paymentType"
                                @update:model-value="onPaymentTypeChange"
                            />
                            <MalioSelect
                                v-if="isBankRequired"
                                :model-value="accounting.bankIri"
                                :options="referentials.banks.value"
                                :label="t('commercial.clients.form.accounting.bank')"
                                :readonly="accountingReadonly"
                                empty-option-label=""
                                :required="true"
                                :error="accountingErrors.errors.bank"
                                @update:model-value="(v: string | number | null) => accounting.bankIri = v === null ? null : String(v)"
                            />
                        </div>
                    </div>

                    <!-- Blocs RIB — affiches uniquement si type de reglement = LCR (RG-1.13). -->
                    <div
                        v-for="(rib, index) in visibleRibs"
                        :key="index"
                        class="relative bg-white py-4 pl-[28px] pr-[60px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]"
                    >
                        <!-- ariaLabel via v-bind objet (prop camelCase ; aria-* serait un attribut HTML). -->
                        <MalioButtonIcon
                            v-if="!accountingReadonly && isRowRemovable(visibleRibs, index)"
                            icon="mdi:delete-outline"
                            variant="ghost"
                            button-class="absolute top-3 right-3"
                            v-bind="{ ariaLabel: t('commercial.clients.form.accounting.removeRib') }"
                            @click="askRemoveRib(index)"
                        />
                        <div class="grid grid-cols-4 gap-x-[44px] gap-y-4">
                            <MalioInputText
                                v-model="rib.label"
                                :label="t('commercial.clients.form.accounting.ribLabel')"
                                :readonly="accountingReadonly"
                                :required="isRibRequired"
                                :error="ribErrors[index]?.label"
                            />
                            <MalioInputText
                                v-model="rib.bic"
                                :label="t('commercial.clients.form.accounting.ribBic')"
                                :readonly="accountingReadonly"
                                :required="isRibRequired"
                                :error="ribErrors[index]?.bic"
                            />
                            <MalioInputText
                                v-model="rib.iban"
                                :label="t('commercial.clients.form.accounting.ribIban')"
                                :readonly="accountingReadonly"
                                :required="isRibRequired"
                                :error="ribErrors[index]?.iban"
                            />
                        </div>
                    </div>

                    <div v-if="!accountingReadonly" class="flex justify-center gap-6">
                        <MalioButton
                            v-if="isRibRequired"
                            variant="secondary"
                            icon-name="mdi:add-bold"
                            icon-position="left"
                            :label="t('commercial.clients.form.accounting.addRib')"
                            :disabled="!canAddRib"
                            @click="addRib"
                        />
                        <MalioButton
                            variant="primary"
                            :label="t('commercial.clients.form.submit')"
                            :disabled="tabSubmitting"
                            @click="submitAccounting"
                        />
                    </div>
                </div>
            </template>

            <!-- Onglet non encore implemente : frame vide, passage automatique.
                 Statistiques / Rapports / Echanges sont edit-only (absents a la
                 creation) — cf. buildClientFormTabKeys. -->
            <template #transport><ComingSoonPlaceholder /></template>
        </MalioTabList>

        <!-- Modal de confirmation generique (suppression contact/adresse/RIB). -->
        <MalioModal v-model="confirmModal.open" modal-class="max-w-md">
            <template #header>
                <h2 class="text-[24px] font-bold">{{ t('commercial.clients.form.confirmDelete.title') }}</h2>
            </template>
            <p>{{ confirmModal.message }}</p>
            <template #footer>
                <MalioButton
                    variant="secondary"
                    button-class="flex-1"
                    :label="t('commercial.clients.form.confirmDelete.cancel')"
                    @click="confirmModal.open = false"
                />
                <MalioButton
                    variant="danger"
                    button-class="flex-1"
                    :label="t('commercial.clients.form.confirmDelete.confirm')"
                    @click="runConfirm"
                />
            </template>
        </MalioModal>
    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from 'vue'
import { useClientReferentials, type RefOption } from '~/modules/commercial/composables/useClientReferentials'
import { useClientFormErrors } from '~/modules/commercial/composables/useClientFormErrors'
import {
    buildClientFormTabKeys,
    CLIENT_FORM_PLACEHOLDER_TABS,
    isAddressValid,
    isBankRequiredForPaymentType,
    isBillingEmailRequired,
    isContactBlank,
    isContactNamed,
    isRibBlank,
    isRibComplete,
    isRibRequiredForPaymentType,
    lastFillableTabKey,
    showsRelationAndTriageFields,
} from '~/modules/commercial/utils/forms/clientFormRules'
import {
    buildAddressPayload,
    buildMainPayload,
    buildRibPayload,
} from '~/modules/commercial/utils/forms/clientEdit'
import {
    emptyAddress,
    emptyContact,
    emptyRib,
    type AddressFormDraft,
    type ContactFormDraft,
    type RibFormDraft,
} from '~/modules/commercial/types/clientForm'
import { extractApiErrorMessage } from '~/shared/utils/api'
import { isRowRemovable } from '~/shared/utils/collectionRow'

// Masques de saisie (la normalisation finale reste serveur).
const SIREN_MASK = '#########'
// Masque « nombre » du champ Nombre de salaries : chiffres uniquement (max 7).
const EMPLOYEES_MASK = '#######'

// Codes de categorie interdits sur une adresse (RG-1.29, ERP-78).
const FORBIDDEN_ADDRESS_CATEGORY_CODES = ['DISTRIBUTEUR', 'COURTIER']

const { t } = useI18n()
const api = useApi()
const toast = useToast()
const router = useRouter()
const { can } = usePermissions()

/** Retour vers le repertoire clients (fleche d'en-tete). */
function goBack(): void {
    router.push('/clients')
}

/**
 * Message d'erreur a afficher dans un toast a partir d'une erreur d'API.
 * Retourne TOUJOURS une chaine (le composant de toast plante sur `undefined`) :
 * le message de validation renvoye par le serveur (violations 422 / detail),
 * sinon un libelle generique.
 */
function apiErrorMessage(error: unknown): string {
    const data = (error as { data?: unknown })?.data
    return extractApiErrorMessage(data) || t('commercial.clients.toast.error')
}

// ── Erreurs de validation par champ (ERP-101) ───────────────────────────────
// Etat d'erreurs factorise entre creation et edition (cf. useClientFormErrors) :
// un `useFormErrors` par groupe scalaire (Principal / Information / Comptabilite)
// + un tableau d'erreurs par ligne pour chaque collection (contacts/adresses/RIB).
// `mapRowError` mappe une 422 inline et retourne true ; il ne toaste pas, le
// fallback reste local a la creation (cf. catch des submits de collection).
const {
    mainErrors,
    informationErrors,
    accountingErrors,
    contactErrors,
    addressErrors,
    ribErrors,
    submitRows,
} = useClientFormErrors()

useHead({ title: t('commercial.clients.form.title') })

// Gating de la route : la creation est reservee a `manage`. Compta (accounting
// seul) et Usine sont rediriges vers le repertoire (cf. §0 du ticket).
if (!can('commercial.clients.manage')) {
    await navigateTo('/clients')
}

const canAccountingView = computed(() => can('commercial.clients.accounting.view'))
const canAccountingManage = computed(() => can('commercial.clients.accounting.manage'))

const referentials = useClientReferentials()

// ── Etat du client cree ────────────────────────────────────────────────────
const clientId = ref<number | null>(null)
const mainLocked = ref(false)
const mainSubmitting = ref(false)
const tabSubmitting = ref(false)

// ── Formulaire principal ────────────────────────────────────────────────────
const main = reactive({
    companyName: null as string | null,
    categoryIris: [] as string[],
    relationType: null as 'distributeur' | 'courtier' | null,
    distributorIri: null as string | null,
    brokerIri: null as string | null,
    triageService: false,
})

// Pas d'option « Aucun » : le select est vide par defaut (relationType = null).
const relationOptions = computed<RefOption[]>(() => [
    { value: 'distributeur', label: t('commercial.clients.form.main.relationDistributor') },
    { value: 'courtier', label: t('commercial.clients.form.main.relationBroker') },
])

// Codes des categories selectionnees (resolus depuis les IRI du brouillon).
const selectedCategoryCodes = computed(() =>
    main.categoryIris
        .map(iri => referentials.categories.value.find(c => c.value === iri)?.code)
        .filter((code): code is string => code !== undefined),
)

// « Relation » + « Prestation de triage » masques par defaut, reveles des qu'une
// categorie ordinaire (autre que Distributeur/Courtier) est selectionnee.
const showRelationAndTriage = computed(() => showsRelationAndTriageFields(selectedCategoryCodes.value))

// Masquer ces champs reinitialise leurs valeurs : pas de relation/triage fantome
// soumis pour un client Distributeur/Courtier.
watch(showRelationAndTriage, (visible) => {
    if (!visible) {
        main.relationType = null
        main.distributorIri = null
        main.brokerIri = null
        main.triageService = false
    }
})

async function onRelationChange(value: string | number | null): Promise<void> {
    const relation = (value === null || value === '')
        ? null
        : (String(value) as 'distributeur' | 'courtier')
    main.relationType = relation
    // Reinitialise la FK non concernee (une seule remplie a la fois, RG-1.03).
    if (relation !== 'distributeur') main.distributorIri = null
    if (relation !== 'courtier') main.brokerIri = null

    if (relation === 'distributeur') await referentials.loadDistributors()
    if (relation === 'courtier') await referentials.loadBrokers()
}

/** POST /clients (groupe client:write:main). Au succes : verrouille + bascule Information. */
async function submitMain(): Promise<void> {
    if (mainSubmitting.value) return
    mainSubmitting.value = true
    mainErrors.clearErrors()
    try {
        // Payload partage avec l'edition (buildMainPayload) : meme logique
        // d'omission des requis vides et meme envoi de relationType (ERP-119).
        const created = await api.post<ClientResponse>('/clients', buildMainPayload(main), {
            headers: { Accept: 'application/ld+json' },
            toast: false,
        })

        clientId.value = created.id
        // Reaffiche la valeur normalisee renvoyee par le serveur.
        main.companyName = created.companyName ?? main.companyName

        mainLocked.value = true
        // Information est facultatif : on deverrouille jusqu'a Contact (index 1)
        // pour que l'utilisateur puisse y aller directement sans valider Information.
        unlockedIndex.value = tabIndex('contact')
        activeTab.value = 'information'
        toast.success({ title: t('commercial.clients.toast.createSuccess') })
    }
    catch (error) {
        // 409 = doublon nom de societe (RG d'unicite) → erreur inline sur le
        // champ + toast explicite ; 422 → mapping inline par champ (pas de
        // toast) ; autre → toast de fallback. Cf. ERP-101.
        const status = (error as { response?: { status?: number } })?.response?.status
        if (status === 409) {
            const message = t('commercial.clients.form.duplicateCompany')
            mainErrors.setError('companyName', message)
            toast.error({ title: t('commercial.clients.toast.error'), message })
        }
        else {
            mainErrors.handleApiError(error, { fallbackMessage: t('commercial.clients.toast.error') })
        }
    }
    finally {
        mainSubmitting.value = false
    }
}

// ── Onglets : ordre + gating progressif ─────────────────────────────────────
const activeTab = ref('information')
// Index du dernier onglet deverrouille (-1 tant que le client n'est pas cree).
const unlockedIndex = ref(-1)
// Onglets valides (passent en lecture seule).
const validated = reactive<Record<string, boolean>>({})

const tabKeys = computed(() => buildClientFormTabKeys(canAccountingView.value))

// Dernier onglet REMPLISSABLE par le role (cf. lastFillableTabKey) : deja role-aware
// via tabKeys (accounting present ssi accounting.view, et a la creation « present » =
// « editable » : aucun role createur n'a la Compta en lecture seule). Sa validation
// cloture l'ajout -> redirection vers la liste.
const lastFillableTab = computed(() => lastFillableTabKey(tabKeys.value))

// Icone (Iconify) affichee dans l'onglet, par cle. A ajuster librement.
const TAB_ICONS: Record<string, string> = {
    information: 'mdi:account-outline',
    contact: 'mdi:account-box-plus-outline',
    address: 'mdi:map-marker-outline',
    transport: 'mdi:truck-delivery-outline',
    accounting: 'mdi:bank-circle-outline',
    statistics: 'mdi:finance',
    reports: 'mdi:file-document-edit-outline',
    exchanges: 'mdi:account-group-outline',
}

const tabs = computed(() => tabKeys.value.map((key, index) => ({
    key,
    label: t(`commercial.clients.tab.${key}`),
    icon: TAB_ICONS[key],
    disabled: index > unlockedIndex.value,
})))

function isValidated(key: string): boolean {
    return validated[key] === true
}

function tabIndex(key: string): number {
    return tabKeys.value.indexOf(key)
}

/**
 * Marque l'onglet valide. Si c'est le dernier onglet remplissable, l'ajout est
 * termine : toast final + redirection vers la liste, et on retourne true pour que
 * l'appelant n'affiche pas son toast « mis a jour ». Sinon, deverrouille et avance
 * a l'onglet suivant, et retourne false.
 */
function completeTab(key: string): boolean {
    validated[key] = true
    if (key === lastFillableTab.value) {
        toast.success({ title: t('commercial.clients.toast.addComplete') })
        router.push('/clients')
        return true
    }
    const next = tabKeys.value[tabIndex(key) + 1]
    unlockedIndex.value = Math.max(unlockedIndex.value, tabIndex(key) + 1)
    if (next) activeTab.value = next
    return false
}

// Passage automatique sur les onglets coquille (Transport, Stats, Rapports, Echanges).
watch(activeTab, (key) => {
    if ((CLIENT_FORM_PLACEHOLDER_TABS as readonly string[]).includes(key)) {
        const next = tabKeys.value[tabIndex(key) + 1]
        unlockedIndex.value = Math.max(unlockedIndex.value, tabIndex(key) + 1)
        if (next) activeTab.value = next
    }
})

// ── Onglet Information ──────────────────────────────────────────────────────
const information = reactive({
    description: null as string | null,
    competitors: null as string | null,
    foundedAt: null as string | null,
    // Saisie brute invalide remontee par MalioDate (cf. foundedAtRaw, MUI-44).
    foundedAtRaw: '',
    employeesCount: null as string | null,
    revenueAmount: null as string | null,
    profitAmount: null as string | null,
    directorName: null as string | null,
})

/** PATCH /clients/{id} — mode strict : uniquement les champs du groupe information. */
async function submitInformation(): Promise<void> {
    if (clientId.value === null || tabSubmitting.value) return
    tabSubmitting.value = true
    informationErrors.clearErrors()
    try {
        await api.patch(`/clients/${clientId.value}`, {
            description: information.description || null,
            competitors: information.competitors || null,
            // Saisie invalide prioritaire -> 422 back sur foundedAt (cf. foundedAtRaw).
            foundedAt: information.foundedAtRaw || information.foundedAt || null,
            employeesCount: information.employeesCount ? Number(information.employeesCount) : null,
            revenueAmount: information.revenueAmount || null,
            profitAmount: information.profitAmount || null,
            directorName: information.directorName || null,
        }, { toast: false })
        if (completeTab('information')) return
        toast.success({ title: t('commercial.clients.toast.updateSuccess') })
    }
    catch (error) {
        informationErrors.handleApiError(error, { fallbackMessage: t('commercial.clients.toast.error') })
    }
    finally {
        tabSubmitting.value = false
    }
}

// ── Onglet Contact ──────────────────────────────────────────────────────────
// Au moins un bloc Contact vide au depart : c'est desormais le seul point de
// saisie des coordonnees (le bloc principal ne porte plus de contact inline).
const contacts = ref<ContactFormDraft[]>([emptyContact()])

// « + Nouveau contact » desactive tant que le dernier bloc n'a ni nom ni prenom.
const canAddContact = computed(() => {
    const last = contacts.value[contacts.value.length - 1]
    return last !== undefined && isContactNamed(last)
})

function addContact(): void {
    if (canAddContact.value) contacts.value.push(emptyContact())
}

function askRemoveContact(index: number): void {
    askConfirm(t('commercial.clients.form.confirmDelete.contact'), () => {
        contacts.value.splice(index, 1)
        contactErrors.value.splice(index, 1)
    })
}

/** POST/PATCH des contacts sur la sous-ressource /clients/{id}/contacts. */
async function submitContacts(): Promise<void> {
    if (clientId.value === null || tabSubmitting.value) return
    tabSubmitting.value = true
    try {
        // RG-1.14 : au moins un contact requis. Si l'onglet ne contient QUE des
        // amorces neuves vides, on ne les skippe pas -> le bloc vide est POSTe et
        // le back renvoie la 422 RG-1.05 « prénom ou nom obligatoire » inline (la
        // RG-1.14 n'a pas d'equivalent back au POST, on la materialise via RG-1.05).
        const hasSubmittableContact = contacts.value.some(c => c.id !== null || !isContactBlank(c))
        // On tente TOUS les blocs (collecte des erreurs par index, ERP-110). Seuls
        // les blocs TOTALEMENT vides sont ignores : un bloc partiellement rempli
        // sans nom (email seul) est soumis -> 422 RG-1.05 inline sous le bloc.
        const hasError = await submitRows(
            contacts.value,
            contactErrors,
            async (contact) => {
                const body = {
                    firstName: contact.firstName || null,
                    lastName: contact.lastName || null,
                    jobTitle: contact.jobTitle || null,
                    phonePrimary: contact.phonePrimary || null,
                    phoneSecondary: contact.hasSecondaryPhone ? (contact.phoneSecondary || null) : null,
                    email: contact.email || null,
                }
                if (contact.id === null) {
                    const created = await api.post<ContactResponse>(
                        `/clients/${clientId.value}/contacts`,
                        body,
                        { headers: { Accept: 'application/ld+json' }, toast: false },
                    )
                    contact.id = created.id
                    contact.iri = created['@id'] ?? null
                }
                else {
                    await api.patch(`/client_contacts/${contact.id}`, body, { toast: false })
                }
            },
            error => toast.error({ title: t('commercial.clients.toast.error'), message: apiErrorMessage(error) }),
            // On ne saute une amorce neuve (id null) totalement vide QUE si un autre
            // bloc sera soumis : sinon on la soumet pour declencher la 422 RG-1.05
            // (un onglet Contact vide ne doit pas passer en faux succes).
            contact => hasSubmittableContact && contact.id === null && isContactBlank(contact),
        )
        // Tant qu'un bloc reste en erreur : pas de validation d'onglet ni de toast succes.
        if (hasError) return
        if (completeTab('contact')) return
        toast.success({ title: t('commercial.clients.toast.updateSuccess') })
    }
    finally {
        tabSubmitting.value = false
    }
}

// ── Onglet Adresse ──────────────────────────────────────────────────────────
const addresses = ref<AddressFormDraft[]>([emptyAddress()])
const addressDegradedNotified = ref(false)

// Categories autorisees sur une adresse : toutes SAUF DISTRIBUTEUR/COURTIER (RG-1.29).
const addressCategoryOptions = computed(() =>
    referentials.categories.value.filter(c => !FORBIDDEN_ADDRESS_CATEGORY_CODES.includes(c.code)),
)

// Contacts deja crees, rattachables a une adresse (M2M, via leur IRI).
const contactOptions = computed<RefOption[]>(() =>
    contacts.value
        .filter(c => c.iri !== null)
        .map(c => ({
            value: c.iri as string,
            label: [c.firstName, c.lastName].filter(Boolean).join(' ') || (c.email ?? ''),
        })),
)

// Pays disponibles : referentiel `country` charge via l'API (ERP-116), en
// remplacement de l'ancienne liste codee en dur. France reste preselectionnee
// par defaut sur chaque adresse (cf. valeur initiale du draft d'adresse) : on
// garantit donc sa presence en fallback si `/countries` echoue (resilience
// ERP-102), pour ne pas afficher un select vide sur une valeur deja soumise.
const countryOptions = computed<RefOption[]>(() => {
    const list = referentials.countries.value
    return list.some(c => c.value === 'France')
        ? list
        : [{ value: 'France', label: 'France' }, ...list]
})

// « + Adresse » desactive tant que la derniere adresse n'est pas valide.
const canAddAddress = computed(() => {
    const last = addresses.value[addresses.value.length - 1]
    return last !== undefined && isAddressValid(last)
})

function addAddress(): void {
    if (canAddAddress.value) addresses.value.push(emptyAddress())
}

function askRemoveAddress(index: number): void {
    askConfirm(t('commercial.clients.form.confirmDelete.address'), () => {
        addresses.value.splice(index, 1)
        addressErrors.value.splice(index, 1)
    })
}

/** Avertit une seule fois quand l'autocompletion d'adresse bascule en degrade. */
function onAddressDegraded(): void {
    if (addressDegradedNotified.value) return
    addressDegradedNotified.value = true
    toast.warning({
        title: t('commercial.clients.toast.error'),
        message: t('commercial.clients.form.address.degraded'),
    })
}

/** POST des adresses sur la sous-ressource /clients/{id}/addresses. */
async function submitAddresses(): Promise<void> {
    if (clientId.value === null || tabSubmitting.value) return
    tabSubmitting.value = true
    try {
        // On tente TOUS les blocs d'adresse (collecte des erreurs par index, ERP-110).
        const hasError = await submitRows(
            addresses.value,
            addressErrors,
            async (address) => {
                // Payload partage avec l'edition (buildAddressPayload, ERP-119).
                const body = buildAddressPayload(address, isBillingEmailRequired(address))
                if (address.id === null) {
                    const created = await api.post<{ id: number }>(
                        `/clients/${clientId.value}/addresses`,
                        body,
                        { headers: { Accept: 'application/ld+json' }, toast: false },
                    )
                    address.id = created.id
                }
                else {
                    await api.patch(`/client_addresses/${address.id}`, body, { toast: false })
                }
            },
            error => toast.error({ title: t('commercial.clients.toast.error'), message: apiErrorMessage(error) }),
        )
        if (hasError) return
        if (completeTab('address')) return
        toast.success({ title: t('commercial.clients.toast.updateSuccess') })
    }
    finally {
        tabSubmitting.value = false
    }
}

// ── Onglet Comptabilite ─────────────────────────────────────────────────────
const accounting = reactive({
    siren: null as string | null,
    accountNumber: null as string | null,
    tvaModeIri: null as string | null,
    nTva: null as string | null,
    paymentDelayIri: null as string | null,
    paymentTypeIri: null as string | null,
    bankIri: null as string | null,
})
const ribs = ref<RibFormDraft[]>([])

// L'onglet est editable seulement avec accounting.manage (sinon lecture seule).
const accountingReadonly = computed(() => isValidated('accounting') || !canAccountingManage.value)

// Code du type de reglement selectionne (pour RG-1.12 / RG-1.13).
const selectedPaymentTypeCode = computed(() =>
    referentials.paymentTypes.value.find(p => p.value === accounting.paymentTypeIri)?.code ?? null,
)
const isBankRequired = computed(() => isBankRequiredForPaymentType(selectedPaymentTypeCode.value))
const isRibRequired = computed(() => isRibRequiredForPaymentType(selectedPaymentTypeCode.value))

// Les blocs RIB ne sont affiches que pour une LCR (RG-1.13).
const visibleRibs = computed(() => isRibRequired.value ? ribs.value : [])

function onPaymentTypeChange(value: string | number | null): void {
    accounting.paymentTypeIri = value === null ? null : String(value)
    // La banque n'a de sens que pour un virement : on la vide sinon (RG-1.12).
    if (!isBankRequired.value) accounting.bankIri = null
    // ERP-121 : on ne jette plus la saisie RIB au passage hors-LCR. Les blocs sont
    // masques (visibleRibs = []) mais conserves, et reapparaissent si l'on repasse
    // en LCR. Ils ne sont persistes qu'a la validation SOUS LCR (cf. submitAccounting),
    // donc une saisie abandonnee hors-LCR ne cree aucun RIB orphelin.
    if (isRibRequired.value) {
        if (ribs.value.length === 0) ribs.value.push(emptyRib())
    }
    else {
        ribErrors.value = []
    }
}

// « + RIB » desactive tant que le dernier bloc RIB n'est pas complet.
const canAddRib = computed(() => {
    const last = ribs.value[ribs.value.length - 1]
    return last !== undefined && isRibComplete(last)
})

function addRib(): void {
    if (canAddRib.value) ribs.value.push(emptyRib())
}

function askRemoveRib(index: number): void {
    askConfirm(t('commercial.clients.form.confirmDelete.rib'), () => {
        ribs.value.splice(index, 1)
        ribErrors.value.splice(index, 1)
        // Garde au moins un bloc RIB visible (cf. amorce au montage).
        if (ribs.value.length === 0) ribs.value.push(emptyRib())
    })
}

/**
 * Valide l'onglet Comptabilite : POST/PATCH des RIB sur /clients/{id}/ribs PUIS
 * PATCH des scalaires (groupe client:write:accounting). Les RIB d'abord : le back
 * valide RG-1.13 (LCR => au moins un RIB persiste) sur le PATCH scalaires, les RIB
 * doivent donc exister en base AVANT (sinon 422 « Au moins un RIB est obligatoire
 * pour le type de reglement LCR »). Deux appels distincts (mode strict RG-1.28 :
 * il n'existe pas d'endpoint /accounting, cf. recon back).
 */
async function submitAccounting(): Promise<void> {
    if (clientId.value === null || tabSubmitting.value) return
    tabSubmitting.value = true
    accountingErrors.clearErrors()
    try {
        // 1) POST/PATCH des RIB d'abord — UNIQUEMENT sous LCR (erreurs inline par
        // ligne, tous les blocs tentes). Le back exige >=1 RIB persiste pour valider
        // une LCR a l'etape 2. Hors-LCR (ERP-121), une saisie RIB eventuellement
        // restee dans le brouillon est masquee et n'est PAS persistee (pas de RIB
        // orphelin sur un client en virement).
        // On ne saute une amorce neuve vide QUE s'il reste un autre RIB soumettable :
        // sinon (LCR sans aucun RIB rempli) on la soumet -> 422 NotBlank inline.
        if (isRibRequired.value) {
            const hasSubmittableRib = ribs.value.some(r => r.id !== null || !isRibBlank(r))
            const ribHasError = await submitRows(
                ribs.value,
                ribErrors,
                async (rib) => {
                    // Payload partage avec l'edition (buildRibPayload, ERP-119).
                    const body = buildRibPayload(rib)
                    if (rib.id === null) {
                        const created = await api.post<{ id: number }>(
                            `/clients/${clientId.value}/ribs`,
                            body,
                            { headers: { Accept: 'application/ld+json' }, toast: false },
                        )
                        rib.id = created.id
                    }
                    else {
                        await api.patch(`/client_ribs/${rib.id}`, body, { toast: false })
                    }
                },
                error => toast.error({ title: t('commercial.clients.toast.error'), message: apiErrorMessage(error) }),
                // On ne saute une amorce neuve (id null) totalement vide que si un autre RIB
                // est soumettable. Un RIB existant vide est toujours soumis -> 422 NotBlank
                // inline (sinon la modif serait perdue en silence avec un faux toast succes).
                rib => hasSubmittableRib && rib.id === null && isRibBlank(rib),
            )
            if (ribHasError) return
        }

        // 2) PATCH des scalaires comptables (erreurs inline sur leurs champs).
        try {
            await api.patch(`/clients/${clientId.value}`, {
                siren: accounting.siren || null,
                accountNumber: accounting.accountNumber || null,
                tvaMode: accounting.tvaModeIri,
                nTva: accounting.nTva || null,
                paymentDelay: accounting.paymentDelayIri,
                paymentType: accounting.paymentTypeIri,
                bank: isBankRequired.value ? accounting.bankIri : null,
            }, { toast: false })
        }
        catch (error) {
            accountingErrors.handleApiError(error, { fallbackMessage: t('commercial.clients.toast.error') })
            return
        }

        if (completeTab('accounting')) return
        toast.success({ title: t('commercial.clients.toast.updateSuccess') })
    }
    finally {
        tabSubmitting.value = false
    }
}

// ── Modal de confirmation generique ─────────────────────────────────────────
const confirmModal = reactive({
    open: false,
    message: '',
    action: null as null | (() => void),
})

function askConfirm(message: string, action: () => void): void {
    confirmModal.message = message
    confirmModal.action = action
    confirmModal.open = true
}

function runConfirm(): void {
    confirmModal.action?.()
    confirmModal.action = null
    confirmModal.open = false
}

// ── Types de reponse API ────────────────────────────────────────────────────
interface ClientResponse {
    id: number
    companyName: string | null
}

interface ContactResponse {
    '@id'?: string
    id: number
}

onMounted(() => {
    // Echec du chargement des referentiels non bloquant : les selects restent vides.
    referentials.loadCommon().catch(() => {})
    // Pas d'amorce de RIB ici : un bloc vide n'apparait que si LCR est choisi
    // (cf. onPaymentTypeChange).
})
</script>
