agenciapsilmno/src/views/pages/saas/SaasDocumentTemplatesPage.vue

<!--
|--------------------------------------------------------------------------
| Agência PSI
|--------------------------------------------------------------------------
| Criado e desenvolvido por Leonardo Nohama
|
| Tecnologia aplicada à escuta.
| Estrutura para o cuidado.
|
| Arquivo: src/views/pages/saas/SaasDocumentTemplatesPage.vue
| Data: 2026
| Local: São Carlos/SP — Brasil
|--------------------------------------------------------------------------
| © 2026 — Todos os direitos reservados
|--------------------------------------------------------------------------
| Gestao de templates globais de documentos pelo SaaS admin.
| Templates globais (is_global = true) ficam disponiveis para todos os tenants.
|--------------------------------------------------------------------------
-->
<script setup>
import { ref, computed, onMounted } from 'vue'
import { supabase } from '@/lib/supabase/client'
import { useToast } from 'primevue/usetoast'
import { useConfirm } from 'primevue/useconfirm'
import { extractVariablesFromHtml, TEMPLATE_VARIABLES } from '@/services/DocumentTemplates.service'
import JoditEmailEditor from '@/components/ui/JoditEmailEditor.vue'

const toast = useToast()
const confirm = useConfirm()

// ── State ───────────────────────────────────────────────────

const loading = ref(false)
const rows = ref([])
const q = ref('')

const showDlg = ref(false)
const saving = ref(false)
const isEdit = ref(false)
const activeTab = ref('editor')

const TIPOS = [
    { value: 'declaracao_comparecimento', label: 'Declaração de comparecimento' },
    { value: 'atestado_psicologico', label: 'Atestado psicológico' },
    { value: 'relatorio_acompanhamento', label: 'Relatório de acompanhamento' },
    { value: 'recibo_pagamento', label: 'Recibo de pagamento' },
    { value: 'termo_consentimento', label: 'Termo de consentimento (TCLE)' },
    { value: 'encaminhamento', label: 'Encaminhamento' },
    { value: 'contrato_servicos', label: 'Contrato de prestação de serviços' },
    { value: 'tcle', label: 'TCLE' },
    { value: 'autorizacao_menor', label: 'Autorização para menor' },
    { value: 'laudo_psicologico', label: 'Laudo psicológico' },
    { value: 'parecer_psicologico', label: 'Parecer psicológico' },
    { value: 'termo_sigilo', label: 'Termo de sigilo' },
    { value: 'declaracao_inicio_tratamento', label: 'Declaração de início de tratamento' },
    { value: 'termo_alta', label: 'Termo de alta terapêutica' },
    { value: 'tcle_online', label: 'Consentimento atendimento online' },
    { value: 'outro', label: 'Outro' }
]

const form = ref(resetForm())

function resetForm() {
    return {
        id: null,
        nome_template: '',
        tipo: 'outro',
        descricao: '',
        corpo_html: '',
        cabecalho_html: '',
        rodape_html: '',
        variaveis: [],
        logo_url: '',
        ativo: true
    }
}

// ── Filtro ───────────────────────────────────────────────────

const filteredRows = computed(() => {
    const term = String(q.value || '').trim().toLowerCase()
    if (!term) return rows.value
    return rows.value.filter(r =>
        [r.nome_template, r.tipo, r.descricao].some(s =>
            String(s || '').toLowerCase().includes(term)
        )
    )
})

// ── Fetch ───────────────────────────────────────────────────

async function fetchAll() {
    loading.value = true
    try {
        const { data, error } = await supabase
            .from('document_templates')
            .select('*')
            .eq('is_global', true)
            .order('nome_template', { ascending: true })

        if (error) throw error
        rows.value = data || []
    } catch (e) {
        toast.add({ severity: 'error', summary: 'Erro', detail: e?.message })
    } finally {
        loading.value = false
    }
}

onMounted(fetchAll)

// ── Dialog ──────────────────────────────────────────────────

function openCreate() {
    form.value = resetForm()
    isEdit.value = false
    activeTab.value = 'editor'
    showDlg.value = true
}

function openEdit(row) {
    form.value = {
        id: row.id,
        nome_template: row.nome_template || '',
        tipo: row.tipo || 'outro',
        descricao: row.descricao || '',
        corpo_html: row.corpo_html || '',
        cabecalho_html: row.cabecalho_html || '',
        rodape_html: row.rodape_html || '',
        variaveis: row.variaveis || [],
        logo_url: row.logo_url || '',
        ativo: row.ativo ?? true
    }
    isEdit.value = true
    activeTab.value = 'editor'
    showDlg.value = true
}

// ── Save ────────────────────────────────────────────────────

async function save() {
    const nome = String(form.value.nome_template || '').trim()
    if (!nome) {
        toast.add({ severity: 'warn', summary: 'Atenção', detail: 'Nome do template é obrigatório.' })
        return
    }

    saving.value = true
    try {
        // Auto-extrair variaveis do HTML
        const allHtml = (form.value.corpo_html || '') + (form.value.cabecalho_html || '') + (form.value.rodape_html || '')
        const vars = extractVariablesFromHtml(allHtml)

        const payload = {
            nome_template: nome,
            tipo: form.value.tipo || 'outro',
            descricao: form.value.descricao || null,
            corpo_html: form.value.corpo_html || '',
            cabecalho_html: form.value.cabecalho_html || null,
            rodape_html: form.value.rodape_html || null,
            variaveis: vars,
            logo_url: form.value.logo_url || null,
            is_global: true,
            ativo: form.value.ativo,
            tenant_id: null,
            owner_id: null
        }

        if (isEdit.value) {
            const { error } = await supabase
                .from('document_templates')
                .update(payload)
                .eq('id', form.value.id)

            if (error) throw error
            toast.add({ severity: 'success', summary: 'Salvo', detail: nome, life: 2000 })
        } else {
            const { error } = await supabase
                .from('document_templates')
                .insert(payload)

            if (error) throw error
            toast.add({ severity: 'success', summary: 'Criado', detail: nome, life: 2000 })
        }

        showDlg.value = false
        fetchAll()
    } catch (e) {
        toast.add({ severity: 'error', summary: 'Erro', detail: e?.message })
    } finally {
        saving.value = false
    }
}

// ── Toggle ativo ────────────────────────────────────────────

async function toggleAtivo(row) {
    try {
        const { error } = await supabase
            .from('document_templates')
            .update({ ativo: !row.ativo })
            .eq('id', row.id)

        if (error) throw error
        row.ativo = !row.ativo
        toast.add({ severity: 'info', summary: row.ativo ? 'Ativado' : 'Desativado', detail: row.nome_template, life: 2000 })
    } catch (e) {
        toast.add({ severity: 'error', summary: 'Erro', detail: e?.message })
    }
}

// ── Delete ──────────────────────────────────────────────────

function onDelete(row) {
    confirm.require({
        message: `Excluir permanentemente "${row.nome_template}"? Essa ação não pode ser desfeita.`,
        header: 'Excluir template global',
        icon: 'pi pi-exclamation-triangle',
        acceptClass: 'p-button-danger',
        accept: async () => {
            try {
                const { error } = await supabase
                    .from('document_templates')
                    .delete()
                    .eq('id', row.id)

                if (error) throw error
                rows.value = rows.value.filter(r => r.id !== row.id)
                toast.add({ severity: 'success', summary: 'Excluído', life: 2000 })
            } catch (e) {
                toast.add({ severity: 'error', summary: 'Erro', detail: e?.message })
            }
        }
    })
}

// ── Helpers ─────────────────────────────────────────────────

function tipoLabel(tipo) {
    return TIPOS.find(t => t.value === tipo)?.label || tipo
}

// ── Preview com dados ficticios ─────────────────────────────

const SAMPLE = {
    paciente_nome: 'Maria Silva Santos',
    paciente_cpf: '123.456.789-00',
    paciente_data_nascimento: '15/03/1990',
    data_sessao: '28/03/2026',
    hora_inicio: '14:00',
    hora_fim: '14:50',
    terapeuta_nome: 'Dr. João Oliveira',
    terapeuta_crp: '06/12345',
    clinica_nome: 'Clínica Exemplo',
    clinica_endereco: 'Av. São Carlos, 500, Centro, São Carlos/SP',
    clinica_telefone: '(16) 3333-1111',
    clinica_cnpj: '12.345.678/0001-00',
    valor: 'R$ 200,00',
    valor_extenso: 'duzentos reais',
    forma_pagamento: 'PIX',
    data_atual: new Date().toLocaleDateString('pt-BR'),
    data_atual_extenso: '29 de março de 2026',
    cidade_estado: 'São Carlos/SP'
}

function previewReplace(html) {
    return String(html || '').replace(/\{\{(\w+)\}\}/g, (m, k) =>
        SAMPLE[k] !== undefined
            ? `<span style="background:#fef3c7;padding:1px 4px;border-radius:3px;">${SAMPLE[k]}</span>`
            : `<span style="background:#fee2e2;padding:1px 4px;border-radius:3px;">${m}</span>`
    )
}

// ── Variaveis agrupadas ─────────────────────────────────────

const variablesGrouped = computed(() => {
    const groups = {}
    for (const v of TEMPLATE_VARIABLES) {
        if (!groups[v.grupo]) groups[v.grupo] = []
        groups[v.grupo].push(v)
    }
    return groups
})

const cursorField = ref('corpo_html')
const editorCabecalho = ref(null)
const editorCorpo = ref(null)
const editorRodape = ref(null)

function insertVariable(key) {
    const tag = `{{${key}}}`
    const editorMap = {
        cabecalho_html: editorCabecalho,
        corpo_html: editorCorpo,
        rodape_html: editorRodape
    }
    const editorRef = editorMap[cursorField.value]
    if (editorRef?.value?.insertHTML) {
        editorRef.value.insertHTML(tag)
    } else {
        form.value[cursorField.value] = (form.value[cursorField.value] || '') + tag
    }
}
</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-file-edit" /></div>
            <div class="min-w-0 flex-1">
                <div class="cfg-subheader__title">Templates de Documentos</div>
                <div class="cfg-subheader__sub">Templates globais disponíveis para todos os tenants (is_global = true).</div>
            </div>
            <div class="flex items-center gap-2 shrink-0">
                <Button label="Novo template" icon="pi pi-plus" size="small" @click="openCreate" />
                <Button icon="pi pi-refresh" severity="secondary" text :loading="loading" v-tooltip.bottom="'Recarregar'" @click="fetchAll" />
            </div>
        </div>

        <!-- Busca -->
        <div class="mb-4">
            <IconField>
                <InputIcon class="pi pi-search" />
                <InputText v-model="q" placeholder="Buscar template..." class="!w-[300px]" size="small" />
            </IconField>
        </div>

        <!-- Loading -->
        <div v-if="loading" class="flex items-center justify-center py-16">
            <i class="pi pi-spinner pi-spin text-2xl text-[var(--text-color-secondary)]" />
        </div>

        <!-- Table -->
        <DataTable
            v-else
            :value="filteredRows"
            stripedRows
            responsiveLayout="scroll"
            class="text-sm"
            :rowClass="(r) => !r.ativo ? 'opacity-50' : ''"
        >
            <template #empty>
                <div class="text-center py-8 text-[var(--text-color-secondary)]">Nenhum template global cadastrado.</div>
            </template>

            <Column field="nome_template" header="Nome" sortable style="min-width: 200px">
                <template #body="{ data }">
                    <div class="flex items-center gap-2">
                        <i class="pi pi-file text-primary" />
                        <span class="font-medium">{{ data.nome_template }}</span>
                    </div>
                </template>
            </Column>

            <Column field="tipo" header="Tipo" sortable style="min-width: 180px">
                <template #body="{ data }">
                    <Tag :value="tipoLabel(data.tipo)" severity="info" class="text-xs" />
                </template>
            </Column>

            <Column field="variaveis" header="Variáveis" style="min-width: 100px">
                <template #body="{ data }">
                    <span class="text-xs text-[var(--text-color-secondary)]">{{ data.variaveis?.length || 0 }}</span>
                </template>
            </Column>

            <Column field="ativo" header="Status" style="width: 100px" bodyClass="text-center">
                <template #body="{ data }">
                    <Tag
                        :value="data.ativo ? 'Ativo' : 'Inativo'"
                        :severity="data.ativo ? 'success' : 'danger'"
                        class="text-xs cursor-pointer"
                        @click="toggleAtivo(data)"
                    />
                </template>
            </Column>

            <Column header="Ações" style="width: 120px" bodyClass="text-center">
                <template #body="{ data }">
                    <div class="flex items-center justify-center gap-1">
                        <Button icon="pi pi-pencil" text rounded size="small" @click="openEdit(data)" v-tooltip.top="'Editar'" />
                        <Button icon="pi pi-trash" text rounded size="small" severity="danger" @click="onDelete(data)" v-tooltip.top="'Excluir'" />
                    </div>
                </template>
            </Column>
        </DataTable>

        <!-- Dialog Create/Edit -->
        <Dialog
            v-model:visible="showDlg"
            modal
            maximizable
            :draggable="false"
            :closable="!saving"
            :dismissableMask="!saving"
            class="w-[65rem]"
            :breakpoints="{ '1199px': '95vw', '768px': '98vw' }"
            :pt="{
                header:  { class: '!p-4 !rounded-t-xl border-b border-[var(--surface-border)]' },
                content: { class: '!p-4' },
                footer:  { class: '!p-3 !rounded-b-xl border-t border-[var(--surface-border)]' }
            }"
            pt:mask:class="backdrop-blur-xs"
        >
            <template #header>
                <div class="flex items-center gap-3">
                    <span class="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10">
                        <i class="pi pi-file-edit text-primary" />
                    </span>
                    <div>
                        <div class="text-base font-semibold">{{ isEdit ? 'Editar' : 'Novo' }} template global</div>
                        <div class="text-xs text-[var(--text-color-secondary)]">Visível para todos os tenants</div>
                    </div>
                </div>
            </template>

            <div class="flex flex-col gap-4">
                <!-- Nome e tipo -->
                <div class="grid grid-cols-1 sm:grid-cols-[1fr_200px] gap-3">
                    <div class="flex flex-col gap-1">
                        <label class="text-xs font-medium text-[var(--text-color-secondary)]">Nome do template</label>
                        <InputText v-model="form.nome_template" placeholder="Ex: Declaração de comparecimento" class="w-full" />
                    </div>
                    <div class="flex flex-col gap-1">
                        <label class="text-xs font-medium text-[var(--text-color-secondary)]">Tipo</label>
                        <Select v-model="form.tipo" :options="TIPOS" optionLabel="label" optionValue="value" class="w-full" />
                    </div>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-[1fr_100px] gap-3">
                    <div class="flex flex-col gap-1">
                        <label class="text-xs font-medium text-[var(--text-color-secondary)]">Descrição</label>
                        <InputText v-model="form.descricao" placeholder="Breve descrição" class="w-full" />
                    </div>
                    <div class="flex flex-col gap-1">
                        <label class="text-xs font-medium text-[var(--text-color-secondary)]">Status</label>
                        <Select v-model="form.ativo" :options="[{ value: true, label: 'Ativo' }, { value: false, label: 'Inativo' }]" optionLabel="label" optionValue="value" class="w-full" />
                    </div>
                </div>

                <!-- Tabs -->
                <div class="flex items-center gap-1 border-b border-[var(--surface-border)]">
                    <button
                        class="px-3 py-2 text-sm font-medium border-b-2 transition-colors"
                        :class="activeTab === 'editor' ? 'border-primary text-primary' : 'border-transparent text-[var(--text-color-secondary)]'"
                        @click="activeTab = 'editor'"
                    >Editor</button>
                    <button
                        class="px-3 py-2 text-sm font-medium border-b-2 transition-colors"
                        :class="activeTab === 'preview' ? 'border-primary text-primary' : 'border-transparent text-[var(--text-color-secondary)]'"
                        @click="activeTab = 'preview'"
                    >Preview</button>
                </div>

                <!-- Editor -->
                <div v-show="activeTab === 'editor'" class="flex flex-col lg:flex-row gap-4">
                    <div class="flex-1 flex flex-col gap-3">
                        <div class="flex flex-col gap-1" @focusin="cursorField = 'cabecalho_html'">
                            <label class="text-xs font-medium text-[var(--text-color-secondary)]">Cabeçalho</label>
                            <JoditEmailEditor ref="editorCabecalho" v-model="form.cabecalho_html" :minHeight="120" layoutButtons :logoUrl="form.logo_url" />
                        </div>
                        <div class="flex flex-col gap-1" @focusin="cursorField = 'corpo_html'">
                            <label class="text-xs font-medium text-[var(--text-color-secondary)]">Corpo do documento</label>
                            <JoditEmailEditor ref="editorCorpo" v-model="form.corpo_html" :minHeight="350" />
                        </div>
                        <div class="flex flex-col gap-1" @focusin="cursorField = 'rodape_html'">
                            <label class="text-xs font-medium text-[var(--text-color-secondary)]">Rodapé</label>
                            <JoditEmailEditor ref="editorRodape" v-model="form.rodape_html" :minHeight="120" layoutButtons :logoUrl="form.logo_url" />
                        </div>
                        <div class="flex flex-col gap-1">
                            <label class="text-xs font-medium text-[var(--text-color-secondary)]">URL do logo (opcional)</label>
                            <InputText v-model="form.logo_url" placeholder="https://..." class="w-full" />
                        </div>
                    </div>

                    <!-- Painel de variaveis -->
                    <div class="w-full lg:w-[200px] flex-shrink-0">
                        <div class="sticky top-0">
                            <div class="text-xs font-semibold uppercase tracking-wider text-[var(--text-color-secondary)] mb-1">Variáveis</div>
                            <div class="text-[0.6rem] text-[var(--text-color-secondary)] mb-2">Clique para inserir</div>
                            <div class="flex flex-col gap-2.5 max-h-[500px] overflow-y-auto pr-1">
                                <div v-for="(vars, grupo) in variablesGrouped" :key="grupo">
                                    <div class="text-[0.6rem] font-semibold uppercase tracking-wider text-[var(--text-color-secondary)] mb-0.5">{{ grupo }}</div>
                                    <div class="flex flex-col">
                                        <button
                                            v-for="v in vars"
                                            :key="v.key"
                                            class="text-left text-xs px-1.5 py-0.5 rounded hover:bg-primary/10 hover:text-primary transition-colors truncate"
                                            @click="insertVariable(v.key)"
                                        >
                                            {{ v.label }}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Preview -->
                <div v-show="activeTab === 'preview'" class="border border-[var(--surface-border)] rounded-lg bg-white overflow-hidden">
                    <div class="p-6 text-black" style="font-family: 'Segoe UI', Arial, sans-serif; font-size: 12pt; line-height: 1.6;">
                        <div v-if="form.cabecalho_html" class="text-center mb-4 pb-3 border-b border-gray-300" v-html="previewReplace(form.cabecalho_html)" />
                        <div class="min-h-[300px]" v-html="previewReplace(form.corpo_html)" />
                        <div v-if="form.rodape_html" class="mt-8 pt-3 border-t border-gray-300 text-center text-[10pt] text-gray-500" v-html="previewReplace(form.rodape_html)" />
                    </div>
                </div>
            </div>

            <template #footer>
                <div class="flex items-center justify-end gap-2">
                    <Button label="Cancelar" text @click="showDlg = false" :disabled="saving" />
                    <Button :label="isEdit ? 'Salvar' : 'Criar'" icon="pi pi-check" :loading="saving" @click="save" />
                </div>
            </template>
        </Dialog>

        <ConfirmDialog />
    </div>
</template>