<!--
|--------------------------------------------------------------------------
| Agência PSI
|--------------------------------------------------------------------------
| Criado e desenvolvido por Leonardo Nohama
|
| Tecnologia aplicada à escuta.
| Estrutura para o cuidado.
|
| Arquivo: src/features/agenda/components/AgendaClinicCalendar.vue
| Data: 2026
| Local: São Carlos/SP — Brasil
|--------------------------------------------------------------------------
| © 2026 — Todos os direitos reservados
|--------------------------------------------------------------------------
-->
<script setup>
import { computed, ref } from 'vue';

import FullCalendar from '@fullcalendar/vue3';
import resourceTimeGridPlugin from '@fullcalendar/resource-timegrid';
import interactionPlugin from '@fullcalendar/interaction';

const props = defineProps({
    view: { type: String, default: 'day' }, // 'day' | 'week'
    timezone: { type: String, default: 'America/Sao_Paulo' },

    mode: { type: String, default: 'work_hours' }, // 'full_24h' | 'work_hours'
    slotDuration: { type: String, default: '00:30:00' },
    slotMinTime: { type: String, default: '06:00:00' },
    slotMaxTime: { type: String, default: '22:00:00' },

    resources: { type: Array, default: () => [] }, // [{ id, title }]
    events: { type: Array, default: () => [] }, // event.resourceId = resource.id

    loading: { type: Boolean, default: false }
});

const emit = defineEmits(['rangeChange', 'eventClick', 'eventDrop', 'eventResize']);

const calendarRef = ref(null);

const initialView = computed(() => (props.view === 'week' ? 'resourceTimeGridWeek' : 'resourceTimeGridDay'));

const computedSlotMinTime = computed(() => (props.mode === 'full_24h' ? '00:00:00' : props.slotMinTime));
const computedSlotMaxTime = computed(() => (props.mode === 'full_24h' ? '24:00:00' : props.slotMaxTime));

const options = computed(() => ({
    plugins: [resourceTimeGridPlugin, interactionPlugin],
    initialView: initialView.value,
    timeZone: props.timezone,

    headerToolbar: false,

    nowIndicator: true,
    editable: true,

    slotDuration: props.slotDuration,
    slotMinTime: computedSlotMinTime.value,
    slotMaxTime: computedSlotMaxTime.value,

    resourceAreaWidth: '280px',
    resourceAreaHeaderContent: 'Profissionais',
    resources: props.resources,

    events: props.events,

    datesSet(arg) {
        emit('rangeChange', {
            start: arg.start,
            end: arg.end,
            startStr: arg.startStr,
            endStr: arg.endStr,
            viewType: arg.view.type
        });
    },

    eventClick(info) {
        emit('eventClick', info);
    },
    eventDrop(info) {
        emit('eventDrop', info);
    },
    eventResize(info) {
        emit('eventResize', info);
    },

    height: 'auto',
    expandRows: true,
    allDaySlot: false
}));

function api() {
    const fc = calendarRef.value;
    return fc?.getApi?.();
}

function goToday() {
    api()?.today();
}
function prev() {
    api()?.prev();
}
function next() {
    api()?.next();
}
function setView(v) {
    api()?.changeView(v === 'week' ? 'resourceTimeGridWeek' : 'resourceTimeGridDay');
}

defineExpose({ goToday, prev, next, setView });
</script>

<template>
    <div class="rounded-[1.5rem] border border-[var(--surface-border)] bg-[var(--surface-card)] overflow-hidden">
        <div v-if="loading" class="p-4 text-sm opacity-70 border-b border-[var(--surface-border)]">Carregando agenda da clínica…</div>

        <div class="p-2 md:p-3">
            <FullCalendar ref="calendarRef" :options="options" />
        </div>
    </div>
</template>
