<template>
    <MalioSiteSelector
        :sites="mappedSites"
        :model-value="currentSite ? String(currentSite.id) : undefined"
        :group-class="groupClass"
        :tile-class="tileClass"
        :label-class="labelClass"
        :aria-label="t('sites.selector.ariaGroupLabel')"
        @change="onChange"
    />
</template>

<script setup lang="ts">
const { t } = useI18n()
const { currentSite, availableSites, syncFromAuth, switchSite } = useCurrentSite()
const auth = useAuthStore()

// Hydratation initiale + watcher : garde le state aligne sur auth.user
// meme si un autre composant modifie auth.user.currentSite (ex: switch
// depuis un autre onglet via /api/me/current-site, ou refresh du token).
// Le rollback de switchSite restaure AUSSI auth.user.currentSite (voir
// useCurrentSite::switchSite) pour eviter tout cycle watchEffect -> sync
// qui ecraserait l'etat local apres une erreur PATCH.
watchEffect(() => {
    void auth.user?.currentSite
    void auth.user?.sites
    syncFromAuth()
})

// Conversion id number -> string : l'API de MalioSiteSelector (v1.4.0)
// travaille en string alors que notre type metier Site utilise un int
// (ID Doctrine). On reconvertit dans onChange.
const mappedSites = computed(() =>
    availableSites.value.map(site => ({
        id: String(site.id),
        name: site.name,
        color: site.color,
    })),
)

// Note de rendu : MalioSiteSelector v1.4.0 utilise UNE SEULE `activeColor`
// (couleur du site courant) comme fond pour TOUS les tiles. Les inactifs
// sont differencies uniquement par `opacity: 0.4`. Le texte est TOUJOURS
// blanc (conforme maquette Figma) — charge aux admins de choisir des
// couleurs de site suffisamment foncees pour garantir la lisibilite.
// On surcharge `labelClass` uniquement pour imposer la taille 24px
// (Figma), le reste des attributs tex (blanc, bold, uppercase, tracking)
// vient du default Malio via twMerge.

// Classes Tailwind passees a MalioSiteSelector via twMerge :
//  - groupClass : hauteur fixe 72px (spec Figma) + scroll horizontal si
//    debordement de 4+ sites sur petits ecrans.
//  - tileClass : largeur minimale pour lisibilite + focus ring WCAG.
//  - labelClass : taille de texte 24px imposee par la maquette Figma.
//    Tailwind `text-2xl` = 1.5rem = 24px. Merge avec le default Malio
//    (`text-white font-bold uppercase tracking-wide`).
const groupClass = 'h-[72px] overflow-x-auto'
const tileClass = 'min-w-[200px] flex items-center justify-center focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2'
const labelClass = 'text-2xl'

async function onChange(site: { id: string; name: string; color: string }): Promise<void> {
    const target = availableSites.value.find(s => String(s.id) === site.id)
    if (!target) {
        // Divergence entre mappedSites et availableSites (peut arriver si
        // un refresh concurrent a vide la collection). On ignore mais on
        // trace en dev pour faciliter le debug.
        if (import.meta.dev) {
            // Utilise console.error (pas warn) car la convention projet
            // eslint n'autorise que error (no-console avec allow: ['error']).
            console.error(`[SiteSelector] Site inconnu emis par MalioSiteSelector : id=${site.id}`)
        }
        return
    }

    // Ignore les clics sur le site deja actif (pas de PATCH superflu).
    if (currentSite.value && currentSite.value.id === target.id) return

    try {
        await switchSite(target)
    } catch {
        // L'erreur est deja toastee par useApi ; le composable a rollback
        // le state local ET le store auth. Rien a faire ici au-dela de
        // silencer pour eviter une unhandledRejection dans la console.
    }
}
</script>
