agenciapsilmno/src/features/agenda/pages/AgendamentosRecebidosPage.vue

<!--
|--------------------------------------------------------------------------
| Agência PSI
|--------------------------------------------------------------------------
| Criado e desenvolvido por Leonardo Nohama
|
| Tecnologia aplicada à escuta.
| Estrutura para o cuidado.
|
| Arquivo: src/features/agenda/pages/AgendamentosRecebidosPage.vue
| Data: 2026
| Local: São Carlos/SP — Brasil
|--------------------------------------------------------------------------
| © 2026 — Todos os direitos reservados
|--------------------------------------------------------------------------
-->
<script setup>
import { ref, computed, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useTenantStore } from '@/stores/tenantStore';
import { supabase } from '@/lib/supabase/client';
import { useToast } from 'primevue/usetoast';

import AgendaEventDialog from '@/features/agenda/components/AgendaEventDialog.vue';
import { useAgendaSettings } from '@/features/agenda/composables/useAgendaSettings';
import { useDeterminedCommitments } from '@/features/agenda/composables/useDeterminedCommitments';
import { useAgendaEvents } from '@/features/agenda/composables/useAgendaEvents';

const toast = useToast();
const router = useRouter();
const tenantStore = useTenantStore();

// ── Identidade ────────────────────────────────────────────
const isClinic = computed(() => tenantStore.role === 'clinic_admin' || tenantStore.role === 'tenant_admin');
const tenantId = computed(() => tenantStore.activeTenantId || tenantStore.tenantId || tenantStore.tenant?.id || null);

const ownerId = ref(null);
async function loadOwnerId() {
    const { data } = await supabase.auth.getUser();
    ownerId.value = data?.user?.id || null;
}

// ── Filtros ───────────────────────────────────────────────
const filtroStatus = ref('pendente');
const filtroBusca = ref('');

const statusOpts = [
    { label: 'Pendentes', value: 'pendente', icon: 'pi-clock', sev: 'warn' },
    { label: 'Autorizados', value: 'autorizado', icon: 'pi-check-circle', sev: 'success' },
    { label: 'Convertidos', value: 'convertido', icon: 'pi-calendar-plus', sev: 'info' },
    { label: 'Recusados', value: 'recusado', icon: 'pi-times-circle', sev: 'danger' },
    { label: 'Todos', value: null, icon: 'pi-list', sev: 'secondary' }
];

// ── Lista ─────────────────────────────────────────────────
const solicitacoes = ref([]);
const loading = ref(false);
const hasLoaded = ref(false);
const totalPendentes = ref(0);
const totalAutorizados = ref(0);

async function load() {
    if (!ownerId.value) return;
    loading.value = true;
    try {
        let q = supabase
            .from('agendador_solicitacoes')
            .select('id, owner_id, tenant_id, paciente_nome, paciente_sobrenome, paciente_email, paciente_celular, paciente_cpf, tipo, modalidade, data_solicitada, hora_solicitada, reservado_ate, motivo, como_conheceu, status, created_at')
            .order('data_solicitada', { ascending: false })
            .order('hora_solicitada', { ascending: true });

        if (isClinic.value) q = q.eq('tenant_id', tenantId.value);
        else q = q.eq('owner_id', ownerId.value);

        if (filtroStatus.value) q = q.eq('status', filtroStatus.value);

        const { data, error } = await q;
        if (error) throw error;
        solicitacoes.value = data || [];

        if (filtroStatus.value !== 'pendente') {
            let qp = supabase.from('agendador_solicitacoes').select('id', { count: 'exact', head: true }).eq('status', 'pendente');
            if (isClinic.value) qp = qp.eq('tenant_id', tenantId.value);
            else qp = qp.eq('owner_id', ownerId.value);
            const { count } = await qp;
            totalPendentes.value = count || 0;
        } else {
            totalPendentes.value = solicitacoes.value.length;
        }

        // Conta autorizados (sempre, independente do filtro ativo)
        if (filtroStatus.value !== 'autorizado') {
            let qa = supabase.from('agendador_solicitacoes').select('id', { count: 'exact', head: true }).eq('status', 'autorizado');
            if (isClinic.value) qa = qa.eq('tenant_id', tenantId.value);
            else qa = qa.eq('owner_id', ownerId.value);
            const { count: ca } = await qa;
            totalAutorizados.value = ca || 0;
        } else {
            totalAutorizados.value = solicitacoes.value.length;
        }
    } catch (e) {
        console.error('[AgendamentosRecebidos]', e);
        toast.add({ severity: 'error', summary: 'Erro', detail: 'Não foi possível carregar as solicitações.', life: 4000 });
    } finally {
        loading.value = false;
        hasLoaded.value = true;
    }
}

watch(filtroStatus, load);

// ── Filtro local ──────────────────────────────────────────
const listaFiltrada = computed(() => {
    const q = filtroBusca.value.trim().toLowerCase();
    if (!q) return solicitacoes.value;
    return solicitacoes.value.filter((s) => `${s.paciente_nome} ${s.paciente_sobrenome}`.toLowerCase().includes(q) || (s.paciente_email || '').toLowerCase().includes(q) || (s.paciente_celular || '').includes(q));
});

// ── Formatação ────────────────────────────────────────────
function fmtData(iso) {
    if (!iso) return '—';
    const [y, m, d] = iso.split('-');
    const dias = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'];
    return `${dias[new Date(+y, +m - 1, +d).getDay()]}, ${d}/${m}/${y}`;
}
function fmtHora(h) {
    return h ? String(h).slice(0, 5) : '—';
}
function nomeCompleto(s) {
    return `${s.paciente_nome || ''} ${s.paciente_sobrenome || ''}`.trim() || '—';
}
function initials(s) {
    return (s.paciente_nome || '?')[0].toUpperCase();
}

const tipoLabel = { primeira: 'Primeira Entrevista', retorno: 'Retorno', reagendar: 'Reagendamento' };
const modalLabel = { presencial: 'Presencial', online: 'Online', ambos: 'Ambos' };

function statusSev(st) {
    return { pendente: 'warn', autorizado: 'success', recusado: 'danger', convertido: 'info', expirado: 'secondary' }[st] || 'secondary';
}
function statusLabel(st) {
    return { pendente: 'Pendente', autorizado: 'Autorizado', recusado: 'Recusado', convertido: 'Convertido', expirado: 'Expirado' }[st] || st;
}
function isExpirada(s) {
    if (s.status !== 'pendente' || !s.reservado_ate) return false;
    return new Date(s.reservado_ate) < new Date();
}

// ── Expandir detalhe ──────────────────────────────────────
const expandedId = ref(null);
function toggleExpand(id) {
    expandedId.value = expandedId.value === id ? null : id;
}

// ── Aprovar ───────────────────────────────────────────────
const aprovando = ref(null);
async function aprovar(s) {
    aprovando.value = s.id;
    try {
        const { error } = await supabase.from('agendador_solicitacoes').update({ status: 'autorizado', autorizado_em: new Date().toISOString() }).eq('id', s.id);
        if (error) throw error;
        toast.add({ severity: 'success', summary: 'Autorizado', detail: `Solicitação de ${nomeCompleto(s)} autorizada.`, life: 3000 });
        await load();
    } catch (e) {
        toast.add({ severity: 'error', summary: 'Erro', detail: e.message, life: 4000 });
    } finally {
        aprovando.value = null;
    }
}

// ── Recusar ───────────────────────────────────────────────
const recusandoId = ref(null);
const recusaMotivo = ref('');
const recusaDialogOpen = ref(false);
let _recusaTarget = null;

function abrirRecusa(s) {
    _recusaTarget = s;
    recusaMotivo.value = '';
    recusaDialogOpen.value = true;
    recusandoId.value = null;
}

async function confirmarRecusa() {
    const s = _recusaTarget;
    if (!s) return;
    recusandoId.value = s.id;
    try {
        const { error } = await supabase
            .from('agendador_solicitacoes')
            .update({ status: 'recusado', recusado_motivo: recusaMotivo.value || null })
            .eq('id', s.id);
        if (error) throw error;
        recusaDialogOpen.value = false;
        toast.add({ severity: 'info', summary: 'Recusado', detail: `Solicitação de ${nomeCompleto(s)} recusada.`, life: 3000 });
        await load();
    } catch (e) {
        toast.add({ severity: 'error', summary: 'Erro', detail: e.message, life: 4000 });
    } finally {
        recusandoId.value = null;
    }
}

// ── Converter em sessão ───────────────────────────────────
const { settings, load: loadSettings } = useAgendaSettings();
const { create: createEvento } = useAgendaEvents();
const { rows: commitmentRows, load: loadCommitments } = useDeterminedCommitments(tenantId);
const commitmentOptions = computed(() => (commitmentRows.value || []).filter((c) => c.active !== false));
const sessionCommitmentId = computed(() => commitmentOptions.value.find((c) => c.native_key === 'session')?.id || null);

const eventDialogOpen = ref(false);
const eventRow = ref(null);
const convertendoId = ref(null);
let _convertTarget = null;

async function converterEmSessao(s) {
    _convertTarget = s;
    convertendoId.value = s.id;
    try {
        const pacienteId = await encontrarOuCriarPaciente(s);
        const hora = fmtHora(s.hora_solicitada);
        eventRow.value = {
            owner_id: s.owner_id,
            tipo: 'sessao',
            modalidade: s.modalidade || 'presencial',
            inicio_em: `${s.data_solicitada}T${hora}:00`,
            patient_id: pacienteId,
            paciente_id: pacienteId,
            paciente_nome: nomeCompleto(s),
            _solicitacaoId: s.id
        };
        eventDialogOpen.value = true;
    } catch (e) {
        toast.add({ severity: 'error', summary: 'Erro', detail: e.message, life: 4000 });
    } finally {
        convertendoId.value = null;
    }
}

async function encontrarOuCriarPaciente(s) {
    const email = s.paciente_email?.toLowerCase().trim();
    if (email) {
        const { data: found } = await supabase.from('patients').select('id').eq('tenant_id', tenantId.value).ilike('email_principal', email).maybeSingle();
        if (found?.id) return found.id;
    }
    const { data: memberData, error: memberErr } = await supabase.from('tenant_members').select('id').eq('tenant_id', tenantId.value).eq('user_id', ownerId.value).eq('status', 'active').maybeSingle();
    if (memberErr || !memberData?.id) throw new Error('Membro ativo não encontrado para criação do paciente.');
    const scope = isClinic.value ? 'clinic' : 'therapist';
    const nomeCompleto_ = [s.paciente_nome, s.paciente_sobrenome].filter(Boolean).join(' ');
    const { data: novo, error: criErr } = await supabase
        .from('patients')
        .insert({
            tenant_id: tenantId.value,
            responsible_member_id: memberData.id,
            owner_id: ownerId.value,
            nome_completo: nomeCompleto_,
            email_principal: email || null,
            telefone: s.paciente_celular?.replace(/\D/g, '') || null,
            cpf: s.paciente_cpf?.replace(/\D/g, '') || null,
            onde_nos_conheceu: s.como_conheceu || null,
            observacoes: s.motivo ? `Motivo da consulta: ${s.motivo}` : null,
            patient_scope: scope,
            therapist_member_id: scope === 'therapist' ? memberData.id : null,
            status: 'Ativo'
        })
        .select('id')
        .single();
    if (criErr) throw new Error(`Falha ao criar paciente: ${criErr.message}`);
    toast.add({ severity: 'info', summary: 'Paciente criado', detail: `${nomeCompleto_} foi adicionado à sua lista de pacientes.`, life: 3000 });
    return novo.id;
}

function isUuid(v) {
    return /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(String(v || ''));
}

async function onEventSaved(arg) {
    eventDialogOpen.value = false;
    if (!_convertTarget) return;
    const target = _convertTarget;
    _convertTarget = null;
    convertendoId.value = target.id;
    try {
        const isWrapped = !!arg && Object.prototype.hasOwnProperty.call(arg, 'payload');
        const raw = isWrapped ? arg.payload : arg;
        const normalized = { ...raw };
        if (!normalized.owner_id) normalized.owner_id = ownerId.value;
        normalized.tenant_id = tenantId.value;
        normalized.tipo = 'sessao';
        if (!normalized.status) normalized.status = 'agendado';
        if (!String(normalized.titulo || '').trim()) normalized.titulo = 'Sessão';
        if (!normalized.visibility_scope) normalized.visibility_scope = 'public';
        if (!isUuid(normalized.paciente_id)) normalized.paciente_id = null;
        if (normalized.determined_commitment_id && !isUuid(normalized.determined_commitment_id)) normalized.determined_commitment_id = null;
        const dbFields = ['tenant_id', 'owner_id', 'terapeuta_id', 'patient_id', 'tipo', 'status', 'titulo', 'observacoes', 'inicio_em', 'fim_em', 'visibility_scope', 'determined_commitment_id', 'titulo_custom', 'extra_fields', 'modalidade'];
        const dbPayload = {};
        for (const k of dbFields) {
            if (normalized[k] !== undefined) dbPayload[k] = normalized[k];
        }
        await createEvento(dbPayload);
        const { error } = await supabase.from('agendador_solicitacoes').update({ status: 'convertido' }).eq('id', target.id);
        if (error) throw error;
        toast.add({ severity: 'success', summary: 'Convertido!', detail: `Sessão criada para ${nomeCompleto(target)}.`, life: 4000 });
        await load();
    } catch (e) {
        toast.add({ severity: 'error', summary: 'Erro ao converter', detail: e.message, life: 4000 });
    } finally {
        convertendoId.value = null;
    }
}

onMounted(async () => {
    await loadOwnerId();
    await Promise.all([loadSettings(), loadCommitments(), load()]);
});

function irParaAgenda(s) {
    const base = isClinic.value ? '/admin/agenda/clinica' : '/therapist/agenda';
    router.push({ path: base, query: { date: s.data_solicitada } });
}

function onEventDialogClose() {
    eventDialogOpen.value = false;
    _convertTarget = null;
    eventRow.value = null;
}

// ── Label do empty state de acordo com o filtro ───────────
const emptyTitle = computed(() => {
    if (filtroStatus.value === 'pendente') return 'Nenhuma solicitação pendente';
    if (filtroStatus.value === 'autorizado') return 'Nenhuma solicitação autorizada';
    if (filtroStatus.value === 'convertido') return 'Nenhuma solicitação convertida';
    if (filtroStatus.value === 'recusado') return 'Nenhuma solicitação recusada';
    if (filtroBusca.value.trim()) return 'Nenhum resultado para a busca';
    return 'Nenhuma solicitação recebida';
});
const emptySub = computed(() => {
    if (filtroBusca.value.trim()) return 'Tente mudar o termo de busca ou limpe o filtro.';
    if (filtroStatus.value === 'pendente') return 'Quando um paciente solicitar um agendamento pelo link externo, ele aparecerá aqui.';
    return 'Tente selecionar outro filtro de status.';
});
</script>

<template>
    <!-- Sentinel -->
    <div class="h-px" />

    <!-- ══════════════════════════════════════════════════════
       HERO sticky
  ═══════════════════════════════════════════════════════ -->
    <section
        class="sticky my-3 md:mx-4 z-20 overflow-hidden rounded-md border border-[var(--surface-border,#e2e8f0)] bg-[var(--surface-card,#fff)] px-3 py-2.5 transition-[border-radius] duration-200"
        :style="{ top: 'var(--layout-sticky-top, 56px)' }"
    >
        <!-- Blobs -->
        <div class="absolute inset-0 pointer-events-none overflow-hidden" aria-hidden="true">
            <div class="absolute w-64 h-64 -top-16 -right-8 rounded-full blur-[60px] bg-indigo-500/10" />
            <div class="absolute w-72 h-72 top-0 -left-16 rounded-full blur-[60px] bg-emerald-400/[0.08]" />
            <div class="absolute w-56 h-56 -bottom-8 right-1/4 rounded-full blur-[55px] bg-orange-400/[0.07]" />
        </div>

        <div class="relative z-1 flex flex-col gap-2.5">
            <!-- Linha 1: brand + busca + refresh -->
            <div class="flex items-center gap-3 flex-wrap">
                <!-- Brand -->
                <div class="flex items-center gap-2 shrink-0">
                    <div class="grid place-items-center w-9 h-9 rounded-md shrink-0 bg-indigo-500/10 text-indigo-500">
                        <i class="pi pi-inbox text-base" />
                    </div>
                    <div class="min-w-0 hidden sm:block">
                        <div class="flex items-center gap-2 text-[1rem] font-bold tracking-tight text-[var(--text-color)]">
                            Agendamentos Recebidos
                            <span v-if="totalPendentes > 0" class="inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 rounded-full bg-orange-500 text-white text-[0.68rem] font-bold">{{ totalPendentes }}</span>
                        </div>
                        <div class="text-[1rem] text-[var(--text-color-secondary)]">{{ isClinic ? 'Toda a clínica' : 'Sua agenda online' }} · Solicitações públicas</div>
                    </div>
                </div>

                <!-- Busca -->
                <div class="flex-1 min-w-[180px] max-w-xs">
                    <IconField class="w-full">
                        <InputIcon class="pi pi-search" />
                        <InputText v-model="filtroBusca" placeholder="Buscar por nome, e-mail..." class="w-full" autocomplete="off" />
                    </IconField>
                </div>

                <!-- Refresh -->
                <Button icon="pi pi-refresh" severity="secondary" outlined class="h-9 w-9 rounded-full shrink-0" :loading="loading" title="Atualizar" @click="load" />
            </div>

            <!-- Linha 2: chips de status -->
            <div class="flex flex-wrap gap-1.5">
                <button
                    v-for="opt in statusOpts"
                    :key="opt.value ?? 'all'"
                    class="inline-flex items-center gap-1.5 px-3.5 py-1 rounded-full text-[1rem] font-semibold border-[1.5px] cursor-pointer transition-all duration-150 select-none"
                    :class="
                        filtroStatus === opt.value
                            ? 'bg-[var(--primary-color,#6366f1)] border-[var(--primary-color,#6366f1)] text-white'
                            : 'border-[var(--surface-border,#e2e8f0)] bg-[var(--surface-ground,#f8fafc)] text-[var(--text-color-secondary)] hover:border-indigo-300 hover:text-[var(--text-color)]'
                    "
                    @click="filtroStatus = opt.value"
                >
                    <i :class="`pi ${opt.icon} text-[0.72rem]`" />
                    {{ opt.label }}
                    <span
                        v-if="opt.value === 'pendente' && totalPendentes > 0"
                        class="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full text-[0.65rem] font-black"
                        :class="filtroStatus === 'pendente' ? 'bg-white/25' : 'bg-orange-500 text-white'"
                        >{{ totalPendentes }}</span
                    >
                </button>
            </div>
        </div>
    </section>

    <!-- ══════════════════════════════════════════════════════
       BANNER: autorizados aguardando conversão
  ═══════════════════════════════════════════════════════ -->
    <Transition name="ar-banner">
        <div
            v-if="totalAutorizados > 0 && filtroStatus !== 'autorizado' && !loading"
            class="my-3 md:mx-4 flex items-center gap-3 px-4 py-3 rounded-md border border-amber-300/60 bg-amber-50 cursor-pointer hover:bg-amber-100/70 transition-colors duration-150"
            @click="filtroStatus = 'autorizado'"
        >
            <!-- Ícone pulsante -->
            <div class="relative shrink-0">
                <div class="grid place-items-center w-8 h-8 rounded-md bg-amber-400/20 text-amber-600">
                    <i class="pi pi-calendar-plus text-[0.95rem]" />
                </div>
                <span class="absolute -top-1 -right-1 flex h-2.5 w-2.5">
                    <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75" />
                    <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-amber-500" />
                </span>
            </div>

            <!-- Texto -->
            <div class="flex-1 min-w-0">
                <span class="font-semibold text-[1rem] text-amber-800">
                    {{ totalAutorizados === 1 ? 'Há 1 agendamento autorizado aguardando conversão para sessão!' : `Há ${totalAutorizados} agendamentos autorizados aguardando conversão para sessão!` }}
                </span>
                <span class="hidden sm:inline text-[1rem] text-amber-700 opacity-80 ml-1">Clique para ver.</span>
            </div>

            <!-- Badge + seta -->
            <div class="flex items-center gap-2 shrink-0">
                <span class="inline-flex items-center justify-center min-w-[22px] h-[22px] px-1.5 rounded-full bg-amber-500 text-white text-[1rem] font-bold">
                    {{ totalAutorizados }}
                </span>
                <i class="pi pi-arrow-right text-[1rem] text-amber-600" />
            </div>
        </div>
    </Transition>

    <!-- ══════════════════════════════════════════════════════
       CONTEÚDO
  ═══════════════════════════════════════════════════════ -->
    <div class="px-3 md:px-4 pb-8">
        <!-- Loading skeleton -->
        <div v-if="loading" class="flex flex-col gap-3">
            <div v-for="n in 4" :key="n" class="flex items-center gap-4 p-4 rounded-md border border-[var(--surface-border,#e2e8f0)] bg-[var(--surface-card,#fff)]">
                <div class="w-10 h-10 rounded-full shrink-0 bg-[var(--surface-border,#e2e8f0)] animate-pulse" />
                <div class="flex flex-col gap-2 flex-1">
                    <div class="h-3.5 w-3/5 rounded-md bg-[var(--surface-border,#e2e8f0)] animate-pulse" />
                    <div class="h-2.5 w-2/5 rounded-md bg-[var(--surface-border,#e2e8f0)] animate-pulse" />
                </div>
            </div>
        </div>

        <!-- ── EMPTY STATE ──────────────────────────────────── -->
        <div v-else-if="!listaFiltrada.length" class="flex flex-col items-center justify-center gap-4 rounded-md border-2 border-dashed border-[var(--surface-border,#e2e8f0)] bg-[var(--surface-ground,#f8fafc)] py-16 px-6 text-center">
            <!-- Ícone com X -->
            <div class="relative">
                <div class="grid place-items-center w-20 h-20 rounded-2xl bg-[var(--surface-card,#fff)] border border-[var(--surface-border,#e2e8f0)] shadow-sm text-[var(--text-color-secondary)]">
                    <i class="pi pi-inbox text-4xl opacity-30" />
                </div>
                <!-- badge X -->
                <div class="absolute -top-2 -right-2 w-7 h-7 rounded-full bg-[var(--surface-card,#fff)] border border-[var(--surface-border,#e2e8f0)] shadow-sm grid place-items-center">
                    <i class="pi pi-times text-[0.65rem] text-[var(--text-color-secondary)] opacity-50" />
                </div>
            </div>

            <div>
                <div class="font-bold text-[1rem] text-[var(--text-color)] mb-1">{{ emptyTitle }}</div>
                <div class="text-[1rem] text-[var(--text-color-secondary)] max-w-xs leading-relaxed">{{ emptySub }}</div>
            </div>

            <Button
                v-if="filtroStatus !== null || filtroBusca.trim()"
                label="Limpar filtros"
                icon="pi pi-filter-slash"
                severity="secondary"
                outlined
                size="small"
                class="rounded-full mt-1"
                @click="
                    filtroStatus = 'pendente';
                    filtroBusca = '';
                "
            />
        </div>

        <!-- ── LISTA ────────────────────────────────────────── -->
        <div v-else class="flex flex-col gap-2.5">
            <div
                v-for="s in listaFiltrada"
                :key="s.id"
                class="rounded-md border border-[var(--surface-border,#e2e8f0)] bg-[var(--surface-card,#fff)] overflow-hidden transition-shadow duration-150 hover:shadow-[0_4px_18px_rgba(0,0,0,0.07)]"
                :class="{ 'opacity-60': isExpirada(s) }"
            >
                <!-- Linha principal clicável -->
                <div class="flex items-center gap-3 px-4 py-3.5 cursor-pointer hover:bg-[var(--surface-ground,#f8fafc)] transition-colors duration-100" @click="toggleExpand(s.id)">
                    <!-- Avatar inicial -->
                    <div class="grid place-items-center w-10 h-10 rounded-full shrink-0 font-bold text-[0.95rem] bg-indigo-500/10 text-indigo-600">
                        {{ initials(s) }}
                    </div>

                    <!-- Dados -->
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center flex-wrap gap-1.5 mb-1">
                            <span class="font-bold text-[0.9rem] text-[var(--text-color)]">{{ nomeCompleto(s) }}</span>
                            <Tag :value="statusLabel(s.status)" :severity="statusSev(s.status)" />
                            <Tag v-if="isExpirada(s)" value="Reserva expirada" severity="secondary" />
                        </div>
                        <div class="flex flex-wrap gap-3 text-[0.75rem] text-[var(--text-color-secondary)]">
                            <span><i class="pi pi-calendar mr-1 text-[1rem]" />{{ fmtData(s.data_solicitada) }}</span>
                            <span><i class="pi pi-clock mr-1 text-[1rem]" />{{ fmtHora(s.hora_solicitada) }}</span>
                            <span><i class="pi pi-tag mr-1 text-[1rem]" />{{ tipoLabel[s.tipo] || s.tipo }}</span>
                            <span v-if="s.modalidade"><i class="pi pi-map-marker mr-1 text-[1rem]" />{{ modalLabel[s.modalidade] || s.modalidade }}</span>
                        </div>
                    </div>

                    <!-- Ações rápidas — pendente -->
                    <div v-if="s.status === 'pendente'" class="hidden sm:flex items-center gap-1.5 shrink-0" @click.stop>
                        <Button label="Aprovar" icon="pi pi-check" size="small" severity="success" class="rounded-full" :loading="aprovando === s.id" @click="aprovar(s)" />
                        <Button label="Recusar" icon="pi pi-times" size="small" severity="danger" outlined class="rounded-full" @click="abrirRecusa(s)" />
                        <Button label="Converter" icon="pi pi-calendar-plus" size="small" severity="info" outlined class="rounded-full" :loading="convertendoId === s.id" @click="converterEmSessao(s)" />
                    </div>

                    <!-- Ações — autorizado -->
                    <div v-else-if="s.status === 'autorizado'" class="hidden sm:flex items-center shrink-0" @click.stop>
                        <Button label="Converter em sessão" icon="pi pi-calendar-plus" size="small" severity="info" outlined class="rounded-full" :loading="convertendoId === s.id" @click="converterEmSessao(s)" />
                    </div>

                    <!-- Ações — convertido -->
                    <div v-else-if="s.status === 'convertido'" class="hidden sm:flex items-center shrink-0" @click.stop>
                        <Button label="Ver na agenda" icon="pi pi-calendar" size="small" severity="secondary" outlined class="rounded-full" @click="irParaAgenda(s)" />
                    </div>

                    <!-- Chevron -->
                    <i class="pi shrink-0 text-[1rem] text-[var(--text-color-secondary)] transition-transform duration-200" :class="expandedId === s.id ? 'pi-chevron-up' : 'pi-chevron-down'" />
                </div>

                <!-- Ações mobile (visíveis só quando expandido, em telas pequenas) -->
                <div v-if="expandedId === s.id && s.status === 'pendente'" class="flex sm:hidden gap-2 flex-wrap px-4 py-2.5 border-t border-[var(--surface-border,#e2e8f0)] bg-[var(--surface-ground,#f8fafc)]">
                    <Button label="Aprovar" icon="pi pi-check" size="small" severity="success" class="rounded-full flex-1" :loading="aprovando === s.id" @click="aprovar(s)" />
                    <Button label="Recusar" icon="pi pi-times" size="small" severity="danger" outlined class="rounded-full flex-1" @click="abrirRecusa(s)" />
                    <Button label="Converter" icon="pi pi-calendar-plus" size="small" severity="info" outlined class="rounded-full flex-1" :loading="convertendoId === s.id" @click="converterEmSessao(s)" />
                </div>
                <div v-else-if="expandedId === s.id && s.status === 'autorizado'" class="flex sm:hidden gap-2 px-4 py-2.5 border-t border-[var(--surface-border,#e2e8f0)] bg-[var(--surface-ground,#f8fafc)]">
                    <Button label="Converter em sessão" icon="pi pi-calendar-plus" size="small" severity="info" outlined class="rounded-full flex-1" :loading="convertendoId === s.id" @click="converterEmSessao(s)" />
                </div>
                <div v-else-if="expandedId === s.id && s.status === 'convertido'" class="flex sm:hidden gap-2 px-4 py-2.5 border-t border-[var(--surface-border,#e2e8f0)] bg-[var(--surface-ground,#f8fafc)]">
                    <Button label="Ver na agenda" icon="pi pi-calendar" size="small" severity="secondary" outlined class="rounded-full flex-1" @click="irParaAgenda(s)" />
                </div>

                <!-- Detalhe expandido -->
                <Transition name="ar-expand">
                    <div v-if="expandedId === s.id" class="px-4 py-3.5 border-t border-[var(--surface-border,#e2e8f0)] bg-[var(--surface-ground,#f8fafc)]">
                        <div class="grid grid-cols-[repeat(auto-fill,minmax(190px,1fr))] gap-3">
                            <div class="flex flex-col gap-0.5">
                                <span class="text-[0.65rem] font-bold uppercase tracking-[0.06em] text-[var(--text-color-secondary)]">E-mail</span>
                                <span class="text-[1rem] text-[var(--text-color)] break-all">{{ s.paciente_email || '—' }}</span>
                            </div>
                            <div class="flex flex-col gap-0.5">
                                <span class="text-[0.65rem] font-bold uppercase tracking-[0.06em] text-[var(--text-color-secondary)]">Celular</span>
                                <span class="text-[1rem] text-[var(--text-color)]">{{ s.paciente_celular || '—' }}</span>
                            </div>
                            <div class="flex flex-col gap-0.5">
                                <span class="text-[0.65rem] font-bold uppercase tracking-[0.06em] text-[var(--text-color-secondary)]">CPF</span>
                                <span class="text-[1rem] text-[var(--text-color)]">{{ s.paciente_cpf || '—' }}</span>
                            </div>
                            <div class="flex flex-col gap-0.5">
                                <span class="text-[0.65rem] font-bold uppercase tracking-[0.06em] text-[var(--text-color-secondary)]">Solicitado em</span>
                                <span class="text-[1rem] text-[var(--text-color)]">{{ s.created_at ? new Date(s.created_at).toLocaleString('pt-BR') : '—' }}</span>
                            </div>
                            <div v-if="s.motivo" class="flex flex-col gap-0.5 col-span-2">
                                <span class="text-[0.65rem] font-bold uppercase tracking-[0.06em] text-[var(--text-color-secondary)]">Motivo</span>
                                <span class="text-[1rem] text-[var(--text-color)]">{{ s.motivo }}</span>
                            </div>
                            <div v-if="s.como_conheceu" class="flex flex-col gap-0.5">
                                <span class="text-[0.65rem] font-bold uppercase tracking-[0.06em] text-[var(--text-color-secondary)]">Como conheceu</span>
                                <span class="text-[1rem] text-[var(--text-color)]">{{ s.como_conheceu }}</span>
                            </div>
                        </div>
                    </div>
                </Transition>
            </div>
        </div>
    </div>

    <LoadedPhraseBlock v-if="hasLoaded && !loading" class="mx-3 md:mx-4 mt-3 mb-2" />

    <!-- ══════════════════════════════════════════════════════
       Dialog: Recusar
  ═══════════════════════════════════════════════════════ -->
    <Dialog v-model:visible="recusaDialogOpen" modal header="Recusar solicitação" :draggable="false" :style="{ width: '440px', maxWidth: '96vw' }">
        <p class="text-[1rem] text-[var(--text-color-secondary)] mb-4">Você pode informar o motivo da recusa. O paciente poderá visualizar isso na sua conta.</p>
        <FloatLabel variant="on">
            <Textarea id="ar-recusa-motivo" v-model="recusaMotivo" rows="3" class="w-full" autocomplete="off" />
            <label for="ar-recusa-motivo">Motivo da recusa <span class="text-[var(--text-color-secondary)] opacity-60">(opcional)</span></label>
        </FloatLabel>
        <template #footer>
            <Button label="Cancelar" severity="secondary" outlined class="rounded-full" @click="recusaDialogOpen = false" />
            <Button label="Confirmar recusa" icon="pi pi-times" severity="danger" class="rounded-full" :loading="!!recusandoId" @click="confirmarRecusa" />
        </template>
    </Dialog>

    <!-- ══════════════════════════════════════════════════════
       AgendaEventDialog (converter)
  ═══════════════════════════════════════════════════════ -->
    <AgendaEventDialog
        v-model="eventDialogOpen"
        :event-row="eventRow"
        :owner-id="ownerId"
        :tenant-id="tenantId"
        :agenda-settings="settings"
        :commitment-options="commitmentOptions"
        :preset-commitment-id="sessionCommitmentId"
        :restrict-patients-to-owner="!isClinic"
        :patient-scope-owner-id="!isClinic ? ownerId : null"
        @save="onEventSaved"
        @update:modelValue="
            (v) => {
                if (!v) onEventDialogClose();
            }
        "
    />
</template>

<style scoped>
/* Único bloco restante: transição de expand — não expressável em Tailwind base */
.ar-expand-enter-active,
.ar-expand-leave-active {
    transition: all 0.22s ease;
    overflow: hidden;
}
.ar-expand-enter-from,
.ar-expand-leave-to {
    opacity: 0;
    max-height: 0;
}
.ar-expand-enter-to,
.ar-expand-leave-from {
    opacity: 1;
    max-height: 500px;
}

/* Transição do banner de autorizados */
.ar-banner-enter-active,
.ar-banner-leave-active {
    transition: all 0.25s ease;
    overflow: hidden;
}
.ar-banner-enter-from,
.ar-banner-leave-to {
    opacity: 0;
    max-height: 0;
    margin-bottom: 0;
}
.ar-banner-enter-to,
.ar-banner-leave-from {
    opacity: 1;
    max-height: 80px;
}
</style>