<script setup>
import { ref, computed, watch, nextTick } from 'vue'
import { usePrefeituraStore } from '@/stores/prefeituraStore'
import { useAuth } from '@/composables/useAuth'
import { useFocusLoginInput } from '@/composables/useFocusLoginInput'
import { useMotion } from '@/composables/useMotion'

import bgTutoia from '@/assets/images/bg-tutoia.jpeg'

const { prefersReducedMotion } = useMotion()

const router = useRouter()
const prefeitura = usePrefeituraStore()
const { isAuthenticated, nomeUsuario, login } = useAuth()
const { requested: focusLoginRequested, consume: consumeFocusLogin } = useFocusLoginInput()

const documento = ref('')
const erro = ref('')
const carregando = ref(false)

// Ref ao DocumentoInput — usado pelo botão "Entrar" do AppHeader pra focar o campo
const documentoRef = ref(null)

// Quando o AppHeader sinaliza intenção de login (clique no botão Entrar),
// foca o campo + scroll suave pra ele.
watch(focusLoginRequested, async (v) => {
    if (!v || isAuthenticated.value) {
        if (v) consumeFocusLogin()
        return
    }
    await nextTick()
    const el = documentoRef.value?.$el ?? documentoRef.value
    el?.scrollIntoView?.({ behavior: 'smooth', block: 'center' })
    documentoRef.value?.focus?.()
    consumeFocusLogin()
}, { immediate: true })

const heroBgMap = {
    tutoia: bgTutoia,
}

const heroBgUrl = computed(() => heroBgMap[prefeitura.template] ?? null)

const heroBgStyle = computed(() => {
    const url = heroBgUrl.value
    if (!url) return {}
    return {
        backgroundImage: `linear-gradient(to bottom right, rgba(15,23,42,0.70), rgba(15,23,42,0.50)), url(${url})`,
        backgroundSize: 'cover',
        backgroundPosition: 'center',
    }
})

const heroHasPhoto = computed(() => !!heroBgUrl.value)

// Dados mockados — conectar ao endpoint /publico/avisos/{dominio} futuramente
const avisos = ref([
    {
        id: 1,
        tipo: 'prazo',
        icone: 'pi-calendar',
        titulo: 'IPTU 2025 — Parcela única com desconto',
        descricao: 'Pague até 31/07 e ganhe 10% de desconto. Emita seu boleto agora mesmo.',
        cor: 'amber',
        acao: { label: 'Emitir boleto', to: '/servicos/iptu' },
    },
    {
        id: 2,
        tipo: 'novidade',
        icone: 'pi-star',
        titulo: 'Novo serviço: Certidão Online Instantânea',
        descricao: 'Emita certidões negativas em segundos, sem sair de casa e com validade legal.',
        cor: 'green',
        acao: { label: 'Emitir agora', to: '/servicos/certidao' },
    },
    {
        id: 3,
        tipo: 'info',
        icone: 'pi-info-circle',
        titulo: 'Atualização cadastral obrigatória',
        descricao: 'Contribuintes com dados desatualizados devem regularizar até 30/08 para evitar multas.',
        cor: 'blue',
        acao: null,
    },
])

const corAviso = {
    amber: { bg: 'bg-amber-50 dark:bg-amber-900/20', borda: 'border-amber-200 dark:border-amber-700/40', icone: 'text-amber-600 dark:text-amber-400', tag: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300' },
    green: { bg: 'bg-emerald-50 dark:bg-emerald-900/20', borda: 'border-emerald-200 dark:border-emerald-700/40', icone: 'text-emerald-600 dark:text-emerald-400', tag: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300' },
    blue:  { bg: 'bg-blue-50 dark:bg-blue-900/20',   borda: 'border-blue-200 dark:border-blue-700/40',   icone: 'text-blue-600 dark:text-blue-400',   tag: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300' },
}

const servicosPublicos = [
    { icon: 'pi-file-check', titulo: 'Emissão de Certidão', descricao: 'Certidão negativa, positiva e situação fiscal.', to: '/servicos/certidao' },
    { icon: 'pi-home', titulo: 'IPTU — Débitos e Carnê', descricao: 'Consulte débitos e imprima o carnê de pagamento.', to: '/servicos/iptu' },
    { icon: 'pi-verified', titulo: 'Validar Documento', descricao: 'Verifique a autenticidade de certidões emitidas.', to: '/servicos' },
]

const servicosAutenticados = [
    { icon: 'pi-receipt',     titulo: 'Débitos e Guias',    descricao: 'Emita guias de pagamento de todos os seus tributos.',        to: '/portal/debitos' },
    { icon: 'pi-file-edit',   titulo: 'Certidões Ativas',   descricao: 'Acesse e reemita certidões emitidas anteriormente.',         to: '/portal/certidoes' },
    { icon: 'pi-briefcase',   titulo: 'Alvarás',            descricao: 'Acompanhe processos e solicite novos alvarás.',              to: '/portal/alvaras' },
    { icon: 'pi-credit-card', titulo: 'Pagamentos',         descricao: 'Histórico completo com comprovantes para download.',         to: '/portal/pagamentos' },
    { icon: 'pi-user',        titulo: 'Dados Cadastrais',   descricao: 'Visualize e mantenha seus dados sempre atualizados.',        to: '/portal/dados' },
]

async function continuar() {
    const doc = documento.value.replace(/\D/g, '')
    if (doc.length < 11) {
        erro.value = 'Informe um CPF (11 dígitos) ou CNPJ (14 dígitos) válido.'
        return
    }
    erro.value = ''
    carregando.value = true
    try {
        await login(doc, '/portal/painel')
        // login() faz window.location → não retorna aqui em condições normais
    } catch (e) {
        carregando.value = false
        erro.value = e?.data?.statusMessage ?? 'Não foi possível iniciar o login.'
    }
}
</script>

<template>
    <div>

        <!-- ─── HERO ─────────────────────────────────────────────────────── -->
        <section
            class="text-white relative overflow-hidden"
            :class="heroHasPhoto ? '' : 'bg-gradient-to-br from-slate-900 via-primary-900 to-slate-800'"
            :style="heroBgStyle"
        >
            <div
                v-if="!heroHasPhoto"
                class="absolute inset-0 opacity-5 pointer-events-none"
                style="background-image: radial-gradient(circle at 25px 25px, white 2px, transparent 0); background-size: 50px 50px;"
            />

            <div
                v-if="heroHasPhoto"
                class="absolute inset-0 pointer-events-none"
                style="background: linear-gradient(to right, rgba(15,23,42,0.88) 0%, rgba(15,23,42,0.65) 55%, rgba(15,23,42,0.15) 100%);"
            />

            <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-14 lg:py-20">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">

                    <div>
                        <div class="flex items-center gap-3 mb-6">
                            <img
                                v-if="prefeitura.pathLogo"
                                :src="prefeitura.pathLogo"
                                alt="Logo"
                                class="h-12 w-auto object-contain drop-shadow-md"
                            />
                            <div
                                v-else
                                class="w-12 h-12 bg-white/15 backdrop-blur-sm rounded-xl flex items-center justify-center"
                            >
                                <i class="pi pi-building text-white text-xl" />
                            </div>
                            <div>
                                <p class="text-white/60 text-xs uppercase tracking-widest font-medium">Portal do Contribuinte</p>
                                <p class="text-white font-bold text-lg leading-tight">
                                    {{ prefeitura.nomePrefeitura || 'Prefeitura Municipal' }}
                                </p>
                            </div>
                        </div>

                        <h1 class="text-3xl lg:text-[2.6rem] font-bold leading-tight mb-4 tracking-tight">
                            Serviços municipais<br />
                            <span class="text-white/80">na palma da mão</span>
                        </h1>
                        <p class="text-white/80 text-base mb-8 leading-relaxed max-w-md">
                            Emita certidões, consulte débitos e acesse todos os serviços
                            da prefeitura sem precisar sair de casa.
                        </p>

                        <ul class="space-y-2 mb-8">
                            <li
                                v-for="s in servicosPublicos"
                                :key="s.titulo"
                                class="flex items-center gap-3 group cursor-pointer rounded-xl border border-white/10 px-3 py-2.5 hover:border-primary/70 transition-colors"
                                @click="router.push(s.to)"
                            >
                                <i :class="['pi', s.icon, 'text-white/70 text-sm flex-shrink-0 group-hover:text-primary transition-colors']" />
                                <div class="flex-1 min-w-0">
                                    <p class="text-sm font-semibold text-white leading-tight">{{ s.titulo }}</p>
                                    <p class="text-xs text-white/60 mt-0.5 truncate">{{ s.descricao }}</p>
                                </div>
                                <i class="pi pi-chevron-right text-white/30 text-xs flex-shrink-0 group-hover:text-primary/70 transition-colors" />
                            </li>
                        </ul>

                        <NuxtLink
                            to="/servicos"
                            class="inline-flex items-center gap-2 text-sm text-white/80 hover:text-white transition-colors font-medium"
                        >
                            Ver todos os serviços disponíveis
                            <i class="pi pi-arrow-right text-xs" />
                        </NuxtLink>
                    </div>

                    <div class="flex justify-center lg:justify-end">
                        <!-- ── Card de saudação (usuário autenticado) ── -->
                        <div v-if="isAuthenticated" class="bg-white dark:bg-slate-800 rounded-2xl shadow-2xl p-8 w-full max-w-sm backdrop-blur-sm">
                            <div class="flex items-center gap-3 mb-6">
                                <div class="w-11 h-11 bg-primary rounded-xl flex items-center justify-center shadow-sm">
                                    <i class="pi pi-user text-white text-lg" />
                                </div>
                                <div class="min-w-0">
                                    <p class="text-xs text-slate-500 dark:text-slate-400">Bem-vindo(a) de volta</p>
                                    <p class="font-bold text-slate-800 dark:text-slate-100 text-base truncate">{{ nomeUsuario || 'Contribuinte' }}</p>
                                </div>
                            </div>

                            <p class="text-sm text-slate-600 dark:text-slate-300 mb-6 leading-relaxed">
                                Você já está autenticado. Acesse seu painel para emitir guias,
                                consultar débitos e gerenciar seus serviços.
                            </p>

                            <NuxtLink to="/portal/painel" class="block">
                                <Button
                                    label="Ir para o painel"
                                    icon="pi pi-arrow-right"
                                    icon-pos="right"
                                    class="w-full"
                                    size="large"
                                />
                            </NuxtLink>
                        </div>

                        <!-- ── Card de acesso (visitante) ── -->
                        <div v-else class="bg-white dark:bg-slate-800 rounded-2xl shadow-2xl p-8 w-full max-w-sm backdrop-blur-sm">

                            <div class="flex items-center gap-3 mb-7">
                                <div class="w-11 h-11 bg-primary rounded-xl flex items-center justify-center shadow-sm">
                                    <i class="pi pi-lock-open text-white text-lg" />
                                </div>
                                <div>
                                    <p class="font-bold text-slate-800 dark:text-slate-100 text-base">Área do Contribuinte</p>
                                    <p class="text-xs text-slate-500 dark:text-slate-400">Acesso seguro ao portal</p>
                                </div>
                            </div>

                            <div class="space-y-4">
                                <div>
                                    <label class="block text-sm font-medium text-slate-700 dark:text-slate-200 mb-1.5">
                                        CPF ou CNPJ
                                    </label>
                                    <DocumentoInput
                                        ref="documentoRef"
                                        v-model="documento"
                                        @keyup.enter="continuar"
                                    />
                                    <p v-if="erro" class="mt-1.5 text-xs text-red-600 flex items-center gap-1">
                                        <i class="pi pi-exclamation-circle text-xs" />
                                        {{ erro }}
                                    </p>
                                </div>

                                <Button
                                    label="Continuar"
                                    icon="pi pi-arrow-right"
                                    icon-pos="right"
                                    class="w-full"
                                    size="large"
                                    :loading="carregando"
                                    @click="continuar"
                                />
                            </div>

                            <Divider>
                                <span class="text-xs text-slate-400 font-normal">Primeiro acesso?</span>
                            </Divider>

                            <div class="space-y-2.5 text-center">
                                <NuxtLink
                                    to="/primeiro-acesso"
                                    class="flex items-center justify-center gap-2 w-full px-4 py-2.5 rounded-lg border border-slate-200 dark:border-slate-600 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700 hover:border-slate-300 dark:hover:border-slate-500 transition-colors font-medium"
                                >
                                    <i class="pi pi-key text-slate-500 dark:text-slate-400 text-sm" />
                                    Criar minha senha
                                </NuxtLink>
                                <NuxtLink
                                    to="/credenciamento"
                                    class="block text-xs text-slate-400 dark:text-slate-500 hover:text-slate-600 dark:hover:text-slate-300 transition-colors"
                                >
                                    Ainda não cadastrado? <span class="text-primary font-semibold">Credenciar-se</span>
                                </NuxtLink>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </section>

        <!-- ─── CAROUSEL DE AVISOS ────────────────────────────────────────── -->
        <section class="bg-white dark:bg-slate-900 border-b border-slate-100 dark:border-slate-800" aria-label="Avisos e comunicados">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
                <Carousel
                    :value="avisos"
                    :num-visible="1"
                    :num-scroll="1"
                    :autoplay-interval="prefersReducedMotion ? 0 : 6000"
                    circular
                    class="aviso-carousel"
                    aria-label="Avisos da prefeitura"
                >
                    <template #item="{ data: aviso }">
                        <div
                            :class="[
                                'mx-2 rounded-xl border p-4 flex items-start gap-4',
                                corAviso[aviso.cor].bg,
                                corAviso[aviso.cor].borda,
                            ]"
                        >
                            <div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 bg-white shadow-sm">
                                <i :class="['pi', aviso.icone, 'text-lg', corAviso[aviso.cor].icone]" />
                            </div>
                            <div class="flex-1 min-w-0">
                                <p class="font-semibold text-slate-800 dark:text-slate-100 text-sm">{{ aviso.titulo }}</p>
                                <p class="text-xs text-slate-600 dark:text-slate-300 mt-0.5 leading-relaxed">{{ aviso.descricao }}</p>
                                <NuxtLink
                                    v-if="aviso.acao"
                                    :to="aviso.acao.to"
                                    class="inline-block mt-3"
                                >
                                    <Button
                                        :label="aviso.acao.label"
                                        size="small"
                                        outlined
                                        class="whitespace-nowrap"
                                    />
                                </NuxtLink>
                            </div>
                        </div>
                    </template>
                </Carousel>
            </div>
        </section>

        <!-- ─── SERVIÇOS AUTENTICADOS ─────────────────────────────────────── -->
        <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12" aria-labelledby="servicos-logados-titulo">
            <div class="flex items-center justify-between mb-6">
                <div>
                    <h2 id="servicos-logados-titulo" class="text-xl font-bold text-slate-800 dark:text-slate-100">Área logada</h2>
                    <p class="text-sm text-slate-600 dark:text-slate-400 mt-0.5">Serviços disponíveis após login</p>
                </div>
                <span class="hidden sm:flex items-center gap-1.5 bg-primary/8 text-primary text-xs font-semibold px-3 py-1.5 rounded-full border border-primary/15">
                    <i class="pi pi-lock text-xs" />
                    Requer login
                </span>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
                <ServiceCard
                    v-for="s in servicosAutenticados"
                    :key="s.titulo"
                    v-bind="s"
                    :requires-auth="true"
                />
            </div>

            <div class="mt-10 bg-gradient-to-r from-primary/5 to-primary/10 dark:from-primary/10 dark:to-primary/15 border border-primary/15 dark:border-primary/20 rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-5">
                <div>
                    <p class="font-bold text-slate-800 dark:text-slate-100 text-base">Ainda não tem acesso ao portal?</p>
                    <p class="text-sm text-slate-500 dark:text-slate-400 mt-1 max-w-md">
                        Solicite seu credenciamento e passe a gerenciar todos os seus tributos municipais de forma online.
                    </p>
                </div>
                <NuxtLink to="/credenciamento">
                    <Button label="Solicitar Credenciamento" icon="pi pi-user-plus" class="whitespace-nowrap" />
                </NuxtLink>
            </div>
        </section>

    </div>
</template>

<style scoped>
.aviso-carousel :deep(.p-carousel-prev),
.aviso-carousel :deep(.p-carousel-next) {
    width: 1.75rem;
    height: 1.75rem;
}
</style>
