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

import ToggleButton from 'primevue/togglebutton';

const props = defineProps({
    title: { type: String, default: 'Agenda' },

    // 'day' | 'week'
    view: { type: String, default: 'day' },

    // 'full_24h' | 'work_hours'
    mode: { type: String, default: 'work_hours' },

    showSearch: { type: Boolean, default: true },
    searchPlaceholder: { type: String, default: ' ' },

    // controla se exibe botões de ação
    showActions: { type: Boolean, default: true }
});

const emit = defineEmits(['today', 'prev', 'next', 'changeView', 'toggleMode', 'createSession', 'createBlock', 'search']);

const viewOptions = [
    { label: 'Dia', value: 'day' },
    { label: 'Semana', value: 'week' }
];

const search = ref('');

watch(search, (v) => emit('search', v));

const modeLabel = computed(() => (props.mode === 'full_24h' ? '24h' : 'Horário'));
</script>

<template>
    <div class="mb-4 overflow-hidden rounded-[1.5rem] border border-[var(--surface-border)] bg-[var(--surface-card)]">
        <div class="p-4 md:p-5 flex flex-col gap-3">
            <!-- topo -->
            <div class="flex items-center justify-between gap-3">
                <div class="min-w-0">
                    <div class="text-lg md:text-xl font-semibold truncate">{{ title }}</div>
                    <div class="text-sm opacity-70">Operação do dia com visão e ação.</div>
                </div>

                <div class="flex items-center gap-2">
                    <Button label="Hoje" icon="pi pi-calendar" severity="secondary" outlined @click="$emit('today')" />
                    <Button icon="pi pi-chevron-left" severity="secondary" outlined @click="$emit('prev')" />
                    <Button icon="pi pi-chevron-right" severity="secondary" outlined @click="$emit('next')" />
                </div>
            </div>

            <!-- controles -->
            <div class="flex flex-col md:flex-row md:items-center gap-3 md:justify-between">
                <div class="flex flex-wrap items-center gap-2">
                    <SelectButton :modelValue="view" :options="viewOptions" optionLabel="label" optionValue="value" @update:modelValue="$emit('changeView', $event)" />

                    <ToggleButton :modelValue="mode === 'full_24h'" onLabel="24h" offLabel="Horário" @update:modelValue="$emit('toggleMode', $event ? 'full_24h' : 'work_hours')" />

                    <div class="text-sm opacity-70">
                        Modo: <b>{{ modeLabel }}</b>
                    </div>
                </div>

                <div class="flex flex-col md:flex-row items-stretch md:items-center gap-2">
                    <template v-if="showActions">
                        <Button label="Nova sessão" icon="pi pi-plus" @click="$emit('createSession')" />
                        <Button label="Bloquear" icon="pi pi-lock" severity="secondary" outlined @click="$emit('createBlock')" />
                    </template>

                    <div v-if="showSearch" class="md:w-72 w-full">
                        <FloatLabel>
                            <IconField>
                                <InputIcon class="pi pi-search" />
                                <InputText id="agendaSearch" class="w-full" v-model="search" :placeholder="searchPlaceholder" />
                            </IconField>
                            <label for="agendaSearch">Buscar por paciente/título</label>
                        </FloatLabel>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
