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

defineProps({
    action: { type: String, default: 'Carregando...' },
    containerClass: { type: String, default: 'py-24' }
});

const motivation = ref(null);

onMounted(async () => {
    try {
        const res = await fetch('/loading-phrases.json');
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        const json = await res.json();
        const list = json.motivations || [];
        motivation.value = list.length ? list[Math.floor(Math.random() * list.length)] : 'Carregando...';
    } catch (e) {
        console.warn('[AppLoadingPhrases] fetch falhou:', e);
        motivation.value = 'Carregando...';
    }
});
</script>

<template>
    <Transition name="fade-up" appear>
        <div class="flex flex-col items-center justify-center gap-6" :class="containerClass">
            <!-- Motivação -->
            <div class="flex flex-col items-center gap-2 text-center px-6">
                <span class="text-base font-semibold text-[var(--text-color,#1e293b)] leading-snug max-w-[320px]">
                    {{ motivation || '...' }}
                </span>
                <span class="text-sm text-[var(--text-color-secondary,#64748b)]">
                    {{ action }}
                </span>
            </div>

            <!-- Progress bar -->
            <div class="w-[220px] h-[3px] rounded-full bg-[var(--surface-border,#e2e8f0)] overflow-hidden">
                <div class="progress-bar h-full rounded-full bg-[var(--primary-color,#6366f1)]" />
            </div>
        </div>
    </Transition>
</template>

<style scoped>
/* Entrada do componente inteiro */
.fade-up-enter-active {
    transition:
        opacity 0.45s ease,
        transform 0.45s ease;
}
.fade-up-enter-from {
    opacity: 0;
    transform: translateY(16px);
}

/* Progress bar — vai de 0% a 85% em ~2.5s, para não "completar" antes do loading acabar */
.progress-bar {
    animation: progress-indeterminate 1.6s ease-in-out infinite;
    transform-origin: left;
}
@keyframes progress-indeterminate {
    0% {
        margin-left: 0%;
        width: 0%;
    }
    30% {
        margin-left: 0%;
        width: 60%;
    }
    70% {
        margin-left: 40%;
        width: 60%;
    }
    100% {
        margin-left: 100%;
        width: 0%;
    }
}
</style>
