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

const toast = useToast();
const tenantStore = useTenantStore();
const router = useRouter();
const route = useRoute();

// Em /melissa o card vive numa coluna mais estreita — limita os pacotes
// a 2/linha (1 no mobile) e os "Em breve" a 1/linha. /configuracoes mantem o original.
const inMelissa = computed(() => String(route.path || '').startsWith('/melissa'));
const productsGridClass = computed(() => (
    inMelissa.value
        ? 'grid grid-cols-1 md:grid-cols-2 gap-4 mb-4'
        : 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4'
));
const futureGridClass = computed(() => (
    inMelissa.value
        ? 'grid grid-cols-1 gap-4'
        : 'grid grid-cols-1 md:grid-cols-3 gap-4'
));

function goExtrato() {
    router.push(inMelissa.value ? '/melissa/cfg-recursos-extras-extrato' : '/configuracoes/recursos-extras/extrato');
}

// ── Contexto ──────────────────────────────────────────────────
const userId = ref(null);
const tenantId = ref(null);
const loading = ref(true);

// ── Produtos disponíveis ──────────────────────────────────────
const products = ref([]);

// ── Saldos do tenant ──────────────────────────────────────────
const creditsByType = ref({}); // { sms: { balance, total_purchased, ... }, email: { ... } }

// ── Dialog de interesse ───────────────────────────────────────
const interestDialog = ref(false);
const selectedProduct = ref(null);

// ── Helpers ───────────────────────────────────────────────────
function formatPrice(cents) {
    if (!cents) return 'Grátis';
    return (cents / 100).toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
}

function pricePerUnit(product) {
    if (!product.credits_amount || !product.price_cents) return '';
    const per = product.price_cents / product.credits_amount / 100;
    return `R$ ${per.toFixed(2)} / crédito`;
}

function getBalance(addonType) {
    return creditsByType.value[addonType]?.balance ?? 0;
}

function typeIcon(type) {
    const map = { sms: 'pi pi-comment', email: 'pi pi-envelope', server: 'pi pi-server', domain: 'pi pi-globe' };
    return map[type] || 'pi pi-box';
}

function typeLabel(type) {
    const map = { sms: 'SMS', email: 'E-mail', server: 'Servidor', domain: 'Domínio' };
    return map[type] || type;
}

// ── Load ──────────────────────────────────────────────────────
async function loadUser() {
    const {
        data: { user }
    } = await supabase.auth.getUser();
    if (!user) return;
    userId.value = user.id;
    tenantId.value = tenantStore.activeTenantId || user.id;
}

async function loadProducts() {
    const { data } = await supabase.from('addon_products').select('*').eq('is_active', true).eq('is_visible', true).is('deleted_at', null).order('addon_type').order('sort_order');

    if (data) products.value = data;
}

async function loadCredits() {
    if (!tenantId.value) return;

    const { data } = await supabase.from('addon_credits').select('addon_type, balance, total_purchased, total_consumed, expires_at').eq('tenant_id', tenantId.value).eq('is_active', true);

    if (data) {
        const map = {};
        for (const c of data) map[c.addon_type] = c;
        creditsByType.value = map;
    }
}

// ── Interesse ─────────────────────────────────────────────────
function openInterest(product) {
    selectedProduct.value = product;
    interestDialog.value = true;
}

function confirmInterest() {
    toast.add({
        severity: 'success',
        summary: 'Interesse registrado!',
        detail: `Entre em contato com o suporte para adquirir "${selectedProduct.value?.name}". Em breve teremos compra online!`,
        life: 6000
    });
    interestDialog.value = false;
}

// ── Produtos agrupados por tipo ───────────────────────────────
const productsByType = computed(() => {
    const map = {};
    for (const p of products.value) {
        if (!map[p.addon_type]) map[p.addon_type] = [];
        map[p.addon_type].push(p);
    }
    return map;
});

// ── Recursos futuros (estáticos) ──────────────────────────────
const futureAddons = [
    { type: 'server', name: 'Servidor Dedicado', desc: 'Infraestrutura exclusiva para sua clínica.', icon: 'pi pi-server' },
    { type: 'email', name: 'E-mail Avançado', desc: 'Domínio personalizado e caixa de e-mail profissional.', icon: 'pi pi-envelope' },
    { type: 'domain', name: 'Domínio Personalizado', desc: 'Acesse a plataforma pelo domínio da sua clínica.', icon: 'pi pi-globe' }
];

// ── Init ──────────────────────────────────────────────────────
onMounted(async () => {
    await loadUser();
    await Promise.all([loadProducts(), loadCredits()]);
    loading.value = false;
});
</script>

<template>
    <div class="flex flex-col gap-5">
        <!-- Header -->
        <Card>
            <template #title>
                <div class="flex items-center justify-between gap-2">
                    <div class="flex items-center gap-2">
                        <i class="pi pi-box text-xl" />
                        Recursos Extras
                    </div>
                    <Button label="Ver extrato" icon="pi pi-list" severity="secondary" outlined size="small" @click="goExtrato" />
                </div>
            </template>
            <template #subtitle>Amplie as funcionalidades da sua clínica com recursos adicionais.</template>
        </Card>

        <!-- Loading -->
        <div v-if="loading" class="flex items-center justify-center py-8 text-surface-500"><i class="pi pi-spin pi-spinner mr-2" /> Carregando recursos...</div>

        <template v-else>
            <!-- Produtos por tipo -->
            <div v-for="(items, type) in productsByType" :key="type">
                <h3 class="text-lg font-semibold mb-3 flex items-center gap-2">
                    <i :class="typeIcon(type)" />
                    {{ typeLabel(type) }}
                    <Tag v-if="getBalance(type) > 0" :value="`Saldo: ${getBalance(type)}`" severity="success" class="ml-2" />
                    <Tag v-else value="Sem créditos" severity="secondary" class="ml-2" />
                </h3>

                <div :class="productsGridClass">
                    <Card v-for="product in items" :key="product.id" class="shadow-sm hover:shadow-md transition-shadow">
                        <template #title>
                            <div class="flex items-center gap-2 text-base">
                                <i :class="product.icon || typeIcon(product.addon_type)" />
                                {{ product.name }}
                            </div>
                        </template>
                        <template #content>
                            <p class="text-sm text-surface-500 mb-3">{{ product.description }}</p>

                            <div class="flex flex-col gap-1 mb-4">
                                <span class="text-2xl font-bold text-primary">{{ formatPrice(product.price_cents) }}</span>
                                <span v-if="product.credits_amount" class="text-xs text-surface-400"> {{ product.credits_amount }} créditos · {{ pricePerUnit(product) }} </span>
                            </div>

                            <Button label="Tenho interesse" icon="pi pi-shopping-cart" size="small" class="w-full" @click="openInterest(product)" />
                        </template>
                    </Card>
                </div>
            </div>

            <!-- Sem produtos -->
            <Message v-if="!products.length" severity="info" :closable="false"> Nenhum recurso extra disponível no momento. </Message>

            <!-- Recursos futuros (Em breve) -->
            <h3 class="text-lg font-semibold mt-4 mb-3 flex items-center gap-2">
                <i class="pi pi-sparkles" />
                Em breve
            </h3>

            <div :class="futureGridClass">
                <Card v-for="addon in futureAddons" :key="addon.type" class="opacity-60">
                    <template #title>
                        <div class="flex items-center gap-2 text-base">
                            <i :class="addon.icon" />
                            {{ addon.name }}
                            <Tag value="Em breve" severity="secondary" class="ml-auto" />
                        </div>
                    </template>
                    <template #content>
                        <p class="text-sm text-surface-500">{{ addon.desc }}</p>
                    </template>
                </Card>
            </div>
        </template>

        <!-- Dialog de interesse -->
        <Dialog
            v-model:visible="interestDialog"
            modal
            :draggable="false"
            :closable="true"
            :dismissableMask="true"
            maximizable
            class="dc-dialog w-[36rem]"
            :breakpoints="{ '1199px': '90vw', '768px': '94vw' }"
            :pt="{
                header: { class: '!p-3 !rounded-t-[12px] border-b border-[var(--surface-border)] bg-[var(--surface-ground)]' },
                content: { class: '!p-3' },
                footer: { class: '!p-0 !rounded-b-[12px] border-t border-[var(--surface-border)] bg-[var(--surface-ground)]' },
                pcCloseButton: { root: { class: '!rounded-md hover:!text-red-500' } },
                pcMaximizeButton: { root: { class: '!rounded-md hover:!text-primary' } }
            }"
            pt:mask:class="backdrop-blur-xs"
        >
            <template #header>
                <div class="flex w-full items-center justify-between gap-3 px-1">
                    <div class="flex items-center gap-3 min-w-0">
                        <div class="min-w-0">
                            <div class="text-base font-semibold truncate">Adquirir recurso</div>
                            <div class="text-xs opacity-50">Registre seu interesse neste recurso</div>
                        </div>
                    </div>
                </div>
            </template>

            <div v-if="selectedProduct" class="flex flex-col gap-3">
                <p>
                    Você deseja adquirir <strong>{{ selectedProduct.name }}</strong
                    >?
                </p>
                <p class="text-2xl font-bold text-primary">{{ formatPrice(selectedProduct.price_cents) }}</p>
                <Message severity="info" :closable="false" class="text-sm"> A compra online estará disponível em breve. Por enquanto, entre em contato com o suporte ou administrador para ativar seus créditos. </Message>
            </div>

            <template #footer>
                <div class="flex items-center justify-end gap-2 px-3 py-3">
                    <Button label="Cancelar" severity="secondary" text class="rounded-full hover:!text-red-500" @click="interestDialog = false" />
                    <Button label="Registrar interesse" icon="pi pi-check" class="rounded-full" @click="confirmInterest" />
                </div>
            </template>
        </Dialog>
    </div>
</template>
