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

const auth = useAuthStore()

const navItems = [
    { name: 'painel', label: 'Painel' },
    { name: 'debitos', label: 'Débitos' },
    { name: 'certidoes-portal', label: 'Certidões' },
    { name: 'alvaras', label: 'Alvarás' },
    { name: 'pagamentos', label: 'Pagamentos' },
    { name: 'dados', label: 'Dados Cadastrais' },
]

function sair() {
    auth.clearSession()
    authService.logout()
}
</script>

<template>
    <div class="min-h-screen flex flex-col bg-slate-50">
        <header class="bg-white border-b border-slate-200 sticky top-0 z-40">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
                <RouterLink :to="{ name: 'painel' }" class="flex items-center gap-3">
                    <div class="w-8 h-8 bg-blue-700 rounded-lg flex items-center justify-center">
                        <i class="pi pi-building text-white text-sm" />
                    </div>
                    <span class="font-semibold text-slate-800">Portal do Contribuinte</span>
                </RouterLink>

                <nav class="hidden md:flex items-center gap-1">
                    <RouterLink
                        v-for="item in navItems"
                        :key="item.name"
                        :to="{ name: item.name }"
                        class="px-3 py-2 rounded-lg text-sm text-slate-600 hover:bg-slate-100 hover:text-slate-900 transition-colors"
                        active-class="bg-blue-50 text-blue-700 font-medium"
                    >
                        {{ item.label }}
                    </RouterLink>
                </nav>

                <div class="flex items-center gap-3">
                    <span class="hidden sm:block text-sm text-slate-600">{{ auth.nomeUsuario }}</span>
                    <Button
                        label="Sair"
                        severity="secondary"
                        size="small"
                        icon="pi pi-sign-out"
                        outlined
                        @click="sair"
                    />
                </div>
            </div>
        </header>

        <main class="flex-1 max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-8">
            <RouterView v-slot="{ Component }">
                <Transition name="page" mode="out-in">
                    <component :is="Component" />
                </Transition>
            </RouterView>
        </main>

        <AppFooter />
    </div>
</template>
