<!--
|--------------------------------------------------------------------------
| Agência PSI — Card de analytics: Tempo médio de 1ª resposta WhatsApp
|--------------------------------------------------------------------------
| Usado em ClinicDashboard (global do tenant) e TherapistDashboard
| (filtrado por user.id). 3 métricas + sparkline de evolução.
|--------------------------------------------------------------------------
-->
<script setup>
import { ref, computed, onMounted, watch } from 'vue';
import { useFirstResponseAnalytics } from '@/composables/useFirstResponseAnalytics';

const props = defineProps({
    therapistId: { type: String, default: null },       // se passar, filtra por user_id
    showRanking: { type: Boolean, default: true }       // desliga ranking (usado no therapist dashboard)
});

const api = useFirstResponseAnalytics();

const period = ref('30d');

const PERIOD_OPTIONS = [
    { label: '7 dias', value: '7d' },
    { label: '30 dias', value: '30d' },
    { label: '90 dias', value: '90d' }
];

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

// Sparkline: pega avg_seconds por bucket, normaliza pra 0..1
const sparkPoints = computed(() => {
    const buckets = api.evolution.value || [];
    if (buckets.length < 2) return '';
    const values = buckets.map((b) => Number(b.avg_seconds) || 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.avg_seconds) || 0) - min) / range;
            // Inverte Y (SVG cresce pra baixo) e deixa margem
            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].avg_seconds) || 0;
    const last = Number(buckets[buckets.length - 1].avg_seconds) || 0;
    if (first === 0) return null;
    const pct = ((last - first) / first) * 100;
    return { pct: Math.round(pct), improving: last < first };
});

// Formata SLA %: se null/undefined → "—"
const slaComplianceLabel = computed(() => {
    const rate = api.stats.value?.sla_compliance_rate;
    if (rate === null || rate === undefined) return '—';
    return `${rate}%`;
});

const slaComplianceColor = computed(() => {
    const rate = Number(api.stats.value?.sla_compliance_rate);
    if (!rate && rate !== 0) return 'text-[var(--text-color-secondary)]';
    if (rate >= 80) return 'text-emerald-600';
    if (rate >= 50) return 'text-amber-600';
    return 'text-red-600';
});

onMounted(reload);
watch(() => [period.value, props.therapistId], reload);
</script>

<template>
    <div class="dash-card rounded-md overflow-hidden">
        <div class="dash-card__head gap-2.5 p-3 flex items-center">
            <div class="grid place-items-center w-10 h-10 rounded-md shrink-0 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">
                <i class="pi pi-stopwatch text-lg" />
            </div>
            <div class="flex-1 min-w-0">
                <div class="dash-card__title">Tempo de 1ª resposta</div>
                <div class="dash-card__sub">{{ therapistId ? 'Suas respostas no WhatsApp' : 'Respostas da clínica no WhatsApp' }}</div>
            </div>
            <Select v-model="period" :options="PERIOD_OPTIONS" optionLabel="label" optionValue="value" class="!text-xs" :pt="{ root: { style: 'width: 7rem' } }" />
        </div>

        <div class="p-3 flex flex-col gap-3">
            <!-- Loading state -->
            <div v-if="api.loading.value" class="flex justify-center py-6">
                <ProgressSpinner style="width: 32px; height: 32px" />
            </div>

            <!-- Sem dados -->
            <div v-else-if="!api.hasData.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" />
                Sem respostas registradas no período.
            </div>

            <!-- Métricas -->
            <template v-else>
                <div class="grid grid-cols-3 gap-2">
                    <div class="rounded-md border border-[var(--surface-border)] p-2.5 flex flex-col">
                        <span class="text-[0.65rem] uppercase tracking-wide text-[var(--text-color-secondary)]">Média</span>
                        <span class="text-lg font-bold">{{ api.formatSeconds(api.stats.value?.avg_seconds) }}</span>
                        <span class="text-[0.65rem] text-[var(--text-color-secondary)]">mediana {{ api.formatSeconds(api.stats.value?.median_seconds) }}</span>
                    </div>
                    <div class="rounded-md border border-[var(--surface-border)] p-2.5 flex flex-col">
                        <span class="text-[0.65rem] uppercase tracking-wide text-[var(--text-color-secondary)]">SLA cumprido</span>
                        <span class="text-lg font-bold" :class="slaComplianceColor">{{ slaComplianceLabel }}</span>
                        <span class="text-[0.65rem] text-[var(--text-color-secondary)]">
                            <template v-if="api.stats.value?.sla_threshold_seconds">
                                ≤ {{ Math.round(api.stats.value.sla_threshold_seconds / 60) }}min
                            </template>
                            <template v-else>SLA desativado</template>
                        </span>
                    </div>
                    <div class="rounded-md border border-[var(--surface-border)] p-2.5 flex flex-col">
                        <span class="text-[0.65rem] uppercase tracking-wide text-[var(--text-color-secondary)]">Respostas</span>
                        <span class="text-lg font-bold">{{ api.stats.value?.runs_count }}</span>
                        <span class="text-[0.65rem] text-[var(--text-color-secondary)]">no período</span>
                    </div>
                </div>

                <!-- Sparkline -->
                <div v-if="sparkPoints" class="flex items-center gap-3 border-t border-[var(--surface-border)] pt-2">
                    <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?.improving ? '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.improving ? 'text-emerald-600' : 'text-orange-600'" class="font-semibold">
                            {{ sparkTrend.improving ? '↓' : '↑' }} {{ Math.abs(sparkTrend.pct) }}%
                        </span>
                        <span class="text-[var(--text-color-secondary)]">
                            {{ sparkTrend.improving ? 'melhorando' : 'piorando' }}
                        </span>
                    </div>
                </div>

                <!-- Ranking (só clínica) -->
                <div v-if="showRanking && api.ranking.value.length > 0" class="border-t border-[var(--surface-border)] pt-2">
                    <div class="text-[0.65rem] uppercase tracking-wide text-[var(--text-color-secondary)] mb-1.5">Ranking terapeutas</div>
                    <div class="flex flex-col gap-1">
                        <div v-for="(t, i) in api.ranking.value.slice(0, 5)" :key="t.therapist_id"
                             class="flex items-center justify-between text-xs py-1 px-1.5 rounded hover:bg-[var(--surface-hover)]">
                            <span class="flex items-center gap-2 min-w-0 flex-1">
                                <span class="font-mono text-[0.65rem] text-[var(--text-color-secondary)] w-4">{{ i + 1 }}.</span>
                                <span class="font-mono text-[0.68rem] truncate">{{ t.therapist_id.slice(0, 8) }}…</span>
                            </span>
                            <span class="flex items-center gap-2 text-[var(--text-color-secondary)]">
                                <span>{{ t.runs_count }}</span>
                                <span class="font-mono">{{ api.formatSeconds(t.avg_seconds) }}</span>
                            </span>
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </div>
</template>
