agenciapsilmno/src/layout/configuracoes/ConfiguracoesTwilioWhatsappPage.vue

<!--
|--------------------------------------------------------------------------
| Agência PSI
|--------------------------------------------------------------------------
| Arquivo: src/layout/configuracoes/ConfiguracoesTwilioWhatsappPage.vue
| Data: 2026
|--------------------------------------------------------------------------
| Painel self-service — WhatsApp via Twilio para o tenant.
| A clínica/terapeuta ativa, testa e monitora seu WhatsApp sem suporte.
|
| Estados:
|   not_provisioned — nunca foi ativado → botão "Ativar WhatsApp"
|   connected       — ativo e funcionando
|   suspended       — suspenso pelo admin SaaS
|--------------------------------------------------------------------------
-->
<script setup>
import { ref, computed, onMounted } from 'vue';
import { useToast } from 'primevue/usetoast';
import { useConfirm } from 'primevue/useconfirm';
import { useTwilioWhatsappStore } from '@/stores/twilioWhatsappStore';
import { useTenantStore } from '@/stores/tenantStore';

const toast   = useToast();
const confirm = useConfirm();
const store   = useTwilioWhatsappStore();
const tenant  = useTenantStore();

// ── Computed ───────────────────────────────────────────────────────────────
const tenantId = computed(() => tenant.tenantId);

const statusConfig = computed(() => {
    switch (store.myChannelStatus) {
        case 'not_provisioned':
            return {
                icon:     'pi-whatsapp',
                color:    'text-gray-400',
                bg:       'bg-gray-100',
                label:    'WhatsApp não ativado',
                sub:      'Ative para enviar lembretes automáticos aos seus pacientes.',
                severity: 'secondary',
            };
        case 'connected':
            return {
                icon:     'pi-check-circle',
                color:    'text-green-600',
                bg:       'bg-green-50',
                label:    'WhatsApp ativo',
                sub:      `Enviando de ${store.myChannel?.twilio_phone_number ?? '—'}`,
                severity: 'success',
            };
        case 'suspended':
            return {
                icon:     'pi-pause-circle',
                color:    'text-orange-500',
                bg:       'bg-orange-50',
                label:    'WhatsApp suspenso',
                sub:      'Sua conta está temporariamente suspensa. Entre em contato com o suporte.',
                severity: 'warn',
            };
        default:
            return {
                icon:     'pi-exclamation-circle',
                color:    'text-red-500',
                bg:       'bg-red-50',
                label:    'Erro de conexão',
                sub:      'Verifique as configurações ou entre em contato com o suporte.',
                severity: 'danger',
            };
    }
});

// ── Ativação ───────────────────────────────────────────────────────────────
const activateDialog = ref(false);
const activateForm   = ref({ display_name: '' });

function openActivateDialog() {
    activateForm.value.display_name = '';
    activateDialog.value = true;
}

async function doActivate() {
    try {
        const result = await store.provisionMyChannel(tenantId.value, {
            display_name: activateForm.value.display_name || undefined,
        });
        toast.add({
            severity: 'success',
            summary:  'WhatsApp ativado!',
            detail:   result.message,
            life:     6000,
        });
        activateDialog.value = false;
    } catch (e) {
        toast.add({ severity: 'error', summary: 'Erro ao ativar', detail: e.message, life: 6000 });
    }
}

// ── Teste de envio ─────────────────────────────────────────────────────────
const testToNumber = ref('');
const testMessage  = ref('Olá! Esta é uma mensagem de teste do AgenciaPsi. ✓');

async function doTest() {
    if (!testToNumber.value) {
        toast.add({ severity: 'warn', summary: 'Informe o número', life: 3000 });
        return;
    }
    if (!store.myChannel?.id) return;
    try {
        const result = await store.testSendMessage(store.myChannel.id, testToNumber.value, testMessage.value);
        toast.add({
            severity: 'success',
            summary:  'Mensagem enviada!',
            detail:   `SID: ${result.message_sid} — Status: ${result.status}`,
            life:     5000,
        });
    } catch (e) {
        toast.add({ severity: 'error', summary: 'Erro no envio', detail: e.message, life: 5000 });
    }
}

// ── Logs ───────────────────────────────────────────────────────────────────
async function loadLogs() {
    if (!tenantId.value) return;
    try {
        await store.loadMyLogs(tenantId.value);
    } catch (e) {
        toast.add({ severity: 'error', summary: 'Erro ao carregar histórico', detail: e.message, life: 4000 });
    }
}

// ── Helpers ────────────────────────────────────────────────────────────────
function logStatusTag(status) {
    switch (status) {
        case 'sent':      return { label: 'Enviado',   severity: 'info' };
        case 'delivered': return { label: 'Entregue',  severity: 'success' };
        case 'read':      return { label: 'Lido',      severity: 'success' };
        case 'failed':    return { label: 'Falhou',    severity: 'danger' };
        case 'bounced':   return { label: 'Bounced',   severity: 'danger' };
        default:          return { label: status,      severity: 'secondary' };
    }
}

function fmtDateTime(dt) {
    if (!dt) return '—';
    const d = new Date(dt);
    return d.toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit', year: 'numeric' })
        + ' ' + d.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' });
}

function fmtPhone(p) {
    if (!p) return '—';
    return p.replace('whatsapp:', '');
}

// ── Tabs ───────────────────────────────────────────────────────────────────
const activeTab = ref(0);

function onTabChange(val) {
    activeTab.value = val;
    if (val === 1 && !store.messageLogs.length) loadLogs();
}

// ── Init ───────────────────────────────────────────────────────────────────
onMounted(async () => {
    if (tenantId.value) {
        await store.loadMyChannel(tenantId.value);
    }
});
</script>

<template>
    <Teleport to="#cfg-page-actions" defer>
        <router-link to="/configuracoes/whatsapp">
            <Button label="Trocar canal" icon="pi pi-arrow-left" severity="secondary" outlined size="small" class="rounded-full" />
        </router-link>
    </Teleport>

    <div class="flex flex-col gap-4">
        <!-- Loading inicial ───────────────────────────────────────────── -->
        <div v-if="store.loadingMyChannel" class="flex justify-center py-12">
            <ProgressSpinner style="width: 40px; height: 40px" />
        </div>

        <template v-else>
            <!-- Card de status ─────────────────────────────────────────── -->
            <div class="status-card" :class="`status-card--${statusConfig.severity}`">
                <div class="flex items-start gap-4 flex-wrap">
                    <div :class="['status-icon', statusConfig.bg, statusConfig.color]">
                        <i :class="`pi ${statusConfig.icon} text-xl`" />
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center gap-2 flex-wrap">
                            <h3 class="status-title">{{ statusConfig.label }}</h3>
                            <Tag :value="statusConfig.label" :severity="statusConfig.severity" class="text-xs" />
                        </div>
                        <p class="status-sub">{{ statusConfig.sub }}</p>
                    </div>

                    <!-- Ação principal -->
                    <div class="flex gap-2 items-center">
                        <!-- Não provisionado: botão ativar -->
                        <Button
                            v-if="store.myChannelStatus === 'not_provisioned'"
                            label="Ativar WhatsApp"
                            icon="pi pi-whatsapp"
                            :loading="store.provisioning"
                            @click="openActivateDialog"
                        />

                        <!-- Ativo: mostrar número -->
                        <template v-if="store.myChannelStatus === 'connected'">
                            <div class="flex flex-col items-end gap-1">
                                <div class="flex items-center gap-2">
                                    <i class="pi pi-phone text-green-600 text-sm" />
                                    <span class="font-mono font-bold text-sm">{{ store.myChannel?.twilio_phone_number }}</span>
                                </div>
                                <span class="text-xs text-(--text-color-secondary)">Seu número WhatsApp exclusivo</span>
                            </div>
                        </template>

                        <!-- Suspenso: contatar suporte -->
                        <Button
                            v-if="store.myChannelStatus === 'suspended'"
                            label="Contatar suporte"
                            icon="pi pi-envelope"
                            severity="secondary"
                            outlined
                            tag="a"
                            href="mailto:suporte@agenciapsi.com.br"
                        />
                    </div>
                </div>
            </div>

            <!-- Tabs (só aparecem quando provisionado) ──────────────────── -->
            <template v-if="store.myChannelStatus !== 'not_provisioned'">
                <Tabs :value="activeTab" @update:value="onTabChange">
                    <TabList>
                        <Tab :value="0"><i class="pi pi-cog mr-2" />Configurações</Tab>
                        <Tab :value="1"><i class="pi pi-list mr-2" />Histórico</Tab>
                    </TabList>

                    <TabPanels>
                        <!-- ══ ABA 1 — Configurações ══════════════════════ -->
                        <TabPanel :value="0">
                            <div class="flex flex-col gap-4 pt-3">

                                <!-- Informações do canal ──────────────────── -->
                                <div class="info-card">
                                    <div class="info-card__header">
                                        <i class="pi pi-info-circle opacity-60 text-sm" />
                                        <span class="text-sm font-semibold">Informações da conta</span>
                                    </div>
                                    <div class="info-card__body">
                                        <div class="info-row">
                                            <span class="info-label">Número WhatsApp</span>
                                            <span class="font-mono font-bold">{{ store.myChannel?.twilio_phone_number ?? '—' }}</span>
                                        </div>
                                        <div class="info-row">
                                            <span class="info-label">Provedor</span>
                                            <span>WhatsApp Business Oficial — AgenciaPSI</span>
                                        </div>
                                        <div class="info-row">
                                            <span class="info-label">Ativado em</span>
                                            <span>{{ fmtDateTime(store.myChannel?.provisioned_at) }}</span>
                                        </div>
                                        <div class="info-row">
                                            <span class="info-label">Preço por mensagem</span>
                                            <span class="font-semibold">
                                                {{ new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(store.myChannel?.price_per_message_brl ?? 0) }}
                                            </span>
                                        </div>
                                    </div>
                                </div>

                                <!-- Envio de teste ────────────────────────── -->
                                <div v-if="store.myChannelStatus === 'connected'" class="info-card">
                                    <div class="info-card__header">
                                        <i class="pi pi-send opacity-60 text-sm" />
                                        <span class="text-sm font-semibold">Envio de teste</span>
                                    </div>
                                    <div class="info-card__body">
                                        <p class="text-sm text-(--text-color-secondary) m-0 mb-3">
                                            Envie uma mensagem de teste para confirmar que seu WhatsApp está funcionando.
                                        </p>
                                        <div class="flex flex-col gap-3">
                                            <div class="flex flex-col gap-1.5">
                                                <label class="field-label">Número destino (E.164)</label>
                                                <InputText v-model="testToNumber" placeholder="+5511999990000" class="w-full max-w-xs" />
                                            </div>
                                            <div class="flex flex-col gap-1.5">
                                                <label class="field-label">Mensagem</label>
                                                <Textarea v-model="testMessage" rows="2" class="w-full max-w-lg" auto-resize />
                                            </div>
                                            <div>
                                                <Button
                                                    label="Enviar teste"
                                                    icon="pi pi-send"
                                                    size="small"
                                                    :loading="store.testingSend"
                                                    :disabled="!testToNumber || store.testingSend"
                                                    @click="doTest"
                                                />
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Informações de uso ────────────────────── -->
                                <Message severity="info" :closable="false">
                                    <template #messageicon><i class="pi pi-whatsapp" /></template>
                                    <div class="text-sm">
                                        <strong>Como funciona:</strong> Seu número WhatsApp Business exclusivo é usado para enviar
                                        lembretes de sessão, confirmações e outras notificações automáticas aos seus pacientes.
                                        Os envios são cobrados por mensagem conforme seu plano.
                                    </div>
                                </Message>
                            </div>
                        </TabPanel>

                        <!-- ══ ABA 2 — Histórico ═══════════════════════════ -->
                        <TabPanel :value="1">
                            <div class="flex flex-col gap-3 pt-3">
                                <div class="flex items-center gap-2">
                                    <span class="text-sm text-(--text-color-secondary)">
                                        Últimas {{ store.messageLogs.length }} mensagens
                                    </span>
                                    <Button icon="pi pi-refresh" size="small" severity="secondary" outlined :loading="store.loadingLogs" class="ml-auto" @click="loadLogs" />
                                </div>

                                <DataTable :value="store.messageLogs" :loading="store.loadingLogs" striped-rows responsive-layout="scroll" class="text-sm">
                                    <Column header="Destinatário" style="min-width: 140px">
                                        <template #body="{ data }">
                                            <span class="font-mono text-sm">{{ fmtPhone(data.recipient_address) }}</span>
                                        </template>
                                    </Column>
                                    <Column header="Status" style="min-width: 100px">
                                        <template #body="{ data }">
                                            <Tag :value="logStatusTag(data.status).label" :severity="logStatusTag(data.status).severity" class="text-[0.7rem]" />
                                        </template>
                                    </Column>
                                    <Column header="Enviado em" style="min-width: 140px">
                                        <template #body="{ data }">
                                            <span class="text-xs">{{ fmtDateTime(data.sent_at || data.created_at) }}</span>
                                        </template>
                                    </Column>
                                    <Column header="Entregue" style="min-width: 140px">
                                        <template #body="{ data }">
                                            <span class="text-xs">{{ fmtDateTime(data.delivered_at) }}</span>
                                        </template>
                                    </Column>
                                    <Column header="Motivo de falha" style="min-width: 180px">
                                        <template #body="{ data }">
                                            <span v-if="data.failure_reason" class="text-xs text-red-500">{{ data.failure_reason }}</span>
                                            <span v-else class="text-xs text-(--text-color-secondary)">—</span>
                                        </template>
                                    </Column>

                                    <template #empty>
                                        <div class="text-center py-8 text-sm text-(--text-color-secondary)">
                                            Nenhuma mensagem enviada ainda.
                                        </div>
                                    </template>
                                </DataTable>
                            </div>
                        </TabPanel>
                    </TabPanels>
                </Tabs>
            </template>
        </template>

        <!-- Dialog: Ativar WhatsApp ──────────────────────────────────── -->
        <Dialog
            v-model:visible="activateDialog"
            header="Ativar WhatsApp"
            modal
            :style="{ width: '440px', maxWidth: '96vw' }"
            :draggable="false"
        >
            <div class="flex flex-col gap-4 py-2">
                <Message severity="success" :closable="false">
                    <template #messageicon><i class="pi pi-whatsapp" /></template>
                    <div class="text-sm">
                        Você receberá um <strong>número WhatsApp exclusivo</strong> para sua clínica.
                        Suas mensagens automáticas aos pacientes serão enviadas por este número.
                    </div>
                </Message>

                <div class="field-group">
                    <label class="field-label">Nome de exibição (opcional)</label>
                    <InputText
                        v-model="activateForm.display_name"
                        placeholder="Ex: Clínica Bem Estar"
                        class="w-full"
                    />
                    <small class="text-(--text-color-secondary)">Identificação interna do seu canal.</small>
                </div>

                <div class="border border-(--surface-border) rounded-lg p-3 bg-(--surface-ground)">
                    <div class="text-xs font-semibold mb-2">O que está incluído:</div>
                    <ul class="text-sm text-(--text-color-secondary) flex flex-col gap-1 m-0 pl-4">
                        <li>Número WhatsApp Business exclusivo</li>
                        <li>Envio de lembretes de sessão automáticos</li>
                        <li>Confirmações e cancelamentos por WhatsApp</li>
                        <li>Histórico completo de mensagens</li>
                    </ul>
                </div>
            </div>

            <template #footer>
                <Button label="Cancelar" text @click="activateDialog = false" />
                <Button
                    label="Ativar agora"
                    icon="pi pi-check"
                    :loading="store.provisioning"
                    :disabled="store.provisioning"
                    @click="doActivate"
                />
            </template>
        </Dialog>

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

<style scoped>
.status-card {
    padding: 1.25rem; border-radius: 8px;
    border: 1px solid var(--surface-border);
    background: var(--surface-card);
}
.status-card--success { border-color: color-mix(in srgb, #22c55e 30%, transparent); }
.status-card--warn    { border-color: color-mix(in srgb, #f59e0b 30%, transparent); }
.status-card--danger  { border-color: color-mix(in srgb, #ef4444 30%, transparent); }
.status-icon {
    display: grid; place-items: center;
    width: 3rem; height: 3rem; border-radius: 50%; flex-shrink: 0;
}
.status-title { font-size: 1rem; font-weight: 700; margin: 0; }
.status-sub   { font-size: 0.8rem; color: var(--text-color-secondary); margin: 4px 0 0; }
.info-card {
    border: 1px solid var(--surface-border); border-radius: 8px; overflow: hidden;
}
.info-card__header {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.625rem 1rem; background: var(--surface-ground);
}
.info-card__body { padding: 0.875rem 1rem; }
.info-row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; padding: 0.375rem 0;
    border-bottom: 1px solid var(--surface-border);
}
.info-row:last-child { border-bottom: none; }
.info-label { font-size: 0.75rem; color: var(--text-color-secondary); flex-shrink: 0; }
.field-group { display: flex; flex-direction: column; gap: 0.375rem; }
.field-label { font-size: 0.75rem; font-weight: 600; }
</style>