<!--
|--------------------------------------------------------------------------
| Agência PSI
|--------------------------------------------------------------------------
| Criado e desenvolvido por Leonardo Nohama
|
| Tecnologia aplicada à escuta.
| Estrutura para o cuidado.
|
| Arquivo: src/features/agenda/components/cards/AgendaPulseCardGrid.vue
| Data: 2026
| Local: São Carlos/SP — Brasil
|--------------------------------------------------------------------------
| © 2026 — Todos os direitos reservados
|--------------------------------------------------------------------------
-->
<script setup>
import { computed } from 'vue';

const props = defineProps({
    stats: { type: Object, default: () => ({}) }
});

const emit = defineEmits(['quickBlock', 'quickCreate']);

const dados_de_exemplo = {
    totalSessions: 6,
    totalMinutes: 300,
    biggestFreeWindow: '2h 10m',
    pending: 0,
    reschedules: 1,
    attentions: 1,
    suggested1: '14:00',
    suggested2: '16:30',
    nextBreak: '12:00'
};

const s = computed(() => {
    const base = props.stats && Object.keys(props.stats).length ? props.stats : dados_de_exemplo;
    return {
        totalSessions: base.totalSessions ?? 0,
        totalMinutes: base.totalMinutes ?? 0,
        biggestFreeWindow: base.biggestFreeWindow ?? '—',
        pending: base.pending ?? 0,
        reschedules: base.reschedules ?? 0,
        attentions: base.attentions ?? 0,
        suggested1: base.suggested1 ?? '—',
        suggested2: base.suggested2 ?? '—',
        nextBreak: base.nextBreak ?? '—'
    };
});

function minutesToHuman(min) {
    const n = Number(min || 0);
    const h = Math.floor(n / 60);
    const m = n % 60;
    if (h <= 0) return `${m}m`;
    if (m <= 0) return `${h}h`;
    return `${h}h ${m}m`;
}

const totalTimeHuman = computed(() => minutesToHuman(s.value.totalMinutes));

const attentionSeverity = computed(() => {
    if (s.value.attentions >= 3) return 'danger';
    if (s.value.attentions >= 1) return 'warning';
    return 'success';
});
</script>

<template>
    <Card>
        <template #title>
            <div class="flex align-items-center justify-content-between gap-2 flex-wrap">
                <div class="flex flex-column">
                    <span>Pulso da agenda</span>
                    <span class="text-xs" style="color: var(--text-color-secondary)"> Indicadores rápidos para decisão imediata. </span>
                </div>

                <div class="flex align-items-center gap-2">
                    <Tag :severity="attentionSeverity" :value="`Atenções: ${s.attentions}`" />
                </div>
            </div>
        </template>

        <template #content>
            <div class="grid gap-2">
                <!-- Linha 1: métricas -->
                <div class="grid gap-2" style="grid-template-columns: 1fr 1fr">
                    <div class="p-3 border-round-xl" style="border: 1px solid var(--surface-border); background: var(--surface-card)">
                        <div class="text-xs" style="color: var(--text-color-secondary)">Sessões (no filtro)</div>
                        <div class="text-xl font-semibold mt-1">{{ s.totalSessions }}</div>
                    </div>

                    <div class="p-3 border-round-xl" style="border: 1px solid var(--surface-border); background: var(--surface-card)">
                        <div class="text-xs" style="color: var(--text-color-secondary)">Tempo total</div>
                        <div class="text-xl font-semibold mt-1">{{ totalTimeHuman }}</div>
                    </div>
                </div>

                <!-- Linha 2: janelas e atenção -->
                <div class="grid gap-2" style="grid-template-columns: 1fr 1fr">
                    <div class="p-3 border-round-xl" style="border: 1px solid var(--surface-border); background: var(--surface-card)">
                        <div class="text-xs" style="color: var(--text-color-secondary)">Maior janela livre</div>
                        <div class="text-base font-semibold mt-1">{{ s.biggestFreeWindow }}</div>
                        <div class="text-xs mt-2" style="color: var(--text-color-secondary)">
                            Sugestões: <b>{{ s.suggested1 }}</b> e <b>{{ s.suggested2 }}</b>
                        </div>
                    </div>

                    <div class="p-3 border-round-xl" style="border: 1px solid var(--surface-border); background: var(--surface-card)">
                        <div class="text-xs" style="color: var(--text-color-secondary)">Pontos de atenção</div>
                        <div class="flex align-items-center gap-2 mt-2 flex-wrap">
                            <Tag severity="warning" :value="`Pendências: ${s.pending}`" />
                            <Tag severity="info" :value="`Remarcar: ${s.reschedules}`" />
                        </div>
                        <div class="text-xs mt-2" style="color: var(--text-color-secondary)">
                            Próxima pausa: <b>{{ s.nextBreak }}</b>
                        </div>
                    </div>
                </div>

                <Divider class="my-2" />

                <!-- Ações rápidas -->
                <div class="flex align-items-center justify-content-between gap-2 flex-wrap">
                    <div class="text-xs" style="color: var(--text-color-secondary)">Ações rápidas (criação sempre abre modal — nada nasce "direto").</div>

                    <div class="flex align-items-center gap-2">
                        <Button size="small" icon="pi pi-plus" label="Nova sessão" @click="emit('quickCreate')" />
                        <Button size="small" icon="pi pi-lock" severity="secondary" label="Bloquear horário" @click="emit('quickBlock')" />
                    </div>
                </div>
            </div>
        </template>
    </Card>
</template>
