agenciapsilmno/src/layout/melissa/MelissaBusca.vue

<script setup>
/*
 * MelissaBusca
 * --------------------------------------------------
 * Busca rápida glass-style. Adaptação do GlobalSearch da topbar
 * (`src/components/search/GlobalSearch.vue`) pro layout Melissa.
 *
 * Diferenças vs. GlobalSearch:
 *  - Não chama Supabase — recebe pacientes/eventos via prop (preview)
 *  - Visual glass (white-on-glass) ao invés de surface-card
 *  - Sem loading state (busca client-side, instantâneo)
 *  - Emite ações pro parent decidir o que fazer
 *
 * Quando promover pra produção: trocar a busca por chamada à RPC
 * `search_global` + manter a mesma estrutura de panel/items.
 */
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';

const props = defineProps({
    pacientes: { type: Array, default: () => [] },
    eventos: { type: Array, default: () => [] },
    atalhos: {
        type: Array,
        default: () => [
            { id: 'agenda', label: 'Agenda', icon: 'pi pi-calendar', sublabel: 'Sessões e compromissos', keywords: ['agenda', 'calendario', 'sessoes', 'hoje'] },
            { id: 'pacientes', label: 'Pacientes', icon: 'pi pi-users', sublabel: 'Cadastro e prontuários', keywords: ['pacientes', 'lista', 'cadastro'] },
            { id: 'conversas', label: 'WhatsApp', icon: 'pi pi-whatsapp', sublabel: 'Conversas em andamento', keywords: ['whatsapp', 'conversas', 'mensagens', 'chat'] },
            { id: 'financeiro', label: 'Financeiro', icon: 'pi pi-wallet', sublabel: 'Recebíveis e lançamentos', keywords: ['financeiro', 'pagamentos', 'cobrancas', 'dinheiro'] },
            { id: 'configuracoes', label: 'Configurações', icon: 'pi pi-cog', sublabel: 'Preferências e equipe', keywords: ['configuracoes', 'ajustes', 'preferencias', 'settings'] }
        ]
    }
});

const emit = defineEmits(['acao', 'paciente', 'evento']);

const rootEl = ref(null);
const inputEl = ref(null);
const query = ref('');
const showPanel = ref(false);
const activeIndex = ref(-1);

function normalize(s) {
    return String(s || '')
        .normalize('NFD')
        .replace(/[̀-ͯ]/g, '')
        .toLowerCase()
        .trim();
}

function fmtHora(h) {
    const horas = Math.floor(h);
    const mins = Math.round((h - horas) * 60);
    return `${String(horas).padStart(2, '0')}:${String(mins).padStart(2, '0')}`;
}

const filteredAtalhos = computed(() => {
    const q = normalize(query.value);
    if (!q) return props.atalhos.slice(0, 4); // 4 defaults quando vazio
    return props.atalhos.filter((a) => {
        const hay = normalize(a.label + ' ' + (a.keywords || []).join(' '));
        return hay.includes(q);
    }).slice(0, 5);
});

const filteredPacientes = computed(() => {
    const q = normalize(query.value);
    if (q.length < 2) return [];
    return props.pacientes
        .filter((p) => normalize(p.nome).includes(q))
        .slice(0, 5);
});

const filteredEventos = computed(() => {
    const q = normalize(query.value);
    if (q.length < 2) return [];
    return props.eventos
        .filter((e) => {
            const hay = normalize(
                (e.label || '') + ' ' + (e.pacienteNome || '') + ' ' + (e.descricao || '')
            );
            return hay.includes(q);
        })
        .slice(0, 5);
});

const flatList = computed(() => {
    const out = [];
    filteredAtalhos.value.forEach((a, i) => out.push({ group: 'atalhos', item: a, idx: i }));
    filteredPacientes.value.forEach((p, i) => out.push({ group: 'pacientes', item: p, idx: i }));
    filteredEventos.value.forEach((e, i) => out.push({ group: 'eventos', item: e, idx: i }));
    return out;
});

const hasAnyResult = computed(() => flatList.value.length > 0);

function findFlatIndex(group, idx) {
    return flatList.value.findIndex((x) => x.group === group && x.idx === idx);
}

function selectEntry(entry) {
    if (entry.group === 'atalhos') emit('acao', entry.item.id);
    else if (entry.group === 'pacientes') emit('paciente', entry.item);
    else if (entry.group === 'eventos') emit('evento', entry.item);
    closePanel();
}

function closePanel() {
    showPanel.value = false;
    query.value = '';
    activeIndex.value = -1;
    inputEl.value?.blur();
}

function onFocus() {
    showPanel.value = true;
}

function onClickOutside(e) {
    if (rootEl.value && !rootEl.value.contains(e.target)) {
        showPanel.value = false;
        activeIndex.value = -1;
    }
}

function onKeydown(e) {
    if (!showPanel.value) return;
    if (e.key === 'ArrowDown') {
        e.preventDefault();
        activeIndex.value = Math.min(activeIndex.value + 1, flatList.value.length - 1);
    } else if (e.key === 'ArrowUp') {
        e.preventDefault();
        activeIndex.value = Math.max(activeIndex.value - 1, 0);
    } else if (e.key === 'Enter' && activeIndex.value >= 0) {
        e.preventDefault();
        selectEntry(flatList.value[activeIndex.value]);
    } else if (e.key === 'Escape') {
        // Stop bubbling pra ESC do parent não fechar overlay aleatório
        e.stopPropagation();
        closePanel();
    }
}

function onGlobalKeydown(e) {
    // Ctrl+K / ⌘+K → foca input
    if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'k') {
        e.preventDefault();
        showPanel.value = true;
        inputEl.value?.focus();
    }
}

onMounted(() => {
    document.addEventListener('mousedown', onClickOutside);
    window.addEventListener('keydown', onGlobalKeydown);
});
onBeforeUnmount(() => {
    document.removeEventListener('mousedown', onClickOutside);
    window.removeEventListener('keydown', onGlobalKeydown);
});
</script>

<template>
    <div ref="rootEl" class="mb-search">
        <div class="mb-field">
            <i class="pi pi-search mb-field__icon" />
            <input
                ref="inputEl"
                v-model="query"
                type="text"
                placeholder="Buscar paciente, agenda, atalho…"
                class="mb-field__input"
                @focus="onFocus"
                @keydown="onKeydown"
            />
            <span class="mb-field__kbd" aria-hidden="true">Ctrl K</span>
        </div>

        <Transition name="mb-fade">
            <div v-if="showPanel" class="mb-panel" role="listbox">
                <div
                    v-if="query.trim().length >= 2 && !hasAnyResult"
                    class="mb-empty"
                >
                    Nada encontrado pra "<span class="text-white/80">{{ query.trim() }}</span>"
                </div>

                <!-- Atalhos -->
                <div v-if="filteredAtalhos.length" class="mb-group">
                    <div class="mb-group__title">{{ query.trim() ? 'Ações' : 'Atalhos' }}</div>
                    <button
                        v-for="(a, i) in filteredAtalhos"
                        :key="'a-' + a.id"
                        class="mb-item"
                        :class="{ 'is-active': findFlatIndex('atalhos', i) === activeIndex }"
                        @click="selectEntry({ group: 'atalhos', item: a })"
                        @mouseenter="activeIndex = findFlatIndex('atalhos', i)"
                    >
                        <span class="mb-item__icon"><i :class="a.icon" /></span>
                        <span class="mb-item__main">
                            <span class="mb-item__label">{{ a.label }}</span>
                            <span v-if="a.sublabel" class="mb-item__sub">{{ a.sublabel }}</span>
                        </span>
                        <i class="mb-item__go pi pi-arrow-right" />
                    </button>
                </div>

                <!-- Pacientes -->
                <div v-if="filteredPacientes.length" class="mb-group">
                    <div class="mb-group__title">Pacientes</div>
                    <button
                        v-for="(p, i) in filteredPacientes"
                        :key="'p-' + p.id"
                        class="mb-item"
                        :class="{ 'is-active': findFlatIndex('pacientes', i) === activeIndex }"
                        @click="selectEntry({ group: 'pacientes', item: p })"
                        @mouseenter="activeIndex = findFlatIndex('pacientes', i)"
                    >
                        <span class="mb-item__icon"><i class="pi pi-user" /></span>
                        <span class="mb-item__main">
                            <span class="mb-item__label">{{ p.nome }}</span>
                            <span class="mb-item__sub">Abrir prontuário</span>
                        </span>
                        <i class="mb-item__go pi pi-arrow-right" />
                    </button>
                </div>

                <!-- Eventos -->
                <div v-if="filteredEventos.length" class="mb-group">
                    <div class="mb-group__title">Agenda de hoje</div>
                    <button
                        v-for="(e, i) in filteredEventos"
                        :key="'e-' + e.id"
                        class="mb-item"
                        :class="{ 'is-active': findFlatIndex('eventos', i) === activeIndex }"
                        @click="selectEntry({ group: 'eventos', item: e })"
                        @mouseenter="activeIndex = findFlatIndex('eventos', i)"
                    >
                        <span
                            class="mb-item__icon"
                            :style="{ backgroundColor: `${e.color}33`, color: e.color }"
                        >
                            <i class="pi pi-clock" />
                        </span>
                        <span class="mb-item__main">
                            <span class="mb-item__label">{{ e.label }}</span>
                            <span class="mb-item__sub">{{ fmtHora(e.startH) }} – {{ fmtHora(e.endH) }}</span>
                        </span>
                        <i class="mb-item__go pi pi-arrow-right" />
                    </button>
                </div>
            </div>
        </Transition>
    </div>
</template>

<style scoped>
.mb-search {
    position: relative;
    width: 100%;
    max-width: 560px;
    /* Só horizontal — top/bottom ficam livres pro parent (mt-X do Tailwind) */
    margin-left: auto;
    margin-right: auto;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.mb-field {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--m-bg-soft);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid var(--m-border-strong);
    border-radius: 12px;
    padding: 0 14px;
    height: 44px;
    transition: background-color 160ms ease, border-color 160ms ease;
}
.mb-field:focus-within {
    background: var(--m-bg-soft-hover);
    border-color: var(--m-border-strong);
}
.mb-field__icon {
    color: var(--m-text-muted);
    font-size: 0.95rem;
    margin-right: 10px;
    flex-shrink: 0;
}
.mb-field__input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: white;
    font-size: 0.9rem;
    font-family: inherit;
    min-width: 0;
}
.mb-field__input::placeholder {
    color: var(--m-text-muted);
}
.mb-field__kbd {
    color: var(--m-text-muted);
    font-size: 0.62rem;
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--m-bg-soft);
    border: 1px solid var(--m-border-strong);
    margin-left: 8px;
    flex-shrink: 0;
    letter-spacing: 0.05em;
}

.mb-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--m-bg-medium);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    border: 1px solid var(--m-border-strong);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    scrollbar-width: thin;
    scrollbar-color: var(--m-border-strong) transparent;
}
.mb-panel::-webkit-scrollbar { width: 6px; }
.mb-panel::-webkit-scrollbar-thumb {
    background: var(--m-border-strong);
    border-radius: 3px;
}

.mb-empty {
    padding: 18px 14px;
    text-align: center;
    color: var(--m-text-muted);
    font-size: 0.85rem;
}

.mb-group + .mb-group {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--m-border);
}
.mb-group__title {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--m-text-faint);
    font-size: 0.6rem;
    font-weight: 600;
    padding: 8px 10px 4px;
}

.mb-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: white;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 100ms ease;
}
.mb-item:hover,
.mb-item.is-active {
    background: var(--m-bg-soft);
}
.mb-item__icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    background: var(--m-bg-soft);
    border-radius: 7px;
    color: var(--m-text-muted);
    flex-shrink: 0;
    font-size: 0.85rem;
}
.mb-item__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.mb-item__label {
    font-size: 0.85rem;
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mb-item__sub {
    font-size: 0.7rem;
    color: var(--m-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mb-item__go {
    color: var(--m-text-faint);
    font-size: 0.7rem;
    flex-shrink: 0;
}

.mb-fade-enter-active,
.mb-fade-leave-active {
    transition: opacity 140ms ease, transform 160ms ease;
}
.mb-fade-enter-from,
.mb-fade-leave-to {
    opacity: 0;
    transform: translateY(-6px);
}
</style>