<!--
|--------------------------------------------------------------------------
| Agência PSI
|--------------------------------------------------------------------------
| Arquivo: src/features/agenda/components/InsurancePlanServiceQuickCreateDialog.vue
| Data: 2026-05-18
|
| Mini-dialog pra cadastrar procedimento dentro de um convênio SEM sair
| do AgendaEventDialog. Mesmo pattern do InsurancePlanQuickCreateDialog —
| emite `created` com a row inserida; o parent recarrega os planos e
| (opcionalmente) auto-seleciona o novo procedimento.
|
| Campos:
|   name *     — Ex: "Consulta psicológica", "Avaliação", "Sessão online"
|   value *    — Valor que o convênio paga pra clínica nesse procedimento
|--------------------------------------------------------------------------
-->
<script setup>
import { ref, watch } from 'vue';
import { useToast } from 'primevue/usetoast';
import { supabase } from '@/lib/supabase/client';

import { tenantDb } from '@/lib/supabase/tenantClient';
const props = defineProps({
    modelValue: { type: Boolean, default: false },
    insurancePlanId: { type: String, default: '' },
    insurancePlanName: { type: String, default: '' }
});
const emit = defineEmits(['update:modelValue', 'created']);

const toast = useToast();

const visible = ref(props.modelValue);
watch(() => props.modelValue, (v) => { visible.value = v; });
watch(visible, (v) => emit('update:modelValue', v));

const form = ref({
    name: '',
    value: null
});
const saving = ref(false);

watch(() => props.modelValue, (v) => {
    if (v) {
        form.value = { name: '', value: null };
    }
});

const canSave = () => !!form.value.name?.trim() && form.value.value != null && form.value.value > 0;

async function onSave() {
    if (!canSave()) return;
    if (!props.insurancePlanId) {
        toast.add({ severity: 'error', summary: 'Convênio ausente', detail: 'Selecione um convênio antes de cadastrar procedimento.', life: 3500 });
        return;
    }
    saving.value = true;
    try {
        const payload = {
            insurance_plan_id: props.insurancePlanId,
            name: form.value.name.trim().slice(0, 120),
            value: Number(form.value.value),
            active: true
        };
        const { data, error } = await tenantDb().from('insurance_plan_services').insert(payload).select().single();
        if (error) throw error;
        toast.add({ severity: 'success', summary: 'Procedimento cadastrado', life: 2200 });
        emit('created', data);
        visible.value = false;
    } catch (e) {
        toast.add({ severity: 'error', summary: 'Falha ao criar procedimento', detail: e?.message || 'Erro inesperado', life: 4000 });
    } finally {
        saving.value = false;
    }
}
</script>

<template>
    <Dialog
        v-model:visible="visible"
        modal
        :draggable="false"
        :closable="!saving"
        class="w-[94vw] max-w-md"
    >
        <template #header>
            <div class="flex flex-col">
                <span class="text-base font-semibold">Novo procedimento</span>
                <span v-if="insurancePlanName" class="text-xs text-color-secondary">{{ insurancePlanName }}</span>
            </div>
        </template>

        <div class="flex flex-col gap-3 pt-1">
            <FloatLabel variant="on">
                <InputText id="ips-name" v-model="form.name" class="w-full" autofocus maxlength="120" />
                <label for="ips-name">Nome do procedimento *</label>
            </FloatLabel>

            <FloatLabel variant="on">
                <InputNumber
                    id="ips-value"
                    v-model="form.value"
                    mode="currency"
                    currency="BRL"
                    locale="pt-BR"
                    :min="0"
                    :max="999999"
                    class="w-full"
                />
                <label for="ips-value">Valor que o convênio paga *</label>
            </FloatLabel>

            <p class="text-xs text-color-secondary -mt-1">
                <i class="pi pi-info-circle mr-1" />
                Esse é o valor que a clínica recebe — não o que o paciente paga.
            </p>
        </div>

        <template #footer>
            <Button label="Cancelar" severity="secondary" outlined class="rounded-full" :disabled="saving" @click="visible = false" />
            <Button
                label="Cadastrar"
                icon="pi pi-check"
                :loading="saving"
                :disabled="!canSave()"
                class="rounded-full"
                @click="onSave"
            />
        </template>
    </Dialog>
</template>
