<script setup>
import { useAuthStore } from '@/stores/authStore'

const auth = useAuthStore()

const cards = [
    { icon: 'pi-receipt', label: 'Débitos em Aberto', valor: '—', cor: 'red' },
    { icon: 'pi-file-check', label: 'Certidões Ativas', valor: '—', cor: 'green' },
    { icon: 'pi-briefcase', label: 'Alvarás em Andamento', valor: '—', cor: 'orange' },
    { icon: 'pi-credit-card', label: 'Último Pagamento', valor: '—', cor: 'blue' },
]

const corMap = {
    red: 'bg-red-50 text-red-700',
    green: 'bg-green-50 text-green-700',
    orange: 'bg-orange-50 text-orange-700',
    blue: 'bg-blue-50 text-blue-700',
}
</script>

<template>
    <div class="space-y-8">
        <div>
            <h1 class="text-2xl font-bold text-slate-800">
                Olá, {{ auth.nomeUsuario || 'Contribuinte' }}
            </h1>
            <p class="text-slate-500 mt-1">Bem-vindo ao seu painel de gestão fiscal.</p>
        </div>

        <!-- Cards resumo -->
        <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
            <div
                v-for="card in cards"
                :key="card.label"
                class="bg-white rounded-xl border border-slate-200 p-5 space-y-3"
            >
                <div :class="['w-10 h-10 rounded-lg flex items-center justify-center', corMap[card.cor]]">
                    <i :class="['pi', card.icon]" />
                </div>
                <div>
                    <p class="text-2xl font-bold text-slate-800">{{ card.valor }}</p>
                    <p class="text-xs text-slate-500 mt-0.5">{{ card.label }}</p>
                </div>
            </div>
        </div>

        <!-- Placeholder conteúdo -->
        <div class="bg-blue-50 border border-blue-100 rounded-xl p-6 text-center">
            <i class="pi pi-info-circle text-blue-500 text-2xl mb-3 block" />
            <p class="text-sm text-slate-600">
                Os dados do painel serão carregados quando a integração com a API estiver configurada.
            </p>
        </div>
    </div>
</template>
