<!--
|--------------------------------------------------------------------------
| Agência PSI — Dashboard SaaS: Receita de créditos WhatsApp
|--------------------------------------------------------------------------
| Usado em SaasDashboard pra visualizar receita Asaas de créditos +
| pacotes mais vendidos + consumo global vs vendido + sparkline mensal.
|--------------------------------------------------------------------------
-->
<script setup>
import { ref, computed, onMounted, watch } from 'vue';
import { useSaasCreditsAnalytics } from '@/composables/useSaasCreditsAnalytics';

const api = useSaasCreditsAnalytics();

const period = ref('30d');
const PERIOD_OPTIONS = [
    { label: '30 dias', value: '30d' },
    { label: '90 dias', value: '90d' },
    { label: '6 meses', value: '180d' },
    { label: '12 meses', value: '365d' }
];

async function reload() {
    await api.loadAll({ period: period.value });
}

// Sparkline de receita por bucket
const sparkPoints = computed(() => {
    const buckets = api.evolution.value || [];
    if (buckets.length < 2) return '';
    const values = buckets.map((b) => Number(b.revenue_brl) || 0);
    const max = Math.max(...values);
    const min = Math.min(...values);
    const range = max - min || 1;
    const width = 100;
    const height = 32;
    return buckets
        .map((b, i) => {
            const x = (i / (buckets.length - 1)) * width;
            const normalized = ((Number(b.revenue_brl) || 0) - min) / range;
            const y = height - (normalized * (height - 4)) - 2;
            return `${x.toFixed(2)},${y.toFixed(2)}`;
        })
        .join(' ');
});

const sparkTrend = computed(() => {
    const buckets = api.evolution.value || [];
    if (buckets.length < 2) return null;
    const first = Number(buckets[0].revenue_brl) || 0;
    const last = Number(buckets[buckets.length - 1].revenue_brl) || 0;
    if (first === 0) return null;
    const pct = ((last - first) / first) * 100;
    return { pct: Math.round(pct), up: last > first };
});

onMounted(reload);
watch(period, reload);
</script>

<template>
    <div class="rounded-md border border-[var(--surface-border)] bg-[var(--surface-card)] p-5 flex flex-col gap-4">
        <!-- Header -->
        <div class="flex items-center justify-between gap-3 flex-wrap">
            <div class="flex items-center gap-2">
                <i class="pi pi-whatsapp text-emerald-500 text-lg" />
                <div>
                    <div class="text-[1rem] font-semibold text-[var(--text-color)]">Receita de créditos WhatsApp</div>
                    <div class="text-xs text-[var(--text-color-secondary)]">Asaas · compras pagas no período</div>
                </div>
            </div>
            <div class="flex gap-2 items-center">
                <Select v-model="period" :options="PERIOD_OPTIONS" optionLabel="label" optionValue="value" class="!text-xs" :pt="{ root: { style: 'width: 7.5rem' } }" />
                <Button icon="pi pi-refresh" severity="secondary" outlined size="small" :loading="api.loading.value" @click="reload" />
            </div>
        </div>

        <div v-if="api.loading.value" class="flex justify-center py-8">
            <ProgressSpinner style="width: 36px; height: 36px" />
        </div>

        <template v-else>
            <!-- Sem vendas no período -->
            <div v-if="!api.hasRevenue.value" class="text-center py-6 text-sm text-[var(--text-color-secondary)]">
                <i class="pi pi-inbox text-2xl opacity-40 block mb-2" />
                Nenhuma compra Asaas no período.
            </div>

            <template v-else>
                <!-- KPIs -->
                <div class="grid grid-cols-2 md:grid-cols-4 gap-2">
                    <div class="rounded-md border border-[var(--surface-border)] p-3 flex flex-col">
                        <span class="text-[0.65rem] uppercase tracking-wide text-[var(--text-color-secondary)]">Receita</span>
                        <span class="text-lg font-bold text-emerald-600">{{ api.formatBRL(api.stats.value?.revenue_brl) }}</span>
                        <span class="text-[0.65rem] text-[var(--text-color-secondary)]">ticket médio {{ api.formatBRL(api.stats.value?.avg_ticket_brl) }}</span>
                    </div>
                    <div class="rounded-md border border-[var(--surface-border)] p-3 flex flex-col">
                        <span class="text-[0.65rem] uppercase tracking-wide text-[var(--text-color-secondary)]">Compras</span>
                        <span class="text-lg font-bold">{{ api.stats.value?.purchases_count || 0 }}</span>
                        <span class="text-[0.65rem] text-[var(--text-color-secondary)]">{{ api.stats.value?.tenants_count || 0 }} tenant(s)</span>
                    </div>
                    <div class="rounded-md border border-[var(--surface-border)] p-3 flex flex-col">
                        <span class="text-[0.65rem] uppercase tracking-wide text-[var(--text-color-secondary)]">Créditos vendidos</span>
                        <span class="text-lg font-bold">{{ api.stats.value?.credits_sold || 0 }}</span>
                        <span class="text-[0.65rem] text-[var(--text-color-secondary)]">no período</span>
                    </div>
                    <div class="rounded-md border border-[var(--surface-border)] p-3 flex flex-col">
                        <span class="text-[0.65rem] uppercase tracking-wide text-[var(--text-color-secondary)]">Consumo global</span>
                        <span class="text-lg font-bold">{{ api.usage.value?.usage_rate ?? 0 }}%</span>
                        <span class="text-[0.65rem] text-[var(--text-color-secondary)]">{{ api.usage.value?.lifetime_used || 0 }} / {{ api.usage.value?.lifetime_purchased || 0 }} lifetime</span>
                    </div>
                </div>

                <!-- Sparkline -->
                <div v-if="sparkPoints" class="flex items-center gap-3 border-t border-[var(--surface-border)] pt-3">
                    <svg viewBox="0 0 100 32" preserveAspectRatio="none" class="h-8 flex-1">
                        <polyline
                            :points="sparkPoints"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="1.5"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            :class="sparkTrend?.up ? 'text-emerald-500' : 'text-orange-500'"
                        />
                    </svg>
                    <div v-if="sparkTrend" class="flex flex-col items-end text-[0.7rem] leading-tight">
                        <span :class="sparkTrend.up ? 'text-emerald-600' : 'text-orange-600'" class="font-semibold">
                            {{ sparkTrend.up ? '↑' : '↓' }} {{ Math.abs(sparkTrend.pct) }}%
                        </span>
                        <span class="text-[var(--text-color-secondary)]">
                            vs início do período
                        </span>
                    </div>
                </div>

                <!-- Top pacotes -->
                <div v-if="api.topPackages.value.length > 0" class="border-t border-[var(--surface-border)] pt-3">
                    <div class="text-[0.65rem] uppercase tracking-wide text-[var(--text-color-secondary)] mb-2">Pacotes mais vendidos</div>
                    <div class="flex flex-col gap-1">
                        <div v-for="(p, i) in api.topPackages.value.slice(0, 5)" :key="p.package_id || p.package_name"
                             class="grid grid-cols-[auto_1fr_auto_auto] items-center gap-3 px-2 py-1.5 rounded hover:bg-[var(--surface-hover)] text-xs">
                            <span class="font-mono text-[0.65rem] text-[var(--text-color-secondary)] w-4">{{ i + 1 }}.</span>
                            <span class="font-semibold truncate">{{ p.package_name }}</span>
                            <span class="text-[var(--text-color-secondary)] font-mono whitespace-nowrap">{{ p.purchases_count }}×</span>
                            <span class="font-mono text-emerald-600 whitespace-nowrap">{{ api.formatBRL(p.revenue_brl) }}</span>
                        </div>
                    </div>
                </div>
            </template>
        </template>
    </div>
</template>
