<!--
|--------------------------------------------------------------------------
| Agência PSI
|--------------------------------------------------------------------------
| Criado e desenvolvido por Leonardo Nohama
|
| Tecnologia aplicada à escuta.
| Estrutura para o cuidado.
|
| Arquivo: src/features/agenda/components/AgendaRightPanel.vue
| Data: 2026
| Local: São Carlos/SP — Brasil
|--------------------------------------------------------------------------
| © 2026 — Todos os direitos reservados
|--------------------------------------------------------------------------
-->
<script setup>
const props = defineProps({
    title: { type: String, default: 'Painel' },
    subtitle: { type: String, default: 'Visão rápida do dia e ações de triagem.' },
    sticky: { type: Boolean, default: true },
    showHeaderActions: { type: Boolean, default: false }
});

const emit = defineEmits(['refresh', 'collapse']);

/**
 * Este componente é propositalmente "burro".
 * Ele só organiza layout e slots para o painel lateral.
 * Regras/ações reais ficam nas páginas ou nos cards filhos.
 */
</script>

<template>
    <div class="agenda-right-panel" :class="{ 'is-sticky': sticky }">
        <Card class="h-full">
            <template #title>
                <div class="flex align-items-start justify-content-between gap-2">
                    <div class="min-w-0">
                        <div class="text-base md:text-lg font-semibold truncate">
                            {{ title }}
                        </div>
                        <div class="text-xs mt-1" style="color: var(--text-color-secondary)">
                            {{ subtitle }}
                        </div>
                    </div>

                    <div v-if="showHeaderActions" class="flex align-items-center gap-1">
                        <Button size="small" text icon="pi pi-refresh" v-tooltip.top="'Atualizar painel'" @click="emit('refresh')" />
                        <Button size="small" text icon="pi pi-window-minimize" v-tooltip.top="'Recolher (UI)'" @click="emit('collapse')" />
                    </div>
                </div>
            </template>

            <template #content>
                <div class="content-wrap">
                    <!-- TOP slot (ex.: próximas sessões) -->
                    <div class="slot-top">
                        <slot name="top" />
                    </div>

                    <Divider class="my-3" />

                    <!-- BOTTOM slot (ex.: pulse / atalhos) -->
                    <div class="slot-bottom">
                        <slot name="bottom" />
                    </div>
                </div>
            </template>
        </Card>
    </div>
</template>

<style scoped>
.agenda-right-panel {
    width: 100%;
}

.agenda-right-panel.is-sticky {
    position: sticky;
    top: 1rem;
    align-self: start;
}

/* Deixa o painel com scroll interno sem estourar a página */
.content-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: calc(100vh - 220px);
    overflow: auto;
    padding-right: 0.25rem;
}

/* Melhor sensação de "sessões" */
.slot-top,
.slot-bottom {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
</style>
