<script setup>
/*
 * MelissaConfigSidebar — Sidebar de navegacao das configuracoes Melissa.
 *
 * Componente standalone que renderiza o accordion de grupos + items
 * e navega via router.push pra /melissa/<slug>. Usado em:
 * - MelissaLayout (renderiza globalmente em qualquer rota de config,
 *   ao lado das paginas nativas)
 * - MelissaConfiguracoes (substitui o aside inline antigo)
 *
 * O catalogo vive em ./composables/melissaConfigGrupos.js — fonte unica.
 */
import { ref, computed, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import {
    MELISSA_CONFIG_GRUPOS,
    findMelissaConfigItem
} from './composables/melissaConfigGrupos.js';

const router = useRouter();
const route = useRoute();

// Slug ativo lido direto da rota — sempre em sync com o que esta sendo
// renderizado no main pelo MelissaLayout
const activeSlug = computed(() => String(route.params?.secao || ''));

// Accordion: comeca com o grupo do item ativo aberto
const grupoDoSlug = (slug) => findMelissaConfigItem(slug)?.grupo?.key || null;
const openGroups = ref([grupoDoSlug(activeSlug.value)].filter(Boolean));

// Sincroniza accordion quando troca de pagina
watch(activeSlug, (slug) => {
    const gk = grupoDoSlug(slug);
    if (gk && !openGroups.value.includes(gk)) {
        openGroups.value = [...openGroups.value, gk];
    }
});

function selecionar(item) {
    if (route.params?.secao === item.key) return; // ja esta nesta pagina
    router.push({ name: 'Melissa', params: { secao: item.key } });
}

function isActive(itemKey) {
    return activeSlug.value === itemKey;
}
</script>

<template>
    <aside class="mcs-aside">
        <div class="mcs-aside__head">
            <i class="pi pi-cog mcs-aside__icon" />
            <div class="mcs-aside__title-text">
                <div class="mcs-aside__title">Configurações</div>
                <div class="mcs-aside__sub">Layout, conta, agenda e muito mais</div>
            </div>
        </div>
        <div class="mcs-aside__body">
            <Accordion v-model:value="openGroups" multiple class="mcs-accordion">
                <AccordionPanel
                    v-for="g in MELISSA_CONFIG_GRUPOS"
                    :key="g.key"
                    :value="g.key"
                >
                    <AccordionHeader>
                        <div class="mcs-grp-head">
                            <i :class="g.icon" class="mcs-grp-icon" />
                            <div class="mcs-grp-text">
                                <span class="mcs-grp-label">{{ g.label }}</span>
                                <span class="mcs-grp-desc">{{ g.desc }}</span>
                            </div>
                            <span class="mcs-grp-badge">{{ g.items.length }}</span>
                        </div>
                    </AccordionHeader>
                    <AccordionContent>
                        <div class="mcs-nav-list">
                            <button
                                v-for="s in g.items"
                                :key="s.key"
                                type="button"
                                class="mcs-nav-item"
                                :class="{ 'is-active': isActive(s.key) }"
                                @click="selecionar(s)"
                            >
                                <i :class="s.icon" class="mcs-nav-item__icon" />
                                <div class="mcs-nav-item__text">
                                    <span class="mcs-nav-item__label">{{ s.label }}</span>
                                    <span class="mcs-nav-item__desc">{{ s.desc }}</span>
                                </div>
                            </button>
                        </div>
                    </AccordionContent>
                </AccordionPanel>
            </Accordion>
        </div>
    </aside>
</template>

<style scoped>
.mcs-aside {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--m-bg-medium);
    border: 1px solid var(--m-border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(32px) saturate(160%);
    -webkit-backdrop-filter: blur(32px) saturate(160%);
    color: var(--m-text);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.mcs-aside__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--m-border);
    flex-shrink: 0;
}
.mcs-aside__icon {
    color: var(--p-primary-color);
    font-size: 1.1rem;
    flex-shrink: 0;
}
.mcs-aside__title-text {
    flex: 1;
    min-width: 0;
}
.mcs-aside__title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--m-text);
    line-height: 1.2;
}
.mcs-aside__sub {
    font-size: 0.7rem;
    color: var(--m-text-muted);
    margin-top: 2px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mcs-aside__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--m-border-strong) transparent;
}
.mcs-aside__body::-webkit-scrollbar { width: 5px; }
.mcs-aside__body::-webkit-scrollbar-thumb {
    background: var(--m-border-strong);
    border-radius: 3px;
}

/* Accordion (estilo Melissa) */
.mcs-accordion :deep(.p-accordion) {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mcs-accordion :deep(.p-accordionpanel) {
    border: none;
    background: transparent;
}
.mcs-accordion :deep(.p-accordionheader) {
    padding: 6px 8px;
    background: transparent;
    border: none;
    color: var(--m-text);
    border-radius: 8px;
}
.mcs-accordion :deep(.p-accordionheader:hover) {
    background: var(--m-bg-soft-hover);
}
.mcs-accordion :deep(.p-accordionheader-toggle-icon) {
    color: var(--m-text-muted);
    font-size: 0.72rem;
}
.mcs-accordion :deep(.p-accordioncontent),
.mcs-accordion :deep(.p-accordioncontent-content) {
    padding: 0;
    background: transparent;
    border: none;
}
.mcs-accordion :deep(.p-accordioncontent-content) {
    padding: 2px 0 6px;
}

/* Group head */
.mcs-grp-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
}
.mcs-grp-icon {
    width: 18px;
    text-align: center;
    color: var(--p-primary-color);
    font-size: 0.95rem;
    flex-shrink: 0;
}
.mcs-grp-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-align: left;
}
.mcs-grp-label {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--m-text);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mcs-grp-desc {
    font-size: 0.7rem;
    color: var(--m-text-muted);
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.mcs-grp-badge {
    flex-shrink: 0;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--m-bg-soft);
    border: 1px solid var(--m-border);
    color: var(--m-text-muted);
    font-size: 0.66rem;
    font-weight: 700;
    border-radius: 999px;
}

/* Items */
.mcs-nav-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 24px;
    padding-right: 4px;
}
.mcs-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--m-text);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    width: 100%;
    min-height: 44px;
}
.mcs-nav-item:hover {
    background: color-mix(in srgb, var(--p-primary-color) 12%, transparent);
    color: var(--p-primary-color);
}
.mcs-nav-item:hover .mcs-nav-item__icon { color: var(--p-primary-color); }
.mcs-nav-item.is-active {
    background: color-mix(in srgb, var(--p-primary-color) 16%, transparent);
    color: var(--p-primary-color);
}
.mcs-nav-item.is-active .mcs-nav-item__icon { color: var(--p-primary-color); }
.mcs-nav-item__icon {
    width: 16px;
    text-align: center;
    color: var(--m-text-muted);
    font-size: 0.85rem;
    flex-shrink: 0;
}
.mcs-nav-item__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.mcs-nav-item__label {
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mcs-nav-item__desc {
    font-size: 0.7rem;
    color: var(--m-text-muted);
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.mcs-nav-item:hover .mcs-nav-item__desc,
.mcs-nav-item.is-active .mcs-nav-item__desc {
    color: color-mix(in srgb, var(--p-primary-color) 70%, var(--m-text-muted));
}
</style>
