<!--
|--------------------------------------------------------------------------
| Agência PSI
|--------------------------------------------------------------------------
| Criado e desenvolvido por Leonardo Nohama
|
| Tecnologia aplicada à escuta.
| Estrutura para o cuidado.
|
| Arquivo: src/layout/configuracoes/ConfiguracoesConveniosPage.vue
| Data: 2026
| Local: São Carlos/SP — Brasil
|--------------------------------------------------------------------------
| © 2026 — Todos os direitos reservados
|--------------------------------------------------------------------------
-->
<script setup>
import { ref, onMounted } from 'vue';
import { supabase } from '@/lib/supabase/client';
import { useTenantStore } from '@/stores/tenantStore';
import { useToast } from 'primevue/usetoast';
import { useInsurancePlans } from '@/features/agenda/composables/useInsurancePlans';
import { useServices } from '@/features/agenda/composables/useServices';

const toast = useToast();
const tenantStore = useTenantStore();

const { plans, loading, error: plansError, load, save, toggle, remove, savePlanService, togglePlanService, removePlanService, removeDefinitivo } = useInsurancePlans();

const { services, load: loadServices } = useServices();

const ownerId = ref(null);
const tenantId = ref(null);
const pageLoading = ref(true);

// ── Formulário novo plano ─────────────────────────────────────────────
const emptyForm = () => ({ name: '', notes: '' });
const newForm = ref(emptyForm());
const addingNew = ref(false);
const savingNew = ref(false);

// ── Edição inline do plano ────────────────────────────────────────────
const editingId = ref(null);
const editForm = ref({});
const savingEdit = ref(false);

// ── Expansão de planos ────────────────────────────────────────────────
const expandedPlanId = ref(null);

function togglePanel(planId) {
    if (expandedPlanId.value === planId) {
        expandedPlanId.value = null;
        addingServicePlanId.value = null;
    } else {
        expandedPlanId.value = planId;
        addingServicePlanId.value = null;
    }
}

// ── Procedimentos ─────────────────────────────────────────────────────
const addingServicePlanId = ref(null);
const newServiceForm = ref({ name: '', value: null });
const savingService = ref(false);
const editingServiceId = ref(null);
const editServiceForm = ref({});
const savingServiceEdit = ref(false);

function startAddService(planId) {
    addingServicePlanId.value = planId;
    newServiceForm.value = { name: '', value: null };
}

function cancelAddService() {
    addingServicePlanId.value = null;
    newServiceForm.value = { name: '', value: null };
}

function fillFromService(svc) {
    newServiceForm.value.name = svc.name;
    newServiceForm.value.value = Number(svc.price);
}

async function saveService(planId) {
    if (!newServiceForm.value.name?.trim() || newServiceForm.value.value == null) {
        toast.add({ severity: 'warn', summary: 'Campos obrigatórios', detail: 'Nome e valor são obrigatórios.', life: 3000 });
        return;
    }
    savingService.value = true;
    try {
        await savePlanService({
            insurance_plan_id: planId,
            name: newServiceForm.value.name.trim(),
            value: newServiceForm.value.value
        });
        await load(ownerId.value);
        cancelAddService();
        toast.add({ severity: 'success', summary: 'Adicionado', detail: 'Procedimento adicionado.', life: 3000 });
    } catch (e) {
        toast.add({ severity: 'error', summary: 'Erro', detail: e?.message || 'Falha ao salvar.', life: 4000 });
    } finally {
        savingService.value = false;
    }
}

function startEditService(ps) {
    editingServiceId.value = ps.id;
    editServiceForm.value = { id: ps.id, name: ps.name, value: Number(ps.value) };
}

function cancelEditService() {
    editingServiceId.value = null;
    editServiceForm.value = {};
}

async function saveServiceEdit() {
    if (!editServiceForm.value.name?.trim() || editServiceForm.value.value == null) {
        toast.add({ severity: 'warn', summary: 'Campos obrigatórios', detail: 'Nome e valor são obrigatórios.', life: 3000 });
        return;
    }
    savingServiceEdit.value = true;
    try {
        await savePlanService({
            id: editServiceForm.value.id,
            name: editServiceForm.value.name.trim(),
            value: editServiceForm.value.value
        });
        await load(ownerId.value);
        cancelEditService();
        toast.add({ severity: 'success', summary: 'Salvo', detail: 'Procedimento atualizado.', life: 3000 });
    } catch (e) {
        toast.add({ severity: 'error', summary: 'Erro', detail: e?.message || 'Falha ao salvar.', life: 4000 });
    } finally {
        savingServiceEdit.value = false;
    }
}

async function onToggleService(ps) {
    try {
        await togglePlanService(ps.id, !ps.active);
        await load(ownerId.value);
        toast.add({ severity: 'success', summary: ps.active ? 'Desativado' : 'Ativado', detail: `Procedimento ${ps.active ? 'desativado' : 'ativado'}.`, life: 3000 });
    } catch (e) {
        toast.add({ severity: 'error', summary: 'Erro', detail: e?.message || 'Falha ao atualizar.', life: 4000 });
    }
}

async function deleteService(id) {
    try {
        await removePlanService(id);
        await load(ownerId.value);
        toast.add({ severity: 'success', summary: 'Removido', detail: 'Procedimento removido.', life: 3000 });
    } catch (e) {
        toast.add({ severity: 'error', summary: 'Erro', detail: e?.message || 'Falha ao remover.', life: 4000 });
    }
}

// ── Edit helpers plano ────────────────────────────────────────────────
function startEdit(plan) {
    editingId.value = plan.id;
    editForm.value = { id: plan.id, name: plan.name, notes: plan.notes ?? '' };
}

function cancelEdit() {
    editingId.value = null;
    editForm.value = {};
}

async function saveEdit() {
    if (!editForm.value.name?.trim()) {
        toast.add({ severity: 'warn', summary: 'Campo obrigatório', detail: 'Nome é obrigatório.', life: 3000 });
        return;
    }
    savingEdit.value = true;
    try {
        await save({ ...editForm.value, name: editForm.value.name.trim(), notes: editForm.value.notes?.trim() || null });
        await load(ownerId.value);
        cancelEdit();
        toast.add({ severity: 'success', summary: 'Salvo', detail: 'Convênio atualizado.', life: 3000 });
    } catch (e) {
        toast.add({ severity: 'error', summary: 'Erro', detail: e?.message || 'Falha ao salvar.', life: 4000 });
    } finally {
        savingEdit.value = false;
    }
}

async function saveNew() {
    if (!newForm.value.name?.trim()) {
        toast.add({ severity: 'warn', summary: 'Campo obrigatório', detail: 'Nome é obrigatório.', life: 3000 });
        return;
    }
    savingNew.value = true;
    try {
        await save({ owner_id: ownerId.value, tenant_id: tenantId.value, name: newForm.value.name.trim(), notes: newForm.value.notes?.trim() || null });
        await load(ownerId.value);
        newForm.value = emptyForm();
        addingNew.value = false;
        toast.add({ severity: 'success', summary: 'Adicionado', detail: 'Convênio criado.', life: 3000 });
    } catch (e) {
        toast.add({ severity: 'error', summary: 'Erro', detail: e?.message || 'Falha ao criar.', life: 4000 });
    } finally {
        savingNew.value = false;
    }
}

async function togglePlan(plan) {
    try {
        await toggle(plan.id, !plan.active);
        toast.add({ severity: 'success', summary: plan.active ? 'Desativado' : 'Ativado', detail: `Convênio ${plan.active ? 'desativado' : 'ativado'}.`, life: 3000 });
    } catch (e) {
        toast.add({ severity: 'error', summary: 'Erro', detail: e?.message || 'Falha ao atualizar.', life: 4000 });
    }
}

async function removePlan(id) {
    try {
        await removeDefinitivo(id);
        if (expandedPlanId.value === id) expandedPlanId.value = null;
        toast.add({ severity: 'success', summary: 'Removido', detail: 'Convênio removido.', life: 3000 });
    } catch (e) {
        toast.add({ severity: 'error', summary: 'Erro', detail: e?.message || 'Falha ao remover.', life: 4000 });
    }
}

function fmtBRL(v) {
    if (v == null || v === '') return '—';
    return Number(v).toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
}

function totalProcedimentos(plan) {
    return plan.insurance_plan_services?.length || 0;
}

// ── Mount ─────────────────────────────────────────────────────────────
onMounted(async () => {
    try {
        const uid = tenantStore.user?.id || (await supabase.auth.getUser()).data?.user?.id;
        if (!uid) return;
        ownerId.value = uid;
        tenantId.value = tenantStore.activeTenantId || null;
        await Promise.all([load(uid), loadServices(uid)]);
    } catch (e) {
        toast.add({ severity: 'error', summary: 'Erro', detail: e?.message || 'Falha ao carregar.', life: 4000 });
    } finally {
        pageLoading.value = false;
    }
});
</script>

<template>
    <div class="flex flex-col gap-3">
        <!-- ══ SKELETON ══════════════════════════════════════════════ -->
        <template v-if="pageLoading || loading">
            <div class="cfg-wrap">
                <div class="cfg-wrap__head">
                    <Skeleton width="1.75rem" height="1.75rem" border-radius="6px" />
                    <Skeleton width="9rem" height="12px" />
                </div>
                <div v-for="n in 3" :key="n" class="flex items-center gap-3 px-4 py-3 border-b border-[var(--surface-border)] last:border-b-0">
                    <Skeleton width="1.75rem" height="1.75rem" border-radius="6px" />
                    <div class="flex flex-col gap-2 flex-1">
                        <Skeleton :width="n === 1 ? '12rem' : n === 2 ? '9rem' : '11rem'" height="11px" />
                        <Skeleton width="5rem" height="10px" />
                    </div>
                    <Skeleton width="3rem" height="1.4rem" border-radius="999px" />
                </div>
            </div>
            <AppLoadingPhrases action="Carregando convênios..." containerClass="py-6" />
        </template>

        <template v-else>
            <!-- Toolbar topo: botão "+ Novo convênio". Só aparece quando
                 não está no modo de cadastro inline (senão fica visualmente
                 confuso ter botão + form abertos juntos). -->
            <div v-if="!addingNew" class="flex items-center justify-end gap-2">
                <Button
                    label="Novo convênio"
                    icon="pi pi-plus"
                    size="small"
                    class="rounded-full"
                    @click="addingNew = true"
                />
            </div>

            <!-- Form novo convênio -->
            <div v-if="addingNew" class="cfg-wrap">
                <div class="cfg-wrap__head">
                    <div class="cfg-wrap__icon"><i class="pi pi-plus" /></div>
                    <span class="cfg-wrap__title">Novo convênio</span>
                </div>
                <div class="cfg-wrap__body">
                    <div class="grid grid-cols-12 gap-3">
                        <div class="col-span-12 sm:col-span-6">
                            <FloatLabel variant="on">
                                <InputText v-model="newForm.name" inputId="new-name" class="w-full" />
                                <label for="new-name">Nome *</label>
                            </FloatLabel>
                        </div>
                        <div class="col-span-12 sm:col-span-6">
                            <FloatLabel variant="on">
                                <InputText v-model="newForm.notes" inputId="new-notes" class="w-full" />
                                <label for="new-notes">Observações (opcional)</label>
                            </FloatLabel>
                        </div>
                    </div>
                    <div class="flex gap-2 justify-end mt-3">
                        <Button
                            label="Cancelar"
                            severity="secondary"
                            outlined
                            class="rounded-full"
                            @click="
                                addingNew = false;
                                newForm = emptyForm();
                            "
                        />
                        <Button label="Salvar" icon="pi pi-check" class="rounded-full" :loading="savingNew" @click="saveNew" />
                    </div>
                </div>
            </div>

            <!-- Lista vazia -->
            <div v-if="!plans.length && !addingNew" class="cfg-empty">
                <i class="pi pi-id-card text-3xl opacity-25" />
                <div class="text-sm font-medium">Nenhum convênio cadastrado</div>
                <div class="text-xs opacity-70">Use o botão <b>Novo convênio</b> acima pra começar.</div>
            </div>

            <!-- Lista de convênios -->
            <div v-for="plan in plans" :key="plan.id" class="cfg-wrap" :class="{ 'opacity-60': !plan.active }">
                <!-- Modo edição do plano -->
                <template v-if="editingId === plan.id">
                    <div class="cfg-wrap__body">
                        <div class="grid grid-cols-12 gap-3">
                            <div class="col-span-12 sm:col-span-6">
                                <FloatLabel variant="on">
                                    <InputText v-model="editForm.name" :inputId="`edit-name-${plan.id}`" class="w-full" />
                                    <label :for="`edit-name-${plan.id}`">Nome *</label>
                                </FloatLabel>
                            </div>
                            <div class="col-span-12 sm:col-span-6">
                                <FloatLabel variant="on">
                                    <InputText v-model="editForm.notes" :inputId="`edit-notes-${plan.id}`" class="w-full" />
                                    <label :for="`edit-notes-${plan.id}`">Observações (opcional)</label>
                                </FloatLabel>
                            </div>
                        </div>
                        <div class="flex gap-2 justify-end mt-3">
                            <Button label="Cancelar" severity="secondary" outlined class="rounded-full" @click="cancelEdit" />
                            <Button label="Salvar" icon="pi pi-check" class="rounded-full" :loading="savingEdit" @click="saveEdit" />
                        </div>
                    </div>
                </template>

                <!-- Modo leitura -->
                <template v-else>
                    <!-- Cabeçalho do plano -->
                    <div class="cnv-plan-head">
                        <div class="flex items-center gap-2.5 min-w-0 flex-1">
                            <div class="cfg-wrap__icon shrink-0"><i class="pi pi-id-card" /></div>
                            <div class="min-w-0">
                                <div class="font-semibold text-sm">{{ plan.name }}</div>
                                <div v-if="plan.notes" class="text-xs text-[var(--text-color-secondary)] opacity-70 truncate">{{ plan.notes }}</div>
                            </div>
                        </div>
                        <div class="flex items-center gap-1.5 shrink-0 flex-wrap">
                            <Tag :value="plan.active ? 'Ativo' : 'Inativo'" :severity="plan.active ? 'success' : 'secondary'" />
                            <Button
                                :label="`Procedimentos (${totalProcedimentos(plan)})`"
                                :icon="expandedPlanId === plan.id ? 'pi pi-chevron-up' : 'pi pi-chevron-down'"
                                severity="secondary"
                                outlined
                                size="small"
                                class="rounded-full"
                                @click="togglePanel(plan.id)"
                            />
                            <Button :icon="plan.active ? 'pi pi-eye-slash' : 'pi pi-eye'" :severity="plan.active ? 'secondary' : 'success'" outlined size="small" v-tooltip.top="plan.active ? 'Desativar' : 'Ativar'" @click="togglePlan(plan)" />
                            <Button icon="pi pi-pencil" severity="secondary" outlined size="small" v-tooltip.top="'Editar'" @click="startEdit(plan)" />
                            <Button icon="pi pi-trash" severity="danger" outlined size="small" v-tooltip.top="'Remover'" @click="removePlan(plan.id)" />
                        </div>
                    </div>

                    <!-- Painel procedimentos expandível -->
                    <div v-if="expandedPlanId === plan.id" class="cnv-procedures">
                        <!-- Lista de procedimentos -->
                        <div v-if="plan.insurance_plan_services?.length" class="cnv-proc-list">
                            <template v-for="ps in plan.insurance_plan_services" :key="ps.id">
                                <!-- Edição inline do procedimento -->
                                <div v-if="editingServiceId === ps.id" class="cnv-proc-edit">
                                    <div class="grid grid-cols-12 gap-2 flex-1">
                                        <div class="col-span-12 sm:col-span-6">
                                            <label class="cnv-label">Nome</label>
                                            <InputText v-model="editServiceForm.name" class="w-full" size="small" />
                                        </div>
                                        <div class="col-span-12 sm:col-span-6">
                                            <label class="cnv-label">Valor (R$)</label>
                                            <InputNumber v-model="editServiceForm.value" mode="currency" currency="BRL" locale="pt-BR" :min="0" :minFractionDigits="2" class="w-full" size="small" />
                                        </div>
                                    </div>
                                    <div class="flex gap-2 justify-end mt-2">
                                        <Button label="Cancelar" severity="secondary" outlined size="small" class="rounded-full" @click="cancelEditService" />
                                        <Button label="Salvar" icon="pi pi-check" size="small" class="rounded-full" :loading="savingServiceEdit" @click="saveServiceEdit" />
                                    </div>
                                </div>

                                <!-- Leitura do procedimento -->
                                <div v-else class="cnv-proc-row" :class="{ 'opacity-50': !ps.active }">
                                    <div class="flex items-center gap-2 min-w-0 flex-1">
                                        <Tag v-if="!ps.active" value="Inativo" severity="secondary" class="text-xs shrink-0" />
                                        <span class="text-sm font-medium truncate">{{ ps.name }}</span>
                                    </div>
                                    <div class="flex items-center gap-2 shrink-0">
                                        <span class="text-sm font-semibold text-[var(--primary-color)]">{{ fmtBRL(ps.value) }}</span>
                                        <Button :icon="ps.active ? 'pi pi-eye-slash' : 'pi pi-eye'" :severity="ps.active ? 'secondary' : 'success'" text size="small" v-tooltip.top="ps.active ? 'Desativar' : 'Ativar'" @click="onToggleService(ps)" />
                                        <Button icon="pi pi-pencil" severity="secondary" text size="small" v-tooltip.top="'Editar'" @click="startEditService(ps)" />
                                        <Button icon="pi pi-trash" severity="danger" text size="small" v-tooltip.top="'Remover'" @click="deleteService(ps.id)" />
                                    </div>
                                </div>
                            </template>
                        </div>
                        <div v-else-if="addingServicePlanId !== plan.id" class="text-sm text-[var(--text-color-secondary)] italic px-1 py-2">Nenhum procedimento cadastrado.</div>

                        <!-- Form adicionar procedimento -->
                        <div v-if="addingServicePlanId === plan.id" class="cnv-proc-form">
                            <!-- Quick-fill dos serviços -->
                            <div v-if="services.filter((s) => s.active).length" class="mb-3">
                                <div class="cnv-label mb-1.5">Clique num serviço para pré-preencher:</div>
                                <div class="grid grid-cols-2 sm:grid-cols-3 gap-1.5">
                                    <button v-for="svc in services.filter((s) => s.active)" :key="svc.id" class="svc-quick-card" @click="fillFromService(svc)">
                                        <span class="svc-quick-name">{{ svc.name }}</span>
                                        <span class="svc-quick-price">{{ fmtBRL(svc.price) }}</span>
                                    </button>
                                </div>
                            </div>

                            <!-- Campos nome + valor -->
                            <div class="grid grid-cols-12 gap-2">
                                <div class="col-span-12 sm:col-span-7">
                                    <label class="cnv-label">Nome do procedimento *</label>
                                    <InputText v-model="newServiceForm.name" placeholder="Ex: Consulta" class="w-full" size="small" />
                                </div>
                                <div class="col-span-12 sm:col-span-5">
                                    <label class="cnv-label">Valor (R$) *</label>
                                    <InputNumber v-model="newServiceForm.value" mode="currency" currency="BRL" locale="pt-BR" :min="0" :minFractionDigits="2" class="w-full" size="small" />
                                </div>
                            </div>
                            <!-- Botões em linha separada -->
                            <div class="flex gap-2 justify-end mt-2">
                                <Button label="Cancelar" severity="secondary" outlined size="small" class="rounded-full" @click="cancelAddService" />
                                <Button label="Adicionar" icon="pi pi-check" size="small" class="rounded-full" :loading="savingService" @click="saveService(plan.id)" />
                            </div>
                        </div>

                        <Button v-if="addingServicePlanId !== plan.id" label="Adicionar procedimento" icon="pi pi-plus" severity="secondary" outlined size="small" class="mt-2 rounded-full" @click="startAddService(plan.id)" />
                    </div>
                </template>
            </div>

            <Message severity="info" :closable="false">
                <span class="text-sm"> Os procedimentos ativos ficam disponíveis para seleção ao registrar uma sessão com convênio na agenda. </span>
            </Message>

            <LoadedPhraseBlock />
        </template>
    </div>
</template>

<style scoped>
/* ── Card wrap ────────────────────────────────────── */
.cfg-wrap {
    border: 1px solid var(--surface-border);
    border-radius: 6px;
    background: var(--surface-card);
    overflow: hidden;
}
.cfg-wrap__head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--surface-border);
    background: var(--surface-ground);
}
.cfg-wrap__icon {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 6px;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--primary-color, #6366f1) 12%, transparent);
    color: var(--primary-color, #6366f1);
    font-size: 0.8rem;
}
.cfg-wrap__title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-color);
}
.cfg-wrap__body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ── Empty state ──────────────────────────────────── */
.cfg-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--text-color-secondary);
    border: 1px dashed var(--surface-border);
    border-radius: 6px;
    background: var(--surface-ground);
}

/* ── Cabeçalho do plano ───────────────────────────── */
.cnv-plan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    flex-wrap: wrap;
}

/* ── Painel procedimentos ─────────────────────────── */
.cnv-procedures {
    border-top: 1px solid var(--surface-border);
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background: var(--surface-ground);
}
.cnv-proc-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--surface-border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--surface-card);
    margin-bottom: 0.5rem;
}
.cnv-proc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--surface-border);
    transition: background 0.1s;
}
.cnv-proc-row:last-child {
    border-bottom: none;
}
.cnv-proc-row:hover {
    background: var(--surface-hover);
}

.cnv-proc-edit {
    padding: 0.75rem;
    border-bottom: 1px solid var(--surface-border);
    background: color-mix(in srgb, var(--primary-color, #6366f1) 3%, var(--surface-card));
}
.cnv-proc-edit:last-child {
    border-bottom: none;
}

/* ── Form adicionar procedimento ──────────────────── */
.cnv-proc-form {
    border: 1px solid var(--surface-border);
    border-radius: 6px;
    background: var(--surface-card);
    padding: 0.75rem;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

/* ── Labels ───────────────────────────────────────── */
.cnv-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-color-secondary);
    margin-bottom: 0.25rem;
}

/* ── Quick-fill serviços ──────────────────────────── */
.svc-quick-card {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.375rem 0.625rem;
    border-radius: 6px;
    border: 1px solid var(--surface-border);
    background: var(--surface-ground);
    text-align: left;
    cursor: pointer;
    transition:
        border-color 0.12s,
        background 0.12s;
}
.svc-quick-card:hover {
    border-color: var(--primary-color, #6366f1);
    background: color-mix(in srgb, var(--primary-color, #6366f1) 5%, transparent);
}
.svc-quick-name {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-color);
}
.svc-quick-price {
    font-size: 0.68rem;
    color: var(--text-color-secondary);
}
</style>
