<!--
|--------------------------------------------------------------------------
| Agência PSI — WhatsApp Chooser (landing)
|--------------------------------------------------------------------------
| Apresenta os 2 canais WhatsApp disponíveis e gerencia exclusividade.
|--------------------------------------------------------------------------
-->
<script setup>
import { ref, computed, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useToast } from 'primevue/usetoast';
import { useConfirm } from 'primevue/useconfirm';
import { supabase } from '@/lib/supabase/client';
import { tenantDb } from '@/lib/supabase/tenantClient';
import { useTenantStore } from '@/stores/tenantStore';

const router = useRouter();
const route = useRoute();
const toast = useToast();
const confirm = useConfirm();
const tenantStore = useTenantStore();

// Detecta se o chooser foi aberto dentro do layout Melissa pra rotear o
// setup pras paginas nativas (cfg-wa-pessoal/cfg-wa-oficial) em vez das
// paginas de /configuracoes (que usam o layout antigo).
const inMelissa = computed(() => String(route.path || '').startsWith('/melissa'));
const pessoalPath = computed(() => (inMelissa.value ? '/melissa/cfg-wa-pessoal' : '/configuracoes/whatsapp-pessoal'));
const oficialPath = computed(() => (inMelissa.value ? '/melissa/cfg-wa-oficial' : '/configuracoes/whatsapp-oficial'));

const loading = ref(true);
const switching = ref(false);
const activeChannel = ref(null); // row de notification_channels (provider, is_active, etc) ou null
const softDeletedByProvider = ref({});  // { evolution_api: row, twilio: row }

const activeProvider = computed(() => {
    if (!activeChannel.value) return null;
    return activeChannel.value.provider; // 'twilio' | 'evolution_api'
});

// Versão normalizada pra usar no template (botões comparam com 'evolution')
const activeProviderKey = computed(() => providerKey(activeProvider.value));

// Normaliza 'evolution_api' ↔ 'evolution' (o chooser usa 'evolution' nos botões)
function providerKey(p) {
    return p === 'evolution_api' ? 'evolution' : p;
}

async function loadChannel() {
    const tenantId = tenantStore.activeTenantId;
    if (!tenantId) {
        activeChannel.value = null;
        softDeletedByProvider.value = {};
        loading.value = false;
        return;
    }
    loading.value = true;
    try {
        const { data: active } = await tenantDb().from('notification_channels')
            .select('id, provider, is_active, connection_status, twilio_phone_number, credentials, updated_at')
            
            .eq('channel', 'whatsapp')
            .is('deleted_at', null)
            .maybeSingle();
        activeChannel.value = active || null;

        // Busca soft-deleted (pra oferecer reativação por provider)
        const { data: deletedList } = await tenantDb().from('notification_channels')
            .select('id, provider, credentials, created_at')
            
            .eq('channel', 'whatsapp')
            .not('deleted_at', 'is', null)
            .order('created_at', { ascending: false });

        const mapByProvider = {};
        for (const row of deletedList || []) {
            // Só o mais recente por provider
            if (!mapByProvider[row.provider]) mapByProvider[row.provider] = row;
        }
        softDeletedByProvider.value = mapByProvider;
    } catch (e) {
        console.error('[whatsapp-chooser] load:', e?.message);
        activeChannel.value = null;
        softDeletedByProvider.value = {};
    } finally {
        loading.value = false;
    }
}

// Pega o row soft-deleted do provider escolhido (normalizando 'evolution' → 'evolution_api')
function softDeletedForProvider(provider) {
    const dbProvider = provider === 'evolution' ? 'evolution_api' : provider;
    return softDeletedByProvider.value[dbProvider] || null;
}

async function reactivateProvider(provider) {
    const soft = softDeletedForProvider(provider);
    if (!soft?.id) return false;
    switching.value = true;
    try {
        const { data, error } = await supabase.functions.invoke('reactivate-notification-channel', {
            body: { channel_id: soft.id }
        });
        if (error || !data?.ok) throw new Error(error?.message || data?.error || 'reactivation_failed');

        toast.add({
            severity: 'success',
            summary: 'Canal restaurado',
            detail: data.deactivated_others > 0
                ? `Canal anterior foi reativado. ${data.deactivated_others} outro canal foi desativado pra manter só um por vez.`
                : 'Canal anterior foi reativado.',
            life: 4000
        });
        await loadChannel();
        return true;
    } catch (e) {
        toast.add({ severity: 'error', summary: 'Não foi possível reativar', detail: e.message || 'Tente novamente.', life: 4500 });
        return false;
    } finally {
        switching.value = false;
    }
}

function goSetup(provider) {
    if (provider === 'evolution') router.push(pessoalPath.value);
    else if (provider === 'twilio') router.push(oficialPath.value);
}

async function handleChoose(provider) {
    const activeKey = providerKey(activeProvider.value);

    // Mesmo provider ativo → só navega pro setup/gerenciar
    if (activeKey && activeKey === provider) {
        goSetup(provider);
        return;
    }

    // Provider diferente (ou nenhum ativo) → verifica se tem soft-deleted pra reativar
    const softDeleted = softDeletedForProvider(provider);

    if (!activeProvider.value) {
        // Sem canal ativo atualmente
        if (softDeleted) {
            // Tem canal antigo daquele provider — reativa e manda pro setup
            const ok = await reactivateProvider(provider);
            if (ok) goSetup(provider);
        } else {
            // Primeiro setup
            goSetup(provider);
        }
        return;
    }

    // Tem canal ativo de outro provider → confirmar troca
    const from = activeKey === 'twilio' ? 'Oficial AgenciaPSI' : 'Pessoal';
    const to = provider === 'twilio' ? 'Oficial AgenciaPSI' : 'Pessoal';
    const willReactivate = !!softDeleted;

    const message = willReactivate
        ? `Você está usando o WhatsApp ${from}. Trocar pro ${to} vai desativar o canal atual e restaurar o ${to} que já foi configurado antes. Continuar?`
        : `Você está usando o WhatsApp ${from}. Trocar pro ${to} vai desativar o canal atual e você vai precisar reconfigurar. Continuar?`;

    confirm.require({
        message,
        header: 'Trocar canal WhatsApp',
        icon: 'pi pi-exclamation-triangle',
        acceptLabel: 'Trocar',
        rejectLabel: 'Cancelar',
        acceptClass: 'p-button-warning',
        accept: async () => {
            if (willReactivate) {
                // reactivate edge já cuida do soft-delete do outro canal (exclusividade)
                const ok = await reactivateProvider(provider);
                if (ok) goSetup(provider);
            } else {
                await deactivateCurrent();
                goSetup(provider);
            }
        }
    });
}

async function deactivateCurrent() {
    if (!activeChannel.value) return;
    switching.value = true;
    try {
        // 1ª tentativa: UPDATE direto (funciona se owner_id = user atual)
        const { error } = await tenantDb().from('notification_channels')
            .update({ is_active: false, deleted_at: new Date().toISOString() })
            .eq('id', activeChannel.value.id);

        if (error) {
            // Fallback: canal criado pelo SaaS admin (RLS bloqueia update do tenant).
            // Usa edge function com service_role pra deativar.
            const { data: fnData, error: fnErr } = await supabase.functions.invoke('deactivate-notification-channel', {
                body: { channel_id: activeChannel.value.id }
            });
            if (fnErr || !fnData?.ok) {
                // Nem via edge function. Segue em frente — o setup do novo provider cuida.
                console.warn('[chooser] deactivate failed:', error.message, fnErr?.message);
                toast.add({
                    severity: 'warn',
                    summary: 'Canal anterior não foi desativado',
                    detail: 'Prossiga com o novo canal. Se o envio ainda usar o antigo, contate o suporte.',
                    life: 4500
                });
                activeChannel.value = null;
                return;
            }
        }
        activeChannel.value = null;
        toast.add({ severity: 'info', summary: 'Canal anterior desativado', life: 2500 });
    } catch (e) {
        console.warn('[chooser] deactivate unexpected error:', e?.message);
        activeChannel.value = null;  // limpa pra UI não ficar travada
    } finally {
        switching.value = false;
    }
}

const providerLabel = computed(() => {
    if (!activeProvider.value) return null;
    return activeProvider.value === 'twilio' ? 'WhatsApp Oficial AgenciaPSI' : 'WhatsApp Pessoal';
});

const providerIcon = computed(() => activeProvider.value === 'twilio' ? 'pi-verified' : 'pi-mobile');

const connectionDot = computed(() => {
    const s = activeChannel.value?.connection_status;
    const active = activeChannel.value?.is_active;
    if (!active) return { cls: 'bg-slate-400', label: 'Inativo' };
    if (s === 'open' || s === 'connected') return { cls: 'bg-green-500', label: 'Conectado' };
    if (s === 'close' || s === 'disconnected') return { cls: 'bg-red-500', label: 'Desconectado' };
    return { cls: 'bg-amber-400', label: 'Aguardando' };
});

onMounted(() => { loadChannel(); });
watch(() => tenantStore.activeTenantId, () => { loadChannel(); });
</script>

<template>
    <ConfirmDialog />

    <Teleport to="#cfg-page-actions" defer>
        <Button
            icon="pi pi-refresh"
            severity="secondary"
            outlined
            class="h-9 w-9 rounded-full"
            :loading="loading"
            v-tooltip.bottom="'Recarregar'"
            @click="loadChannel"
        />
    </Teleport>

    <div class="flex flex-col gap-4">
        <!-- Skeleton inicial -->
        <div v-if="loading" class="flex flex-col gap-3">
            <Skeleton height="5rem" class="rounded-md" />
            <Skeleton height="14rem" class="rounded-md" />
            <Skeleton height="14rem" class="rounded-md" />
        </div>

        <template v-else>
            <!-- Canal atual ativo -->
            <div
                v-if="activeProvider"
                class="rounded-md border p-4 flex items-center gap-3"
                :class="activeProvider === 'twilio' ? 'border-emerald-500/25 bg-emerald-500/5' : 'border-indigo-500/25 bg-indigo-500/5'"
            >
                <div
                    class="grid place-items-center w-11 h-11 rounded-md shrink-0"
                    :class="activeProvider === 'twilio' ? 'bg-emerald-500/15 text-emerald-500' : 'bg-indigo-500/15 text-indigo-500'"
                >
                    <i :class="['pi', providerIcon, 'text-xl']" />
                </div>
                <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-2 flex-wrap">
                        <span class="text-sm font-bold text-[var(--text-color)]">Canal ativo: {{ providerLabel }}</span>
                        <span class="inline-flex items-center gap-1 text-[0.7rem] font-semibold">
                            <span class="w-1.5 h-1.5 rounded-full" :class="connectionDot.cls" />
                            {{ connectionDot.label }}
                        </span>
                    </div>
                    <div v-if="activeProvider === 'twilio' && activeChannel?.twilio_phone_number" class="text-xs text-[var(--text-color-secondary)] mt-0.5 font-mono">
                        {{ activeChannel.twilio_phone_number }}
                    </div>
                    <div class="text-xs text-[var(--text-color-secondary)] mt-0.5">
                        Escolha outro canal abaixo pra trocar, ou clique em "Gerenciar" pra configurar o atual.
                    </div>
                </div>
                <router-link :to="activeProvider === 'twilio' ? oficialPath : pessoalPath">
                    <Button
                        label="Gerenciar"
                        icon="pi pi-cog"
                        size="small"
                        class="rounded-full"
                    />
                </router-link>
            </div>

            <!-- Título -->
            <div class="text-xs font-bold uppercase tracking-wide text-[var(--text-color-secondary)] opacity-65 mt-1">
                {{ activeProvider ? 'Outros canais disponíveis' : 'Escolha como conectar seu WhatsApp' }}
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-3">
                <!-- Cartão: WhatsApp Oficial AgenciaPSI (Twilio) -->
                <button
                    class="flex flex-col text-left gap-3 p-5 rounded-md border-2 bg-[var(--surface-card)] cursor-pointer transition-all hover:shadow-md"
                    :class="activeProvider === 'twilio'
                        ? 'border-emerald-500 shadow-[0_0_0_4px_rgba(34,197,94,0.12)]'
                        : 'border-[var(--surface-border)] hover:border-emerald-400/50'"
                    :disabled="switching"
                    @click="handleChoose('twilio')"
                >
                    <div class="flex items-start gap-3">
                        <div class="grid place-items-center w-12 h-12 rounded-md shrink-0 bg-emerald-500/10 text-emerald-500">
                            <i class="pi pi-verified text-2xl" />
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center gap-2 flex-wrap">
                                <span class="text-[1rem] font-bold text-[var(--text-color)]">WhatsApp Oficial AgenciaPSI</span>
                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[0.65rem] font-bold bg-emerald-500 text-white">⭐ Recomendado</span>
                            </div>
                            <div class="text-xs text-[var(--text-color-secondary)] mt-0.5">
                                Canal oficial gerenciado pela AgenciaPSI. Máxima confiabilidade e compliance.
                            </div>
                        </div>
                    </div>

                    <ul class="flex flex-col gap-1.5 text-xs">
                        <li class="flex items-start gap-2">
                            <i class="pi pi-check-circle text-emerald-500 mt-0.5" />
                            <span><strong>Zero risco de banimento</strong> — aprovado pela Meta, API oficial</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <i class="pi pi-check-circle text-emerald-500 mt-0.5" />
                            <span><strong>Número exclusivo</strong> da clínica, sem celular intermediário</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <i class="pi pi-check-circle text-emerald-500 mt-0.5" />
                            <span><strong>Conexão gerenciada</strong> — 99,9% uptime, zero manutenção</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <i class="pi pi-check-circle text-emerald-500 mt-0.5" />
                            <span><strong>Compliance LGPD + auditoria</strong> completa</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <i class="pi pi-dollar text-emerald-500 mt-0.5" />
                            <span>Consome <strong>créditos por mensagem</strong> enviada</span>
                        </li>
                    </ul>

                    <div class="mt-auto pt-2 border-t border-[var(--surface-border)] flex items-center justify-between">
                        <span class="text-[0.7rem] text-[var(--text-color-secondary)]">
                            Ideal pra <strong>clínicas</strong> e alto volume
                        </span>
                        <span class="text-[0.72rem] font-bold text-emerald-500 flex items-center gap-1">
                            {{ activeProvider === 'twilio' ? 'Ativo' : (softDeletedForProvider('twilio') ? 'Reativar' : 'Ativar') }} <i class="pi pi-arrow-right text-[0.6rem]" />
                        </span>
                    </div>
                </button>

                <!-- Cartão: WhatsApp Pessoal (Evolution) -->
                <button
                    class="flex flex-col text-left gap-3 p-5 rounded-md border-2 bg-[var(--surface-card)] cursor-pointer transition-all hover:shadow-md"
                    :class="activeProviderKey === 'evolution'
                        ? 'border-indigo-500 shadow-[0_0_0_4px_rgba(99,102,241,0.12)]'
                        : 'border-[var(--surface-border)] hover:border-indigo-400/50'"
                    :disabled="switching"
                    @click="handleChoose('evolution')"
                >
                    <div class="flex items-start gap-3">
                        <div class="grid place-items-center w-12 h-12 rounded-md shrink-0 bg-indigo-500/10 text-indigo-500">
                            <i class="pi pi-mobile text-2xl" />
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center gap-2 flex-wrap">
                                <span class="text-[1rem] font-bold text-[var(--text-color)]">WhatsApp Pessoal</span>
                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[0.65rem] font-bold bg-slate-500/10 text-slate-600">Gratuito</span>
                            </div>
                            <div class="text-xs text-[var(--text-color-secondary)] mt-0.5">
                                Conecta seu WhatsApp pessoal via QR code. Sem custo por mensagem.
                            </div>
                        </div>
                    </div>

                    <ul class="flex flex-col gap-1.5 text-xs">
                        <li class="flex items-start gap-2">
                            <i class="pi pi-check-circle text-indigo-500 mt-0.5" />
                            <span><strong>Gratuito</strong> — sem custo por mensagem</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <i class="pi pi-check-circle text-indigo-500 mt-0.5" />
                            <span>Setup rápido via <strong>QR code</strong></span>
                        </li>
                        <li class="flex items-start gap-2">
                            <i class="pi pi-exclamation-triangle text-amber-500 mt-0.5" />
                            <span><strong>Uso informal</strong> — Meta pode restringir/banir o número</span>
                        </li>
                        <li class="flex items-start gap-2">
                            <i class="pi pi-exclamation-triangle text-amber-500 mt-0.5" />
                            <span>Depende do <strong>celular ligado e com internet</strong></span>
                        </li>
                        <li class="flex items-start gap-2">
                            <i class="pi pi-info-circle text-amber-500 mt-0.5" />
                            <span>Sem SLA, sem garantia de uptime</span>
                        </li>
                    </ul>

                    <div class="mt-auto pt-2 border-t border-[var(--surface-border)] flex items-center justify-between">
                        <span class="text-[0.7rem] text-[var(--text-color-secondary)]">
                            Ideal pra <strong>uso pessoal</strong> e baixo volume
                        </span>
                        <span class="text-[0.72rem] font-bold text-indigo-500 flex items-center gap-1">
                            {{ activeProviderKey === 'evolution' ? 'Ativo' : (softDeletedForProvider('evolution') ? 'Reativar' : 'Ativar') }} <i class="pi pi-arrow-right text-[0.6rem]" />
                        </span>
                    </div>
                </button>
            </div>

            <!-- Info geral -->
            <div class="rounded-md border border-sky-500/25 bg-sky-500/5 p-3 flex items-start gap-2 text-xs text-[var(--text-color)]">
                <i class="pi pi-info-circle text-sky-500 mt-0.5" />
                <div>
                    <strong>Só um canal ativo por vez.</strong>
                    Trocar de canal desativa o outro — você vai precisar reconfigurar (conectar QR novamente no Pessoal, ou ativar o número no Oficial).
                    Histórico de conversas é <strong>preservado</strong> em ambos os casos.
                </div>
            </div>
        </template>
    </div>
</template>
