<!--
|--------------------------------------------------------------------------
| Agência PSI
|--------------------------------------------------------------------------
| Criado e desenvolvido por Leonardo Nohama
|
| Tecnologia aplicada à escuta.
| Estrutura para o cuidado.
|
| Arquivo: src/views/pages/saas/SaasFaqPage.vue
| Data: 2026
| Local: São Carlos/SP — Brasil
|--------------------------------------------------------------------------
| © 2026 — Todos os direitos reservados
|--------------------------------------------------------------------------
-->
<script setup>
import { ref, computed, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router';
import { supabase } from '@/lib/supabase/client';
import { useDocsAdmin } from '@/composables/useDocsAdmin';

const router = useRouter();
const { requestEditDoc } = useDocsAdmin();

function editarDoc(docId) {
    requestEditDoc(docId);
    router.push('/saas/docs');
}

// ── Estado ────────────────────────────────────────────────────
const loading = ref(false);
const docs = ref([]); // docs com exibir_no_faq = true
const faqItens = ref([]); // todos os itens FAQ dos docs acima

const busca = ref('');
const catAtiva = ref(null); // categoria selecionada no sidebar

// Controla quais perguntas estão abertas { [itemId]: boolean }
const abertos = ref({});

// ── Load ──────────────────────────────────────────────────────
async function load() {
    loading.value = true;
    try {
        // Busca docs habilitados no FAQ
        const { data: docsData, error: docsErr } = await supabase.from('saas_docs').select('id, titulo, categoria, ordem, pagina_path').eq('ativo', true).eq('exibir_no_faq', true).order('categoria').order('ordem');
        if (docsErr) throw docsErr;

        docs.value = docsData || [];

        if (!docs.value.length) return;

        // Busca todos os itens FAQ desses docs
        const docIds = docs.value.map((d) => d.id);
        const { data: itensData, error: itensErr } = await supabase.from('saas_faq_itens').select('id, doc_id, pergunta, resposta, ordem').in('doc_id', docIds).eq('ativo', true).order('ordem');
        if (itensErr) throw itensErr;

        faqItens.value = itensData || [];
    } finally {
        loading.value = false;
    }
}

onMounted(load);

// ── Categorias disponíveis ────────────────────────────────────
const categorias = computed(() => {
    const set = new Set(docs.value.map((d) => d.categoria).filter(Boolean));
    return [...set].sort();
});

// ── Docs filtrados pela categoria ativa ───────────────────────
const docsFiltrados = computed(() => {
    if (!catAtiva.value) return docs.value;
    return docs.value.filter((d) => d.categoria === catAtiva.value);
});

// ── Itens de um doc, aplicando busca ─────────────────────────
function itensDo(docId) {
    const q = busca.value.trim().toLowerCase();
    return faqItens.value.filter((f) => {
        if (f.doc_id !== docId) return false;
        if (!q) return true;
        return f.pergunta.toLowerCase().includes(q) || (f.resposta || '').toLowerCase().includes(q);
    });
}

// ── Docs que têm resultado na busca ──────────────────────────
const docsComResultado = computed(() => {
    return docsFiltrados.value.filter((d) => itensDo(d.id).length > 0);
});

// Total de resultados para feedback
const totalResultados = computed(() => {
    if (!busca.value.trim()) return null;
    return docsComResultado.value.reduce((acc, d) => acc + itensDo(d.id).length, 0);
});

// ── Toggle pergunta ───────────────────────────────────────────
function toggle(id) {
    abertos.value[id] = !abertos.value[id];
}

// Abre todas as perguntas dos resultados quando há busca ativa
function expandirResultados() {
    docsComResultado.value.forEach((d) => {
        itensDo(d.id).forEach((item) => {
            abertos.value[item.id] = true;
        });
    });
}

// Observa busca: expande automaticamente quando tem busca
watch(busca, (val) => {
    if (val.trim()) expandirResultados();
});

// ── Selecionar categoria ──────────────────────────────────────
function selecionarCat(cat) {
    catAtiva.value = catAtiva.value === cat ? null : cat;
    busca.value = '';
    abertos.value = {};
}
</script>

<template>
    <div class="flex flex-col gap-4 p-4">
        <!-- Header -->
        <div class="cfg-subheader">
            <div class="cfg-subheader__icon"><i class="pi pi-comments" /></div>
            <div class="min-w-0 flex-1">
                <div class="cfg-subheader__title">Central de Ajuda</div>
                <div class="cfg-subheader__sub">Encontre respostas para as dúvidas mais comuns.</div>
            </div>
        </div>

        <!-- Busca -->
        <div class="rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-4">
            <IconField class="w-full">
                <InputIcon class="pi pi-search" />
                <InputText v-model="busca" placeholder="Buscar pergunta…" class="w-full" />
                <InputIcon v-if="busca" class="pi pi-times cursor-pointer" @click="busca = ''" />
            </IconField>
            <div v-if="totalResultados !== null" class="text-[0.85rem] text-[var(--text-color-secondary)] opacity-70 mt-1.5 ml-1">
                {{ totalResultados }} resultado{{ totalResultados !== 1 ? 's' : '' }} encontrado{{ totalResultados !== 1 ? 's' : '' }}
            </div>
        </div>
        <!-- Loading -->
        <div v-if="loading" class="flex justify-center py-16">
            <i class="pi pi-spinner pi-spin text-2xl opacity-30" />
        </div>

        <template v-else>
            <div class="flex gap-4 items-start flex-col sm:flex-row">
                <!-- Sidebar de categorias -->
                <aside v-if="categorias.length" class="w-full sm:w-48 shrink-0 sticky top-[calc(var(--layout-sticky-top,56px)+8rem)] flex flex-col sm:flex-col flex-row flex-wrap gap-1">
                    <div class="text-[1rem] font-bold uppercase tracking-wider text-[var(--text-color-secondary)] opacity-60 px-2 mb-1 hidden sm:block">Categorias</div>
                    <button
                        class="flex items-center w-full px-2.5 py-1.5 rounded-md text-[1rem] text-[var(--text-color-secondary)] bg-transparent border-none cursor-pointer text-left transition-colors hover:bg-[var(--surface-hover)] hover:text-[var(--text-color)]"
                        :class="{ 'bg-[color-mix(in_srgb,var(--primary-color)_10%,transparent)] text-[var(--primary-color)] font-semibold': !catAtiva }"
                        @click="selecionarCat(null)"
                    >
                        <i class="pi pi-th-large mr-2 opacity-60" />
                        Todas
                        <span class="ml-auto opacity-50 text-[1rem]">{{ faqItens.length }}</span>
                    </button>
                    <button
                        v-for="cat in categorias"
                        :key="cat"
                        class="flex items-center w-full px-2.5 py-1.5 rounded-md text-[1rem] text-[var(--text-color-secondary)] bg-transparent border-none cursor-pointer text-left transition-colors hover:bg-[var(--surface-hover)] hover:text-[var(--text-color)]"
                        :class="{ 'bg-[color-mix(in_srgb,var(--primary-color)_10%,transparent)] text-[var(--primary-color)] font-semibold': catAtiva === cat }"
                        @click="selecionarCat(cat)"
                    >
                        <i class="pi pi-tag mr-2 opacity-60" />
                        {{ cat }}
                        <span class="ml-auto opacity-50 text-[1rem]">
                            {{ faqItens.filter((f) => docs.find((d) => d.id === f.doc_id && d.categoria === cat)).length }}
                        </span>
                    </button>
                </aside>

                <!-- Conteúdo principal -->
                <div class="flex-1 min-w-0 flex flex-col gap-4">
                    <!-- Sem resultados -->
                    <div v-if="docsComResultado.length === 0" class="flex flex-col items-center py-12 text-center">
                        <i class="pi pi-search text-3xl opacity-20 mb-3" />
                        <div class="text-[var(--text-color-secondary)] text-[1rem]">Nenhuma pergunta encontrada.</div>
                        <button
                            v-if="busca || catAtiva"
                            class="text-[var(--primary-color)] text-[1rem] mt-2 underline"
                            @click="
                                busca = '';
                                catAtiva = null;
                                abertos = {};
                            "
                        >
                            Limpar filtros
                        </button>
                    </div>

                    <!-- Grupos de docs -->
                    <div v-for="doc in docsComResultado" :key="doc.id" class="rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] overflow-hidden">
                        <!-- Cabeçalho do grupo (doc) -->
                        <div class="group flex items-center gap-3 px-5 py-3.5 border-b border-[var(--surface-border)] bg-[var(--surface-ground)]">
                            <div class="w-8 h-8 rounded-md bg-[color-mix(in_srgb,var(--primary-color)_10%,transparent)] text-[var(--primary-color)] flex items-center justify-center shrink-0">
                                <i class="pi pi-file-edit" />
                            </div>
                            <div class="flex-1 min-w-0">
                                <div class="text-[1rem] font-semibold text-[var(--text-color)] leading-tight">{{ doc.titulo }}</div>
                                <div v-if="doc.categoria" class="text-[1rem] text-[var(--text-color-secondary)] opacity-60 mt-px">{{ doc.categoria }}</div>
                            </div>
                            <button
                                class="flex items-center justify-center w-7 h-7 rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] text-[var(--text-color-secondary)] cursor-pointer shrink-0 opacity-0 group-hover:opacity-100 transition-opacity hover:bg-[var(--surface-hover)] hover:text-[var(--primary-color)]"
                                v-tooltip.top="'Editar documento'"
                                @click="editarDoc(doc.id)"
                            >
                                <i class="pi pi-pencil" />
                            </button>
                        </div>

                        <!-- Itens FAQ do grupo -->
                        <div class="flex flex-col">
                            <div
                                v-for="item in itensDo(doc.id)"
                                :key="item.id"
                                class="border-b border-[var(--surface-border)] last:border-b-0 transition-colors"
                                :class="abertos[item.id] ? 'bg-[color-mix(in_srgb,var(--primary-color)_3%,transparent)]' : ''"
                            >
                                <button class="w-full flex items-center justify-between gap-4 px-5 py-3.5 bg-transparent border-none cursor-pointer text-left transition-colors hover:bg-[var(--surface-hover)]" @click="toggle(item.id)">
                                    <span class="text-[1rem] font-medium text-[var(--text-color)] leading-snug">{{ item.pergunta }}</span>
                                    <i class="pi shrink-0 opacity-40 transition-transform duration-200" :class="abertos[item.id] ? 'pi-chevron-up' : 'pi-chevron-down'" />
                                </button>
                                <Transition name="faq-expand">
                                    <div v-if="abertos[item.id] && item.resposta" class="px-5 pb-4 text-[1rem] text-[var(--text-color-secondary)] leading-relaxed break-words ql-content" v-html="item.resposta" />
                                </Transition>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </template>
    </div>
</template>

<style scoped>
/* Quill content */
.ql-content :deep(p) {
    margin: 0 0 0.5rem;
}
.ql-content :deep(p:last-child) {
    margin-bottom: 0;
}
.ql-content :deep(strong) {
    font-weight: 600;
    color: var(--text-color);
}
.ql-content :deep(em) {
    font-style: italic;
}
.ql-content :deep(ul),
.ql-content :deep(ol) {
    padding-left: 1.25rem;
    margin: 0.4rem 0;
}
.ql-content :deep(li) {
    margin-bottom: 0.2rem;
}
.ql-content :deep(a) {
    color: var(--primary-color);
    text-decoration: underline;
}
.ql-content :deep(blockquote) {
    border-left: 3px solid var(--surface-border);
    margin: 0.5rem 0;
    padding: 0.25rem 0.75rem;
    font-style: italic;
}

/* Animação expand */
.faq-expand-enter-active,
.faq-expand-leave-active {
    transition:
        opacity 0.2s ease,
        max-height 0.25s ease;
    max-height: 800px;
    overflow: hidden;
}
.faq-expand-enter-from,
.faq-expand-leave-to {
    opacity: 0;
    max-height: 0;
}
</style>
