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

import { tenantDb } from '@/lib/supabase/tenantClient';
import { useToast } from 'primevue/usetoast';
import { useConfirm } from 'primevue/useconfirm';

import DatePicker from 'primevue/datepicker';

import FullCalendar from '@fullcalendar/vue3';
import timeGridPlugin from '@fullcalendar/timegrid';
import dayGridPlugin from '@fullcalendar/daygrid';
import listPlugin from '@fullcalendar/list';
import interactionPlugin from '@fullcalendar/interaction';
import ptBrLocale from '@fullcalendar/core/locales/pt-br';
import { FC_TOUCH_DEFAULTS } from '@/features/agenda/utils/fcDefaults';

import AgendaEventDialog from '@/features/agenda/components/AgendaEventDialog.vue';
import BloqueioDialog from '@/features/agenda/components/BloqueioDialog.vue';
import PatientProntuario from '@/features/patients/prontuario/PatientProntuario.vue';
import ProximosFeriadosCard from '@/features/agenda/components/ProximosFeriadosCard.vue';

import { useSupportDebugStore } from '@/support/supportDebugStore';
import { logEvent, logError } from '@/support/supportLogger';

import { useAgendaSettings } from '@/features/agenda/composables/useAgendaSettings';
import { useAgendaEvents } from '@/features/agenda/composables/useAgendaEvents';
import { useRecurrence } from '@/features/agenda/composables/useRecurrence';
import { useCommitmentServices } from '@/features/agenda/composables/useCommitmentServices';
import { useDeterminedCommitments } from '@/features/agenda/composables/useDeterminedCommitments';
import { useFeriados } from '@/composables/useFeriados';
import { useAgendaBloqueios } from '@/features/agenda/composables/useAgendaBloqueios';

// Fase C (replicação Rail): adopta agendaBilling.service via composable
// reutilizável. Cobre status change com confirm dialog + multa + reverse +
// pacote saldo/upfront (C7-C13 de Melissa).
import { useAgendaStatusChange } from '@/features/agenda/composables/useAgendaStatusChange';
import { createPackageContract, materializeAndChargePerSession } from '@/features/agenda/services/agendaBilling.service';
import AgendaStatusChangeConfirmDialog from '@/features/agenda/components/AgendaStatusChangeConfirmDialog.vue';

import { mapAgendaEventosToCalendarEvents, buildWeeklyBreakBackgroundEvents, minutesToDuration } from '@/features/agenda/services/agendaMappers';

const router = useRouter();
const route = useRoute();

// Data inicial via query param ?date=YYYY-MM-DD (vindo de "Ver na agenda")
const _queryDate = route.query.date ? new Date(route.query.date + 'T12:00:00') : null;
const toast = useToast();
const confirm = useConfirm();

const tenantStore = useTenantStore();
const clinicTenantId = computed(() => tenantStore.tenantId || tenantStore.currentTenantId || tenantStore.tenant?.id || null);

function miniGoToday() {
    const d = new Date();
    miniDate.value = d;
    getApi()?.gotoDate?.(d);
}

// ✅ catálogo determinístico (tenant atual, já filtrado no composable)
const { rows: determinedCommitments, load: loadDeterminedCommitments, loading: dcLoading, error: dcError } = useDeterminedCommitments(clinicTenantId);

// ✅ agora no formato que o Dialog novo usa (name/description/native_key...)
const commitmentOptionsNormalized = computed(() => {
    const list = Array.isArray(determinedCommitments.value) ? determinedCommitments.value : [];

    // prioridade pra "Sessão" primeiro (native_key = session)
    const priority = new Map([
        ['session', 0],
        ['class', 1],
        ['study', 2],
        ['reading', 3],
        ['supervision', 4],
        ['content_creation', 5]
    ]);

    return [...list]
        .filter((i) => i?.id && i?.active !== false)
        .sort((a, b) => {
            const pa = priority.has(a.native_key) ? priority.get(a.native_key) : 99;
            const pb = priority.has(b.native_key) ? priority.get(b.native_key) : 99;
            if (pa !== pb) return pa - pb;
            return String(a.name || '').localeCompare(String(b.name || ''), 'pt-BR');
        })
        .map((i) => ({
            id: i.id,
            tenant_id: i.tenant_id ?? null,
            created_by: i.created_by ?? null,
            name: String(i.name || '').trim() || 'Sem nome',
            description: i.description || '',
            native_key: i.native_key || null,
            is_native: !!i.is_native,
            is_locked: !!i.is_locked,
            active: i.active !== false,
            bg_color: i.bg_color || null,
            text_color: i.text_color || null,
            fields: Array.isArray(i.determined_commitment_fields) ? [...i.determined_commitment_fields].sort((a, b) => (a.sort_order ?? 0) - (b.sort_order ?? 0)) : []
        }));
});

// -----------------------------
// settings + events
// -----------------------------
const { error: settingsError, settings, workRules, load: loadSettings } = useAgendaSettings();
const { error: eventsError, rows, loading: eventsLoading, loadMyRange, create, update, remove } = useAgendaEvents();
const eventsHasLoaded = ref(false);
watch(eventsLoading, (val) => {
    if (!val) eventsHasLoaded.value = true;
});

// Fase C: orquestrador de status change (Melissa pattern). Cobre confirm
// dialog + multa + reverse + pacote saldo/upfront via agendaBilling.service.
const {
    dialogOpen: statusDialogOpen,
    dialogProps: statusDialogProps,
    onDialogConfirm: onStatusDialogConfirm,
    onDialogCancel: onStatusDialogCancel,
    applyStatusChange
} = useAgendaStatusChange({ toast });

const { loadAndExpand, createRule, updateRule, cancelRule, splitRuleAt, cancelRuleFrom, upsertException } = useRecurrence();

const { saveRuleItems, propagateToSerie } = useCommitmentServices();

const ownerId = computed(() => settings.value?.owner_id || '');

// -----------------------------
// Feriados
// -----------------------------
const { fcEvents: feriadoFcEvents, load: loadFeriados } = useFeriados();

// -----------------------------
// Bloqueios (background events cinza no FC)
// -----------------------------
const { bloqueios: bloqueioRows, load: loadBloqueios, buildEventsForRange: buildBloqueioEvents } = useAgendaBloqueios();
const bloqueioFcEvents = computed(() => {
    const s = currentRange.value.start;
    const e = currentRange.value.end;
    if (!s || !e) return [];
    return buildBloqueioEvents(s, e);
});

// Detecta se um range [start, end] cai dentro de algum bloqueio carregado.
// Cobre bloqueios dia-inteiro (sem hora) e bloqueios com janela horária.
// Recorrentes semanais cobertos via dia_semana.
function bloqueioCobrindo(start, end) {
    const arr = bloqueioRows?.value || [];
    if (!arr.length || !start) return null;
    const dStart = start instanceof Date ? start : new Date(start);
    const dEnd = end instanceof Date ? end : new Date(end || start);
    const isoDay = `${dStart.getFullYear()}-${String(dStart.getMonth() + 1).padStart(2, '0')}-${String(dStart.getDate()).padStart(2, '0')}`;
    const dow = dStart.getDay();
    const hhmmStart = dStart.getHours() * 60 + dStart.getMinutes();
    const hhmmEnd = dEnd.getHours() * 60 + dEnd.getMinutes();

    const parseHM = (s) => {
        if (!s) return null;
        const [h, m] = String(s).split(':').map(Number);
        return Number.isFinite(h) ? h * 60 + (m || 0) : null;
    };

    for (const b of arr) {
        if (!b) continue;
        // Recorrente semanal
        if (b.recorrente && b.dia_semana != null) {
            if (Number(b.dia_semana) !== dow) continue;
        } else {
            const di = b.data_inicio;
            const df = b.data_fim || b.data_inicio;
            if (!di) continue;
            if (isoDay < di || isoDay > df) continue;
        }
        // Bloqueio sem hora = dia inteiro
        const bhi = parseHM(b.hora_inicio);
        const bhf = parseHM(b.hora_fim);
        if (bhi == null || bhf == null) return b;
        // Sobreposição de janela
        if (hhmmStart < bhf && hhmmEnd > bhi) return b;
    }
    return null;
}

onMounted(async () => {
    const tid = tenantStore.activeTenantId || tenantStore.tenantId || tenantStore.tenant?.id || null;
    if (tid) loadFeriados(tid);
});

// Carrega desativados assim que ownerId estiver disponível
watch(
    ownerId,
    (id) => {
        if (id) loadDesativados();
    },
    { immediate: true }
);

// Range atual
const currentRange = ref({ start: null, end: null });

// -----------------------------
// Topbar state
// -----------------------------
const onlySessions = ref(false);
const calendarView = ref('day'); // day | week | month
const timeMode = ref('my'); // 24 | 12 | my
const search = ref('');

const searchModalOpen = ref(false);
const miniDate = ref(_queryDate || new Date());
const monthPickerVisible = ref(false);
const monthPickerDate = ref(_queryDate || new Date());

// -----------------------------
// Opções UI
// -----------------------------
const onlySessionsOptions = [
    { label: 'Apenas Sessões', value: true },
    { label: 'Tudo', value: false }
];
const viewOptions = [
    { label: 'Dia', value: 'day' },
    { label: 'Semana', value: 'week' },
    { label: 'Mês', value: 'month' },
    { label: 'Lista', value: 'list' }
];
const timeModeOptions = [
    { label: '24h', value: '24' },
    { label: '12h', value: '12' },
    { label: 'Meu Horário', value: 'my' }
];

// -----------------------------
// ✅ ENUM do banco: tipo_evento_agenda (somente sessao/bloqueio)
// -----------------------------
const EVENTO_TIPO = Object.freeze({ SESSAO: 'sessao', BLOQUEIO: 'bloqueio' });
const EVENTO_TIPOS_VALIDOS = new Set([EVENTO_TIPO.SESSAO, EVENTO_TIPO.BLOQUEIO]);

function normalizeEventoTipo(t, fallback = EVENTO_TIPO.SESSAO) {
    const s = String(t || '')
        .trim()
        .toLowerCase();
    if (!s) return fallback;
    if (s.includes('sess')) return EVENTO_TIPO.SESSAO;
    if (s.includes('bloq') || s.includes('ocup')) return EVENTO_TIPO.BLOQUEIO;
    return EVENTO_TIPOS_VALIDOS.has(s) ? s : fallback;
}

function deriveEventoTipoForNewEvent(payload) {
    const vis = String(payload?.visibility_scope || '').toLowerCase();
    const title = String(payload?.titulo || '').toLowerCase();
    if (vis === 'busy_only' || title.includes('ocup')) return EVENTO_TIPO.BLOQUEIO;
    return EVENTO_TIPO.SESSAO;
}

function deriveTituloDefaultByTipo(tipo) {
    return normalizeEventoTipo(tipo, EVENTO_TIPO.SESSAO) === EVENTO_TIPO.BLOQUEIO ? 'Ocupado' : 'Sessão';
}

// -----------------------------
// Dialog state
// -----------------------------
const dialogOpen = ref(false);
const dialogEventRow = ref(null);
const dialogStartISO = ref('');
const dialogEndISO = ref('');

// -----------------------------
// FullCalendar
// -----------------------------
// Hero sticky header
const headerSentinelRef = ref(null);
const headerEl = ref(null);
const headerStuck = ref(false);
const headerMenuRef = ref(null);
const agPanelOpen = ref(false);
const blockMenuRef = ref(null);

// Fecha o drawer mobile ao cruzar para desktop (≥ xl / 1280px)
const mqDesktop = typeof window !== 'undefined' ? window.matchMedia('(min-width: 1280px)') : null;
const onMqDesktopChange = (e) => {
    if (e.matches) agPanelOpen.value = false;
};

// ── Prontuário ────────────────────────────────────────────────
const prontuarioOpen = ref(false);
const selectedPatient = ref(null);

function openProntuario(patientId, patientNome) {
    if (!patientId) return;
    selectedPatient.value = { id: patientId, nome_completo: patientNome || '' };
    prontuarioOpen.value = true;
}
function closeProntuario() {
    prontuarioOpen.value = false;
    selectedPatient.value = null;
}

// ── Menu de contexto: Sessões Hoje ────────────────────────────
const todayEvMenuRef = ref(null);
const _todayEvAtivo = ref(null);

const todayEvMenuItems = computed(() => [
    {
        label: 'Opções',
        items: [
            {
                label: 'Ver prontuário',
                icon: 'pi pi-file-edit',
                disabled: !(_todayEvAtivo.value?.patient_id || _todayEvAtivo.value?.paciente_id),
                command: () => {
                    const id = _todayEvAtivo.value?.patient_id || _todayEvAtivo.value?.paciente_id;
                    const nome = _todayEvAtivo.value?.paciente_nome || _todayEvAtivo.value?.patient_name || '';
                    openProntuario(id, nome);
                }
            },
            {
                label: 'Abrir na agenda',
                icon: 'pi pi-calendar',
                command: () => {
                    if (_todayEvAtivo.value) onEventRowClick(_todayEvAtivo.value);
                }
            }
        ]
    }
]);

function openTodayEvMenu(event, ev) {
    event.stopPropagation();
    _todayEvAtivo.value = ev;
    todayEvMenuRef.value?.toggle(event);
}

// Bloqueio dialog
const bloqueioDialogOpen = ref(false);
const bloqueioMode = ref('horario');

function openBloqueioDialog(mode) {
    if (!ownerId.value) {
        toast.add({ severity: 'warn', summary: 'Agenda', detail: 'Aguarde carregar as configurações da agenda.', life: 3000 });
        return;
    }
    bloqueioMode.value = mode;
    bloqueioDialogOpen.value = true;
}

const headerMenuItems = computed(() => [
    { label: 'Novo compromisso', icon: 'pi pi-plus', command: () => onCreateFromButton() },
    {
        label: 'Buscar',
        icon: 'pi pi-search',
        command: () => {
            searchModalOpen.value = true;
        }
    },
    { separator: true },
    { label: 'Hoje', icon: 'pi pi-calendar', command: () => goToday() },
    { label: 'Anterior', icon: 'pi pi-chevron-left', command: () => goPrev() },
    { label: 'Próximo', icon: 'pi pi-chevron-right', command: () => goNext() },
    { separator: true },
    { label: 'Bloquear por Horário', icon: 'pi pi-clock', command: () => openBloqueioDialog('horario') },
    { label: 'Bloquear por Período', icon: 'pi pi-calendar-clock', command: () => openBloqueioDialog('periodo') },
    { label: 'Bloquear por Dia', icon: 'pi pi-calendar-times', command: () => openBloqueioDialog('dia') },
    { label: 'Bloqueio por Feriados', icon: 'pi pi-star', command: () => openBloqueioDialog('feriados') },
    ...(feriadosSemBloqueio.value.length
        ? [
              {
                  label: `Feriados sem bloqueio (${feriadosSemBloqueio.value.length})`,
                  icon: 'pi pi-bell',
                  command: () => {
                      feriadosAlertaOpen.value = true;
                  }
              }
          ]
        : []),
    { separator: true },
    { label: 'Recarregar', icon: 'pi pi-refresh', command: () => refetch() },
    { label: 'Recorrências', icon: 'pi pi-sync', command: () => goRecorrencias() },
    { label: 'Configurações', icon: 'pi pi-cog', command: () => goSettings() }
]);

const fcRef = ref(null);
const currentDate = ref(new Date());

// Só remonta o FC ao trocar de view (day/week/month).
// timeMode NÃO entra no key: slotMinTime/Max/businessHours atualizam reativamente,
// e remontar ao mudar de modo fazia o calendário perder a data de navegação.
const fcKey = computed(() => calendarView.value);
// 'local' faz o FullCalendar usar o timezone do browser — sem precisar de plugin extra.
// Com um named timezone (ex: 'America/Sao_Paulo') sem o luxon/moment-timezone plugin,
// o FC exibe os eventos no horário UTC bruto em vez de converter.
const timezone = computed(() => 'local');

// Grade visual sempre em 15 min — independente da duração configurada das sessões.
// A duração da sessão (ex: 1h06) é usada apenas no dialog (onSelectTime/onCreateFromButton).
const slotDuration = '00:15:00'; // grade visual sempre 15min

const snapDuration = '00:15:00';
const slotLabelInterval = '00:30';

// ── Jornada por dia (agenda_regras_semanais) ───────────────
// fallback: usa agenda_configuracoes se não houver regras semanais
function settingsFallbackStart() {
    const s = settings.value;
    return (s?.usar_horario_admin_custom && s?.admin_inicio_visualizacao) || s?.agenda_custom_start || '08:00:00';
}
function settingsFallbackEnd() {
    const s = settings.value;
    return (s?.usar_horario_admin_custom && s?.admin_fim_visualizacao) || s?.agenda_custom_end || '18:00:00';
}

const businessHours = computed(() => {
    if (timeMode.value === '24') return [];
    const rules = workRules.value;
    if (rules.length > 0) {
        return rules.map((r) => ({
            daysOfWeek: [r.dia_semana],
            startTime: String(r.hora_inicio || '').slice(0, 5),
            endTime: String(r.hora_fim || '').slice(0, 5)
        }));
    }
    // fallback: todos os dias úteis com horário global
    return [{ daysOfWeek: [1, 2, 3, 4, 5], startTime: settingsFallbackStart(), endTime: settingsFallbackEnd() }];
});

// Arredonda HH:MM:SS para baixo até a fronteira de 30 min (ex: 12:09 → 12:00, 12:39 → 12:30)
function floorTo30(hhmmss) {
    const [h, m] = String(hhmmss || '00:00')
        .slice(0, 5)
        .split(':')
        .map(Number);
    const rm = m < 30 ? 0 : 30;
    return `${String(h).padStart(2, '0')}:${String(rm).padStart(2, '0')}:00`;
}
// Arredonda HH:MM:SS para cima até a fronteira de 30 min (ex: 21:09 → 21:30, 21:30 → 21:30, 21:31 → 22:00)
function ceilTo30(hhmmss) {
    const [h, m] = String(hhmmss || '00:00')
        .slice(0, 5)
        .split(':')
        .map(Number);
    if (m === 0 || m === 30) return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}:00`;
    if (m < 30) return `${String(h).padStart(2, '0')}:30:00`;
    return `${String(h + 1).padStart(2, '0')}:00:00`;
}

// Retorna { start, end } para o modo 'my' de acordo com a view e o dia atual.
// start/end são SEMPRE na fronteira de 30 min para que getMinutes() retorne 0 ou 30
// e os labels de hora cheia apareçam corretamente.
function myHoursRange() {
    const rules = workRules.value;
    if (rules.length === 0) {
        return {
            start: floorTo30(settingsFallbackStart()),
            end: ceilTo30(settingsFallbackEnd())
        };
    }
    if (calendarView.value === 'day') {
        const dow = currentDate.value.getDay();
        const rule = rules.find((r) => r.dia_semana === dow);
        if (rule) return { start: floorTo30(rule.hora_inicio), end: ceilTo30(rule.hora_fim) };
        return { start: '00:00:00', end: '24:00:00' };
    }
    // visão semana/mês: usa min/max de todos os dias com jornada
    const starts = rules.map((r) => floorTo30(r.hora_inicio));
    const ends = rules.map((r) => ceilTo30(r.hora_fim));
    return {
        start: starts.reduce((a, b) => (a < b ? a : b)),
        end: ends.reduce((a, b) => (a > b ? a : b))
    };
}

const slotMinTime = computed(() => {
    if (timeMode.value === '24') return '00:00:00';
    if (timeMode.value === '12') return '06:00:00';
    return myHoursRange().start;
});

const slotMaxTime = computed(() => {
    if (timeMode.value === '24') return '24:00:00';
    if (timeMode.value === '12') return '18:00:00';
    return myHoursRange().end;
});

const fcViewName = computed(() => {
    if (calendarView.value === 'day') return 'timeGridDay';
    if (calendarView.value === 'week') return 'timeGridWeek';
    if (calendarView.value === 'list') return 'listWeek';
    return 'dayGridMonth';
});

// Todos os rows: reais + ocorrências virtuais
const allRows = computed(() => [...(rows.value || []), ...(_occurrenceRows.value || [])]);

const calendarRows = computed(() => {
    return allRows.value.filter((r) => {
        // "Apenas Sessões" = eventos vinculados a paciente.
        // Filtrar por tipo não funciona pois o banco usa 'sessao' para todos os compromissos
        // que não são bloqueio — compromissos pessoais (Análise, Leitura, etc.) têm o mesmo tipo.
        if (onlySessions.value && !(r.patient_id || r.paciente_id)) return false;
        return true;
    });
});

// ── Detecção de eventos fora da jornada ───────────────────
function timeStrToMin(t) {
    const [h, m] = String(t || '00:00')
        .split(':')
        .map(Number);
    return h * 60 + m;
}

const hasEventsOutsideWorkHours = computed(() => {
    if (timeMode.value === '24') return false;
    const rules = workRules.value;
    if (!rules.length) return false;

    return calendarRows.value.some((r) => {
        if (!r.inicio_em) return false;
        const d = new Date(r.inicio_em);
        const dow = d.getDay();
        const rule = rules.find((rr) => Number(rr.dia_semana) === dow);
        // dia sem regra = fora da jornada
        if (!rule) return true;

        const ruleStart = timeStrToMin(String(rule.hora_inicio || '').slice(0, 5));
        const ruleEnd = timeStrToMin(String(rule.hora_fim || '').slice(0, 5));
        const evStart = d.getHours() * 60 + d.getMinutes();
        if (evStart < ruleStart) return true;
        if (r.fim_em) {
            const e = new Date(r.fim_em);
            if (e.getHours() * 60 + e.getMinutes() > ruleEnd) return true;
        }
        return false;
    });
});

watch(
    hasEventsOutsideWorkHours,
    (hasOut) => {
        if (hasOut && timeMode.value === 'my') timeMode.value = '24';
    },
    { immediate: true }
);

const searchTrim = computed(() => String(search.value || '').trim());
const searchScope = ref('month'); // 'range' | 'month'
const monthSearchRows = ref([]);
const monthSearchLoading = ref(false);

function _norm(s) {
    return String(s || '')
        .toLowerCase()
        .normalize('NFD')
        .replace(/\p{Diacritic}/gu, '')
        .trim();
}

function _matchRow(r, q) {
    const qn = _norm(q);
    return _norm(r.titulo).includes(qn) || _norm(r.observacoes).includes(qn) || _norm(r.tipo).includes(qn) || _norm(r.paciente_nome || r.patient_name || r.nome_paciente).includes(qn);
}

const searchLoading = computed(() => monthSearchLoading.value);

const searchResults = computed(() => {
    const q = searchTrim.value.toLowerCase();
    if (!q) return [];
    // scope 'range': usa calendarRows (reais) + occurrences com nome derivado
    const source =
        searchScope.value === 'month'
            ? monthSearchRows.value
            : (calendarRows.value || []).map((r) => ({
                  ...r,
                  paciente_nome: r.paciente_nome || r.patient_name || r.nome_paciente || '',
                  paciente_status: r.paciente_status || r.extendedProps?.paciente_status || ''
              }));
    return source.filter((r) => _matchRow(r, q));
});

async function loadMonthSearchRows() {
    const uid = ownerId.value;
    if (!uid) return;
    const d = currentDate.value;
    const startDate = new Date(d.getFullYear(), d.getMonth(), 1);
    const endDate = new Date(d.getFullYear(), d.getMonth() + 1, 0, 23, 59, 59);
    const startISO = startDate.toISOString();
    const endISO = new Date(d.getFullYear(), d.getMonth() + 1, 1).toISOString();
    monthSearchLoading.value = true;
    try {
        // 1. Eventos reais do banco — inclui recurrence_id/recurrence_date para
        //    mergeWithStoredSessions deduplicar sessões materializadas de séries.
        const { data, error } = await tenantDb().from('agenda_eventos')
            .select(
                'id, owner_id, tipo, status, titulo, inicio_em, fim_em, observacoes, modalidade, determined_commitment_id, insurance_plan_id, insurance_guide_number, insurance_value, insurance_plan_service_id, recurrence_id, recurrence_date, patients!agenda_eventos_patient_id_fkey(nome_completo, status)'
            )
            .eq('owner_id', uid)
            .is('mirror_of_event_id', null)
            .gte('inicio_em', startISO)
            .lt('inicio_em', endISO)
            .order('inicio_em', { ascending: true });
        if (error) throw error;

        const realRows = (data || []).map((r) => ({ ...r, paciente_nome: r.patients?.nome_completo || '', paciente_status: r.patients?.status || '' }));

        // 2. Ocorrências virtuais de recorrência (não existem em agenda_eventos).
        //    loadAndExpand retorna merged = reais + virtuais; filtramos só is_occurrence
        //    para não duplicar sessões reais já contidas em realRows.
        const activeTenantId = tenantStore.activeTenantId || null;
        const expanded = await loadAndExpand(uid, startDate, endDate, data || [], activeTenantId);
        const virtualOccs = expanded.filter((r) => r.is_occurrence);

        monthSearchRows.value = [...realRows, ...virtualOccs];
    } catch {
        monthSearchRows.value = [];
    } finally {
        monthSearchLoading.value = false;
    }
}

watch([searchTrim, searchScope], ([q, scope]) => {
    if (q && scope === 'month') loadMonthSearchRows();
    else if (!q) monthSearchRows.value = [];
});

watch(currentDate, (newD, oldD) => {
    if (searchTrim.value && searchScope.value === 'month' && (newD.getFullYear() !== oldD?.getFullYear() || newD.getMonth() !== oldD?.getMonth())) loadMonthSearchRows();
});

const calendarEvents = computed(() => {
    // Mapa id → {bg_color, text_color} dos commitments já carregados na página.
    // Usado para injetar cores nas ocorrências virtuais, que não têm o join
    // determined_commitments (useRecurrence faz select('*') sem join).
    const colorMap = new Map((commitmentOptionsNormalized.value || []).filter((c) => c.id).map((c) => [c.id, { bg_color: c.bg_color || null, text_color: c.text_color || null }]));

    // Injeta determined_commitments em qualquer row que ainda não tenha — resolve
    // tanto ocorrências virtuais quanto eventos reais com join nulo.
    function withCommitmentColors(r) {
        if (r.determined_commitments || !r.determined_commitment_id) return r;
        const colors = colorMap.get(r.determined_commitment_id);
        return colors ? { ...r, determined_commitments: colors } : r;
    }

    // separa reais e virtuais para aplicar mapAgendaEventosToCalendarEvents
    // em cada grupo — as virtuais precisam do mesmo tratamento de cores
    const realRows = calendarRows.value.filter((r) => !r.is_occurrence).map(withCommitmentColors);
    const occRows = calendarRows.value.filter((r) => r.is_occurrence).map(withCommitmentColors);

    const base = mapAgendaEventosToCalendarEvents(realRows);
    const occEvents = mapAgendaEventosToCalendarEvents(occRows);

    const breaks = settings.value && currentRange.value.start && currentRange.value.end ? buildWeeklyBreakBackgroundEvents(settings.value.pausas_semanais, currentRange.value.start, currentRange.value.end) : [];

    return [...base, ...occEvents, ...breaks, ...feriadoFcEvents.value, ...bloqueioFcEvents.value];
});

const visibleTitle = computed(() => {
    const d = currentDate.value;
    const month = d.toLocaleDateString('pt-BR', { month: 'long' });
    const year = d.getFullYear();
    return `${capitalize(month)} ${year}`;
});

const subtitlePrefix = computed(() => (calendarView.value === 'month' ? '' : ' '));
const subtitleText = computed(() => {
    if (calendarView.value === 'month') return visibleTitle.value;
    const d = currentDate.value;
    const weekday = d.toLocaleDateString('pt-BR', { weekday: 'long' });
    const day = d.getDate();
    const month = d.toLocaleDateString('pt-BR', { month: 'long' });
    const base = `${capitalize(weekday)}, ${day} de ${capitalize(month)}`;
    const today = new Date();
    const isToday = d.getDate() === today.getDate() && d.getMonth() === today.getMonth() && d.getFullYear() === today.getFullYear();
    return isToday ? `Hoje — ${base}` : base;
});

function fmtHora(hhmm) {
    const [h, m] = String(hhmm || '00:00')
        .slice(0, 5)
        .split(':')
        .map(Number);
    return m > 0 ? `${h}h${String(m).padStart(2, '0')}` : `${h}h`;
}

const jornadaHoje = computed(() => {
    const rules = workRules.value;
    if (!rules.length) return null;
    // na visão semana/mês usa a data âncora (currentDate); em dia, é o dia exibido
    const dow = currentDate.value.getDay();
    const rule = rules.find((r) => Number(r.dia_semana) === dow);
    if (!rule) return 'Folga';

    const inicio = String(rule.hora_inicio || '').slice(0, 5);
    const fim = String(rule.hora_fim || '').slice(0, 5);
    const [h1, m1] = inicio.split(':').map(Number);
    const [h2, m2] = fim.split(':').map(Number);
    const totalMin = h2 * 60 + m2 - (h1 * 60 + m1);
    const durH = Math.floor(totalMin / 60);
    const durM = totalMin % 60;
    const durStr = durM > 0 ? `${durH}h${String(durM).padStart(2, '0')}` : `${durH}h`;

    return `das ${fmtHora(inicio)} às ${fmtHora(fim)} (${durStr} de trabalho)`;
});

// Funções estáveis fora do computed — referências fixas, o Vue adapter nunca as re-aplica.
function slotLabelContent(arg) {
    const min = arg.date.getMinutes();
    if (min === 0) {
        const h = String(arg.date.getHours()).padStart(2, '0');
        return { html: `<span class="fc-slot-label-hour">${h}:00</span>` };
    }
    return { html: '<span class="fc-slot-label-half">:30</span>' };
}

// slotMinTime/Max são gerenciados EXCLUSIVAMENTE pelo watch abaixo via setOption().
// NÃO entram no fcOptions computed — isso evita que o Vue adapter dispare setOption()
// concorrentemente com o watch, causando múltiplos re-renders que corrompem os labels.
// Os valores iniciais são capturados aqui (antes do mount) para o primeiro render.
const _initSlotMin = slotMinTime.value;
const _initSlotMax = slotMaxTime.value;

// Eventos são gerenciados 100% de forma imperativa via _pushEventsToFC().
// NÃO incluímos 'events' no fcOptions — evita que o Vue FC adapter gerencie
// a fonte e conflite com o watch que usa getEventSources + addEventSource.
const fcOptions = computed(() => ({
    plugins: [timeGridPlugin, dayGridPlugin, listPlugin, interactionPlugin],
    locale: ptBrLocale,
    ...FC_TOUCH_DEFAULTS,
    timeZone: timezone.value,

    headerToolbar: false,
    initialView: 'timeGridDay',
    initialDate: _queryDate || new Date(),

    nowIndicator: true,
    editable: true,
    selectable: true,
    selectMirror: true,

    slotMinTime: _initSlotMin,
    slotMaxTime: _initSlotMax,
    slotDuration,
    snapDuration,
    slotLabelInterval,
    slotLabelContent,
    expandRows: false,
    height: 'auto',
    dayMaxEvents: true,
    weekends: true,
    eventMinHeight: 14,

    views: {
        timeGridDay: {
            dayHeaderFormat: { day: 'numeric', month: 'long', year: 'numeric' }
        }
    },

    businessHours: businessHours.value,

    datesSet: async (arg) => {
        const api = getApi();
        const cd = api?.getDate?.();
        const fallback = arg?.start ? new Date(arg.start) : new Date();
        const newDate = cd ? new Date(cd) : fallback;

        // Só atualiza currentDate se o dia realmente mudou.
        // Sem isso, setOption('slotMinTime') → datesSet → novo Date object → watch re-dispara → loop infinito.
        if (currentDate.value.toDateString() !== newDate.toDateString()) {
            currentDate.value = newDate;
            miniDate.value = new Date(newDate);
        }

        const start = arg?.start;
        const end = arg?.end;
        if (start && end) {
            const prevStart = currentRange.value.start?.toString();
            const prevEnd = currentRange.value.end?.toString();
            currentRange.value = { start, end };
            // Recarrega sempre que o range mudar OU quando _occurrenceRows estiver vazio
            if (start.toString() !== prevStart || end.toString() !== prevEnd || _occurrenceRows.value.length === 0) {
                await _reloadRange();
            }
            if (eventsError.value) toast.add({ severity: 'warn', summary: 'Compromissos', detail: eventsError.value, life: 4500 });
        }
    },

    select: (selection) => onSelectTime(selection),
    eventClick: (info) => onEventClick(info),

    eventDrop: (info) => persistMoveOrResize(info, 'Movido'),
    eventResize: (info) => persistMoveOrResize(info, 'Redimensionado'),

    eventContent: (arg) => {
        const ext = arg.event.extendedProps || {};
        const avatarUrl = ext.paciente_avatar || '';
        const nome = ext.paciente_nome || '';
        const obs = ext.observacoes || '';
        const title = arg.event.title || '';
        const pacienteStatus = ext.paciente_status || '';

        const esc = (s) =>
            String(s ?? '')
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;');

        const initials = (n) => {
            const p = String(n).trim().split(/\s+/).filter(Boolean);
            if (!p.length) return '?';
            if (p.length === 1) return p[0].slice(0, 2).toUpperCase();
            return (p[0][0] + p[p.length - 1][0]).toUpperCase();
        };

        const fmtHour = (d) => {
            if (!d) return '';
            const h = d.getHours();
            const m = d.getMinutes();
            return m === 0 ? `${h}h` : `${h}:${String(m).padStart(2, '0')}h`;
        };
        const range = arg.event.start && arg.event.end ? `${fmtHour(arg.event.start)}-${fmtHour(arg.event.end)}` : arg.timeText || '';

        const avatarHtml = avatarUrl ? `<img src="${esc(avatarUrl)}" class="ev-avatar ev-avatar-img" />` : nome ? `<div class="ev-avatar ev-avatar-initials">${esc(initials(nome))}</div>` : '';

        const obsHtml = obs ? `<div class="ev-obs">${esc(obs)}</div>` : '';
        const titleLine = `<div class="ev-title"><span class="ev-name">${esc(title)}</span>${range ? ` <span class="ev-hour">(${esc(range)})</span>` : ''}</div>`;
        const inativoBadge =
            pacienteStatus === 'Inativo' || pacienteStatus === 'Arquivado'
                ? `<span class="ev-badge">${pacienteStatus === 'Arquivado' ? 'paciente arquivado' : 'paciente desativado'}</span>`
                : '';

        return {
            html: `<div class="ev-custom">
        ${avatarHtml}
        <div class="ev-body">
          ${titleLine}
          ${inativoBadge}
          ${obsHtml}
        </div>
      </div>`
        };
    },

    eventClassNames: (arg) => {
        const tipo = normalizeEventoTipo(arg?.event?.extendedProps?.tipo || arg?.event?.extendedProps?.kind, EVENTO_TIPO.SESSAO);
        const title = String(arg?.event?.title || '');
        const obs = String(arg?.event?.extendedProps?.observacoes || '');
        const nome = String(arg?.event?.extendedProps?.paciente_nome || '');

        const qn = _norm(searchTrim.value);
        const hit = qn && (_norm(title).includes(qn) || _norm(obs).includes(qn) || _norm(nome).includes(qn) || _norm(tipo).includes(qn));

        const classes = [];
        if (tipo === EVENTO_TIPO.SESSAO) classes.push('evt-session');
        if (tipo === EVENTO_TIPO.BLOQUEIO) classes.push('evt-block');
        // Quando o evento já tem cor do commitment, marca para que o CSS
        // não sobrescreva com a cor primária padrão via !important
        if (arg?.event?.backgroundColor) classes.push('evt-has-color');
        if (qn && hit) classes.push('evt-hit');
        if (qn && !hit) classes.push('evt-dim');
        return classes;
    },

    eventDidMount: (info) => {
        const bgColor = info.event.extendedProps?.commitment_bg_color;
        if (bgColor) {
            info.el.style.setProperty('background-color', bgColor, 'important');
            info.el.style.setProperty('border-color', bgColor, 'important');
        }
        // Marca o elemento com o id do evento para scroll+pulse posterior
        info.el.dataset.eventId = info.event.id;
    }
}));

// ── Scroll + pulse no evento do FullCalendar ─────────────────
const foraJornadaBannerRef = ref(null);

async function scrollToAndPulseEvent(eventId) {
    await nextTick();
    // Aguarda o FC renderizar após possível mudança de view/data
    await new Promise((r) => setTimeout(r, 300));

    // Pulsa o banner "fora da jornada" se estiver visível
    const banner = foraJornadaBannerRef.value;
    if (banner) {
        banner.classList.add('notif-card--highlight');
        setTimeout(() => banner.classList.remove('notif-card--highlight'), 2000);
    }

    const el = document.querySelector(`[data-event-id="${eventId}"]`);
    if (!el) return;
    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
    el.classList.add('notif-card--highlight');
    setTimeout(() => el.classList.remove('notif-card--highlight'), 2000);
}

// ── Resumo do dia (coluna direita) ────────────────────────────────────────────
const todayEvents = computed(() => {
    const today = new Date();
    return allRows.value
        .filter((r) => {
            if (!r.inicio_em) return false;
            const d = new Date(r.inicio_em);
            return d.getDate() === today.getDate() && d.getMonth() === today.getMonth() && d.getFullYear() === today.getFullYear();
        })
        .sort((a, b) => new Date(a.inicio_em) - new Date(b.inicio_em));
});

const todayStats = computed(() => {
    const evs = todayEvents.value;
    const total = evs.length;
    const realizado = evs.filter((e) => ['realizado', 'presente'].includes(e.status)).length;
    const faltou = evs.filter((e) => ['faltou', 'falta'].includes(e.status)).length;
    const agendado = evs.filter((e) => !e.status || e.status === 'agendado' || e.status === 'confirmado').length;
    return [
        { label: 'Total', value: String(total), cls: '' },
        { label: 'Agendado', value: String(agendado), cls: '' },
        { label: 'Realizado', value: String(realizado), cls: realizado > 0 ? 'ag-stat--ok' : '' },
        { label: 'Faltou', value: String(faltou), cls: faltou > 0 ? 'ag-stat--warn' : '' }
    ];
});

function fmtHoraEvento(iso) {
    if (!iso) return '—';
    const d = new Date(iso);
    return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
}

function fmtDuracao(startIso, endIso) {
    if (!startIso || !endIso) return '';
    const diff = Math.round((new Date(endIso) - new Date(startIso)) / 60000);
    if (!diff) return '';
    return diff >= 60 ? `${Math.floor(diff / 60)}h${diff % 60 ? String(diff % 60).padStart(2, '0') : ''}` : `${diff}min`;
}

function statusIcon(status) {
    const map = {
        confirmado: 'pi pi-check-circle text-green-500',
        realizado: 'pi pi-check-circle text-green-500',
        presente: 'pi pi-check-circle text-green-500',
        cancelado: 'pi pi-times-circle text-red-400',
        faltou: 'pi pi-times-circle text-red-400',
        agendado: 'pi pi-clock text-[var(--text-color-secondary)]'
    };
    return map[status] || map.agendado;
}

function onEventRowClick(ev) {
    if (ev.inicio_em) {
        getApi()?.gotoDate?.(new Date(ev.inicio_em));
        calendarView.value = 'day';
        scrollToAndPulseEvent(ev.id);
    }
}

// ── Links públicos (agendador + cadastro externo) ─────────────────────────────
const agendadorSlug = ref('');
const cadastroToken = ref('');

const agendadorLink = computed(() => (agendadorSlug.value ? `${window.location.origin}/agendar/${agendadorSlug.value}` : ''));
const cadastroExternoLink = computed(() => (cadastroToken.value ? `${window.location.origin}/cadastro/paciente?t=${encodeURIComponent(cadastroToken.value)}` : ''));

async function loadAgendadorSlug() {
    const uid = ownerId.value;
    if (!uid) return;
    try {
        const { data } = await supabase.from('agendador_configuracoes').select('link_slug').eq('owner_id', uid).eq('ativo', true).maybeSingle();
        agendadorSlug.value = data?.link_slug || '';
    } catch {
        agendadorSlug.value = '';
    }
}

async function loadCadastroToken() {
    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);
        cadastroToken.value = data?.[0]?.token || '';
    } catch {
        cadastroToken.value = '';
    }
}

watch(
    ownerId,
    (v) => {
        if (v) {
            loadAgendadorSlug();
            loadCadastroToken();
        }
    },
    { immediate: true }
);

function copyLink(text) {
    navigator.clipboard.writeText(text).then(() => {
        toast.add({ severity: 'success', summary: 'Copiado!', detail: 'Link copiado para a área de transferência', life: 2000 });
    });
}

function getApi() {
    return fcRef.value?.getApi?.() || null;
}

// ── Pacientes Desativados com sessões pendentes ────────────
const desativadoPatients = ref([]);
const desativadoDialogOpen = ref(false);
const desativadoSelected = ref(null);
const desativadoFocused = ref(null);
const desativadoFcRef = ref(null);

async function loadDesativados() {
    if (!ownerId.value) return;
    try {
        const { data: pats, error: pErr } = await tenantDb().from('patients').select('id, nome_completo, status').eq('owner_id', ownerId.value).in('status', ['Inativo', 'Arquivado']);

        if (pErr) {
            console.warn('[loadDesativados] patients error:', pErr);
            desativadoPatients.value = [];
            return;
        }
        if (!pats?.length) {
            desativadoPatients.value = [];
            return;
        }

        const patIds = pats.map((p) => p.id);
        const sessQ = tenantDb().from('agenda_eventos').select('id, patient_id, inicio_em, fim_em, status, titulo, modalidade, determined_commitment_id').in('patient_id', patIds).order('inicio_em', { ascending: true });
        if (ownerId.value) sessQ.eq('owner_id', ownerId.value);
        const { data: sessions, error: sErr } = await sessQ;

        if (sErr) {
            console.warn('[loadDesativados] sessions error:', sErr);
        }

        const byPat = new Map();
        for (const s of sessions || []) {
            if (!byPat.has(s.patient_id)) byPat.set(s.patient_id, []);
            byPat.get(s.patient_id).push(s);
        }

        desativadoPatients.value = pats.filter((p) => byPat.has(p.id)).map((p) => ({ ...p, sessions: byPat.get(p.id) }));

        if (desativadoPatients.value.length && !desativadoSelected.value) {
            desativadoSelected.value = desativadoPatients.value[0];
        }
    } catch (e) {
        console.warn('[loadDesativados] erro:', e);
    }
}

const desativadoFcOptions = computed(() => {
    const patient = desativadoSelected.value;
    if (!patient) return {};
    const events = (patient.sessions || []).map((s) => ({
        id: s.id,
        title: s.titulo || 'Sessão',
        start: s.inicio_em,
        end: s.fim_em,
        backgroundColor: desativadoFocused.value?.id === s.id ? '#ea580c' : '#f97316',
        borderColor: desativadoFocused.value?.id === s.id ? '#ea580c' : '#f97316',
        textColor: '#fff',
        extendedProps: { session: s }
    }));
    const firstDate = patient.sessions[0]?.inicio_em;
    return {
        plugins: [listPlugin, dayGridPlugin, interactionPlugin],
        locale: ptBrLocale,
        initialView: 'listMonth',
        initialDate: firstDate || new Date().toISOString(),
        events,
        headerToolbar: { left: 'prev,next today', center: 'title', right: 'listMonth,dayGridMonth' },
        height: '100%',
        noEventsText: 'Nenhuma sessão encontrada.',
        eventClick: (info) => {
            const s = info.event.extendedProps.session;
            openSessionInMainCalendar(s);
        }
    };
});

watch(desativadoSelected, () => {
    desativadoFocused.value = null;
});

function focusDesativadoSession(session) {
    desativadoFocused.value = session;
    const api = desativadoFcRef.value?.getApi?.();
    if (api) api.gotoDate(new Date(session.inicio_em));
}

function openSessionInMainCalendar(session) {
    desativadoDialogOpen.value = false;
    const date = new Date(session.inicio_em);
    currentDate.value = date;
    getApi()?.gotoDate?.(date);
    // Muda para visão de dia para facilitar encontrar a sessão
    const api = getApi();
    if (api) api.changeView('timeGridDay', date);
}

// Helpers de formato para o painel de desativados
function fmtDesativadoDate(iso) {
    if (!iso) return '—';
    const d = new Date(iso);
    return d.toLocaleDateString('pt-BR', { weekday: 'short', day: '2-digit', month: 'short', year: 'numeric' });
}
function fmtDesativadoTime(iso) {
    if (!iso) return '—';
    return new Date(iso).toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' });
}
function fmtDesativadoDur(start, end) {
    if (!start || !end) return '';
    const min = Math.round((new Date(end) - new Date(start)) / 60000);
    return `${min}min`;
}

watch(calendarView, async () => {
    await nextTick();
    getApi()?.changeView?.(fcViewName.value);
});

// ✅ slotMinTime/Max são gerenciados SOMENTE aqui (não no fcOptions computed).
// Watch combinado: ambos setOption no mesmo tick → um único re-render do FC → labels preservados.
watch([slotMinTime, slotMaxTime], async ([minT, maxT]) => {
    await nextTick();
    const api = getApi();
    if (!api) return;
    api.setOption('slotMinTime', minT);
    api.setOption('slotMaxTime', maxT);
});

watch(searchTrim, (v) => {
    if (!v) searchModalOpen.value = false;
});

// Persiste a data atual na URL (?date=) para que o F5 mantenha o dia visualizado
watch(currentDate, (d) => {
    const iso = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
    if (route.query.date !== iso) {
        router.replace({ query: { ...route.query, date: iso } });
    }
});

// ✅ carrega commitments uma vez por tenant
watch(
    clinicTenantId,
    async (tid) => {
        if (!tid) return;
        await loadDeterminedCommitments();
        if (dcError.value) toast.add({ severity: 'warn', summary: 'Compromissos', detail: dcError.value, life: 4500 });
    },
    { immediate: true }
);

// -----------------------------
// Topbar actions
// -----------------------------
function goToday() {
    getApi()?.today?.();
}
function goPrev() {
    getApi()?.prev?.();
}
function goNext() {
    getApi()?.next?.();
}

function clearSearch() {
    search.value = '';
}
function clearSearchAndClose() {
    search.value = '';
    searchModalOpen.value = false;
}
function openSearchModal() {
    if (searchTrim.value) searchModalOpen.value = true;
}

function toggleMonthPicker() {
    monthPickerDate.value = new Date(currentDate.value);
    monthPickerVisible.value = true;
}
async function applyMonthPick() {
    monthPickerVisible.value = false;
    await nextTick();
    getApi()?.gotoDate?.(monthPickerDate.value);
}

function onMiniPick(d) {
    if (d) getApi()?.gotoDate?.(d);
}
function miniPrevMonth() {
    miniDate.value = shiftMonth(miniDate.value, -1);
}
function miniNextMonth() {
    miniDate.value = shiftMonth(miniDate.value, +1);
}

const workDowSet = computed(() => new Set(workRules.value.filter((r) => r.ativo).map((r) => Number(r.dia_semana))));

// ISO do dia atual sendo visualizado no FullCalendar
const currentDateISO = computed(() => {
    const d = currentDate.value;
    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
});

// ── Mini calendário: set de dias da semana atual ─────────────
const currentWeekIsoSet = computed(() => {
    const now = new Date();
    const monday = new Date(now);
    monday.setDate(now.getDate() - ((now.getDay() + 6) % 7));
    monday.setHours(0, 0, 0, 0);
    const set = new Set();
    for (let i = 0; i < 7; i++) {
        const d = new Date(monday);
        d.setDate(monday.getDate() + i);
        set.add(`${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`);
    }
    return set;
});

const todayISO = computed(() => {
    const n = new Date();
    return `${n.getFullYear()}-${String(n.getMonth() + 1).padStart(2, '0')}-${String(n.getDate()).padStart(2, '0')}`;
});

// ── Mini calendário: classes por dia ──────────────────────────
// Prioridade: bloqueado total > dia de trabalho > folga
function miniDayClass(date) {
    const iso = `${date.year}-${String(date.month + 1).padStart(2, '0')}-${String(date.day).padStart(2, '0')}`;
    const dow = new Date(date.year, date.month, date.day).getDay();
    const classes = [];
    if (currentWeekIsoSet.value.has(iso)) {
        classes.push('mini-week-hl');
        if (dow === 1) classes.push('mini-week-hl--start');
        else if (dow === 0) classes.push('mini-week-hl--end');
        else classes.push('mini-week-hl--mid');
    }
    if (iso === todayISO.value) classes.push('mini-day-today');
    if (miniBlockedDaySet.value.has(iso)) classes.push('mini-day-blocked');
    else classes.push(workDowSet.value.has(dow) ? 'mini-day-work' : 'mini-day-off');
    return classes;
}

// ── Mini calendário: bolinhas de compromissos + set de dias bloqueados ──
const miniEventDaySet = ref(new Set());
const miniBlockedDaySet = ref(new Set()); // dias com bloqueio de dia inteiro
const miniBlockedLoaded = ref(false); // true após primeira carga dos bloqueios

async function loadMiniMonthEvents(refDate) {
    if (!ownerId.value) return; // aguarda settings carregarem — evita 400 com owner_id vazio
    const d = refDate instanceof Date ? refDate : new Date(refDate);
    const year = d.getFullYear();
    const month = d.getMonth();
    const start = new Date(year, month, 1);
    const end = new Date(year, month + 1, 0, 23, 59, 59);

    try {
        // 1. Eventos reais (agenda_eventos)
        const { data: evData } = await tenantDb().from('agenda_eventos').select('inicio_em').eq('owner_id', ownerId.value).gte('inicio_em', start.toISOString()).lte('inicio_em', end.toISOString());

        const evSet = new Set();
        for (const r of evData || []) {
            if (!r.inicio_em) continue;
            const ev = new Date(r.inicio_em);
            evSet.add(`${ev.getFullYear()}-${ev.getMonth()}-${ev.getDate()}`);
        }

        // 2. Ocorrências virtuais de recorrência (não existem no banco)
        const occRows = await loadAndExpand(ownerId.value, start, end, rows.value, clinicTenantId.value);
        for (const r of occRows || []) {
            if (!r.inicio_em || !r.is_occurrence) continue;
            const ev = new Date(r.inicio_em);
            evSet.add(`${ev.getFullYear()}-${ev.getMonth()}-${ev.getDate()}`);
        }

        miniEventDaySet.value = evSet;

        // 2. Bloqueios de dia inteiro (fundo vermelho forte)
        // Usa ISO local (não UTC) para evitar off-by-one em fusos negativos como -03:00
        const pad = (n) => String(n).padStart(2, '0');
        const isoStart = `${year}-${pad(month + 1)}-01`;
        const lastDay = new Date(year, month + 1, 0).getDate();
        const isoEnd = `${year}-${pad(month + 1)}-${pad(lastDay)}`;
        const { data: blkData } = await tenantDb().from('agenda_bloqueios')
            .select('data_inicio')
            .eq('owner_id', ownerId.value || '')
            .is('hora_inicio', null)
            .gte('data_inicio', isoStart)
            .lte('data_inicio', isoEnd);

        miniBlockedDaySet.value = new Set((blkData || []).map((r) => r.data_inicio));
        miniBlockedLoaded.value = true;
    } catch (e) {
        logError('AgendaTerapeutaPage', 'miniBlocks erro', e);
    }
}

watch(
    () => {
        const d = miniDate.value instanceof Date ? miniDate.value : new Date(miniDate.value);
        return `${d.getFullYear()}-${d.getMonth()}`;
    },
    () => loadMiniMonthEvents(miniDate.value),
    { immediate: true }
);
watch(rows, () => loadMiniMonthEvents(miniDate.value));
// Fix persistência: recarrega quando ownerId fica disponível (settings são async)
watch(ownerId, (v) => {
    if (v) loadMiniMonthEvents(miniDate.value);
});

function hasMiniEvent(date) {
    return miniEventDaySet.value.has(`${date.year}-${date.month}-${date.day}`);
}

// ── Feriados próximos (30 dias) em dias úteis — inclui hoje e amanhã ──
const feriadosSemBloqueio = computed(() => {
    if (!miniBlockedLoaded.value) return []; // aguarda query de bloqueios para evitar falso positivo
    const hoje = new Date();
    hoje.setHours(0, 0, 0, 0);
    const limite = new Date(hoje);
    limite.setDate(limite.getDate() + 30);
    const bloqueados = miniBlockedDaySet.value;

    return (feriadoFcEvents.value || [])
        .filter((f) => {
            const iso = f.startStr || String(f.start || '').slice(0, 10);
            if (!iso) return false;
            const [y, m, da] = iso.split('-').map(Number);
            const dt = new Date(y, m - 1, da);
            if (dt < hoje || dt > limite) return false;
            if (!workDowSet.value.has(dt.getDay())) return false;
            return !bloqueados.has(iso);
        })
        .map((f) => ({ data: f.startStr || String(f.start || '').slice(0, 10), nome: f.title || 'Feriado' }));
});

// ── Todos os feriados próximos em dias úteis (bloqueados + pendentes) ──
// Usado pelo dialog para mostrar tudo com opção de desbloquear
const feriadosTodosProximos = computed(() => {
    if (!miniBlockedLoaded.value) return [];
    const hoje = new Date();
    hoje.setHours(0, 0, 0, 0);
    const limite = new Date(hoje);
    limite.setDate(limite.getDate() + 30);
    const bloqueados = miniBlockedDaySet.value;

    return (feriadoFcEvents.value || [])
        .filter((f) => {
            const iso = f.startStr || String(f.start || '').slice(0, 10);
            if (!iso) return false;
            const [y, m, da] = iso.split('-').map(Number);
            const dt = new Date(y, m - 1, da);
            if (dt < hoje || dt > limite) return false;
            return workDowSet.value.has(dt.getDay());
        })
        .map((f) => {
            const iso = f.startStr || String(f.start || '').slice(0, 10);
            return { data: iso, nome: f.title || 'Feriado', bloqueado: bloqueados.has(iso) };
        });
});

// ── Dialog de alerta de feriados ─────────────────────────────
const feriadosAlertaOpen = ref(false);
const feriadosAlertaBloqueados = ref(new Set());
const feriadosAlertaSalvando = ref(null);

function fmtFeriadoDateLong(iso) {
    if (!iso) return '';
    const [y, m, d] = iso.split('-').map(Number);
    return new Date(y, m - 1, d).toLocaleDateString('pt-BR', { weekday: 'long', day: '2-digit', month: 'long' });
}

async function bloquearFeriadoDoAlerta(feriado) {
    if (!ownerId.value || !clinicTenantId.value) return;
    feriadosAlertaSalvando.value = feriado.data;
    try {
        const { error } = await tenantDb().from('agenda_bloqueios').insert([
            {
                owner_id: ownerId.value,
                tipo: 'bloqueio',
                recorrente: false,
                titulo: `Feriado: ${feriado.nome}`,
                data_inicio: feriado.data,
                data_fim: feriado.data,
                hora_inicio: null,
                hora_fim: null,
                origem: 'agenda_feriado'
            }
        ]);
        if (error) throw error;
        await tenantDb().from('agenda_eventos').update({ status: 'remarcado' }).eq('owner_id', ownerId.value).eq('tipo', 'sessao').gte('inicio_em', `${feriado.data}T00:00:00`).lte('inicio_em', `${feriado.data}T23:59:59`);

        feriadosAlertaBloqueados.value = new Set([...feriadosAlertaBloqueados.value, feriado.data]);
        miniBlockedDaySet.value = new Set([...miniBlockedDaySet.value, feriado.data]);
        toast.add({ severity: 'success', summary: 'Bloqueado', detail: `${feriado.nome} bloqueado com sucesso.`, life: 3000 });
    } catch (e) {
        toast.add({ severity: 'error', summary: 'Erro', detail: e?.message, life: 4000 });
    } finally {
        feriadosAlertaSalvando.value = null;
    }
}

async function bloquearTodosFeriadosAlerta() {
    feriadosAlertaSalvando.value = 'all';
    const pendentes = feriadosSemBloqueio.value.filter((f) => !feriadosAlertaBloqueados.value.has(f.data));
    for (const f of pendentes) {
        await bloquearFeriadoDoAlerta(f);
    }
    feriadosAlertaSalvando.value = null;
}

async function desbloquearFeriadoDoAlerta(feriado) {
    if (!ownerId.value) return;
    feriadosAlertaSalvando.value = `unblock_${feriado.data}`;
    try {
        const { error } = await tenantDb().from('agenda_bloqueios').delete().eq('owner_id', ownerId.value).eq('data_inicio', feriado.data).in('origem', ['agenda_feriado', 'agenda_dia']);

        if (error) throw error;

        // Remove do set de bloqueados (mini calendário fica sem fundo vermelho)
        const novo = new Set(miniBlockedDaySet.value);
        novo.delete(feriado.data);
        miniBlockedDaySet.value = novo;

        // Remove do set de "bloqueados nesta sessão"
        const novoBloq = new Set(feriadosAlertaBloqueados.value);
        novoBloq.delete(feriado.data);
        feriadosAlertaBloqueados.value = novoBloq;

        toast.add({
            severity: 'info',
            summary: 'Bloqueio removido',
            detail: `O bloqueio de ${feriado.nome} foi removido. Sessões marcadas para reagendamento precisam ser reativadas manualmente.`,
            life: 5000
        });
    } catch (e) {
        toast.add({ severity: 'error', summary: 'Erro', detail: e?.message, life: 4000 });
    } finally {
        feriadosAlertaSalvando.value = null;
    }
}

function gotoResult(row) {
    const api = getApi();
    if (api && row?.inicio_em) api.gotoDate(new Date(row.inicio_em));
    dialogEventRow.value = row;
    dialogStartISO.value = '';
    dialogEndISO.value = '';
    dialogOpen.value = true;
}
function gotoResultFromModal(row) {
    searchModalOpen.value = false;
    nextTick(() => gotoResult(row));
}

function fmtDateTime(iso) {
    if (!iso) return '—';
    return new Date(iso).toLocaleString('pt-BR', { dateStyle: 'short', timeStyle: 'short' });
}
function fmtDateOnly(iso) {
    if (!iso) return '—';
    return new Date(iso).toLocaleDateString('pt-BR', { weekday: 'short', day: '2-digit', month: '2-digit' });
}
function fmtTimeOnly(iso) {
    if (!iso) return '';
    return new Date(iso).toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' });
}
function labelTipo(tipo) {
    return normalizeEventoTipo(tipo, EVENTO_TIPO.SESSAO) === EVENTO_TIPO.BLOQUEIO ? 'Bloqueio' : 'Sessão';
}

// -----------------------------
// Create / Select time
// -----------------------------
function onCreateFromButton() {
    if (!ownerId.value) {
        toast.add({ severity: 'warn', summary: 'Agenda', detail: 'Aguarde carregar as configurações da agenda.', life: 3000 });
        return;
    }

    const durMin = settings.value?.session_duration_min ?? settings.value?.duracao_padrao_minutos ?? 50;
    const now = new Date();
    // Usa o dia visualizado no calendário para que o bloqueio de dia seja detectado corretamente
    const viewDate = currentDate.value instanceof Date ? currentDate.value : new Date(currentDate.value);
    const base = new Date(viewDate.getFullYear(), viewDate.getMonth(), viewDate.getDate(), now.getHours(), now.getMinutes(), 0, 0);

    dialogEventRow.value = {
        owner_id: ownerId.value,
        terapeuta_id: null,
        paciente_id: null,
        tipo: EVENTO_TIPO.SESSAO,
        status: 'agendado',
        titulo: deriveTituloDefaultByTipo(EVENTO_TIPO.SESSAO),
        observacoes: null,
        visibility_scope: 'public',
        determined_commitment_id: null
    };

    dialogStartISO.value = base.toISOString();
    dialogEndISO.value = new Date(base.getTime() + durMin * 60000).toISOString();
    dialogOpen.value = true;
}

function onSelectTime(selection) {
    const durMin = settings.value?.session_duration_min ?? settings.value?.duracao_padrao_minutos ?? 50;
    const rawStart = selection.start instanceof Date ? selection.start : new Date(selection.start);
    const rawEnd = selection.end instanceof Date ? selection.end : (selection.end ? new Date(selection.end) : new Date(rawStart.getTime() + durMin * 60000));
    const startISO = rawStart.toISOString();
    const endISO = new Date(rawStart.getTime() + durMin * 60000).toISOString();

    // Aviso de bloqueio — não impede criação (regra: só agendador público
    // veta), mas sinaliza pro terapeuta que ele tá agendando em cima de
    // um bloqueio próprio.
    const bloqHit = bloqueioCobrindo(rawStart, rawEnd);
    if (bloqHit) {
        toast.add({
            severity: 'warn',
            summary: 'Horário bloqueado',
            detail: `Este horário está dentro do bloqueio "${bloqHit.titulo || 'Bloqueio'}". A sessão será criada mesmo assim.`,
            life: 5000
        });
    }

    dialogEventRow.value = {
        owner_id: ownerId.value,
        terapeuta_id: null,
        paciente_id: null,
        tipo: EVENTO_TIPO.SESSAO,
        status: 'agendado',
        titulo: deriveTituloDefaultByTipo(EVENTO_TIPO.SESSAO),
        observacoes: null,
        visibility_scope: 'public',
        determined_commitment_id: null
    };

    dialogStartISO.value = startISO;
    dialogEndISO.value = endISO;
    dialogOpen.value = true;
}

function onEventClick(info) {
    const ev = info?.event;
    if (!ev) return;
    const ep = ev.extendedProps || {};

    // Bloqueios/pausas são background events — ignorar click pra não abrir
    // dialog de compromisso em cima de bloqueio (visual cinza ≠ compromisso).
    if (ep.kind === 'bloqueio' || ep.kind === 'break') return;

    dialogEventRow.value = {
        id: ep.isOccurrence ? null : ev.id || null,
        owner_id: ep.owner_id,
        terapeuta_id: ep.terapeuta_id ?? null,
        paciente_id: ep.paciente_id ?? null,
        paciente_nome: ep.paciente_nome ?? null,
        paciente_avatar: ep.paciente_avatar ?? null,
        paciente_status: ep.paciente_status ?? null,
        tipo: normalizeEventoTipo(ep.tipo, EVENTO_TIPO.SESSAO),
        status: ep.status,
        titulo: ev.title,
        observacoes: ep.observacoes ?? null,
        visibility_scope: ep.visibility_scope ?? 'public',
        inicio_em: ev.start?.toISOString?.() || ev.startStr,
        fim_em: ev.end?.toISOString?.() || ev.endStr,
        determined_commitment_id: ep.determined_commitment_id ?? null,
        titulo_custom: ep.titulo_custom ?? null,
        extra_fields: ep.extra_fields ?? null,
        price: ep.price != null ? Number(ep.price) : null,
        insurance_plan_id: ep.insurance_plan_id ?? null,
        insurance_guide_number: ep.insurance_guide_number ?? null,
        insurance_value: ep.insurance_value != null ? Number(ep.insurance_value) : null,
        insurance_plan_service_id: ep.insurance_plan_service_id ?? null,
        // ── recorrência (nova arquitetura) ──────────────────────────
        recurrence_id: ep.recurrence_id ?? ep.recurrenceId ?? ep.serie_id ?? null,
        original_date: ep.original_date ?? ep.originalDate ?? ep.recurrence_date ?? null,
        is_occurrence: ep.isOccurrence ?? false,
        exception_type: ep.exceptionType ?? null,
        // ── fallback legado ─────────────────────────────────────────
        serie_id: ep.serie_id ?? ep.recurrenceId ?? null,
        serie_dia_semana: ep.serie_dia_semana ?? null,
        serie_hora: ep.serie_hora ?? null
    };

    dialogStartISO.value = '';
    dialogEndISO.value = '';
    dialogOpen.value = true;
}

async function persistMoveOrResize(info, actionLabel) {
    try {
        const ev = info?.event;
        if (!ev) return;

        const id = ev.id;

        // Ocorrência virtual de série (id no formato "rec::uuid::date") — não tem registro real
        if (!id || !isUuid(id)) {
            info?.revert?.();
            toast.add({
                severity: 'info',
                summary: 'Sessão recorrente',
                detail: 'Para mover uma sessão da série, abra-a e edite com "Somente esta sessão".',
                life: 4500
            });
            return;
        }

        const startISO = ev.start ? ev.start.toISOString() : null;
        const endISO = ev.end ? ev.end.toISOString() : null;
        if (!startISO || !endISO) throw new Error('Compromisso sem start/end.');

        const start = new Date(startISO);
        const end = new Date(endISO);
        const breakMin = settings.value?.session_break_min || 0;

        // Usa allRows (inclui bloqueios) para não deixar o banco pegar conflitos que o JS ignorou
        const conflict = allRows.value.find((r) => {
            if (!r.inicio_em || r.id === id) return false;
            const rS = new Date(r.inicio_em);
            const rE = new Date(r.fim_em || r.inicio_em);
            return start < new Date(rE.getTime() + breakMin * 60000) && end > rS;
        });

        if (conflict) {
            info?.revert?.();
            toast.add({ severity: 'warn', summary: 'Conflito', detail: 'Já existe um compromisso neste horário.', life: 4000 });
            return;
        }

        await update(id, { inicio_em: startISO, fim_em: endISO });
        toast.add({ severity: 'success', summary: actionLabel, detail: 'Alteração salva.', life: 1800 });
    } catch (e) {
        info?.revert?.();
        toast.add({ severity: 'warn', summary: 'Erro', detail: eventsError.value || e?.message || 'Falha ao salvar alteração.', life: 4500 });
    }
}

async function refetch() {
    toast.add({ severity: 'info', summary: 'Agenda', detail: 'Recarregando…', life: 1500 });
    await _reloadRange();
}

function goSettings() {
    router.push({ path: '/configuracoes/agenda' });
}
function goRecorrencias() {
    router.push({ name: 'therapist-agenda-recorrencias' });
}

// -----------------------------
// Save/Delete
// -----------------------------
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 || ''));
}

function pickDbFields(obj) {
    const allowed = [
        'tenant_id',
        'owner_id',
        'terapeuta_id',
        'patient_id',
        'tipo',
        'status',
        'titulo',
        'observacoes',
        'inicio_em',
        'fim_em',
        'visibility_scope',
        'mirror_of_event_id',
        'mirror_source',
        'determined_commitment_id',
        'titulo_custom',
        'extra_fields',
        // nova arquitetura
        'recurrence_id',
        'recurrence_date',
        // financeiro
        'price',
        'insurance_plan_id',
        'insurance_guide_number',
        'insurance_value',
        'insurance_plan_service_id'
    ];
    const out = {};
    for (const k of allowed) {
        if (obj[k] !== undefined) out[k] = obj[k];
    }
    return out;
}

function onEditSeriesOccurrence({ id, recurrence_date, inicio_em, fim_em, is_virtual }) {
    const current = dialogEventRow.value || {};
    dialogEventRow.value = {
        ...current,
        id: id || null,
        inicio_em,
        fim_em,
        recurrence_date,
        _is_virtual: is_virtual
    };
}

async function onUpdateSeriesEvent({ id, status, recurrence_date, inicio_em, fim_em, is_virtual }) {
    try {
        const row = dialogEventRow.value || {};

        // 1) Materializar virtual se preciso (resolve `eventoId` real)
        let eventoId = id;
        if (!id) {
            if (!is_virtual || !inicio_em) return;
            const rid = row.recurrence_id ?? row.serie_id ?? null;
            const rDate = recurrence_date || inicio_em?.slice(0, 10);
            const { data: existing } = await tenantDb().from('agenda_eventos')
                .select('id')
                .eq('recurrence_id', rid)
                .eq('recurrence_date', rDate)
                .maybeSingle();
            if (existing?.id) {
                eventoId = existing.id;
                // Status atualiza só depois do dialog/applyStatusChange decidir
            } else {
                // Materializa criando com status='agendado' — o status final
                // é aplicado por applyStatusChange (que pode ramificar pelo
                // dialog se houver decisão a tomar)
                const created = await create({
                    owner_id: ownerId.value,
                    tenant_id: clinicTenantId.value,
                    recurrence_id: rid,
                    recurrence_date: rDate,
                    tipo: 'sessao',
                    status: 'agendado',
                    inicio_em,
                    fim_em,
                    visibility_scope: 'public',
                    titulo: row.titulo || 'Sessão',
                    patient_id: row.patient_id || row.paciente_id || null,
                    determined_commitment_id: row.determined_commitment_id || null,
                    price: row.price ?? null
                });
                eventoId = created?.id || null;
            }
        }

        // 2) Atualiza status NO DB (applyStatusChange só cuida de billing — não
        //    do status do agenda_evento em si). Antes do dialog pra ctx.row
        //    refletir o novo status do evento.
        if (eventoId) {
            await update(eventoId, { status });
        }

        // 3) Aplica fluxo de billing (load context + dialog se preciso + apply)
        const rowWithStatus = { ...row, id: eventoId, status, inicio_em, fim_em };
        const { applied } = await applyStatusChange({ eventoId, row: rowWithStatus, novoStatus: status });

        // 4) Se aplicou (e não cancelou via dialog), refetch pra UI refletir
        if (applied) {
            await loadMyRange?.();
        }
    } catch (e) {
        toast.add({ severity: 'warn', summary: 'Erro', detail: e?.message || 'Falha ao atualizar status.', life: 3000 });
    }
}

// Opção C — oferece geração de billing_contract após criar série recorrente com serviços.
// Chamada APÓS fechar o dialog principal para não bloquear o fluxo principal.
async function _offerBillingContract(normalized, recorrencia, tenantId) {
    const n = recorrencia.qtdSessoes;
    const items = recorrencia.commitmentItems || [];
    const totalPorSessao = items.reduce((s, i) => s + (i.final_price ?? 0), 0);
    const pacoteFechado = recorrencia.serieValorMode === 'dividir';
    const packagePrice = pacoteFechado ? totalPorSessao : totalPorSessao * n;
    const perSessao = pacoteFechado ? totalPorSessao / n : totalPorSessao;
    const fmtB = (v) => Number(v).toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
    return new Promise((resolve) => {
        confirm.require({
            header: 'Gerar contrato de cobrança?',
            message: `${n} sessões — ${fmtB(perSessao)} por sessão. Total da série: ${fmtB(packagePrice)}.`,
            icon: 'pi pi-file',
            acceptLabel: 'Sim, gerar contrato',
            rejectLabel: 'Agora não',
            accept: async () => {
                try {
                    const { error } = await tenantDb().from('billing_contracts').insert({
                        owner_id: normalized.owner_id,
                        patient_id: normalized.paciente_id,
                        type: 'package',
                        total_sessions: n,
                        sessions_used: 0,
                        package_price: packagePrice,
                        status: 'active'
                    });
                    if (error) throw error;
                    toast.add({ severity: 'success', summary: 'Contrato gerado', detail: `Pacote de ${n} sessões: ${fmtB(packagePrice)}.`, life: 3000 });
                } catch (e) {
                    toast.add({ severity: 'warn', summary: 'Erro ao gerar contrato', detail: e?.message, life: 4000 });
                }
                resolve();
            },
            reject: () => resolve()
        });
    });
}

async function onDialogSave(arg) {
    let normalized = null;

    try {
        const isWrapped = !!arg && typeof arg === 'object' && Object.prototype.hasOwnProperty.call(arg, 'payload');
        const payload = isWrapped ? arg.payload : arg;
        const recorrencia = arg?.recorrencia ?? null;
        const editMode = arg?.editMode ?? null;
        // recurrence_id vem do emit do dialog — para edições de série
        // serie_id é o campo legado que o dialog ainda usa; recurrence_id é o novo
        const recurrenceId = arg?.recurrence_id ?? arg?.serie_id ?? null;
        const originalDate = arg?.original_date ?? dialogEventRow.value?.original_date ?? null;

        // Usa SEMPRE o id emitido pelo dialog.
        // NUNCA usar dialogEventRow.value?.id como fallback — ele pode conter
        // o id de um evento anterior aberto antes desta criação.
        const id = isWrapped ? (arg.id ?? null) : (arg?.id ?? null);

        normalized = { ...(payload || {}) };

        if (!normalized.owner_id && ownerId.value) normalized.owner_id = ownerId.value;

        const clinicId = clinicTenantId.value;
        if (!clinicId) throw new Error('tenant_id da clínica não encontrado no tenantStore.');
        normalized.tenant_id = clinicId;

        if (!normalized.visibility_scope) normalized.visibility_scope = 'public';

        normalized.tipo = normalizeEventoTipo(normalized.tipo || deriveEventoTipoForNewEvent(normalized), EVENTO_TIPO.SESSAO);

        if (!normalized.status) normalized.status = 'agendado';
        if (!String(normalized.titulo || '').trim()) normalized.titulo = deriveTituloDefaultByTipo(normalized.tipo);

        if (!normalized.paciente_id || !isUuid(normalized.paciente_id)) normalized.paciente_id = null;

        if (normalized.tipo === EVENTO_TIPO.BLOQUEIO) {
            normalized.paciente_id = null;
            normalized.determined_commitment_id = null;
            if (!normalized.visibility_scope) normalized.visibility_scope = 'busy_only';
        }

        if (normalized.determined_commitment_id && !isUuid(normalized.determined_commitment_id)) {
            normalized.determined_commitment_id = null;
        }

        // ── CASO C / C2: criação RECORRENTE (novo ou evento existente) ─────────
        // Só cria nova regra se NÃO há série existente — se houver recurrenceId, cai para F/G/E
        if (recorrencia?.tipo === 'recorrente' && !recurrenceId) {
            const startDate = new Date(normalized.inicio_em);
            const tipoFreq = recorrencia.tipoFreq ?? 'semanal';
            const dow = recorrencia.diaSemana ?? startDate.getDay();
            const firstRecISO = startDate.toISOString().slice(0, 10);

            // Determina type/interval/weekdays conforme frequência
            let ruleType = 'weekly';
            let interval = 1;
            let weekdays = [dow];
            if (tipoFreq === 'quinzenal') {
                ruleType = 'weekly';
                interval = 2;
            } else if (tipoFreq === 'diasEspecificos') {
                ruleType = 'custom_weekdays';
                weekdays = recorrencia.diasSemana?.length ? recorrencia.diasSemana : [dow];
            }

            const rule = {
                tenant_id: clinicId,
                owner_id: normalized.owner_id,
                therapist_id: normalized.terapeuta_id ?? null,
                patient_id: normalized.paciente_id ?? null,
                determined_commitment_id: normalized.determined_commitment_id ?? null,
                type: ruleType,
                interval,
                weekdays,
                start_time: recorrencia.horaInicio ?? startDate.toTimeString().slice(0, 8),
                end_time: _addMinutesToTime(recorrencia.horaInicio ?? startDate.toTimeString().slice(0, 5), recorrencia.duracaoMin ?? 50),
                duration_min: recorrencia.duracaoMin ?? 50,
                timezone: settings.value?.timezone || 'America/Sao_Paulo',
                start_date: firstRecISO,
                end_date: recorrencia.dataFim ? new Date(recorrencia.dataFim).toISOString().slice(0, 10) : null,
                max_occurrences: recorrencia.qtdSessoes ?? null,
                open_ended: !recorrencia.dataFim && !recorrencia.qtdSessoes,
                modalidade: normalized.modalidade ?? 'presencial',
                titulo_custom: normalized.titulo_custom ?? null,
                observacoes: normalized.observacoes ?? null,
                extra_fields: normalized.extra_fields ?? null,
                price: normalized.price ?? null,
                insurance_plan_id: normalized.insurance_plan_id ?? null,
                insurance_guide_number: normalized.insurance_guide_number ?? null,
                insurance_value: normalized.insurance_value ?? null,
                insurance_plan_service_id: normalized.insurance_plan_service_id ?? null,
                status: 'ativo'
            };
            const createdRule = await createRule(rule);

            // Se editando evento existente, vincula à nova regra
            if (id && createdRule?.id) {
                await update(id, { recurrence_id: createdRule.id, recurrence_date: firstRecISO });
            }

            // Inserir exceptions automáticas para datas em conflito
            if (recorrencia?.conflitos?.length && createdRule?.id) {
                const exceptions = recorrencia.conflitos.map((c) => ({
                    recurrence_id: createdRule.id,
                    original_date: c.date,
                    type: c.conflict.type === 'feriado' ? 'holiday_block' : c.conflict.type === 'bloqueado' ? 'cancel_session' : c.conflict.type === 'folga' ? 'cancel_session' : 'cancel_session',
                    reason: c.conflict.label
                }));
                const { error: exErr } = await tenantDb().from('recurrence_exceptions').insert(exceptions);
                if (exErr) logError('AgendaTerapeutaPage', 'onDialogSave: erro ao inserir exceptions', exErr);
            }

            // Opção C — salvar template de serviços da regra
            if (createdRule?.id && recorrencia.commitmentItems?.length) {
                await saveRuleItems(createdRule.id, recorrencia.commitmentItems);
            }

            const detail = recorrencia.qtdSessoes ? `${recorrencia.qtdSessoes} sessões criadas` : 'Série recorrente criada';
            toast.add({ severity: 'success', summary: 'Série criada', detail, life: 3000 });
            dialogOpen.value = false;
            await _reloadRange();

            // Opção C — oferecer billing_contract após fechar o dialog (só com serviços + nº definido + paciente)
            if (createdRule?.id && recorrencia.commitmentItems?.length && recorrencia.qtdSessoes && normalized.paciente_id) {
                await _offerBillingContract(normalized, recorrencia, clinicId);
            }

            return;
        }

        // ── CASO D: edição "somente_este" de ocorrência de série ───────────────
        if (recurrenceId && editMode === 'somente_este') {
            let eventId = id ?? null;

            if (id) {
                // Evento já materializado: atualiza campos + mantém exceção sincronizada
                await update(id, pickDbFields(normalized));
                if (originalDate) {
                    await upsertException({
                        recurrence_id: recurrenceId,
                        tenant_id: clinicId,
                        original_date: originalDate,
                        type: 'reschedule_session',
                        new_date: normalized.inicio_em?.slice(0, 10),
                        new_start_time: normalized.inicio_em ? new Date(normalized.inicio_em).toTimeString().slice(0, 8) : null,
                        new_end_time: normalized.fim_em ? new Date(normalized.fim_em).toTimeString().slice(0, 8) : null,
                        modalidade: normalized.modalidade ?? null,
                        titulo_custom: normalized.titulo_custom ?? null,
                        observacoes: normalized.observacoes ?? null,
                        extra_fields: normalized.extra_fields ?? null
                    });
                }
            } else if (originalDate) {
                // Ocorrência ainda virtual: cria exceção + materializa para salvar commitment_services
                await upsertException({
                    recurrence_id: recurrenceId,
                    tenant_id: clinicId,
                    original_date: originalDate,
                    type: 'reschedule_session',
                    new_date: normalized.inicio_em?.slice(0, 10),
                    new_start_time: normalized.inicio_em ? new Date(normalized.inicio_em).toTimeString().slice(0, 8) : null,
                    new_end_time: normalized.fim_em ? new Date(normalized.fim_em).toTimeString().slice(0, 8) : null,
                    modalidade: normalized.modalidade ?? null,
                    titulo_custom: normalized.titulo_custom ?? null,
                    observacoes: normalized.observacoes ?? null,
                    extra_fields: normalized.extra_fields ?? null
                });
                if (arg.onSaved) {
                    const { data: existing } = await tenantDb().from('agenda_eventos').select('id').eq('recurrence_id', recurrenceId).eq('recurrence_date', originalDate).maybeSingle();
                    if (existing?.id) {
                        eventId = existing.id;
                    } else {
                        const mat = await create({
                            owner_id: normalized.owner_id,
                            tenant_id: clinicId,
                            recurrence_id: recurrenceId,
                            recurrence_date: originalDate,
                            tipo: normalized.tipo,
                            status: normalized.status,
                            inicio_em: normalized.inicio_em,
                            fim_em: normalized.fim_em,
                            titulo: normalized.titulo,
                            patient_id: normalized.patient_id,
                            determined_commitment_id: normalized.determined_commitment_id,
                            modalidade: normalized.modalidade ?? 'presencial',
                            observacoes: normalized.observacoes ?? null,
                            extra_fields: normalized.extra_fields ?? null,
                            price: normalized.price ?? null,
                            insurance_plan_id: normalized.insurance_plan_id ?? null,
                            insurance_guide_number: normalized.insurance_guide_number ?? null,
                            insurance_value: normalized.insurance_value ?? null,
                            insurance_plan_service_id: normalized.insurance_plan_service_id ?? null
                        });
                        eventId = mat.id;
                    }
                }
            }

            // Opção C — salvar serviços e marcar esta ocorrência como customizada
            if (eventId) await arg.onSaved?.(eventId, { markCustomized: true });

            toast.add({ severity: 'success', summary: 'Salvo', detail: 'Sessão atualizada individualmente.', life: 2500 });
            dialogOpen.value = false;
            await _reloadRange();
            return;
        }

        // ── CASO E: edição "este e os seguintes" ───────────────────────────────
        if (recurrenceId && editMode === 'este_e_seguintes' && originalDate) {
            const newRuleId = await splitRuleAt(recurrenceId, originalDate);
            const startDate = new Date(normalized.inicio_em);
            await updateRule(newRuleId, {
                weekdays: [startDate.getDay()],
                start_time: startDate.toTimeString().slice(0, 8),
                end_time: normalized.fim_em ? new Date(normalized.fim_em).toTimeString().slice(0, 8) : undefined,
                duration_min: recorrencia?.duracaoMin ?? 50,
                modalidade: normalized.modalidade ?? 'presencial',
                titulo_custom: normalized.titulo_custom ?? null,
                observacoes: normalized.observacoes ?? null,
                extra_fields: normalized.extra_fields ?? null,
                price: normalized.price ?? null,
                insurance_plan_id: normalized.insurance_plan_id ?? null,
                insurance_guide_number: normalized.insurance_guide_number ?? null,
                insurance_value: normalized.insurance_value ?? null,
                insurance_plan_service_id: normalized.insurance_plan_service_id ?? null
            });

            // Opção C — atualizar template e propagar para a nova sub-série
            const serviceItemsE = arg.serviceItems;
            if (newRuleId && serviceItemsE?.length) {
                await saveRuleItems(newRuleId, serviceItemsE);
                await propagateToSerie(newRuleId, serviceItemsE, { fromDate: originalDate });
            }
            if (id) await arg.onSaved?.(id);

            toast.add({ severity: 'success', summary: 'Salvo', detail: 'Esta sessão e as seguintes foram atualizadas.', life: 2500 });
            dialogOpen.value = false;
            await _reloadRange();
            return;
        }

        // ── CASO F: edição "todos" ─────────────────────────────────────────────
        if (recurrenceId && editMode === 'todos') {
            const startDate = new Date(normalized.inicio_em);
            await updateRule(recurrenceId, {
                weekdays: [startDate.getDay()],
                start_time: startDate.toTimeString().slice(0, 8),
                end_time: normalized.fim_em ? new Date(normalized.fim_em).toTimeString().slice(0, 8) : undefined,
                duration_min: recorrencia?.duracaoMin ?? 50,
                modalidade: normalized.modalidade ?? 'presencial',
                titulo_custom: normalized.titulo_custom ?? null,
                observacoes: normalized.observacoes ?? null,
                extra_fields: normalized.extra_fields ?? null,
                price: normalized.price ?? null,
                insurance_plan_id: normalized.insurance_plan_id ?? null,
                insurance_guide_number: normalized.insurance_guide_number ?? null,
                insurance_value: normalized.insurance_value ?? null,
                insurance_plan_service_id: normalized.insurance_plan_service_id ?? null
            });

            // Propaga campos não-serviço para sessões já materializadas da série
            await tenantDb().from('agenda_eventos')
                .update({
                    modalidade: normalized.modalidade ?? 'presencial',
                    titulo_custom: normalized.titulo_custom ?? null,
                    observacoes: normalized.observacoes ?? null,
                    extra_fields: normalized.extra_fields ?? null,
                    price: normalized.price ?? null,
                    insurance_plan_id: normalized.insurance_plan_id ?? null,
                    insurance_guide_number: normalized.insurance_guide_number ?? null,
                    insurance_value: normalized.insurance_value ?? null,
                    insurance_plan_service_id: normalized.insurance_plan_service_id ?? null
                })
                .eq('recurrence_id', recurrenceId);

            // Opção C — atualizar template e propagar para toda a série
            const serviceItemsF = arg.serviceItems;
            if (recurrenceId && serviceItemsF?.length) {
                await saveRuleItems(recurrenceId, serviceItemsF);
                await propagateToSerie(recurrenceId, serviceItemsF);
            }
            if (id) await arg.onSaved?.(id);

            toast.add({ severity: 'success', summary: 'Salvo', detail: 'Todas as sessões da série foram atualizadas.', life: 2500 });
            dialogOpen.value = false;
            await _reloadRange();
            return;
        }

        // ── CASO G: edição "todos sem exceção" — sobrescreve TUDO incluindo customizadas ──
        if (recurrenceId && editMode === 'todos_sem_excecao') {
            const startDate = new Date(normalized.inicio_em);
            await updateRule(recurrenceId, {
                weekdays: [startDate.getDay()],
                start_time: startDate.toTimeString().slice(0, 8),
                end_time: normalized.fim_em ? new Date(normalized.fim_em).toTimeString().slice(0, 8) : undefined,
                duration_min: recorrencia?.duracaoMin ?? 50,
                modalidade: normalized.modalidade ?? 'presencial',
                titulo_custom: normalized.titulo_custom ?? null,
                observacoes: normalized.observacoes ?? null,
                extra_fields: normalized.extra_fields ?? null,
                price: normalized.price ?? null,
                insurance_plan_id: normalized.insurance_plan_id ?? null,
                insurance_guide_number: normalized.insurance_guide_number ?? null,
                insurance_value: normalized.insurance_value ?? null,
                insurance_plan_service_id: normalized.insurance_plan_service_id ?? null
            });

            // Propaga TODOS os campos para TODAS as sessões materializadas (sem exceção)
            await tenantDb().from('agenda_eventos')
                .update({
                    modalidade: normalized.modalidade ?? 'presencial',
                    titulo_custom: normalized.titulo_custom ?? null,
                    observacoes: normalized.observacoes ?? null,
                    extra_fields: normalized.extra_fields ?? null,
                    price: normalized.price ?? null,
                    insurance_plan_id: normalized.insurance_plan_id ?? null,
                    insurance_guide_number: normalized.insurance_guide_number ?? null,
                    insurance_value: normalized.insurance_value ?? null,
                    insurance_plan_service_id: normalized.insurance_plan_service_id ?? null,
                    services_customized: false
                })
                .eq('recurrence_id', recurrenceId);

            // Propaga para todos — incluindo services_customized=true — e reseta o flag
            const serviceItemsG = arg.serviceItems;
            if (recurrenceId && serviceItemsG?.length) {
                await saveRuleItems(recurrenceId, serviceItemsG);
                await propagateToSerie(recurrenceId, serviceItemsG, { ignoreCustomized: true });
            }

            if (id) await arg.onSaved?.(id);

            toast.add({ severity: 'success', summary: 'Salvo', detail: 'Todas as sessões da série foram atualizadas (sem exceção).', life: 2500 });
            dialogOpen.value = false;
            await _reloadRange();
            return;
        }

        // ── CASO A/B: evento avulso ou sessão única ────────────────────────────
        const dbPayload = pickDbFields(normalized);

        if (id) {
            await update(id, dbPayload);
            await arg.onSaved?.(id);
            toast.add({ severity: 'success', summary: 'Salvo', detail: 'Compromisso atualizado.', life: 2500 });
        } else {
            const created = await create(dbPayload);
            await arg.onSaved?.(created.id);
            toast.add({ severity: 'success', summary: 'Criado', detail: 'Compromisso criado.', life: 2500 });
        }

        dialogOpen.value = false;
        await _reloadRange();
    } catch (e) {
        const msg = String(e?.message || '');

        if (msg.includes('recurrence_rules_dates_chk') || (msg.includes('violates check constraint') && msg.includes('recurrence_rules'))) {
            toast.add({
                severity: 'warn',
                summary: 'Não foi possível dividir a série',
                detail: 'Esta é a primeira sessão da série. Para alterar todas as ocorrências, selecione "Todos" ou "Todos sem exceção".',
                life: 6000
            });
            return;
        }

        const isOverlap = e?.code === '23P01' || msg.includes('agenda_eventos_sem_sobreposicao') || msg.includes('exclusion constraint') || msg.includes('conflicting key value violates exclusion constraint');

        if (isOverlap) {
            let detail = 'Já existe um compromisso nesse horário. Verifique a agenda e escolha outro horário.';
            try {
                if (normalized?.inicio_em && normalized?.fim_em && normalized?.owner_id) {
                    const { data: conflicting } = await tenantDb().from('agenda_eventos')
                        .select('titulo, inicio_em, fim_em')
                        .eq('owner_id', normalized.owner_id)
                        .lt('inicio_em', normalized.fim_em)
                        .gt('fim_em', normalized.inicio_em)
                        .limit(1)
                        .maybeSingle();

                    if (conflicting) {
                        const ini = new Date(conflicting.inicio_em).toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' });
                        const fim = new Date(conflicting.fim_em).toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' });
                        const titulo = conflicting.titulo || 'Compromisso';
                        detail = `Conflito com "${titulo}" (${ini} → ${fim}). Ajuste o horário ou a duração.`;
                    }
                }
            } catch {
                /* mantém detail genérico */
            }

            toast.add({ severity: 'warn', summary: 'Conflito de horário', detail, life: 7000 });
            return;
        }

        toast.add({ severity: 'warn', summary: 'Erro', detail: eventsError.value || e?.message || 'Falha ao salvar.', life: 4500 });
    }
}

async function onDialogDelete(arg) {
    const id = typeof arg === 'string' ? arg : arg?.id;
    const editMode = typeof arg === 'string' ? null : arg?.editMode;
    const recurrenceId = typeof arg === 'string' ? null : (arg?.recurrence_id ?? arg?.serie_id ?? null);
    const originalDate = typeof arg === 'string' ? null : (arg?.original_date ?? dialogEventRow.value?.original_date ?? null);

    try {
        // ── Somente este evento / ocorrência ──────────────────────────────────
        if (!recurrenceId || editMode === 'somente_este') {
            if (originalDate && recurrenceId) {
                // Ocorrência virtual: cria exceção de cancelamento
                await upsertException({
                    recurrence_id: recurrenceId,
                    tenant_id: clinicTenantId.value,
                    original_date: originalDate,
                    type: 'cancel_session'
                });
            } else if (id) {
                await remove(id);
            }
            toast.add({ severity: 'success', summary: 'Excluído', detail: 'Sessão removida.', life: 2500 });
            dialogOpen.value = false;
            await _reloadRange();
            return;
        }

        // ── Este e os seguintes ───────────────────────────────────────────────
        if (editMode === 'este_e_seguintes' && originalDate) {
            await cancelRuleFrom(recurrenceId, originalDate);
            toast.add({ severity: 'success', summary: 'Excluído', detail: 'Esta sessão e as seguintes foram canceladas.', life: 2500 });
            dialogOpen.value = false;
            await _reloadRange();
            return;
        }

        // ── Todos (encerrar série, manter sessão atual como avulsa) ──────────────
        if (editMode === 'todos') {
            const row = dialogEventRow.value || {};
            const isVirtual = row.is_occurrence && !id;

            if (isVirtual) {
                // Ocorrência virtual: materializa como evento avulso (sem recurrence_id)
                const rDate = row.original_date || row.inicio_em?.slice(0, 10);
                const existing = await tenantDb().from('agenda_eventos').select('id').eq('recurrence_id', recurrenceId).eq('recurrence_date', rDate).maybeSingle();

                if (existing.data?.id) {
                    await update(existing.data.id, { recurrence_id: null, recurrence_date: null });
                } else {
                    await create({
                        owner_id: ownerId.value,
                        tenant_id: clinicTenantId.value,
                        tipo: row.tipo || 'sessao',
                        status: row.status || 'agendado',
                        inicio_em: row.inicio_em,
                        fim_em: row.fim_em,
                        titulo: row.titulo || 'Sessão',
                        patient_id: row.patient_id || row.paciente_id || null,
                        determined_commitment_id: row.determined_commitment_id || null,
                        modalidade: row.modalidade || 'presencial',
                        price: row.price ?? null,
                        observacoes: row.observacoes || null,
                        visibility_scope: 'public'
                    });
                }
            } else if (id) {
                // Evento real: desvincula da série
                await update(id, { recurrence_id: null, recurrence_date: null });
            }

            // Cancela a regra (todas as ocorrências virtuais futuras somem)
            await cancelRule(recurrenceId);
            toast.add({ severity: 'success', summary: 'Série encerrada', detail: 'A série foi encerrada. Esta sessão foi mantida como avulsa.', life: 3000 });
            dialogOpen.value = false;
            await _reloadRange();
            return;
        }

        // fallback
        if (id) await remove(id);
        toast.add({ severity: 'success', summary: 'Excluído', detail: 'Compromisso removido.', life: 2500 });
        dialogOpen.value = false;
        await _reloadRange();
    } catch (e) {
        toast.add({ severity: 'warn', summary: 'Erro', detail: eventsError.value || e?.message || 'Falha ao excluir.', life: 4500 });
    }
}

async function _reloadRange() {
    logEvent('AgendaTerapeutaPage', '_reloadRange chamado', { ownerId: ownerId.value, range: currentRange.value });
    if (!currentRange.value.start || !currentRange.value.end) {
        logEvent('AgendaTerapeutaPage', '_reloadRange: sem range, abortando');
        return;
    }
    // aguarda ownerId ficar disponível (settings são async)
    if (!ownerId.value) {
        logEvent('AgendaTerapeutaPage', '_reloadRange: ownerId vazio — aguardando...');
        const unwatch = watch(ownerId, async (v) => {
            if (!v) return;
            logEvent('AgendaTerapeutaPage', '_reloadRange: ownerId disponível');
            unwatch();
            await _reloadRange();
        });
        return;
    }

    const start = new Date(currentRange.value.start);
    const end = new Date(currentRange.value.end);
    const activeTenantId = tenantStore.activeTenantId || null;

    // 1. carrega eventos reais do banco (tenant_id já filtrado dentro do composable)
    await loadMyRange(start.toISOString(), end.toISOString(), ownerId.value);
    logEvent('AgendaTerapeutaPage', '_reloadRange: eventos reais carregados', { count: rows.value.length });

    // 2. expande regras de recorrência + merge com sessões reais (passa tenantId)
    const merged = await loadAndExpand(ownerId.value, start, end, rows.value, activeTenantId);
    logEvent('AgendaTerapeutaPage', '_reloadRange: merged total', { count: merged.length });

    // 3. separa ocorrências virtuais (eventos reais já estão em rows.value)
    _occurrenceRows.value = merged.filter((r) => r.is_occurrence);
    logEvent('AgendaTerapeutaPage', '_reloadRange: ocorrências virtuais', { count: _occurrenceRows.value.length });

    // 4. bloqueios (background events). Async em paralelo — não bloqueia
    // render do calendário; bloqueioFcEvents é computed e atualiza sozinho.
    loadBloqueios(ownerId.value, start, end);
}

// Ref auxiliar para ocorrências virtuais geradas pelo useRecurrence
const _occurrenceRows = ref([]);

// Empurra calendarEvents para o FC de forma imperativa.
// Remove a fonte anterior para não acumular; adiciona a nova com os eventos filtrados.
function _pushEventsToFC() {
    const api = getApi();
    if (!api) return;
    api.getEventSources().forEach((src) => src.remove());
    api.addEventSource(calendarEvents.value);
}

// Dispara sempre que calendarEvents mudar: filtro onlySessions, dados novos, etc.
watch(calendarEvents, async () => {
    await nextTick();
    _pushEventsToFC();
});

// -----------------------------
// Bloqueio
// -----------------------------
const blockMenuItems = [
    { label: 'Bloquear por Horário', icon: 'pi pi-clock', command: () => openBloqueioDialog('horario') },
    { label: 'Bloquear por Período', icon: 'pi pi-calendar-clock', command: () => openBloqueioDialog('periodo') },
    { label: 'Bloquear por Dia', icon: 'pi pi-calendar-times', command: () => openBloqueioDialog('dia') },
    { label: 'Bloqueio por Feriados', icon: 'pi pi-star', command: () => openBloqueioDialog('feriados') }
];

// -----------------------------
// Helpers
// -----------------------------
function shiftMonth(date, delta) {
    const d = new Date(date);
    d.setMonth(d.getMonth() + delta);
    return d;
}
function capitalize(s) {
    return s ? s.charAt(0).toUpperCase() + s.slice(1) : s;
}
function padTime(hhmmss, deltaMin) {
    const [hh, mm] = String(hhmmss || '00:00:00')
        .split(':')
        .map(Number);
    let total = hh * 60 + mm + deltaMin;
    if (total < 0) total = 0;
    if (total > 24 * 60) total = 24 * 60;
    return minutesToDuration(total);
}

// ── helper privado ─────────────────────────────────────────────────────────
function _addMinutesToTime(timeStr, minutes) {
    const [h, m] = String(timeStr || '09:00')
        .split(':')
        .map(Number);
    const total = h * 60 + m + Number(minutes || 0);
    const nh = Math.floor(total / 60) % 24;
    const nm = total % 60;
    return `${String(nh).padStart(2, '0')}:${String(nm).padStart(2, '0')}:00`;
}

onMounted(async () => {
    await loadSettings();
    if (settingsError.value) toast.add({ severity: 'warn', summary: 'Agenda', detail: settingsError.value, life: 4500 });

    // Sticky detection: sentinel sai da área visível → header colado
    if (headerSentinelRef.value) {
        const io = new IntersectionObserver(
            ([entry]) => {
                headerStuck.value = !entry.isIntersecting;
            },
            { rootMargin: `${document.querySelector('.l2-main') ? '0px' : '-56px'} 0px 0px 0px` }
        );
        io.observe(headerSentinelRef.value);
    }

    mqDesktop?.addEventListener('change', onMqDesktopChange);
});

onBeforeUnmount(() => {
    mqDesktop?.removeEventListener('change', onMqDesktopChange);
});
</script>

<template>
    <ConfirmDialog />

    <!-- ════ AGENDA TERAPEUTA — Layout 3 colunas ════ -->

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

    <!-- Hero compacto — padrão Compromissos -->
    <div
        ref="headerEl"
        class="relative overflow-hidden rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] px-3 py-2.5 my-3 mx-3 md:mx-4 sticky top-[var(--layout-sticky-top,56px)] z-20"
        :class="{ 'rounded-tl-none rounded-tr-none': headerStuck }"
    >
        <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.07]" />
        </div>
        <div class="relative z-1 flex items-center gap-3">
            <!-- 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-calendar text-base" /></div>
                <div class="min-w-0 hidden lg:block">
                    <div class="text-base font-bold tracking-tight text-[var(--text-color)]">Agenda</div>
                    <div class="text-xs text-[var(--text-color-secondary)]">{{ subtitleText }}</div>
                </div>
            </div>

            <!-- Nav + filtros (desktop) -->
            <div class="hidden min-[1500px]:flex items-center gap-2 flex-1 min-w-0 mx-2">
                <!-- Navegação
          <div class="flex items-center gap-1 shrink-0">
            <Button label="Hoje" severity="secondary" outlined size="small" class="rounded-full" @click="goToday" />
            <Button icon="pi pi-chevron-left" severity="secondary" outlined class="h-8 w-8 rounded-full" @click="goPrev" />
            <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full border border-[var(--surface-border)] bg-[var(--surface-ground)] text-sm font-semibold text-[var(--text-color)] cursor-pointer whitespace-nowrap transition-colors duration-150 hover:border-[var(--p-primary-400)]" @click="toggleMonthPicker">
              <i class="pi pi-calendar text-xs opacity-60" />
              {{ subtitleText }}
            </span>
            <Button icon="pi pi-chevron-right" severity="secondary" outlined class="h-8 w-8 rounded-full" @click="goNext" />
          </div> -->
                <!-- Filtros -->
                <div class="flex items-center gap-1.5 flex-wrap">
                    <SelectButton v-model="calendarView" :options="viewOptions" optionLabel="label" optionValue="value" :allowEmpty="false" size="small" />
                    <SelectButton v-model="timeMode" :options="timeModeOptions" optionLabel="label" optionValue="value" :allowEmpty="false" size="small" />
                    <SelectButton v-model="onlySessions" :options="onlySessionsOptions" optionLabel="label" optionValue="value" :allowEmpty="false" size="small" />
                </div>
            </div>

            <!-- Ações desktop -->
            <div class="hidden min-[1500px]:flex items-center gap-1 shrink-0">
                <div class="w-44">
                    <FloatLabel variant="on">
                        <IconField>
                            <InputIcon class="pi pi-search" />
                            <InputText id="agendaSearch" v-model="search" class="w-full" autocomplete="off" @keyup.enter="openSearchModal" />
                        </IconField>
                        <label for="agendaSearch">Buscar...</label>
                    </FloatLabel>
                </div>
                <div v-if="feriadosTodosProximos.length" class="relative">
                    <Button icon="pi pi-bell" :severity="feriadosSemBloqueio.length ? 'danger' : 'secondary'" outlined class="h-9 w-9 rounded-full" @click="feriadosAlertaOpen = true" />
                    <span v-if="feriadosSemBloqueio.length" class="absolute -top-1 -right-1 min-w-[16px] h-4 px-1 rounded-full bg-red-500 text-white text-[0.65rem] font-bold flex items-center justify-center pointer-events-none">{{
                        feriadosSemBloqueio.length
                    }}</span>
                </div>
                <Button icon="pi pi-plus" class="h-9 w-9 rounded-full" @click="onCreateFromButton" />
                <Button label="Bloquear" icon="pi pi-lock" size="small" class="rounded-full" severity="danger" outlined @click="(e) => blockMenuRef.toggle(e)" />
                <Menu ref="blockMenuRef" :model="blockMenuItems" :popup="true" />
                <Button icon="pi pi-refresh" severity="secondary" outlined class="h-9 w-9 rounded-full" v-tooltip.bottom="'Recarregar'" @click="refetch" />
                <Button icon="pi pi-sync" severity="secondary" outlined class="h-9 w-9 rounded-full" v-tooltip.bottom="'Recorrências'" @click="goRecorrencias" />
                <Button icon="pi pi-cog" severity="secondary" outlined class="h-9 w-9 rounded-full" v-tooltip.bottom="'Configurações'" @click="goSettings" />
            </div>

            <!-- Mobile -->
            <div class="flex min-[1500px]:hidden items-center gap-1 shrink-0 ml-auto">
                <div v-if="feriadosTodosProximos.length" class="relative">
                    <Button icon="pi pi-bell" :severity="feriadosSemBloqueio.length ? 'danger' : 'secondary'" outlined class="h-9 w-9 rounded-full" @click="feriadosAlertaOpen = true" />
                    <span v-if="feriadosSemBloqueio.length" class="absolute -top-1 -right-1 min-w-[16px] h-4 px-1 rounded-full bg-red-500 text-white text-[0.65rem] font-bold flex items-center justify-center pointer-events-none">{{
                        feriadosSemBloqueio.length
                    }}</span>
                </div>
                <Button icon="pi pi-plus" class="h-9 w-9 rounded-full" @click="onCreateFromButton" />
                <Button icon="pi pi-search" severity="secondary" outlined class="h-9 w-9 rounded-full" @click="searchModalOpen = true" />
                <Button label="Ações" icon="pi pi-ellipsis-v" severity="secondary" size="small" class="rounded-full" @click="(e) => headerMenuRef.toggle(e)" />
                <Menu ref="headerMenuRef" :model="headerMenuItems" :popup="true" />
            </div>
        </div>
    </div>

    <!-- Aviso: fora da jornada -->
    <div
        ref="foraJornadaBannerRef"
        v-if="hasEventsOutsideWorkHours"
        class="my-3 mx-3 md:mx-4 rounded-[6px] p-3"
        style="background: color-mix(in srgb, var(--yellow-400, #facc15) 10%, var(--surface-card)); border: 1px solid color-mix(in srgb, var(--yellow-400, #facc15) 35%, transparent)"
    >
        <div class="flex items-center gap-3">
            <i class="pi pi-exclamation-triangle shrink-0" style="color: var(--yellow-600, #ca8a04)" />
            <div class="font-semibold text-sm">Compromissos fora da jornada</div>
            <Button label="Ver 24h" size="small" severity="secondary" outlined class="rounded-full shrink-0" @click="timeMode = '24'" />
        </div>
    </div>

    <!-- ════ GRID 3 COLUNAS ════ -->
    <!-- Overlay mobile -->
    <div
        v-if="agPanelOpen"
        class="fixed left-0 right-0 bottom-0 top-[calc(var(--notice-banner-height,0px)+56px)] bg-black/40 backdrop-blur-sm z-[39] xl:hidden"
        @click="agPanelOpen = false"
    />

    <!-- Drawer mobile: col esquerda + col direita empilhadas -->
    <aside
        class="panel-drawer fixed top-[calc(var(--notice-banner-height,0px)+56px)] left-0 h-[calc(100dvh-var(--notice-banner-height,0px)-56px)] w-[min(340px,88vw)] z-40 bg-[var(--surface-card)] border-r border-[var(--surface-border)] shadow-[4px_0_24px_rgba(0,0,0,0.12)] transition-[transform,visibility] duration-[250ms] ease-[cubic-bezier(0.4,0,0.2,1)]"
        :class="agPanelOpen ? 'translate-x-0 visible' : '-translate-x-full invisible'"
    >
        <div class="flex flex-col gap-3 p-4 h-full overflow-y-auto">
            <!-- Mini calendário + Jornada + Feriados -->
            <div class="border border-[var(--surface-border)] rounded-md bg-[var(--surface-card)] p-3">
                <div class="flex items-center justify-between">
                    <span class="flex items-center gap-1.5 text-[1rem] font-bold uppercase tracking-[0.06em] text-[var(--text-color-secondary)] opacity-65"><i class="pi pi-calendar" />{{ visibleTitle }}</span>
                    <div class="flex items-center gap-0.5">
                        <Button icon="pi pi-home" severity="secondary" text class="h-7 w-7 rounded-full" v-tooltip.top="'Hoje'" @click="miniGoToday" />
                        <Button icon="pi pi-chevron-left" severity="secondary" text class="h-7 w-7 rounded-full" @click="miniPrevMonth" />
                        <Button icon="pi pi-chevron-right" severity="secondary" text class="h-7 w-7 rounded-full" @click="miniNextMonth" />
                    </div>
                </div>
                <DatePicker
                    v-model="miniDate"
                    inline
                    class="w-full"
                    @update:modelValue="
                        (val) => {
                            onMiniPick(val);
                            agPanelOpen = false;
                        }
                    "
                    :pt="{ day: ({ context }) => ({ class: miniDayClass(context.date) }) }"
                >
                    <template #date="{ date }">
                        <span class="mini-day-num">{{ date.day }}</span>
                        <span v-if="hasMiniEvent(date)" class="mini-day-dot" />
                    </template>
                </DatePicker>
            </div>

            <div v-if="jornadaHoje" class="border border-[var(--surface-border)] rounded-md bg-[var(--surface-card)] p-3">
                <div class="flex items-center justify-between mb-1">
                    <span class="flex items-center gap-1.5 text-[1rem] font-bold uppercase tracking-[0.06em] text-[var(--text-color-secondary)] opacity-65"><i class="pi pi-clock" />Jornada</span>
                </div>
                <div class="text-sm text-[var(--text-color-secondary)] leading-relaxed">{{ jornadaHoje }}</div>
            </div>

            <ProximosFeriadosCard :ownerId="ownerId" :tenantId="clinicTenantId" :workRules="workRules" @bloqueado="refetch" />

            <LoadedPhraseBlock v-if="eventsHasLoaded" />

            <!-- Divisor -->
            <div class="border-t border-[var(--surface-border)] my-1" />

            <!-- Stats do dia -->
            <div class="border border-[var(--surface-border)] rounded-md bg-[var(--surface-card)] p-3">
                <div class="flex items-center justify-between mb-2">
                    <span class="flex items-center gap-1.5 text-[1rem] font-bold uppercase tracking-[0.06em] text-[var(--text-color-secondary)] opacity-65"><i class="pi pi-chart-bar" />Hoje</span>
                </div>
                <div class="grid grid-cols-4 gap-2">
                    <template v-if="eventsLoading">
                        <Skeleton v-for="n in 4" :key="n" height="3rem" class="rounded-md" />
                    </template>
                    <template v-else>
                        <div class="flex flex-col gap-0.5 p-2 rounded-md bg-[var(--surface-ground)] border border-[var(--surface-border)] text-center" v-for="s in todayStats" :key="s.label">
                            <div class="text-[1.25rem] font-bold leading-none text-[var(--text-color)]" :class="{ 'text-green-500': s.cls === 'ag-stat--ok', 'text-red-500': s.cls === 'ag-stat--warn' }">{{ s.value }}</div>
                            <div class="text-[0.65rem] font-semibold uppercase tracking-[0.04em] text-[var(--text-color-secondary)] opacity-70">{{ s.label }}</div>
                        </div>
                    </template>
                </div>
            </div>

            <!-- Sessões do dia -->
            <div class="border border-[var(--surface-border)] rounded-md bg-[var(--surface-card)] p-3">
                <div class="flex items-center justify-between mb-2">
                    <span class="flex items-center gap-1.5 text-[1rem] font-bold uppercase tracking-[0.06em] text-[var(--text-color-secondary)] opacity-65"><i class="pi pi-list" />Sessões hoje</span>
                    <span class="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full bg-[var(--primary-color,#6366f1)] text-white text-[0.65rem] font-bold">{{ todayEvents.length }}</span>
                </div>
                <template v-if="eventsLoading">
                    <div class="flex flex-col gap-1.5 mt-1">
                        <Skeleton v-for="n in 3" :key="n" height="3.5rem" class="rounded-md" />
                    </div>
                </template>
                <div v-else-if="!todayEvents.length" class="flex flex-col items-center justify-center gap-2 py-6 text-[var(--text-color-secondary)] text-sm text-center">
                    <i class="pi pi-sun text-2xl opacity-20" />
                    <span>Nenhuma sessão hoje</span>
                </div>
                <div v-else class="flex flex-col gap-1.5">
                    <div
                        v-for="ev in todayEvents"
                        :key="ev.id"
                        class="flex items-center gap-2 px-2.5 py-2 rounded-md bg-[var(--surface-ground)] border-l-[3px] cursor-pointer transition-colors duration-100 hover:bg-[var(--surface-hover)]"
                        :class="{
                            'border-l-green-500': ['confirmado', 'realizado'].includes(ev.status),
                            'border-l-red-500 opacity-75': ev.status === 'faltou',
                            'border-l-[var(--surface-border)] opacity-60': ev.status === 'cancelado',
                            'border-l-[var(--primary-color,#6366f1)]': !['confirmado', 'realizado', 'faltou', 'cancelado'].includes(ev.status)
                        }"
                        @click="
                            onEventRowClick(ev);
                            agPanelOpen = false;
                        "
                    >
                        <div class="flex flex-col items-end min-w-[36px] shrink-0">
                            <span class="text-xs font-bold text-[var(--text-color)]">{{ fmtHoraEvento(ev.inicio_em) }}</span>
                            <span class="text-[0.65rem] text-[var(--text-color-secondary)]">{{ fmtDuracao(ev.inicio_em, ev.fim_em) }}</span>
                        </div>
                        <div class="flex-1 min-w-0">
                            <span class="block text-[1rem] font-semibold truncate">{{ ev.paciente_nome || ev.patient_name || ev.titulo || '—' }}</span>
                            <div class="flex items-center gap-1 mt-0.5 flex-wrap">
                                <span class="text-[0.65rem] bg-[var(--surface-border)] text-[var(--text-color-secondary)] px-1.5 py-px rounded font-semibold">{{ ev.modalidade || 'Presencial' }}</span>
                                <span v-if="ev.recurrence_id" class="text-[1rem] text-[var(--primary-color,#6366f1)]">↻</span>
                                <span v-if="ev.paciente_status === 'Inativo' || ev.paciente_status === 'Arquivado'" class="text-[0.6rem] bg-orange-500 text-white px-1.5 py-px rounded font-bold uppercase tracking-wide">{{
                                    ev.paciente_status === 'Arquivado' ? 'paciente arquivado' : 'paciente desativado'
                                }}</span>
                            </div>
                        </div>
                        <button
                            v-if="ev.patient_id || ev.paciente_id"
                            class="w-6 h-6 rounded-full flex items-center justify-center border-none bg-transparent text-[var(--text-color-secondary)] hover:bg-[var(--surface-border)] hover:text-[var(--primary-color,#6366f1)] transition-colors duration-100 cursor-pointer shrink-0"
                            title="Opções"
                            @click.stop="openTodayEvMenu($event, ev)"
                        >
                            <i class="pi pi-ellipsis-v text-[0.7rem]" />
                        </button>
                        <i v-else class="text-xs text-[var(--text-color-secondary)] shrink-0" :class="statusIcon(ev.status)" />
                    </div>
                </div>
            </div>

            <div class="border border-[var(--surface-border)] rounded-md bg-[var(--surface-card)] p-3">
                <Button
                    label="Novo Compromisso"
                    icon="pi pi-plus"
                    class="w-full rounded-full"
                    @click="
                        onCreateFromButton();
                        agPanelOpen = false;
                    "
                />
            </div>

            <!-- Card: Pacientes Desativados/Arquivados com sessões pendentes -->
            <div v-if="desativadoPatients.length" class="border border-orange-500/40 rounded-md bg-orange-500/5 p-3 cursor-pointer hover:bg-orange-500/10 transition-colors duration-150" @click="desativadoDialogOpen = true">
                <div class="flex items-center gap-2 mb-1.5">
                    <i class="pi pi-exclamation-triangle text-orange-500 text-sm" />
                    <span class="text-[0.72rem] font-bold text-orange-600 uppercase tracking-wide flex-1">Atenção: sessões pendentes</span>
                    <span class="inline-flex items-center justify-center min-w-[20px] h-5 px-1 rounded-full bg-orange-500 text-white text-[0.62rem] font-bold">
                        {{ desativadoPatients.reduce((s, p) => s + p.sessions.length, 0) }}
                    </span>
                </div>
                <p class="text-[0.7rem] text-orange-700/80 leading-snug m-0">
                    {{ desativadoPatients.length }} paciente{{ desativadoPatients.length > 1 ? 's' : '' }} desativado{{ desativadoPatients.length > 1 ? 's' : '' }} ou arquivado{{ desativadoPatients.length > 1 ? 's' : '' }}
                    com sessões agendadas.
                </p>
            </div>

            <!-- Pacientes -->
            <div class="border border-[var(--surface-border)] rounded-md bg-[var(--surface-card)] p-3">
                <div class="flex items-center justify-between mb-2">
                    <span class="flex items-center gap-1.5 text-[1rem] font-bold uppercase tracking-[0.06em] text-[var(--text-color-secondary)] opacity-65"><i class="pi pi-users" />Pacientes</span>
                </div>
                <div class="flex flex-col gap-1">
                    <button
                        class="flex items-center gap-2.5 px-2.5 py-2 rounded-md border-none bg-transparent cursor-pointer w-full text-left transition-colors duration-100 hover:bg-[var(--surface-hover)]"
                        @click="router.push('/therapist/patients')"
                    >
                        <div class="w-[30px] h-[30px] rounded-md grid place-items-center text-[0.8rem] shrink-0 bg-indigo-500/10 text-indigo-500"><i class="pi pi-list" /></div>
                        <div class="flex-1 min-w-0 flex flex-col gap-px">
                            <span class="text-[1rem] font-semibold text-[var(--text-color)] truncate">Lista de pacientes</span>
                            <span class="text-[0.68rem] text-[var(--text-color-secondary)] truncate">Todos os cadastros ativos</span>
                        </div>
                        <i class="pi pi-chevron-right text-[0.6rem] text-[var(--text-color-secondary)] opacity-40 shrink-0" />
                    </button>
                    <button
                        class="flex items-center gap-2.5 px-2.5 py-2 rounded-md border-none bg-transparent cursor-pointer w-full text-left transition-colors duration-100 hover:bg-[var(--surface-hover)]"
                        @click="router.push('/therapist/patients/cadastro')"
                    >
                        <div class="w-[30px] h-[30px] rounded-md grid place-items-center text-[0.8rem] shrink-0 bg-green-500/10 text-green-600"><i class="pi pi-user-plus" /></div>
                        <div class="flex-1 min-w-0 flex flex-col gap-px">
                            <span class="text-[1rem] font-semibold text-[var(--text-color)] truncate">Novo paciente</span>
                            <span class="text-[0.68rem] text-[var(--text-color-secondary)] truncate">Cadastrar manualmente</span>
                        </div>
                        <i class="pi pi-chevron-right text-[0.6rem] text-[var(--text-color-secondary)] opacity-40 shrink-0" />
                    </button>
                    <!-- Link de cadastro externo -->
                    <div v-if="cadastroExternoLink" class="flex flex-col gap-1 px-2.5 py-2 rounded-md bg-[var(--surface-ground)] border border-[var(--surface-border)] mt-1">
                        <span class="text-[0.68rem] font-semibold text-[var(--text-color-secondary)] flex items-center gap-1"><i class="pi pi-link text-[0.65rem]" /> Link de cadastro externo</span>
                        <div class="flex items-center gap-1.5">
                            <input
                                readonly
                                :value="cadastroExternoLink"
                                class="flex-1 min-w-0 text-[0.72rem] text-[var(--primary-color,#6366f1)] bg-transparent border-none outline-none truncate cursor-text font-mono"
                                @click="$event.target.select()"
                            />
                            <button
                                class="grid place-items-center w-[26px] h-[26px] rounded border border-[var(--surface-border)] bg-[var(--surface-card)] text-[var(--text-color-secondary)] cursor-pointer text-xs shrink-0 transition-colors duration-100 hover:bg-[var(--primary-color,#6366f1)] hover:text-white hover:border-[var(--primary-color)]"
                                @click="copyLink(cadastroExternoLink)"
                                v-tooltip.top="'Copiar link'"
                            >
                                <i class="pi pi-copy" />
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Agendador Online -->
            <div class="border border-[var(--surface-border)] rounded-md bg-[var(--surface-card)] p-3">
                <div class="flex items-center justify-between mb-2">
                    <span class="flex items-center gap-1.5 text-[1rem] font-bold uppercase tracking-[0.06em] text-[var(--text-color-secondary)] opacity-65"><i class="pi pi-calendar-plus" />Agendador Online</span>
                </div>
                <div class="flex flex-col gap-1">
                    <button
                        class="flex items-center gap-2.5 px-2.5 py-2 rounded-md border-none bg-transparent cursor-pointer w-full text-left transition-colors duration-100 hover:bg-[var(--surface-hover)]"
                        @click="router.push('/therapist/agendador/solicitacoes')"
                    >
                        <div class="w-[30px] h-[30px] rounded-md grid place-items-center text-[0.8rem] shrink-0 bg-indigo-500/10 text-indigo-500"><i class="pi pi-inbox" /></div>
                        <div class="flex-1 min-w-0 flex flex-col gap-px">
                            <span class="text-[1rem] font-semibold text-[var(--text-color)] truncate">Solicitações</span>
                            <span class="text-[0.68rem] text-[var(--text-color-secondary)] truncate">Pedidos de agendamento</span>
                        </div>
                        <i class="pi pi-chevron-right text-[0.6rem] text-[var(--text-color-secondary)] opacity-40 shrink-0" />
                    </button>
                    <!-- Link do agendador -->
                    <div v-if="agendadorLink" class="flex flex-col gap-1 px-2.5 py-2 rounded-md bg-[var(--surface-ground)] border border-[var(--surface-border)] mt-1">
                        <span class="text-[0.68rem] font-semibold text-[var(--text-color-secondary)] flex items-center gap-1"><i class="pi pi-link text-[0.65rem]" /> Link público do agendador</span>
                        <div class="flex items-center gap-1.5">
                            <input readonly :value="agendadorLink" class="flex-1 min-w-0 text-[0.72rem] text-[var(--primary-color,#6366f1)] bg-transparent border-none outline-none truncate cursor-text font-mono" @click="$event.target.select()" />
                            <button
                                class="grid place-items-center w-[26px] h-[26px] rounded border border-[var(--surface-border)] bg-[var(--surface-card)] text-[var(--text-color-secondary)] cursor-pointer text-xs shrink-0 transition-colors duration-100 hover:bg-[var(--primary-color,#6366f1)] hover:text-white hover:border-[var(--primary-color)]"
                                @click="copyLink(agendadorLink)"
                                v-tooltip.top="'Copiar link'"
                            >
                                <i class="pi pi-copy" />
                            </button>
                        </div>
                    </div>
                    <div v-else class="text-xs text-[var(--text-color-secondary)] opacity-60 px-1 pt-1">Agendador não configurado</div>
                </div>
            </div>
        </div>
    </aside>

    <div class="flex flex-col xl:flex-row gap-3 px-3 md:px-4 pb-5 items-start">
        <!-- COL 1: Mini calendário + Jornada + Feriados -->
        <div class="hidden xl:flex flex-col gap-3 w-full xl:w-[25%] shrink-0">
            <div class="border border-[var(--surface-border)] rounded-md bg-[var(--surface-card)] p-3">
                <div class="flex items-center justify-between min-w-0">
                    <!--<span class="flex items-center gap-1.5 text-[1rem] font-bold uppercase tracking-[0.06em] text-[var(--text-color-secondary)] opacity-65"><i class="pi pi-calendar" />{{ visibleTitle }}</span>-->
                    <div class="flex items-center gap-2 mb-2 min-w-0 flex-1">
                        <!--<Button icon="pi pi-home" severity="secondary" text class="h-7 w-7 rounded-full" v-tooltip.top="'Hoje'" @click="miniGoToday" />
              <Button icon="pi pi-chevron-left" severity="secondary" text class="h-7 w-7 rounded-full" @click="miniPrevMonth" />
              <Button icon="pi pi-chevron-right" severity="secondary" text class="h-7 w-7 rounded-full" @click="miniNextMonth" />-->
                        <Button label="Hoje" severity="secondary" outlined size="small" class="rounded-full shrink-0" @click="goToday" />
                        <Button icon="pi pi-chevron-left" severity="secondary" outlined class="h-8 w-8 rounded-full shrink-0" @click="goPrev" />
                        <span
                            v-tooltip.top="subtitleText"
                            class="inline-flex flex-1 min-w-0 items-center gap-1.5 px-3 py-1 rounded-full border border-[var(--surface-border)] bg-[var(--surface-ground)] text-sm font-semibold text-[var(--text-color)] cursor-pointer transition-colors duration-150 hover:border-[var(--p-primary-400)]"
                            @click="toggleMonthPicker"
                        >
                            <i class="pi pi-calendar text-xs opacity-60 shrink-0" />
                            <span class="truncate">{{ subtitleText }}</span>
                        </span>
                        <Button icon="pi pi-chevron-right" severity="secondary" outlined class="h-8 w-8 rounded-full shrink-0" @click="goNext" />
                    </div>
                </div>
                <DatePicker v-model="miniDate" inline class="w-full" @update:modelValue="onMiniPick" :pt="{ day: ({ context }) => ({ class: miniDayClass(context.date) }) }">
                    <template #date="{ date }">
                        <span class="mini-day-num">{{ date.day }}</span>
                        <span v-if="hasMiniEvent(date)" class="mini-day-dot" />
                    </template>
                </DatePicker>
            </div>

            <div v-if="jornadaHoje" class="border border-[var(--surface-border)] rounded-md bg-[var(--surface-card)] p-3">
                <div class="flex items-center justify-between mb-1">
                    <span class="flex items-center gap-1.5 text-[1rem] font-bold uppercase tracking-[0.06em] text-[var(--text-color-secondary)] opacity-65"><i class="pi pi-clock" />Jornada</span>
                </div>
                <div class="text-sm text-[var(--text-color-secondary)] leading-relaxed">{{ jornadaHoje }}</div>
            </div>

            <ProximosFeriadosCard :ownerId="ownerId" :tenantId="clinicTenantId" :workRules="workRules" @bloqueado="refetch" />

            <LoadedPhraseBlock v-if="eventsHasLoaded" />
        </div>

        <!-- Botão toggle painel (só mobile <xl) -->
        <button
            class="xl:hidden flex w-full items-center justify-between gap-3 px-3.5 py-2.5 bg-[var(--surface-card)] border border-[var(--surface-border)] rounded-md cursor-pointer text-sm font-semibold text-[var(--text-color)]"
            @click="agPanelOpen = !agPanelOpen"
        >
            <div class="flex items-center gap-2 min-w-0">
                <i class="pi pi-calendar-clock text-[var(--primary-color,#6366f1)]" />
                <span class="truncate">Calendário · Sessões de hoje</span>
                <span v-if="todayEvents.length" class="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full bg-[var(--primary-color,#6366f1)] text-white text-[0.68rem] font-bold shrink-0">{{
                    todayEvents.length
                }}</span>
            </div>
            <i class="pi transition-transform duration-200" :class="agPanelOpen ? 'pi-chevron-up' : 'pi-chevron-down'" />
        </button>

        <!-- COL 2: FullCalendar -->
        <div class="flex flex-col gap-3 w-full xl:w-[45%] min-w-0">
            <div v-if="searchTrim" class="border border-[var(--surface-border)] rounded-md bg-[var(--surface-card)] p-3 mb-3">
                <div class="flex items-center justify-between gap-2 mb-2">
                    <div class="font-semibold text-sm">Resultados para "{{ searchTrim }}"</div>
                    <div class="flex items-center gap-1">
                        <Tag v-if="!searchLoading" :value="`${searchResults.length}`" severity="secondary" />
                        <Button icon="pi pi-times" severity="secondary" text class="h-8 w-8 rounded-full" @click="clearSearch" />
                    </div>
                </div>
                <div v-if="searchLoading" class="text-color-secondary text-sm">Buscando…</div>
                <div v-else-if="!searchResults.length" class="text-color-secondary text-sm">Nenhum resultado.</div>
                <div v-else class="flex flex-col gap-2 max-h-[220px] overflow-auto pr-1">
                    <button v-for="r in searchResults" :key="r.id" class="text-left rounded-[6px] border border-[var(--surface-border)] bg-[var(--surface-ground)] p-2.5 transition hover:border-[var(--p-primary-300)]" @click="gotoResult(r)">
                        <div class="font-medium text-sm truncate">{{ r.titulo || 'Sem título' }}</div>
                        <div class="mt-0.5 flex items-center justify-between gap-2 text-xs opacity-70">
                            <span class="truncate">{{ fmtDateTime(r.inicio_em) }}</span>
                            <Tag :value="labelTipo(r.tipo)" severity="info" />
                        </div>
                    </button>
                </div>
            </div>

            <div class="border border-[var(--surface-border)] rounded-md bg-[var(--surface-card)] overflow-hidden shadow-sm agenda-altura">
                <div v-if="calendarView === 'day' && miniBlockedDaySet.has(currentDateISO)" class="flex items-center gap-2 px-4 py-2 text-sm font-semibold text-red-700 bg-red-400/10 border-b border-red-400/25">
                    <i class="pi pi-lock text-xs" /> Dia bloqueado — sessões não permitidas
                </div>
                <div class="p-2">
                    <FullCalendar ref="fcRef" :key="fcKey" :options="fcOptions" />
                </div>
            </div>
        </div>

        <!-- COL 3: Resumo do dia -->
        <div class="hidden xl:flex flex-col gap-3 w-full xl:w-[30%] shrink-0">
            <!-- Stats do dia -->
            <div class="border border-[var(--surface-border)] rounded-md bg-[var(--surface-card)] p-3">
                <div class="flex items-center justify-between mb-2">
                    <span class="flex items-center gap-1.5 text-[1rem] font-bold uppercase tracking-[0.06em] text-[var(--text-color-secondary)] opacity-65"><i class="pi pi-chart-bar" />Hoje</span>
                </div>
                <div class="grid grid-cols-4 gap-2">
                    <template v-if="eventsLoading">
                        <Skeleton v-for="n in 4" :key="n" height="3rem" class="rounded-md" />
                    </template>
                    <template v-else>
                        <div class="flex flex-col gap-0.5 p-2 rounded-md bg-[var(--surface-ground)] border border-[var(--surface-border)] text-center" v-for="s in todayStats" :key="s.label">
                            <div class="text-[1.25rem] font-bold leading-none text-[var(--text-color)]" :class="{ 'text-green-500': s.cls === 'ag-stat--ok', 'text-red-500': s.cls === 'ag-stat--warn' }">{{ s.value }}</div>
                            <div class="text-[0.65rem] font-semibold uppercase tracking-[0.04em] text-[var(--text-color-secondary)] opacity-70">{{ s.label }}</div>
                        </div>
                    </template>
                </div>
            </div>

            <!-- Sessões do dia -->
            <div class="border border-[var(--surface-border)] rounded-md bg-[var(--surface-card)] p-3 flex-1">
                <div class="flex items-center justify-between mb-2">
                    <span class="flex items-center gap-1.5 text-[1rem] font-bold uppercase tracking-[0.06em] text-[var(--text-color-secondary)] opacity-65"><i class="pi pi-list" />Sessões hoje</span>
                    <span class="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full bg-[var(--primary-color,#6366f1)] text-white text-[0.65rem] font-bold">{{ todayEvents.length }}</span>
                </div>

                <template v-if="eventsLoading">
                    <div class="flex flex-col gap-1.5 mt-1">
                        <Skeleton v-for="n in 3" :key="n" height="3.5rem" class="rounded-md" />
                    </div>
                </template>
                <div v-else-if="!todayEvents.length" class="flex flex-col items-center justify-center gap-2 py-6 text-[var(--text-color-secondary)] text-sm text-center">
                    <i class="pi pi-sun text-2xl opacity-20" />
                    <span>Nenhuma sessão hoje</span>
                </div>

                <div v-else class="flex flex-col gap-1.5">
                    <div
                        v-for="ev in todayEvents"
                        :key="ev.id"
                        class="flex items-center gap-2 px-2.5 py-2 rounded-md bg-[var(--surface-ground)] border-l-[3px] cursor-pointer transition-colors duration-100 hover:bg-[var(--surface-hover)]"
                        :class="{
                            'border-l-green-500': ['confirmado', 'realizado'].includes(ev.status),
                            'border-l-red-500 opacity-75': ev.status === 'faltou',
                            'border-l-[var(--surface-border)] opacity-60': ev.status === 'cancelado',
                            'border-l-[var(--primary-color,#6366f1)]': !['confirmado', 'realizado', 'faltou', 'cancelado'].includes(ev.status)
                        }"
                        @click="onEventRowClick(ev)"
                    >
                        <div class="flex flex-col items-end min-w-[36px] shrink-0">
                            <span class="text-xs font-bold text-[var(--text-color)]">{{ fmtHoraEvento(ev.inicio_em) }}</span>
                            <span class="text-[0.65rem] text-[var(--text-color-secondary)]">{{ fmtDuracao(ev.inicio_em, ev.fim_em) }}</span>
                        </div>
                        <div class="flex-1 min-w-0">
                            <span class="block text-[1rem] font-semibold truncate">{{ ev.paciente_nome || ev.patient_name || ev.titulo || '—' }}</span>
                            <div class="flex items-center gap-1 mt-0.5 flex-wrap">
                                <span class="text-[0.65rem] bg-[var(--surface-border)] text-[var(--text-color-secondary)] px-1.5 py-px rounded font-semibold">{{ ev.modalidade || 'Presencial' }}</span>
                                <span v-if="ev.recurrence_id" class="text-[1rem] text-[var(--primary-color,#6366f1)]" title="Recorrente">↻</span>
                                <span v-if="ev.paciente_status === 'Inativo' || ev.paciente_status === 'Arquivado'" class="text-[0.6rem] bg-orange-500 text-white px-1.5 py-px rounded font-bold uppercase tracking-wide">{{
                                    ev.paciente_status === 'Arquivado' ? 'paciente arquivado' : 'paciente desativado'
                                }}</span>
                            </div>
                        </div>
                        <button
                            v-if="ev.patient_id || ev.paciente_id"
                            class="w-6 h-6 rounded-full flex items-center justify-center border-none bg-transparent text-[var(--text-color-secondary)] hover:bg-[var(--surface-border)] hover:text-[var(--primary-color,#6366f1)] transition-colors duration-100 cursor-pointer shrink-0"
                            title="Opções"
                            @click.stop="openTodayEvMenu($event, ev)"
                        >
                            <i class="pi pi-ellipsis-v text-[0.7rem]" />
                        </button>
                        <i v-else class="text-xs text-[var(--text-color-secondary)] shrink-0" :class="statusIcon(ev.status)" />
                    </div>
                </div>
            </div>

            <div class="border border-[var(--surface-border)] rounded-md bg-[var(--surface-card)] p-3">
                <Button label="Novo Compromisso" icon="pi pi-plus" class="w-full rounded-full" @click="onCreateFromButton" />
            </div>

            <!-- Card: Pacientes Desativados/Arquivados com sessões pendentes -->
            <div v-if="desativadoPatients.length" class="border border-orange-500/40 rounded-md bg-orange-500/5 p-3 cursor-pointer hover:bg-orange-500/10 transition-colors duration-150" @click="desativadoDialogOpen = true">
                <div class="flex items-center gap-2 mb-1.5">
                    <i class="pi pi-exclamation-triangle text-orange-500 text-sm" />
                    <span class="text-[0.72rem] font-bold text-orange-600 uppercase tracking-wide flex-1">Atenção: sessões pendentes</span>
                    <span class="inline-flex items-center justify-center min-w-[20px] h-5 px-1 rounded-full bg-orange-500 text-white text-[0.62rem] font-bold">
                        {{ desativadoPatients.reduce((s, p) => s + p.sessions.length, 0) }}
                    </span>
                </div>
                <p class="text-[0.7rem] text-orange-700/80 leading-snug m-0">
                    {{ desativadoPatients.length }} paciente{{ desativadoPatients.length > 1 ? 's' : '' }} desativado{{ desativadoPatients.length > 1 ? 's' : '' }} ou arquivado{{ desativadoPatients.length > 1 ? 's' : '' }}
                    com sessões agendadas.
                </p>
            </div>

            <!-- Pacientes -->
            <div class="border border-[var(--surface-border)] rounded-md bg-[var(--surface-card)] p-3">
                <div class="flex items-center justify-between mb-2">
                    <span class="flex items-center gap-1.5 text-[1rem] font-bold uppercase tracking-[0.06em] text-[var(--text-color-secondary)] opacity-65"><i class="pi pi-users" />Pacientes</span>
                </div>
                <div class="flex flex-col gap-1">
                    <button
                        class="flex items-center gap-2.5 px-2.5 py-2 rounded-md border-none bg-transparent cursor-pointer w-full text-left transition-colors duration-100 hover:bg-[var(--surface-hover)]"
                        @click="router.push('/therapist/patients')"
                    >
                        <div class="w-[30px] h-[30px] rounded-md grid place-items-center text-[0.8rem] shrink-0 bg-indigo-500/10 text-indigo-500"><i class="pi pi-list" /></div>
                        <div class="flex-1 min-w-0 flex flex-col gap-px">
                            <span class="text-[1rem] font-semibold text-[var(--text-color)] truncate">Lista de pacientes</span>
                            <span class="text-[0.68rem] text-[var(--text-color-secondary)] truncate">Todos os cadastros ativos</span>
                        </div>
                        <i class="pi pi-chevron-right text-[0.6rem] text-[var(--text-color-secondary)] opacity-40 shrink-0" />
                    </button>
                    <button
                        class="flex items-center gap-2.5 px-2.5 py-2 rounded-md border-none bg-transparent cursor-pointer w-full text-left transition-colors duration-100 hover:bg-[var(--surface-hover)]"
                        @click="router.push('/therapist/patients/cadastro')"
                    >
                        <div class="w-[30px] h-[30px] rounded-md grid place-items-center text-[0.8rem] shrink-0 bg-green-500/10 text-green-600"><i class="pi pi-user-plus" /></div>
                        <div class="flex-1 min-w-0 flex flex-col gap-px">
                            <span class="text-[1rem] font-semibold text-[var(--text-color)] truncate">Novo paciente</span>
                            <span class="text-[0.68rem] text-[var(--text-color-secondary)] truncate">Cadastrar manualmente</span>
                        </div>
                        <i class="pi pi-chevron-right text-[0.6rem] text-[var(--text-color-secondary)] opacity-40 shrink-0" />
                    </button>
                    <!-- Link de cadastro externo -->
                    <div v-if="cadastroExternoLink" class="flex flex-col gap-1 px-2.5 py-2 rounded-md bg-[var(--surface-ground)] border border-[var(--surface-border)] mt-1">
                        <span class="text-[0.68rem] font-semibold text-[var(--text-color-secondary)] flex items-center gap-1"><i class="pi pi-link text-[0.65rem]" /> Link de cadastro externo</span>
                        <div class="flex items-center gap-1.5">
                            <input
                                readonly
                                :value="cadastroExternoLink"
                                class="flex-1 min-w-0 text-[0.72rem] text-[var(--primary-color,#6366f1)] bg-transparent border-none outline-none truncate cursor-text font-mono"
                                @click="$event.target.select()"
                            />
                            <button
                                class="grid place-items-center w-[26px] h-[26px] rounded border border-[var(--surface-border)] bg-[var(--surface-card)] text-[var(--text-color-secondary)] cursor-pointer text-xs shrink-0 transition-colors duration-100 hover:bg-[var(--primary-color,#6366f1)] hover:text-white hover:border-[var(--primary-color)]"
                                @click="copyLink(cadastroExternoLink)"
                                v-tooltip.top="'Copiar link'"
                            >
                                <i class="pi pi-copy" />
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Agendador Online -->
            <div class="border border-[var(--surface-border)] rounded-md bg-[var(--surface-card)] p-3">
                <div class="flex items-center justify-between mb-2">
                    <span class="flex items-center gap-1.5 text-[1rem] font-bold uppercase tracking-[0.06em] text-[var(--text-color-secondary)] opacity-65"><i class="pi pi-calendar-plus" />Agendador Online</span>
                </div>
                <div class="flex flex-col gap-1">
                    <button
                        class="flex items-center gap-2.5 px-2.5 py-2 rounded-md border-none bg-transparent cursor-pointer w-full text-left transition-colors duration-100 hover:bg-[var(--surface-hover)]"
                        @click="router.push('/therapist/agendador/solicitacoes')"
                    >
                        <div class="w-[30px] h-[30px] rounded-md grid place-items-center text-[0.8rem] shrink-0 bg-indigo-500/10 text-indigo-500"><i class="pi pi-inbox" /></div>
                        <div class="flex-1 min-w-0 flex flex-col gap-px">
                            <span class="text-[1rem] font-semibold text-[var(--text-color)] truncate">Solicitações</span>
                            <span class="text-[0.68rem] text-[var(--text-color-secondary)] truncate">Pedidos de agendamento</span>
                        </div>
                        <i class="pi pi-chevron-right text-[0.6rem] text-[var(--text-color-secondary)] opacity-40 shrink-0" />
                    </button>
                    <!-- Link do agendador -->
                    <div v-if="agendadorLink" class="flex flex-col gap-1 px-2.5 py-2 rounded-md bg-[var(--surface-ground)] border border-[var(--surface-border)] mt-1">
                        <span class="text-[0.68rem] font-semibold text-[var(--text-color-secondary)] flex items-center gap-1"><i class="pi pi-link text-[0.65rem]" /> Link público do agendador</span>
                        <div class="flex items-center gap-1.5">
                            <input readonly :value="agendadorLink" class="flex-1 min-w-0 text-[0.72rem] text-[var(--primary-color,#6366f1)] bg-transparent border-none outline-none truncate cursor-text font-mono" @click="$event.target.select()" />
                            <button
                                class="grid place-items-center w-[26px] h-[26px] rounded border border-[var(--surface-border)] bg-[var(--surface-card)] text-[var(--text-color-secondary)] cursor-pointer text-xs shrink-0 transition-colors duration-100 hover:bg-[var(--primary-color,#6366f1)] hover:text-white hover:border-[var(--primary-color)]"
                                @click="copyLink(agendadorLink)"
                                v-tooltip.top="'Copiar link'"
                            >
                                <i class="pi pi-copy" />
                            </button>
                        </div>
                    </div>
                    <div v-else class="text-xs text-[var(--text-color-secondary)] opacity-60 px-1 pt-1">Agendador não configurado</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Dialog Busca (mobile + desktop) -->
    <Dialog v-model:visible="searchModalOpen" modal header="Buscar na agenda" :style="{ width: '96vw', maxWidth: '720px' }" :breakpoints="{ '960px': '92vw', '640px': '96vw' }" :draggable="false">
        <div class="flex flex-col gap-3">
            <!-- Campo + seletor de escopo -->
            <div class="flex gap-2 items-end">
                <FloatLabel variant="on" class="flex-1">
                    <IconField>
                        <InputIcon><i class="pi pi-search" /></InputIcon>
                        <InputText id="agendaSearchModal" v-model="search" class="w-full" autocomplete="off" autofocus />
                    </IconField>
                    <label for="agendaSearchModal">Paciente, título ou observação…</label>
                </FloatLabel>

                <!-- Escopo: Período / Mês -->
                <div class="flex rounded-full border border-[var(--surface-border)] overflow-hidden shrink-0">
                    <button
                        class="px-3 py-2 text-xs font-semibold transition"
                        :class="searchScope === 'range' ? 'bg-[var(--p-primary-500)] text-white' : 'bg-[var(--surface-ground)] text-[var(--text-color-secondary)] hover:bg-[var(--surface-hover)]'"
                        @click="searchScope = 'range'"
                    >
                        Período
                    </button>
                    <button
                        class="px-3 py-2 text-xs font-semibold transition"
                        :class="searchScope === 'month' ? 'bg-[var(--p-primary-500)] text-white' : 'bg-[var(--surface-ground)] text-[var(--text-color-secondary)] hover:bg-[var(--surface-hover)]'"
                        @click="searchScope = 'month'"
                    >
                        Mês
                    </button>
                </div>
            </div>

            <Divider class="my-0" />

            <!-- Loading -->
            <div v-if="monthSearchLoading" class="flex items-center gap-2 text-sm text-color-secondary py-2"><i class="pi pi-spin pi-spinner" /> Buscando no mês…</div>

            <!-- Aguardando digitação -->
            <div v-else-if="!searchTrim" class="text-color-secondary text-sm py-2">Digite para buscar compromissos na agenda.</div>

            <!-- Sem resultados -->
            <div v-else-if="searchResults.length === 0" class="text-color-secondary text-sm">
                Nenhum resultado para "<b>{{ searchTrim }}</b
                >" <span class="text-xs"> ({{ searchScope === 'month' ? 'mês inteiro' : 'período atual' }})</span>.
            </div>

            <!-- Resultados -->
            <div v-else class="flex flex-col gap-2 max-h-[60vh] overflow-auto pr-1">
                <div class="text-xs text-color-secondary mb-1">
                    {{ searchResults.length }} resultado(s) ·
                    <span>{{ searchScope === 'month' ? 'mês inteiro' : 'período atual' }}</span>
                </div>

                <button
                    v-for="r in searchResults"
                    :key="r.id"
                    class="text-left rounded-2xl border border-[var(--surface-border)] bg-[var(--surface-card)] p-3 transition hover:shadow-md hover:border-[var(--p-primary-300)]"
                    @click="gotoResultFromModal(r)"
                >
                    <!-- Linha 1: data + hora + tipo -->
                    <div class="flex items-center justify-between gap-2 mb-1">
                        <span class="text-xs font-bold text-[var(--p-primary-500)]">
                            {{ fmtDateOnly(r.inicio_em) }}
                            <span class="font-normal text-color-secondary ml-1">{{ fmtTimeOnly(r.inicio_em) }}</span>
                        </span>
                        <Tag :value="labelTipo(r.tipo)" severity="info" class="text-xs" />
                    </div>

                    <!-- Linha 2: nome do paciente ou título -->
                    <div class="font-semibold text-sm truncate">
                        {{ r.paciente_nome || r.patient_name || r.titulo || 'Sem título' }}
                    </div>
                    <span v-if="r.paciente_status === 'Inativo' || r.paciente_status === 'Arquivado'" class="inline-block text-[0.6rem] bg-orange-500 text-white px-1.5 py-px rounded font-bold uppercase tracking-wide mt-0.5">{{
                        r.paciente_status === 'Arquivado' ? 'paciente arquivado' : 'paciente desativado'
                    }}</span>

                    <!-- Linha 3: título (se paciente diferente de título) -->
                    <div v-if="(r.paciente_nome || r.patient_name) && r.titulo" class="text-xs text-color-secondary truncate">
                        {{ r.titulo }}
                    </div>

                    <!-- Linha 4: observações -->
                    <div v-if="r.observacoes" class="mt-1 text-xs text-color-secondary truncate opacity-75">
                        {{ r.observacoes }}
                    </div>
                </button>
            </div>
        </div>

        <template #footer>
            <Button label="Fechar" icon="pi pi-times" text @click="searchModalOpen = false" />
            <Button v-if="searchTrim" label="Limpar busca" icon="pi pi-eraser" severity="secondary" outlined class="rounded-full" @click="clearSearchAndClose" />
        </template>
    </Dialog>

    <!-- Month Picker -->
    <Dialog v-model:visible="monthPickerVisible" modal header="Escolher mês" :style="{ width: '420px' }">
        <div class="p-2">
            <DatePicker v-model="monthPickerDate" view="month" dateFormat="mm/yy" class="w-full" />
            <div class="mt-3 flex justify-end gap-2">
                <Button label="Cancelar" severity="secondary" outlined class="rounded-full" @click="monthPickerVisible = false" />
                <Button label="Ir" class="rounded-full" @click="applyMonthPick" />
            </div>
        </div>
    </Dialog>

    <!-- Dialog real -->
    <AgendaEventDialog
        v-model="dialogOpen"
        :eventRow="dialogEventRow"
        :initialStartISO="dialogStartISO"
        :initialEndISO="dialogEndISO"
        :ownerId="ownerId"
        :tenantId="clinicTenantId"
        :commitmentOptions="commitmentOptionsNormalized"
        :workRules="workRules"
        :blockedDates="[...miniBlockedDaySet]"
        :agendaSettings="settings"
        :allEvents="calendarRows"
        :pausasSemanais="settings?.pausas_semanais || []"
        :feriados="feriadosTodosProximos"
        newPatientRoute="/therapist/patients/cadastro"
        @save="onDialogSave"
        @delete="onDialogDelete"
        @updateSeriesEvent="onUpdateSeriesEvent"
        @editSeriesOccurrence="onEditSeriesOccurrence"
    />

    <!-- Dialog de Bloqueio -->
    <BloqueioDialog v-model="bloqueioDialogOpen" :mode="bloqueioMode" :workRules="workRules" :settings="settings" :ownerId="ownerId" :tenantId="clinicTenantId" @saved="refetch" />

    <!-- Dialog: feriados próximos (bloqueados e pendentes) -->
    <Dialog v-model:visible="feriadosAlertaOpen" modal :draggable="false" header="Feriados nos próximos 30 dias" :style="{ width: '520px', maxWidth: '96vw' }">
        <div class="flex flex-col gap-3">
            <div v-if="feriadosSemBloqueio.length" class="flex items-start gap-3 p-3 rounded-2xl" style="background: color-mix(in srgb, var(--red-400) 10%, var(--surface-card)); border: 1px solid color-mix(in srgb, var(--red-400) 28%, transparent)">
                <i class="pi pi-exclamation-triangle mt-0.5 shrink-0" style="color: var(--red-500)" />
                <p class="text-sm leading-relaxed m-0">{{ feriadosSemBloqueio.length }} feriado(s) em dias de trabalho ainda sem bloqueio. Bloqueie para evitar agendamentos indevidos.</p>
            </div>
            <div v-else class="flex items-center gap-2 p-3 rounded-2xl" style="background: color-mix(in srgb, var(--green-400) 10%, var(--surface-card)); border: 1px solid color-mix(in srgb, var(--green-400) 28%, transparent)">
                <i class="pi pi-check-circle" style="color: var(--green-600)" />
                <p class="text-sm m-0">Todos os feriados próximos estão bloqueados.</p>
            </div>

            <ul class="flex flex-col gap-2 max-h-[360px] overflow-y-auto pr-1">
                <li v-for="f in feriadosTodosProximos" :key="f.data">
                    <div class="flex items-center gap-2 p-2 rounded-xl border" :class="f.bloqueado ? 'border-[var(--surface-border)] opacity-70' : 'border-red-300'">
                        <i class="text-sm shrink-0" :class="f.bloqueado ? 'pi pi-lock' : 'pi pi-calendar-times'" :style="{ color: f.bloqueado ? 'var(--text-color-secondary)' : 'var(--red-500)' }" />
                        <div class="flex-1 min-w-0">
                            <div class="text-sm font-medium truncate">{{ f.nome }}</div>
                            <div class="text-xs text-[var(--text-color-secondary)] capitalize">{{ fmtFeriadoDateLong(f.data) }}</div>
                        </div>

                        <!-- Já bloqueado: botão desbloquear -->
                        <template v-if="f.bloqueado">
                            <span class="text-xs text-[var(--text-color-secondary)] flex items-center gap-1 shrink-0 mr-1"> <i class="pi pi-check-circle" style="color: var(--green-500)" /> Bloqueado </span>
                            <Button label="Desfazer" icon="pi pi-lock-open" size="small" severity="secondary" outlined class="rounded-full shrink-0" :loading="feriadosAlertaSalvando === 'unblock_' + f.data" @click="desbloquearFeriadoDoAlerta(f)" />
                        </template>

                        <!-- Não bloqueado: botão bloquear -->
                        <Button v-else label="Bloquear" icon="pi pi-lock" size="small" severity="danger" outlined class="rounded-full shrink-0" :loading="feriadosAlertaSalvando === f.data" @click="bloquearFeriadoDoAlerta(f)" />
                    </div>
                </li>
            </ul>
        </div>

        <template #footer>
            <Button label="Fechar" severity="secondary" outlined class="rounded-full" @click="feriadosAlertaOpen = false" />
            <Button v-if="feriadosSemBloqueio.length" label="Bloquear todos" icon="pi pi-lock" severity="danger" class="rounded-full" :loading="feriadosAlertaSalvando === 'all'" @click="bloquearTodosFeriadosAlerta" />
        </template>
    </Dialog>

    <!-- ═══════════════════════════════════════════════════════════
       Dialog: Sessões Pendentes de Pacientes Desativados/Arquivados
  ═══════════════════════════════════════════════════════════ -->
    <Dialog
        v-model:visible="desativadoDialogOpen"
        modal
        :draggable="false"
        :style="{ width: '1100px', maxWidth: '97vw', height: '85vh' }"
        :pt="{ content: { style: 'padding:0; display:flex; flex-direction:column; height:100%; overflow:hidden;' }, header: { style: 'padding: 1rem 1.25rem 0.75rem' } }"
    >
        <template #header>
            <div class="flex items-center gap-2 w-full">
                <i class="pi pi-exclamation-triangle text-orange-500" />
                <span class="font-semibold text-base">Sessões agendadas — pacientes desativados</span>
                <span class="ml-1 inline-flex items-center justify-center min-w-[22px] h-[22px] px-1 rounded-full bg-orange-500 text-white text-xs font-bold">
                    {{ desativadoPatients.reduce((s, p) => s + p.sessions.length, 0) }}
                </span>
                <!-- Tabs pacientes -->
                <div class="flex gap-1 ml-auto flex-wrap">
                    <button
                        v-for="p in desativadoPatients"
                        :key="p.id"
                        class="px-3 py-1 rounded-full text-xs font-semibold border transition-all duration-150"
                        :class="desativadoSelected?.id === p.id ? 'bg-orange-500 text-white border-orange-500' : 'bg-transparent text-orange-600 border-orange-500/40 hover:bg-orange-500/10'"
                        @click="desativadoSelected = p"
                    >
                        {{ (p.nome_completo || '—').split(' ')[0] }}
                        <span class="ml-1 opacity-70">({{ p.sessions.length }})</span>
                    </button>
                </div>
            </div>
        </template>

        <!-- Body: split panel -->
        <div v-if="desativadoSelected" class="flex flex-col lg:flex-row flex-1 min-h-0 overflow-hidden">
            <!-- Sidebar esquerda: lista de sessões -->
            <div class="w-full lg:w-[340px] lg:shrink-0 flex flex-col border-b lg:border-b-0 lg:border-r border-[var(--surface-border)]">
                <!-- Patient info -->
                <div class="px-4 py-3 border-b border-[var(--surface-border)] bg-orange-500/5">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-full flex items-center justify-center text-white font-bold text-sm shrink-0" style="background: #f97316">
                            {{ (desativadoSelected.nome_completo || '?').charAt(0).toUpperCase() }}
                        </div>
                        <div class="min-w-0">
                            <div class="font-semibold text-sm truncate">{{ desativadoSelected.nome_completo }}</div>
                            <span style="display: inline-block; background: #f97316; color: #fff; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 1px 6px; border-radius: 3px; line-height: 1.5">
                                {{ desativadoSelected.status === 'Arquivado' ? 'arquivado' : 'desativado' }}
                            </span>
                        </div>
                        <div class="ml-auto text-right shrink-0">
                            <div class="text-lg font-bold text-orange-500">{{ desativadoSelected.sessions.length }}</div>
                            <div class="text-[0.65rem] text-[var(--text-color-secondary)]">sessão(ões)</div>
                        </div>
                    </div>
                </div>

                <!-- Sessions list -->
                <div class="flex-1 overflow-y-auto">
                    <div class="p-3 flex flex-col gap-2">
                        <div
                            v-for="s in desativadoSelected.sessions"
                            :key="s.id"
                            class="rounded-lg border p-2.5 cursor-pointer transition-all duration-150 group"
                            :class="desativadoFocused?.id === s.id ? 'border-orange-500 bg-orange-500/8 shadow-sm' : 'border-[var(--surface-border)] bg-[var(--surface-card)] hover:border-orange-500/40 hover:bg-orange-500/5'"
                            @click="focusDesativadoSession(s)"
                        >
                            <div class="flex items-start justify-between gap-2">
                                <div class="min-w-0">
                                    <div class="text-xs font-bold text-[var(--text-color)]">
                                        {{ fmtDesativadoDate(s.inicio_em) }}
                                    </div>
                                    <div class="text-[0.7rem] text-[var(--text-color-secondary)]">{{ fmtDesativadoTime(s.inicio_em) }} · {{ fmtDesativadoDur(s.inicio_em, s.fim_em) }}</div>
                                    <div v-if="s.titulo" class="text-[0.7rem] text-[var(--text-color-secondary)] truncate mt-0.5">{{ s.titulo }}</div>
                                </div>
                                <Tag :value="s.modalidade || 'Presencial'" severity="secondary" class="text-[0.6rem] shrink-0" />
                            </div>
                            <div class="flex gap-1.5 mt-2">
                                <Button label="Ver na agenda" icon="pi pi-external-link" size="small" severity="warn" outlined class="flex-1 text-[0.65rem]" @click.stop="openSessionInMainCalendar(s)" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Painel direito: mini FullCalendar -->
            <div class="flex-1 min-w-0 min-h-[300px] lg:min-h-0 overflow-hidden flex flex-col">
                <div class="px-4 py-2 border-b border-[var(--surface-border)] flex items-center gap-2">
                    <i class="pi pi-calendar text-[var(--text-color-secondary)] text-xs" />
                    <span class="text-xs text-[var(--text-color-secondary)]">Clique em uma sessão para abrir na agenda principal e cancelar ou remarcar</span>
                </div>
                <div class="flex-1 overflow-auto p-2">
                    <FullCalendar v-if="desativadoDialogOpen && desativadoSelected" ref="desativadoFcRef" :options="desativadoFcOptions" />
                </div>
            </div>
        </div>

        <template #footer>
            <Button label="Fechar" severity="secondary" outlined @click="desativadoDialogOpen = false" />
        </template>
    </Dialog>

    <!-- Menu contexto: Sessões Hoje -->
    <Menu ref="todayEvMenuRef" :model="todayEvMenuItems" :popup="true" />

    <!-- Dialog: Prontuário -->
    <PatientProntuario :key="selectedPatient?.id || 'none'" v-model="prontuarioOpen" :patient="selectedPatient" @close="closeProntuario" />

    <!-- Fase C: confirma status change com decisões de billing
         (multa, consumir saldo, gerar cobrança, reverse transition). -->
    <AgendaStatusChangeConfirmDialog
        v-model="statusDialogOpen"
        :evento="statusDialogProps.evento"
        :novoStatus="statusDialogProps.novoStatus"
        :regraExcecao="statusDialogProps.regraExcecao"
        :billingContract="statusDialogProps.billingContract"
        :billingContractStyle="statusDialogProps.billingContractStyle"
        :pendingRecord="statusDialogProps.pendingRecord"
        :sessionPrice="statusDialogProps.sessionPrice"
        @confirm="onStatusDialogConfirm"
        @update:modelValue="(v) => !v && onStatusDialogCancel()"
    />
</template>

<style scoped>
/* Fade transition */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.14s ease;
}
.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

/* FullCalendar event dim/hit helpers */
.evt-dim {
    opacity: 0.25;
}
.evt-hit {
    opacity: 1;
}

/* Mini calendar — :deep overrides for PrimeVue Calendar component */
:deep(.w-full.p-datepicker) {
    width: 100%;
    border: none;
    padding: 0;
    background: transparent;
    box-shadow: none;
}
:deep(.w-full .p-datepicker-header) {
    padding: 0 0 0.5rem;
    border: none;
    background: transparent;
}
:deep(.w-full .p-datepicker-calendar) {
    width: 100%;
    font-size: 0.78rem;
}
:deep(.w-full .p-datepicker-calendar td) {
    padding: 1px;
}
:deep(.w-full .p-datepicker-calendar td > span) {
    width: 100%;
    min-width: unset;
    border-radius: 6px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
}

/* Mini dot inside calendar day slot */
.mini-day-num {
    display: block;
    text-align: center;
    line-height: 1;
}
.mini-day-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--primary-color, #6366f1);
    flex-shrink: 0;
}

/* Drawer — needs CSS transition + fixed positioning, not expressible in Tailwind base */
.panel-drawer {
    transition:
        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.25s;
}

/* Mini day classes injected via :pt */
:deep(.mini-day-blocked) {
    background: color-mix(in srgb, #ef4444 20%, transparent) !important;
    border-radius: 4px;
}
:deep(.mini-day-work) {
}
:deep(.mini-day-off) {
    opacity: 0.45;
}
:deep(.p-disabled.mini-day-work) {
    background: color-mix(in srgb, #9ca3af 18%, transparent) !important;
    opacity: 0.6;
}

/* Semana atual — faixa de fundo contínua seg→dom */
:deep(.mini-week-hl) {
    background: color-mix(in srgb, var(--primary-color, #6366f1) 12%, transparent) !important;
    border-radius: 0 !important;
}
:deep(.mini-week-hl--start) {
    border-radius: 6px 0 0 6px !important;
}
:deep(.mini-week-hl--end) {
    border-radius: 0 6px 6px 0 !important;
}

/* Hoje — cartão com borda + sombra */
:deep(.mini-day-today) {
    background: color-mix(in srgb, var(--primary-color, #6366f1) 80%, #00000000) !important;
    border: 1px solid var(--surface-border) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}
</style>

<style>
/* ── Altura mínima dos slots ───────────────────────────── */
.fc-timegrid-slot {
    height: 14px !important;
}
.fc-timegrid-slot-label {
    font-size: 10px !important;
    line-height: 1 !important;
}

/* ── Slot labels customizados ──────────────────────────── */
.fc-slot-label-hour {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-color);
    letter-spacing: -0.01em;
    line-height: 1;
}
.fc-slot-label-half {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 400;
    color: var(--text-color-secondary);
    opacity: 0.5;
    line-height: 1;
    padding-left: 2px;
}

/* ── Cores dos eventos (global — aplicadas pelo FullCalendar) ── */
/* Cor primária padrão só quando o evento não tem cor personalizada do commitment */
.fc-event.evt-session:not(.evt-has-color) {
    background-color: var(--p-primary-500, #6366f1) !important;
    border-color: var(--p-primary-600, #4f46e5) !important;
    color: #fff !important;
}
/* Cor de texto branca garantida para eventos com cor personalizada */
.fc-event.evt-session.evt-has-color {
    color: #fff !important;
}
/* Bloqueios são background events (cinza ~20%, inline em _makeBloqueioEvent).
   A regra .fc-event.evt-block antiga pintava de vermelho — removida.
   Deixar o backgroundColor inline (#6b728033) vencer. */
/* dayGridMonth: o dot também precisa de cor */
.fc-daygrid-event.evt-session .fc-event-main {
    color: #fff;
}

/* Evento customizado — fora do scoped pois é HTML injetado pelo FullCalendar */
.ev-custom {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    overflow: hidden;
    padding: 1px 2px;
    height: 100%;
    width: 100%;
}
.ev-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 1px;
}
.ev-avatar-img {
    object-fit: cover;
}
.ev-avatar-initials {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.ev-body {
    min-width: 0;
    flex: 1;
    overflow: hidden;
}
.ev-title {
    font-size: 11px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ev-name {
    font-weight: 600;
}
.ev-hour {
    font-weight: 400;
    font-size: 10px;
    opacity: 0.75;
    margin-left: 2px;
}
.ev-badge {
    display: inline-block;
    background: #f97316;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 3px;
    line-height: 1.4;
    margin-top: 2px;
}
.ev-obs {
    font-size: 10px;
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

/* Mini calendário — colorir dias por expediente (global: applied by PrimeVue outside scoped) */
.p-datepicker-day.mini-day-work:not(.p-datepicker-day-selected) {
    background: rgba(34, 197, 94, 0.25);
}
.p-datepicker-day.mini-day-off:not(.p-datepicker-day-selected) {
    background: rgba(239, 68, 68, 0.2);
}
.p-datepicker-day.mini-day-blocked:not(.p-datepicker-day-selected) {
    background: rgba(239, 68, 68, 0.55);
    color: #fff;
    font-weight: 700;
}
.p-datepicker-day span {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mini-day-dot {
    position: absolute;
    right: -2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--primary-color, #6366f1);
}
</style>
