<!--
|--------------------------------------------------------------------------
| Agência PSI
|--------------------------------------------------------------------------
| Criado e desenvolvido por Leonardo Nohama
|
| Tecnologia aplicada à escuta.
| Estrutura para o cuidado.
|
| Arquivo: src/views/pages/saas/SaasGlobalNoticesPage.vue
| Data: 2026
| Local: São Carlos/SP — Brasil
|--------------------------------------------------------------------------
| © 2026 — Todos os direitos reservados
|--------------------------------------------------------------------------
-->
<script setup>
import { ref, computed, onMounted } from 'vue';
import { useToast } from 'primevue/usetoast';
import { useConfirm } from 'primevue/useconfirm';
import { useRouter } from 'vue-router';
import { fetchAllNotices, createNotice, updateNotice, deleteNotice, toggleNoticeActive } from '@/features/notices/noticeService';

const toast = useToast();
const confirm = useConfirm();
const router = useRouter();

// ── Ajuda ─────────────────────────────────────────────────────
const showHelp = ref(false);

// ── Lista ─────────────────────────────────────────────────────
const notices = ref([]);
const loading = ref(false);

async function load() {
    loading.value = true;
    try {
        notices.value = await fetchAllNotices();
    } catch (e) {
        toast.add({ severity: 'error', summary: 'Erro', detail: e.message, life: 4000 });
    } finally {
        loading.value = false;
    }
}

// ── Dialog ────────────────────────────────────────────────────
const EMPTY = () => ({
    title: '',
    message: '',
    variant: 'info',
    roles: [],
    contexts: [],
    starts_at: null,
    ends_at: null,
    is_active: true,
    priority: 0,
    dismissible: true,
    persist_dismiss: true,
    dismiss_scope: 'device',
    show_once: false,
    max_views: null,
    cooldown_minutes: null,
    version: 1,
    action_type: 'none',
    action_label: '',
    action_url: '',
    action_route: '',
    link_target: '_blank',
    content_align: 'left'
});

const dlg = ref({ open: false, saving: false, mode: 'create', id: null });
const form = ref(EMPTY());

function openCreate() {
    form.value = EMPTY();
    dlg.value = { open: true, saving: false, mode: 'create', id: null };
}

function openEdit(notice) {
    form.value = {
        ...EMPTY(),
        ...notice,
        starts_at: notice.starts_at ? notice.starts_at.slice(0, 16) : null,
        ends_at: notice.ends_at ? notice.ends_at.slice(0, 16) : null
    };
    dlg.value = { open: true, saving: false, mode: 'edit', id: notice.id };
}

function closeDlg() {
    dlg.value.open = false;
}

async function save() {
    if (!form.value.message?.trim()) {
        toast.add({ severity: 'warn', summary: 'Mensagem obrigatória', life: 3000 });
        return;
    }

    dlg.value.saving = true;
    try {
        const payload = {
            ...form.value,
            starts_at: form.value.starts_at || null,
            ends_at: form.value.ends_at || null,
            max_views: form.value.max_views || null,
            cooldown_minutes: form.value.cooldown_minutes || null
        };

        if (dlg.value.mode === 'create') {
            await createNotice(payload);
            toast.add({ severity: 'success', summary: 'Aviso criado', life: 3000 });
        } else {
            await updateNotice(dlg.value.id, payload);
            toast.add({ severity: 'success', summary: 'Aviso salvo', life: 3000 });
        }

        closeDlg();
        await load();
    } catch (e) {
        toast.add({ severity: 'error', summary: 'Erro ao salvar', detail: e.message, life: 5000 });
    } finally {
        dlg.value.saving = false;
    }
}

// ── Toggle ativo ──────────────────────────────────────────────
async function toggle(notice) {
    try {
        await toggleNoticeActive(notice.id, !notice.is_active);
        await load();
    } catch (e) {
        toast.add({ severity: 'error', summary: 'Erro', detail: e.message, life: 4000 });
    }
}

// ── Excluir ───────────────────────────────────────────────────
function confirmDelete(notice) {
    confirm.require({
        message: `Excluir o aviso "${notice.title || notice.message.slice(0, 40)}"?`,
        header: 'Confirmar exclusão',
        icon: 'pi pi-trash',
        acceptClass: 'p-button-danger',
        accept: async () => {
            try {
                await deleteNotice(notice.id);
                toast.add({ severity: 'success', summary: 'Aviso excluído', life: 3000 });
                await load();
            } catch (e) {
                toast.add({ severity: 'error', summary: 'Erro', detail: e.message, life: 4000 });
            }
        }
    });
}

// ── Helpers de exibição ───────────────────────────────────────
const VARIANT_LABELS = { info: 'Info', success: 'Sucesso', warning: 'Atenção', error: 'Erro' };
const VARIANT_SEVERITY = { info: 'info', success: 'success', warning: 'warn', error: 'danger' };

const ROLE_OPTIONS = [
    { label: 'Clinic Admin', value: 'clinic_admin' },
    { label: 'Therapist', value: 'therapist' },
    { label: 'Supervisor', value: 'supervisor' },
    { label: 'Editor', value: 'editor' },
    { label: 'Patient', value: 'patient' },
    { label: 'SaaS Admin', value: 'saas_admin' }
];

const CONTEXT_OPTIONS = [
    { label: 'Clínica (/admin)', value: 'clinic' },
    { label: 'Terapeuta (/therapist)', value: 'therapist' },
    { label: 'Supervisor (/supervisor)', value: 'supervisor' },
    { label: 'Editor (/editor)', value: 'editor' },
    { label: 'Portal (/portal)', value: 'portal' },
    { label: 'SaaS (/saas)', value: 'saas' },
    { label: 'Público', value: 'public' }
];

const VARIANT_OPTIONS = [
    { label: 'Info', value: 'info' },
    { label: 'Sucesso', value: 'success' },
    { label: 'Atenção', value: 'warning' },
    { label: 'Erro', value: 'error' }
];

const SCOPE_OPTIONS = [
    { label: 'Dispositivo (localStorage)', value: 'device' },
    { label: 'Sessão (sessionStorage)', value: 'session' },
    { label: 'Usuário (banco)', value: 'user' }
];

const ALIGN_OPTIONS = [
    { label: 'Esquerda', value: 'left', icon: 'pi pi-align-left' },
    { label: 'Centro', value: 'center', icon: 'pi pi-align-center' },
    { label: 'Direita', value: 'right', icon: 'pi pi-align-right' },
    { label: 'Justificado', value: 'justify', icon: 'pi pi-align-justify' }
];

const ACTION_OPTIONS = [
    { label: 'Nenhuma', value: 'none' },
    { label: 'Interna', value: 'internal' },
    { label: 'Externa', value: 'external' }
];

const TARGET_OPTIONS = [
    { label: '_blank (nova aba)', value: '_blank' },
    { label: '_self (mesma aba)', value: '_self' },
    { label: '_parent', value: '_parent' },
    { label: '_top', value: '_top' }
];

// Rotas internas — exclui rotas sem path útil e agrupa por path
const routeOptions = computed(() => {
    return router
        .getRoutes()
        .filter((r) => r.path && r.path !== '/' && !r.path.includes(':') && r.name)
        .map((r) => ({ label: `${r.path}  (${String(r.name)})`, value: r.path }))
        .sort((a, b) => a.value.localeCompare(b.value));
});

const showCta = computed(() => form.value.action_type !== 'none');

// ── Stats formatadas ──────────────────────────────────────────
function fmtDate(iso) {
    if (!iso) return '—';
    return new Date(iso).toLocaleString('pt-BR', { dateStyle: 'short', timeStyle: 'short' });
}

onMounted(load);
</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-megaphone" /></div>
            <div class="min-w-0 flex-1">
                <div class="cfg-subheader__title">Avisos Globais</div>
                <div class="cfg-subheader__sub">Banners no topo da aplicação segmentados por role e contexto.</div>
            </div>
            <div class="flex gap-2 shrink-0">
                <Button label="Ajuda" icon="pi pi-question-circle" severity="secondary" text size="small" @click="showHelp = true" />
                <Button label="Novo aviso" icon="pi pi-plus" size="small" @click="openCreate" />
            </div>
        </div>

        <!-- Lista -->
        <div v-if="loading" class="flex justify-center py-12">
            <ProgressSpinner />
        </div>

        <div v-else-if="!notices.length" class="text-center py-12 text-[var(--text-color-secondary)]">
            <i class="pi pi-megaphone text-4xl opacity-30 block mb-3" />
            Nenhum aviso cadastrado.
        </div>

        <div v-else class="flex flex-col gap-3">
            <div v-for="notice in notices" :key="notice.id" class="border border-[var(--surface-border)] rounded-xl bg-[var(--surface-card)] p-4 flex gap-4 items-start" :class="{ 'opacity-55': !notice.is_active }">
                <!-- Variante pill -->
                <div class="shrink-0 pt-0.5">
                    <Tag :value="VARIANT_LABELS[notice.variant] || notice.variant" :severity="VARIANT_SEVERITY[notice.variant]" class="text-[0.7rem]" />
                </div>

                <!-- Conteúdo -->
                <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-2 flex-wrap">
                        <span v-if="notice.title" class="font-semibold text-sm">{{ notice.title }}</span>
                        <span class="text-xs text-[var(--text-color-secondary)] truncate max-w-[320px]" v-html="notice.message" />
                    </div>

                    <div class="flex gap-3 mt-2 flex-wrap text-xs text-[var(--text-color-secondary)]">
                        <span><b>Prioridade:</b> {{ notice.priority }}</span>
                        <span><b>Versão:</b> {{ notice.version }}</span>
                        <span v-if="notice.starts_at"><b>De:</b> {{ fmtDate(notice.starts_at) }}</span>
                        <span v-if="notice.ends_at"><b>Até:</b> {{ fmtDate(notice.ends_at) }}</span>
                        <span v-if="notice.roles?.length"><b>Roles:</b> {{ notice.roles.join(', ') }}</span>
                        <span v-if="notice.contexts?.length"><b>Contextos:</b> {{ notice.contexts.join(', ') }}</span>
                        <span class="text-[var(--text-color-secondary)] opacity-70"> 👁 {{ notice.views_count }} visualizações · 🖱 {{ notice.clicks_count }} cliques </span>
                    </div>
                </div>

                <!-- Ações -->
                <div class="flex items-center gap-1 shrink-0">
                    <Button :icon="notice.is_active ? 'pi pi-eye-slash' : 'pi pi-eye'" text rounded size="small" :severity="notice.is_active ? 'secondary' : 'success'" :title="notice.is_active ? 'Desativar' : 'Ativar'" @click="toggle(notice)" />
                    <Button icon="pi pi-pencil" text rounded size="small" title="Editar" @click="openEdit(notice)" />
                    <Button icon="pi pi-trash" text rounded size="small" severity="danger" title="Excluir" @click="confirmDelete(notice)" />
                </div>
            </div>
        </div>

        <!-- Dialog Criar/Editar -->
        <Dialog v-model:visible="dlg.open" :header="dlg.mode === 'create' ? 'Novo Aviso' : 'Editar Aviso'" modal :style="{ width: '680px', maxWidth: '95vw' }" :draggable="false">
            <div class="flex flex-col gap-4 py-2">
                <!-- Variante + Título -->
                <div class="grid grid-cols-2 gap-3">
                    <div class="flex flex-col gap-1.5">
                        <label class="text-xs font-semibold">Variante *</label>
                        <Select v-model="form.variant" :options="VARIANT_OPTIONS" option-label="label" option-value="value" class="w-full" />
                    </div>
                    <div class="flex flex-col gap-1.5">
                        <label class="text-xs font-semibold">Título (opcional)</label>
                        <InputText v-model="form.title" class="w-full" placeholder="Ex: Manutenção programada" />
                    </div>
                </div>

                <!-- Mensagem + Alinhamento -->
                <div class="flex flex-col gap-1.5">
                    <div class="flex items-center justify-between gap-2 flex-wrap">
                        <label class="text-xs font-semibold">Mensagem * <span class="font-normal opacity-60">(aceita HTML simples)</span></label>
                        <SelectButton v-model="form.content_align" :options="ALIGN_OPTIONS" option-value="value" :allow-empty="false" size="small">
                            <template #option="{ option }">
                                <i :class="option.icon" class="text-[0.75rem]" :title="option.label" />
                            </template>
                        </SelectButton>
                    </div>
                    <Textarea v-model="form.message" rows="3" class="w-full" placeholder="Ex: O sistema ficará indisponível em <b>15/04 às 02h</b>." auto-resize />
                </div>

                <!-- Segmentação -->
                <div class="grid grid-cols-2 gap-3">
                    <div class="flex flex-col gap-1.5">
                        <label class="text-xs font-semibold">Roles <span class="font-normal opacity-60">(vazio = todos)</span></label>
                        <MultiSelect v-model="form.roles" :options="ROLE_OPTIONS" option-label="label" option-value="value" placeholder="Todos os roles" class="w-full" display="chip" />
                    </div>
                    <div class="flex flex-col gap-1.5">
                        <label class="text-xs font-semibold">Contextos <span class="font-normal opacity-60">(vazio = todos)</span></label>
                        <MultiSelect v-model="form.contexts" :options="CONTEXT_OPTIONS" option-label="label" option-value="value" placeholder="Todos os contextos" class="w-full" display="chip" />
                    </div>
                </div>

                <!-- Tempo -->
                <div class="grid grid-cols-2 gap-3">
                    <div class="flex flex-col gap-1.5">
                        <label class="text-xs font-semibold">Exibir a partir de</label>
                        <InputText v-model="form.starts_at" type="datetime-local" class="w-full" />
                    </div>
                    <div class="flex flex-col gap-1.5">
                        <label class="text-xs font-semibold">Exibir até</label>
                        <InputText v-model="form.ends_at" type="datetime-local" class="w-full" />
                    </div>
                </div>

                <!-- Prioridade + Versão + Ativo -->
                <div class="grid grid-cols-3 gap-3">
                    <div class="flex flex-col gap-1.5">
                        <label class="text-xs font-semibold">Prioridade</label>
                        <InputNumber v-model="form.priority" :min="0" :max="999" class="w-full" />
                    </div>
                    <div class="flex flex-col gap-1.5">
                        <label class="text-xs font-semibold">Versão</label>
                        <InputNumber v-model="form.version" :min="1" class="w-full" />
                    </div>
                    <div class="flex flex-col gap-1.5 justify-end">
                        <div class="flex items-center gap-2 h-[42px]">
                            <ToggleSwitch v-model="form.is_active" inputId="sw-active" />
                            <label for="sw-active" class="text-sm cursor-pointer">Ativo</label>
                        </div>
                    </div>
                </div>

                <!-- Dismiss -->
                <div class="border border-[var(--surface-border)] rounded-lg p-3 flex flex-col gap-3">
                    <span class="text-xs font-bold uppercase tracking-widest text-[var(--text-color-secondary)] opacity-60">Dismiss</span>
                    <div class="grid grid-cols-3 gap-3">
                        <div class="flex items-center gap-2">
                            <ToggleSwitch v-model="form.dismissible" inputId="sw-dismissible" />
                            <label for="sw-dismissible" class="text-sm cursor-pointer">Fechável</label>
                        </div>
                        <div class="flex items-center gap-2">
                            <ToggleSwitch v-model="form.persist_dismiss" inputId="sw-persist" :disabled="!form.dismissible" />
                            <label for="sw-persist" class="text-sm cursor-pointer">Persistir fechamento</label>
                        </div>
                        <div class="flex flex-col gap-1.5">
                            <label class="text-xs font-semibold">Escopo</label>
                            <Select v-model="form.dismiss_scope" :options="SCOPE_OPTIONS" option-label="label" option-value="value" class="w-full" :disabled="!form.dismissible || !form.persist_dismiss" />
                        </div>
                    </div>
                </div>

                <!-- Regras de exibição -->
                <div class="border border-[var(--surface-border)] rounded-lg p-3 flex flex-col gap-3">
                    <span class="text-xs font-bold uppercase tracking-widest text-[var(--text-color-secondary)] opacity-60">Regras de exibição</span>
                    <div class="grid grid-cols-3 gap-3">
                        <div class="flex items-center gap-2 col-span-1">
                            <ToggleSwitch v-model="form.show_once" inputId="sw-once" />
                            <label for="sw-once" class="text-sm cursor-pointer">Exibir só 1x</label>
                        </div>
                        <div class="flex flex-col gap-1.5">
                            <label class="text-xs font-semibold">Máx. visualizações</label>
                            <InputNumber v-model="form.max_views" :min="1" placeholder="Ilimitado" class="w-full" />
                        </div>
                        <div class="flex flex-col gap-1.5">
                            <label class="text-xs font-semibold">Cooldown (minutos)</label>
                            <InputNumber v-model="form.cooldown_minutes" :min="1" placeholder="Sem cooldown" class="w-full" />
                        </div>
                    </div>
                </div>

                <!-- CTA -->
                <div class="border border-[var(--surface-border)] rounded-lg p-3 flex flex-col gap-3">
                    <span class="text-xs font-bold uppercase tracking-widest text-[var(--text-color-secondary)] opacity-60">Ação (CTA)</span>
                    <div class="flex flex-col gap-1.5">
                        <label class="text-xs font-semibold">Tipo de ação</label>
                        <SelectButton v-model="form.action_type" :options="ACTION_OPTIONS" option-label="label" option-value="value" />
                    </div>
                    <!-- CTA externa -->
                    <div v-if="showCta && form.action_type === 'external'" class="grid grid-cols-3 gap-3">
                        <div class="flex flex-col gap-1.5">
                            <label class="text-xs font-semibold">Label do botão</label>
                            <InputText v-model="form.action_label" class="w-full" placeholder="Ex: Saiba mais" />
                        </div>
                        <div class="flex flex-col gap-1.5">
                            <label class="text-xs font-semibold">URL externa</label>
                            <InputText v-model="form.action_url" class="w-full" placeholder="https://..." />
                        </div>
                        <div class="flex flex-col gap-1.5">
                            <label class="text-xs font-semibold">Target</label>
                            <Select v-model="form.link_target" :options="TARGET_OPTIONS" option-label="label" option-value="value" class="w-full" />
                        </div>
                    </div>

                    <!-- CTA interna -->
                    <div v-if="showCta && form.action_type === 'internal'" class="grid grid-cols-2 gap-3">
                        <div class="flex flex-col gap-1.5">
                            <label class="text-xs font-semibold">Label do botão</label>
                            <InputText v-model="form.action_label" class="w-full" placeholder="Ex: Ver planos" />
                        </div>
                        <div class="flex flex-col gap-1.5">
                            <label class="text-xs font-semibold">Rota interna</label>
                            <Select
                                v-model="form.action_route"
                                :options="routeOptions"
                                option-label="label"
                                option-value="value"
                                class="w-full"
                                filter
                                filterPlaceholder="Buscar rota..."
                                placeholder="Selecione uma rota"
                                :virtualScrollerOptions="{ itemSize: 38 }"
                            />
                        </div>
                    </div>
                </div>
            </div>

            <template #footer>
                <Button label="Cancelar" text @click="closeDlg" :disabled="dlg.saving" />
                <Button :label="dlg.mode === 'create' ? 'Criar aviso' : 'Salvar'" icon="pi pi-check" :loading="dlg.saving" @click="save" />
            </template>
        </Dialog>

        <!-- Dialog de Ajuda -->
        <Dialog v-model:visible="showHelp" header="Como funciona o Aviso Global" modal :style="{ width: '680px', maxWidth: '95vw' }" :draggable="false">
            <Accordion :value="['variant']" multiple>
                <AccordionPanel value="variant">
                    <AccordionHeader>
                        <i class="pi pi-palette mr-2 text-[var(--primary-color)]" />
                        Variante
                    </AccordionHeader>
                    <AccordionContent>
                        <p class="text-sm leading-relaxed m-0">
                            Define a cor de fundo do banner: <b>Info</b> (azul), <b>Sucesso</b> (verde), <b>Atenção</b> (âmbar) ou <b>Erro</b> (vermelho). O ícone lateral muda automaticamente conforme a variante escolhida.
                        </p>
                    </AccordionContent>
                </AccordionPanel>

                <AccordionPanel value="segmentation">
                    <AccordionHeader>
                        <i class="pi pi-users mr-2 text-[var(--primary-color)]" />
                        Segmentação (Roles e Contextos)
                    </AccordionHeader>
                    <AccordionContent>
                        <p class="text-sm leading-relaxed m-0">
                            <b>Roles</b> filtram por perfil do usuário (ex: <code>clinic_admin</code>, <code>therapist</code>). Deixar vazio exibe para todos os perfis.<br /><br />
                            <b>Contextos</b> filtram pela área da aplicação em que o usuário está (ex: <code>clinic</code> = <code>/admin</code>, <code>therapist</code> = <code>/therapist</code>). Deixar vazio exibe em qualquer área.
                        </p>
                    </AccordionContent>
                </AccordionPanel>

                <AccordionPanel value="time">
                    <AccordionHeader>
                        <i class="pi pi-calendar mr-2 text-[var(--primary-color)]" />
                        Controle de tempo
                    </AccordionHeader>
                    <AccordionContent>
                        <p class="text-sm leading-relaxed m-0">
                            <b>Exibir a partir de / Exibir até</b>: janela de tempo em que o aviso pode aparecer. Deixar em branco = sem restrição de data.<br /><br />
                            O campo <b>Ativo</b> desativa manualmente o aviso independentemente do período configurado.
                        </p>
                    </AccordionContent>
                </AccordionPanel>

                <AccordionPanel value="priority">
                    <AccordionHeader>
                        <i class="pi pi-sort-amount-up mr-2 text-[var(--primary-color)]" />
                        Prioridade
                    </AccordionHeader>
                    <AccordionContent>
                        <p class="text-sm leading-relaxed m-0">Quando mais de um aviso é elegível para o mesmo usuário, apenas o de <b>maior prioridade</b> aparece. Use números inteiros — ex: 10, 50, 100. O padrão é 0 (menor prioridade).</p>
                    </AccordionContent>
                </AccordionPanel>

                <AccordionPanel value="dismiss">
                    <AccordionHeader>
                        <i class="pi pi-times-circle mr-2 text-[var(--primary-color)]" />
                        Dismiss (fechamento)
                    </AccordionHeader>
                    <AccordionContent>
                        <p class="text-sm leading-relaxed m-0">
                            <b>Fechável</b>: exibe o botão × no banner. Se desativado, o usuário não pode fechar manualmente.<br /><br />
                            <b>Persistir fechamento</b>: lembra que o usuário fechou para não reexibir.<br /><br />
                            <b>Escopo</b> do dismiss:<br />
                            &bull; <b>Dispositivo</b> — salvo em <code>localStorage</code> (persiste entre sessões no mesmo navegador).<br />
                            &bull; <b>Sessão</b> — salvo em <code>sessionStorage</code> (apaga ao fechar o navegador).<br />
                            &bull; <b>Usuário</b> — salvo no banco de dados (persiste em qualquer dispositivo do mesmo usuário).
                        </p>
                    </AccordionContent>
                </AccordionPanel>

                <AccordionPanel value="rules">
                    <AccordionHeader>
                        <i class="pi pi-eye mr-2 text-[var(--primary-color)]" />
                        Regras de exibição
                    </AccordionHeader>
                    <AccordionContent>
                        <p class="text-sm leading-relaxed m-0">
                            <b>Exibir só 1x</b>: após a primeira visualização, o aviso não aparece mais para aquele usuário/dispositivo.<br /><br />
                            <b>Máx. visualizações</b>: limita quantas vezes o aviso pode aparecer. Ex: 3 = aparece no máximo 3 vezes.<br /><br />
                            <b>Cooldown (minutos)</b>: intervalo mínimo entre exibições. Ex: 60 = reexibe só após 1 hora desde a última vez que apareceu. Útil para avisos recorrentes que não devem incomodar em cada pageload.
                        </p>
                    </AccordionContent>
                </AccordionPanel>

                <AccordionPanel value="version">
                    <AccordionHeader>
                        <i class="pi pi-history mr-2 text-[var(--primary-color)]" />
                        Versão
                    </AccordionHeader>
                    <AccordionContent>
                        <p class="text-sm leading-relaxed m-0">
                            Ao incrementar a <b>Versão</b> de um aviso já publicado, todos os dismissals anteriores ficam inválidos — o aviso volta a aparecer para usuários que já tinham fechado. Use ao editar o conteúdo de um aviso importante que
                            precisa ser relido.
                        </p>
                    </AccordionContent>
                </AccordionPanel>

                <AccordionPanel value="cta">
                    <AccordionHeader>
                        <i class="pi pi-arrow-right mr-2 text-[var(--primary-color)]" />
                        Ação (CTA)
                    </AccordionHeader>
                    <AccordionContent>
                        <p class="text-sm leading-relaxed m-0">
                            <b>Nenhuma</b>: banner só informativo, sem botão de ação.<br /><br />
                            <b>Interna</b>: botão que navega para uma rota da própria aplicação (sem abrir nova aba). Selecione a rota no campo — as opções são geradas automaticamente pelo router.<br /><br />
                            <b>Externa</b>: botão que abre uma URL externa. Defina o <b>Target</b> (<code>_blank</code> = nova aba, padrão).
                        </p>
                    </AccordionContent>
                </AccordionPanel>

                <AccordionPanel value="tracking">
                    <AccordionHeader>
                        <i class="pi pi-chart-bar mr-2 text-[var(--primary-color)]" />
                        Rastreamento
                    </AccordionHeader>
                    <AccordionContent>
                        <p class="text-sm leading-relaxed m-0">
                            Cada aviso acumula <b>visualizações</b> e <b>cliques no CTA</b> de forma agregada (sem identificar o usuário). Os contadores são exibidos na listagem e incrementados via RPC no banco de dados.
                        </p>
                    </AccordionContent>
                </AccordionPanel>
            </Accordion>

            <template #footer>
                <Button label="Fechar" @click="showHelp = false" />
            </template>
        </Dialog>

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