<script setup>
/*
 * MelissaAgendaActionsPopover — popover "Ações" da toolbar mobile
 * --------------------------------------------------------------
 * Aparece em <xl (1279px), substitui filtros + bloqueio que ficam
 * espalhados na toolbar desktop. Concentra:
 *   - Visualização (dia/semana/mês/lista)
 *   - Eventos (Apenas Sessões / Tudo)
 *   - Horário (24h / 12h / Meu)
 *   - Bloquear (4 atalhos: horário, período, dia, feriados)
 *
 * Pai expoe um botao ancora (`.ma-cal__btn--compact-only`) e chama
 * `actionsPopover.value.toggle($event)` no click.
 *
 * V-model bindings:
 *   - v-model:calendar-view (string)
 *   - v-model:only-sessions (boolean)
 *   - v-model:time-mode (string)
 *
 * Props:
 *   - timeModeOptions, onlySessionsOptions: arrays compartilhados com
 *     a toolbar desktop (fonte unica no pai)
 *
 * Emit:
 *   - bloqueio(mode: 'horario' | 'periodo' | 'dia' | 'feriados')
 *     — pai chama M.openBloqueioDialog(mode)
 *
 * Exposto via defineExpose:
 *   - toggle(event) — abre/fecha o popover
 */
import { ref } from 'vue';
import Popover from 'primevue/popover';

defineProps({
    calendarView: { type: String, required: true },
    onlySessions: { type: Boolean, default: false },
    timeMode: { type: String, required: true },
    timeModeOptions: { type: Array, required: true },
    onlySessionsOptions: { type: Array, required: true },
    // True quando o composable de agenda (M) nao esta disponivel —
    // typicamente em modo standalone (preview fora do MelissaLayout).
    // Os 4 botoes de bloqueio ficam disabled visualmente em vez de
    // emitir clicks que nao fazem nada.
    bloqueioDisabled: { type: Boolean, default: false }
});

const emit = defineEmits([
    'update:calendarView',
    'update:onlySessions',
    'update:timeMode',
    'bloqueio'
]);

// View options — uso unico (so este componente). Mantenho local em vez
// de duplicar no pai.
const viewOptions = [
    { label: 'Dia', value: 'dia' },
    { label: 'Semana', value: 'semana' },
    { label: 'Mês', value: 'mes' },
    { label: 'Lista', value: 'lista' }
];

const popRef = ref(null);

function toggle(event) {
    popRef.value?.toggle(event);
}

function chamarBloqueio(mode) {
    // Fecha o popover antes de emitir — UX espelha o pattern original
    // (closeMobileActions + chamada no pai). PrimeVue Menu "popup" some
    // ao clicar num item; replicamos o mesmo aqui.
    try { popRef.value?.hide(); } catch {}
    emit('bloqueio', mode);
}

defineExpose({ toggle });
</script>

<template>
    <Popover ref="popRef" class="ma-actions-pop">
        <div class="ma-actions flex flex-col gap-3.5 min-w-[260px] p-1">
            <!-- Visualização -->
            <div class="ma-actions__group flex flex-col gap-1.5">
                <div class="ma-actions__label uppercase tracking-[0.14em] text-[var(--text-color-secondary,var(--m-text-faint))] text-[0.62rem] font-semibold">Visualização</div>
                <SelectButton
                    :model-value="calendarView"
                    :options="viewOptions"
                    optionLabel="label"
                    optionValue="value"
                    :allowEmpty="false"
                    size="small"
                    class="w-full"
                    @update:model-value="emit('update:calendarView', $event)"
                />
            </div>

            <!-- Filtro de tipo de evento -->
            <div class="ma-actions__group flex flex-col gap-1.5">
                <div class="ma-actions__label uppercase tracking-[0.14em] text-[var(--text-color-secondary,var(--m-text-faint))] text-[0.62rem] font-semibold">Eventos</div>
                <SelectButton
                    :model-value="onlySessions"
                    :options="onlySessionsOptions"
                    optionLabel="label"
                    optionValue="value"
                    :allowEmpty="false"
                    size="small"
                    class="w-full"
                    @update:model-value="emit('update:onlySessions', $event)"
                />
            </div>

            <!-- Modo de horário -->
            <div class="ma-actions__group flex flex-col gap-1.5">
                <div class="ma-actions__label uppercase tracking-[0.14em] text-[var(--text-color-secondary,var(--m-text-faint))] text-[0.62rem] font-semibold">Horário</div>
                <SelectButton
                    :model-value="timeMode"
                    :options="timeModeOptions"
                    optionLabel="label"
                    optionValue="value"
                    :allowEmpty="false"
                    size="small"
                    class="w-full"
                    @update:model-value="emit('update:timeMode', $event)"
                />
            </div>

            <div class="ma-actions__divider h-px bg-[var(--surface-border,var(--m-border))] -mx-1" />

            <!-- Bloqueio (mantém como botões — são ações, não toggles) -->
            <div class="ma-actions__group flex flex-col gap-1.5">
                <div class="ma-actions__label uppercase tracking-[0.14em] text-[var(--text-color-secondary,var(--m-text-faint))] text-[0.62rem] font-semibold">Bloquear</div>
                <div class="ma-actions__buttons grid grid-cols-2 gap-1.5">
                    <button
                        :disabled="bloqueioDisabled"
                        class="ma-actions__btn inline-flex items-center gap-2 px-2.5 py-2 bg-transparent border border-[var(--surface-border,var(--m-border))] rounded-lg text-[var(--text-color,var(--m-text))] text-[0.78rem] [font-family:inherit] cursor-pointer transition-[background-color,border-color] duration-[140ms] text-left hover:bg-[var(--surface-hover,var(--m-bg-soft-hover))] hover:border-[color-mix(in_srgb,var(--m-accent)_35%,var(--surface-border,var(--m-border)))] disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:border-[var(--surface-border,var(--m-border))] [&>i]:text-[0.78rem] [&>i]:text-[var(--text-color-secondary,var(--m-text-muted))] [&>i]:flex-shrink-0"
                        @click="chamarBloqueio('horario')"
                    >
                        <i class="pi pi-clock" /><span>Por horário</span>
                    </button>
                    <button
                        :disabled="bloqueioDisabled"
                        class="ma-actions__btn inline-flex items-center gap-2 px-2.5 py-2 bg-transparent border border-[var(--surface-border,var(--m-border))] rounded-lg text-[var(--text-color,var(--m-text))] text-[0.78rem] [font-family:inherit] cursor-pointer transition-[background-color,border-color] duration-[140ms] text-left hover:bg-[var(--surface-hover,var(--m-bg-soft-hover))] hover:border-[color-mix(in_srgb,var(--m-accent)_35%,var(--surface-border,var(--m-border)))] disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:border-[var(--surface-border,var(--m-border))] [&>i]:text-[0.78rem] [&>i]:text-[var(--text-color-secondary,var(--m-text-muted))] [&>i]:flex-shrink-0"
                        @click="chamarBloqueio('periodo')"
                    >
                        <i class="pi pi-calendar-clock" /><span>Por período</span>
                    </button>
                    <button
                        :disabled="bloqueioDisabled"
                        class="ma-actions__btn inline-flex items-center gap-2 px-2.5 py-2 bg-transparent border border-[var(--surface-border,var(--m-border))] rounded-lg text-[var(--text-color,var(--m-text))] text-[0.78rem] [font-family:inherit] cursor-pointer transition-[background-color,border-color] duration-[140ms] text-left hover:bg-[var(--surface-hover,var(--m-bg-soft-hover))] hover:border-[color-mix(in_srgb,var(--m-accent)_35%,var(--surface-border,var(--m-border)))] disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:border-[var(--surface-border,var(--m-border))] [&>i]:text-[0.78rem] [&>i]:text-[var(--text-color-secondary,var(--m-text-muted))] [&>i]:flex-shrink-0"
                        @click="chamarBloqueio('dia')"
                    >
                        <i class="pi pi-calendar-times" /><span>Dia inteiro</span>
                    </button>
                    <button
                        :disabled="bloqueioDisabled"
                        class="ma-actions__btn inline-flex items-center gap-2 px-2.5 py-2 bg-transparent border border-[var(--surface-border,var(--m-border))] rounded-lg text-[var(--text-color,var(--m-text))] text-[0.78rem] [font-family:inherit] cursor-pointer transition-[background-color,border-color] duration-[140ms] text-left hover:bg-[var(--surface-hover,var(--m-bg-soft-hover))] hover:border-[color-mix(in_srgb,var(--m-accent)_35%,var(--surface-border,var(--m-border)))] disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:border-[var(--surface-border,var(--m-border))] [&>i]:text-[0.78rem] [&>i]:text-[var(--text-color-secondary,var(--m-text-muted))] [&>i]:flex-shrink-0"
                        @click="chamarBloqueio('feriados')"
                    >
                        <i class="pi pi-star" /><span>Feriados</span>
                    </button>
                </div>
            </div>
        </div>
    </Popover>
</template>
