<script setup>
/*
 * MelissaConfigList — Lista flat das paginas de config Melissa.
 *
 * Renderiza inline (sem overlay/popover/teleport). Pra usar como
 * "outro estado" da sidebar — alterna com os cards contextuais via
 * v-if no parent. Click num item navega pra /melissa/<slug> e
 * emite 'select' (parent fecha sua propria lista).
 *
 * Lista flat agrupada por section header (uppercase pequeno) — todos
 * os itens visiveis ao mesmo tempo, sem accordion.
 *
 * Uso:
 *   const cfgOpen = ref(false);
 *   <button @click="cfgOpen = !cfgOpen">Configurações</button>
 *   <div v-if="cfgOpen"><MelissaConfigList @select="cfgOpen = false" /></div>
 *   <div v-else>...cards...</div>
 */
import { computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { MELISSA_CONFIG_GRUPOS } from './composables/melissaConfigGrupos.js';

const emit = defineEmits(['select']);
const router = useRouter();
const route = useRoute();

const activeSlug = computed(() => String(route.params?.secao || ''));

function selecionar(item) {
    emit('select', item);
    if (route.params?.secao !== item.key) {
        router.push({ name: 'Melissa', params: { secao: item.key } });
    }
}

const isActive = (key) => activeSlug.value === key;
</script>

<template>
    <div class="mcl">
        <template v-for="g in MELISSA_CONFIG_GRUPOS" :key="g.key">
            <div class="mcl__section">{{ g.label }}</div>
            <button
                v-for="item in g.items"
                :key="item.key"
                type="button"
                class="mcl__item"
                :class="{ 'is-active': isActive(item.key) }"
                @click="selecionar(item)"
            >
                <i :class="item.icon" class="mcl__item-icon" />
                <span class="mcl__item-label">{{ item.label }}</span>
            </button>
        </template>
    </div>
</template>

<style scoped>
.mcl {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.mcl__section {
    padding: 12px 8px 4px;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--m-text-muted);
}
.mcl__section:first-child { padding-top: 0; }
.mcl__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: 7px;
    color: var(--m-text);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 0.84rem;
    transition: background-color 120ms ease, color 120ms ease;
}
.mcl__item:hover {
    background: color-mix(in srgb, var(--p-primary-color) 12%, transparent);
    color: var(--p-primary-color);
}
.mcl__item:hover .mcl__item-icon { color: var(--p-primary-color); }
.mcl__item.is-active {
    background: color-mix(in srgb, var(--p-primary-color) 16%, transparent);
    color: var(--p-primary-color);
    font-weight: 600;
}
.mcl__item.is-active .mcl__item-icon { color: var(--p-primary-color); }
.mcl__item-icon {
    width: 16px;
    text-align: center;
    color: var(--m-text-muted);
    font-size: 0.85rem;
    flex-shrink: 0;
}
.mcl__item-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
