<!--
|--------------------------------------------------------------------------
| Agência PSI
|--------------------------------------------------------------------------
| Criado e desenvolvido por Leonardo Nohama
|
| Tecnologia aplicada à escuta.
| Estrutura para o cuidado.
|
| Arquivo: src/components/ui/PatientCreatePopover.vue
| Data: 2026
| Local: São Carlos/SP — Brasil
|--------------------------------------------------------------------------
| © 2026 — Todos os direitos reservados
|--------------------------------------------------------------------------
|
| Popover de cadastro de paciente — usado na página de pacientes e no
| menu lateral. Encapsula as 3 ações: Cadastro Rápido, Cadastro Completo
| e Link de Cadastro (com URL + copiar).
|
| Emits:
|   quick-create  — usuário escolheu Cadastro Rápido
|   go-complete   — usuário escolheu Cadastro Completo
|
| Expose:
|   toggle(event) — abre/fecha o Popover
|--------------------------------------------------------------------------
-->
<script setup>
import { ref, computed } from 'vue';
import Popover from 'primevue/popover';
import { useToast } from 'primevue/usetoast';
import { supabase } from '@/lib/supabase/client';

const emit = defineEmits(['quick-create', 'go-complete', 'show', 'hide']);
const toast = useToast();

const popRef = ref(null);
const inviteToken = ref('');
const loadingToken = ref(false);
let tokenLoaded = false;

const publicUrl = computed(() => {
    if (!inviteToken.value) return '';
    return `${window.location.origin}/cadastro/paciente?t=${encodeURIComponent(inviteToken.value)}`;
});

async function loadToken() {
    if (tokenLoaded || loadingToken.value) return;
    loadingToken.value = true;
    try {
        const { data: authData } = await supabase.auth.getUser();
        const uid = authData?.user?.id;
        if (!uid) return;
        const { data } = await supabase.from('patient_invites').select('token').eq('owner_id', uid).eq('active', true).order('created_at', { ascending: false }).limit(1);
        if (data?.[0]?.token) {
            inviteToken.value = data[0].token;
            tokenLoaded = true;
        }
    } catch {
        /* silencioso */
    } finally {
        loadingToken.value = false;
    }
}

function toggle(event) {
    popRef.value?.toggle(event);
    loadToken();
}

function close() {
    try {
        popRef.value?.hide();
    } catch {}
}

function onQuickCreate() {
    close();
    emit('quick-create');
}
function onGoComplete() {
    close();
    emit('go-complete');
}

async function copyLink() {
    if (!publicUrl.value) return;
    try {
        await navigator.clipboard.writeText(publicUrl.value);
        toast.add({ severity: 'success', summary: 'Copiado', detail: 'Link copiado para a área de transferência.', life: 1500 });
    } catch {
        window.prompt('Copie o link:', publicUrl.value);
    }
}

async function copyMessage() {
    if (!publicUrl.value) return;
    try {
        const msg = `Olá! Segue o link para seu pré-cadastro. Preencha com calma — campos opcionais podem ficar em branco:\n${publicUrl.value}`;
        await navigator.clipboard.writeText(msg);
        toast.add({ severity: 'success', summary: 'Copiado', detail: 'Mensagem copiada para a área de transferência.', life: 1500 });
    } catch {}
}

function openLink() {
    if (!publicUrl.value) return;
    window.open(publicUrl.value, '_blank', 'noopener');
}

defineExpose({ toggle, close });
</script>

<template>
    <Popover ref="popRef" @show="emit('show')" @hide="emit('hide')">
        <div class="flex flex-col min-w-[230px]">
            <!-- Cadastro rápido -->
            <button class="flex items-center gap-2.5 px-3 py-2.5 rounded-md cursor-pointer border-0 bg-transparent text-left w-full transition-colors duration-100 hover:bg-[var(--surface-ground,#f8fafc)]" @click="onQuickCreate">
                <div class="w-8 h-8 rounded-md flex items-center justify-center shrink-0 bg-indigo-500/10 text-indigo-500">
                    <i class="pi pi-bolt text-sm" />
                </div>
                <div>
                    <div class="text-sm font-semibold text-[var(--text-color)]">Cadastro Rápido</div>
                    <div class="text-[0.7rem] text-[var(--text-color-secondary)]">Nome, e-mail e telefone</div>
                </div>
            </button>

            <!-- Cadastro completo -->
            <button class="flex items-center gap-2.5 px-3 py-2.5 rounded-md cursor-pointer border-0 bg-transparent text-left w-full transition-colors duration-100 hover:bg-[var(--surface-ground,#f8fafc)]" @click="onGoComplete">
                <div class="w-8 h-8 rounded-md flex items-center justify-center shrink-0 bg-emerald-500/10 text-emerald-600">
                    <i class="pi pi-user-plus text-sm" />
                </div>
                <div>
                    <div class="text-sm font-semibold text-[var(--text-color)]">Cadastro Completo</div>
                    <div class="text-[0.7rem] text-[var(--text-color-secondary)]">Formulário detalhado</div>
                </div>
            </button>

            <!-- Divisor -->
            <div class="mx-3 my-1.5 border-t border-[var(--surface-border,#e2e8f0)]" />

            <!-- Link de cadastro -->
            <div class="px-3 pb-3">
                <div class="flex items-center gap-1.5 text-[0.68rem] font-bold uppercase tracking-wider text-[var(--text-color-secondary)] opacity-60 mb-2">
                    <i class="pi pi-link text-[0.6rem]" />
                    Link de cadastro
                </div>

                <!-- Carregando token -->
                <div v-if="loadingToken" class="flex items-center gap-1.5 text-xs text-[var(--text-color-secondary)] py-1"><i class="pi pi-spin pi-spinner text-[0.7rem]" /> Carregando link…</div>

                <!-- Sem token ainda -->
                <div v-else-if="!inviteToken" class="text-[0.7rem] text-[var(--text-color-secondary)] opacity-60 py-1">
                    Nenhum link ativo.
                    <button class="underline cursor-pointer border-0 bg-transparent text-[var(--primary-color,#6366f1)]" @click="loadToken">Tentar novamente</button>
                </div>

                <!-- URL + ações -->
                <template v-else>
                    <InputGroup class="w-full">
                        <InputText :value="publicUrl" readonly class="text-[0.68rem] font-mono" style="min-width: 0" />
                        <InputGroupAddon class="cursor-pointer hover:bg-[var(--surface-hover)] transition-colors" title="Copiar link" @click="copyLink">
                            <i class="pi pi-copy text-sm" />
                        </InputGroupAddon>
                    </InputGroup>

                    <div class="flex gap-1 mt-2">
                        <Button label="Copiar mensagem" icon="pi pi-comment" text size="small" class="flex-1 text-xs rounded-full" @click="copyMessage" />
                        <Button icon="pi pi-external-link" text size="small" class="rounded-full" v-tooltip.top="'Abrir no navegador'" @click="openLink" />
                    </div>
                </template>
            </div>
        </div>
    </Popover>
</template>
