<!--
|--------------------------------------------------------------------------
| Agência PSI
|--------------------------------------------------------------------------
| Criado e desenvolvido por Leonardo Nohama
|
| Tecnologia aplicada à escuta.
| Estrutura para o cuidado.
|
| Arquivo: src/components/agenda/AgendaSlotsPorDiaCard.vue
| Data: 2026
| Local: São Carlos/SP — Brasil
|--------------------------------------------------------------------------
| © 2026 — Todos os direitos reservados
|--------------------------------------------------------------------------
-->
<script setup>
import { computed, ref, watch, onMounted } from 'vue';
import TabView from 'primevue/tabview';
import TabPanel from 'primevue/tabpanel';
import Dropdown from 'primevue/dropdown';
import InputNumber from 'primevue/inputnumber';
import ToggleSwitch from 'primevue/toggleswitch';
import { useToast } from 'primevue/usetoast';

import { fetchSlotsRegras, upsertSlotRegra } from '@/services/agendaConfigService';

const toast = useToast();

const props = defineProps({
    ownerId: { type: String, required: true }
});

const loading = ref(false);
const saving = ref(false);

const diasSemana = [
    { label: 'Dom', value: 0 },
    { label: 'Seg', value: 1 },
    { label: 'Ter', value: 2 },
    { label: 'Qua', value: 3 },
    { label: 'Qui', value: 4 },
    { label: 'Sex', value: 5 },
    { label: 'Sáb', value: 6 }
];

const passos = [15, 20, 30, 45, 60, 75, 90, 120].map((v) => ({ label: `${v} min`, value: v }));
const offsets = [0, 15, 30, 45].map((v) => ({ label: v === 0 ? ':00' : `:${String(v).padStart(2, '0')}`, value: v }));

const model = ref({
    0: { dia_semana: 0, ativo: false, passo_minutos: 60, offset_minutos: 0, buffer_antes_min: 0, buffer_depois_min: 0, min_antecedencia_horas: 0 },
    1: { dia_semana: 1, ativo: true, passo_minutos: 60, offset_minutos: 0, buffer_antes_min: 0, buffer_depois_min: 0, min_antecedencia_horas: 0 },
    2: { dia_semana: 2, ativo: true, passo_minutos: 60, offset_minutos: 0, buffer_antes_min: 0, buffer_depois_min: 0, min_antecedencia_horas: 0 },
    3: { dia_semana: 3, ativo: true, passo_minutos: 60, offset_minutos: 0, buffer_antes_min: 0, buffer_depois_min: 0, min_antecedencia_horas: 0 },
    4: { dia_semana: 4, ativo: true, passo_minutos: 60, offset_minutos: 0, buffer_antes_min: 0, buffer_depois_min: 0, min_antecedencia_horas: 0 },
    5: { dia_semana: 5, ativo: true, passo_minutos: 60, offset_minutos: 0, buffer_antes_min: 0, buffer_depois_min: 0, min_antecedencia_horas: 0 },
    6: { dia_semana: 6, ativo: true, passo_minutos: 60, offset_minutos: 30, buffer_antes_min: 0, buffer_depois_min: 0, min_antecedencia_horas: 0 }
});

function applyRows(rows) {
    for (const r of rows || []) {
        model.value[r.dia_semana] = {
            dia_semana: r.dia_semana,
            ativo: !!r.ativo,
            passo_minutos: r.passo_minutos,
            offset_minutos: r.offset_minutos,
            buffer_antes_min: r.buffer_antes_min,
            buffer_depois_min: r.buffer_depois_min,
            min_antecedencia_horas: r.min_antecedencia_horas
        };
    }
}

async function load() {
    loading.value = true;
    try {
        const rows = await fetchSlotsRegras(props.ownerId);
        applyRows(rows);
    } catch (e) {
        console.error(e);
        toast.add({ severity: 'error', summary: 'Falha', detail: e?.message || 'Não foi possível carregar slots por dia.', life: 3200 });
    } finally {
        loading.value = false;
    }
}

async function salvarDia(dia) {
    saving.value = true;
    try {
        const p = model.value[dia];
        await upsertSlotRegra(props.ownerId, p);
        toast.add({ severity: 'success', summary: 'Salvo', detail: `Slots do ${diasSemana.find((x) => x.value === dia)?.label} atualizados.`, life: 1600 });
    } catch (e) {
        console.error(e);
        toast.add({ severity: 'error', summary: 'Falha', detail: e?.message || 'Não foi possível salvar.', life: 3200 });
    } finally {
        saving.value = false;
    }
}

async function salvarTudo() {
    saving.value = true;
    try {
        for (const d of diasSemana.map((x) => x.value)) {
            await upsertSlotRegra(props.ownerId, model.value[d]);
        }
        toast.add({ severity: 'success', summary: 'Salvo', detail: 'Slots por dia atualizados.', life: 1800 });
    } catch (e) {
        console.error(e);
        toast.add({ severity: 'error', summary: 'Falha', detail: e?.message || 'Não foi possível salvar tudo.', life: 3200 });
    } finally {
        saving.value = false;
    }
}

onMounted(load);
</script>

<template>
    <Card class="overflow-hidden">
        <template #title>
            <div class="flex items-center justify-between gap-2">
                <div class="flex items-center gap-2">
                    <i class="pi pi-clock" />
                    <span>Organização de slots (por dia)</span>
                </div>

                <div class="flex gap-2">
                    <Button icon="pi pi-refresh" text rounded :disabled="loading" @click="load" />
                    <Button label="Salvar tudo" icon="pi pi-check" size="small" :loading="saving" @click="salvarTudo" />
                </div>
            </div>
        </template>

        <template #content>
            <div class="text-600 text-sm mb-3 leading-relaxed">
                Aqui você define <b>de quanto em quanto</b> os horários aparecem e <b>em qual minuto</b> eles alinham (ex.: :00 ou :30).
                <span class="ml-1">Ex.: sábado com passo 60 e offset 30 gera 08:30, 09:30, 10:30…</span>
            </div>

            <TabView>
                <TabPanel v-for="d in diasSemana" :key="d.value" :header="d.label">
                    <div class="grid grid-cols-12 gap-4">
                        <div class="col-span-12 flex items-center gap-3">
                            <ToggleSwitch v-model="model[d.value].ativo" />
                            <div>
                                <div class="text-900 font-medium">Ativo</div>
                                <div class="text-600 text-sm">Se desligado, o online não oferece horários nesse dia.</div>
                            </div>
                        </div>

                        <div class="col-span-12 md:col-span-4">
                            <FloatLabel>
                                <Dropdown v-model="model[d.value].passo_minutos" :options="passos" optionLabel="label" optionValue="value" class="w-full" inputId="passo" />
                                <label for="passo">Passo (min)</label>
                            </FloatLabel>
                        </div>

                        <div class="col-span-12 md:col-span-4">
                            <FloatLabel>
                                <Dropdown v-model="model[d.value].offset_minutos" :options="offsets" optionLabel="label" optionValue="value" class="w-full" inputId="offset" />
                                <label for="offset">Alinhamento</label>
                            </FloatLabel>
                        </div>

                        <div class="col-span-12 md:col-span-4">
                            <FloatLabel>
                                <InputNumber v-model="model[d.value].min_antecedencia_horas" class="w-full" :min="0" :max="720" inputId="ante" />
                                <label for="ante">Antecedência (h)</label>
                            </FloatLabel>
                        </div>

                        <div class="col-span-12 md:col-span-4">
                            <FloatLabel>
                                <InputNumber v-model="model[d.value].buffer_antes_min" class="w-full" :min="0" :max="240" inputId="ba" />
                                <label for="ba">Buffer antes (min)</label>
                            </FloatLabel>
                        </div>

                        <div class="col-span-12 md:col-span-4">
                            <FloatLabel>
                                <InputNumber v-model="model[d.value].buffer_depois_min" class="w-full" :min="0" :max="240" inputId="bd" />
                                <label for="bd">Buffer depois (min)</label>
                            </FloatLabel>
                        </div>

                        <div class="col-span-12 md:col-span-4 flex items-end">
                            <Button class="w-full" label="Salvar este dia" icon="pi pi-check" :loading="saving" @click="salvarDia(d.value)" />
                        </div>
                    </div>
                </TabPanel>
            </TabView>
        </template>
    </Card>
</template>
