<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card class="card-border bg-surface text-text time-card">

      <q-btn
        flat round dense
        icon="mdi-close-circle-outline"
        color="grey-5"
        class="absolute-top-right q-mt-sm q-mr-sm"
        @click="onDialogCancel"
      />

      <q-card-section class="text-center q-pt-lg q-pb-xs">
        <div class="font16 fontbold text-text">
          {{ serviceType.label }}
          <span class="text-grey-6">{{ '(' + serviceType.hoursCount + 'h)' }}</span>
        </div>
        <div class="font14 fontmedium text-grey-6 q-mt-xs">
          {{ $t('scheduling_page.time_selection.subtitle') }}
        </div>
      </q-card-section>

      <q-card-section class="q-pt-xs">
        <div class="row q-col-gutter-xs">
          <div
            v-for="slot in timeSlots"
            :key="slot.value"
            class="col-6"
          >
            <q-radio
              v-model="selectedSlot"
              :val="slot.value"
              :label="slot.label"
              color="primary"
              class="font12 fontbold text-primary"
              keep-color
              dense
            />
          </div>
        </div>
      </q-card-section>

      <template v-if="hasMealSection">
        <q-separator class="q-mx-md" />
        <q-card-section class="q-py-sm">
          <div class="font14 fontbold text-text q-mb-sm text-center">
            {{ $t('scheduling_page.time_selection.meal_section') }}
          </div>
          <div class="column">
            <q-radio
              v-model="selectedMeal"
              val="offer"
              :label="$t('scheduling_page.time_selection.meal_offer')"
              class="font12 fontbold text-primary q-mx-auto q-pb-sm"
              color="primary"
              keep-color
              dense
            />
            <q-radio
              v-model="selectedMeal"
              val="no_offer"
              :label="$t('scheduling_page.time_selection.meal_no_offer')"
              class="font12 fontbold text-primary q-mx-auto q-pt-sm"
              color="primary"
              keep-color
              dense
            />
          </div>
        </q-card-section>
      </template>

      <q-card-actions class="q-px-md q-pb-xs q-pt-sm">
        <q-btn
          unelevated
          rounded
          no-caps
          :label="$t('scheduling_page.time_selection.continue')"
          :disable="!selectedSlot"
          color="secondary"
          padding="4px 8px"
          class="full-width"
          @click="handleContinue"
        />
      </q-card-actions>

      <div v-if="pauseNote" class="text-center font12 fontmedium text-primary q-pb-md">
        {{ pauseNote }}
      </div>

    </q-card>
  </q-dialog>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useDialogPluginComponent } from 'quasar';
import { useI18n } from 'vue-i18n';

const props = defineProps({
  serviceType:   { type: Object, required: true },
  provider:      { type: Object, required: true },
  selectedDate:  { type: String, required: true },
  partialBlocks: { type: Array,  required: false, default: () => [] },
});

defineEmits([...useDialogPluginComponent.emits]);

const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent();
const { t } = useI18n();

const selectedSlot = ref(null);
const selectedMeal = ref(null);

const handleContinue = () => {
  const slotObj = timeSlots.value.find(s => s.value === selectedSlot.value);
  onDialogOK({
    serviceType: props.serviceType,
    date: props.selectedDate,
    slot: { value: selectedSlot.value, startHour: slotObj.startHour, endHour: slotObj.endHour },
    meal: selectedMeal.value,
  });
};

const slotConflicts = (slotStart, slotEnd, blocks) =>
  blocks.some(b => {
    const blockStart = parseInt(b.init_hour);
    const blockEnd   = parseInt(b.end_hour);
    return slotEnd >= blockStart && slotStart <= blockEnd;
  });

const timeSlots = computed(() => {
  const h = props.serviceType.hoursCount;
  const slots = [];
  for (let start = 7; start + h <= 20; start++) {
    const end = start + h;
    if (slotConflicts(start, end, props.partialBlocks)) continue;
    slots.push({
      value: `${start}-${end}`,
      startHour: start,
      endHour: end,
      label: `${start}h às ${end}h`,
    });
  }
  return slots;
});

const hasMealSection = computed(() =>
  props.serviceType.hoursCount >= 6
);

const pauseNote = computed(() => {
  const map = { 8: t('scheduling_page.time_selection.pause_note_8h'), 6: t('scheduling_page.time_selection.pause_note_6h'), 4: t('scheduling_page.time_selection.pause_note_4h') };
  return map[props.serviceType.hoursCount] ?? null;
});
</script>

<style scoped lang="scss">
.time-card {
  width: min(88vw, 360px);
}
</style>
