<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>