<template>
    <!--
        Onglets « Fournisseurs » / « Clients » de la fiche produit — HORS PERIMETRE
        V0 (HP-M6-01, RG-6.10) : ils dependent d'un module Contrat inexistant.
        Rendu en placeholder « en cours de développement » (meme composant que les
        onglets non-dev des fiches M1→M4). AUCUN appel API, AUCUN champ saisissable.

        Visibilite conditionnee par l'etat du produit (cf. spec C3, « Aucun » = OTHER) :
        - « Fournisseurs » : visible si l'etat contient Achat (PURCHASE) ou Aucun (OTHER) ;
        - « Clients »      : visible si l'etat contient Vendu (SALE) ou Aucun (OTHER).
        Si aucun onglet n'est applicable (etat vide), rien n'est rendu.
    -->
    <MalioTabList v-if="tabs.length" v-model="activeTab" :tabs="tabs" class="mt-[60px]">
        <template #suppliers><ComingSoonPlaceholder :title="t('admin.products.tab.placeholder')" /></template>
        <template #clients><ComingSoonPlaceholder :title="t('admin.products.tab.placeholder')" /></template>
    </MalioTabList>
</template>

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

const props = defineProps<{
    /** Etats du produit (codes enum PURCHASE / SALE / OTHER) pilotant la visibilite. */
    states: string[]
}>()

const { t } = useI18n()

// RG (spec C3) : « Fournisseurs » si Achat ou Aucun ; « Clients » si Vendu ou Aucun.
const showSuppliers = computed(() => props.states.includes('PURCHASE') || props.states.includes('OTHER'))
const showClients = computed(() => props.states.includes('SALE') || props.states.includes('OTHER'))

// Icone (Iconify) par onglet, alignee sur la convention des fiches existantes.
const tabs = computed(() => {
    const list: { key: string, label: string, icon: string }[] = []
    if (showSuppliers.value) {
        list.push({ key: 'suppliers', label: t('admin.products.tab.suppliers'), icon: 'mdi:truck-outline' })
    }
    if (showClients.value) {
        list.push({ key: 'clients', label: t('admin.products.tab.clients'), icon: 'mdi:account-group-outline' })
    }
    return list
})

const activeTab = ref('suppliers')

// Si l'onglet actif disparait suite a un changement d'etat, retombe sur le premier
// onglet encore disponible (evite un onglet actif fantome).
watch(tabs, (list) => {
    if (list.length && !list.some(tab => tab.key === activeTab.value)) {
        activeTab.value = list[0].key
    }
}, { immediate: true })
</script>
