<!-- src/features/agenda/components/AgendaRightPanel.vue -->
<script setup>
import Card from 'primevue/card'
import Divider from 'primevue/divider'
import Button from 'primevue/button'

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: .25rem;
  max-height: calc(100vh - 220px);
  overflow: auto;
  padding-right: .25rem;
}

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