<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { usePrefeituraStore } from '@/stores/prefeituraStore'
import DocumentoInput from '@/components/auth/DocumentoInput.vue'
import ServiceCard from '@/components/common/ServiceCard.vue'

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

const router = useRouter()
const prefeitura = usePrefeituraStore()

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

// ─── Hero background ─────────────────────────────────────────────────────────
// Mapa template → imagem estática (Vite resolve na build).
// Para adicionar novo município: importar a foto e adicionar a chave abaixo.
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)

// ─── Avisos (carousel) ──────────────────────────────────────────────────────
// Dados mockados — conectar ao endpoint /api/v1/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: { name: '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: { name: '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', borda: 'border-amber-200', icone: 'text-amber-600', tag: 'bg-amber-100 text-amber-700' },
    green: { bg: 'bg-emerald-50', borda: 'border-emerald-200', icone: 'text-emerald-600', tag: 'bg-emerald-100 text-emerald-700' },
    blue:  { bg: 'bg-blue-50',   borda: 'border-blue-200',   icone: 'text-blue-600',   tag: 'bg-blue-100 text-blue-700' },
}

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

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

function continuar() {
    if (documento.value.replace(/\D/g, '').length < 11) {
        erro.value = 'Informe um CPF (11 dígitos) ou CNPJ (14 dígitos) válido.'
        return
    }
    erro.value = ''
    router.push({ name: 'login', query: { doc: documento.value } })
}
</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"
        >
            <!-- Padrão geométrico sutil (visível só sem foto) -->
            <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;"
            />

            <!-- Gradiente lateral esquerdo — garante legibilidade dos textos
                 independente do conteúdo da foto de fundo -->
            <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">

                    <!-- Esquerda -->
                    <div>
                        <!-- Identidade do município -->
                        <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/65 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>

                        <!-- Lista de serviços públicos -->
                        <ul class="space-y-3 mb-8">
                            <li
                                v-for="s in servicosPublicos"
                                :key="s.titulo"
                                class="flex items-center gap-3 group cursor-pointer"
                                @click="router.push(s.to)"
                            >
                                <div class="w-9 h-9 bg-white/10 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:bg-white/20 transition-colors">
                                    <i :class="['pi', s.icon, 'text-white text-sm']" />
                                </div>
                                <div>
                                    <p class="text-sm font-semibold text-white group-hover:text-white/80 transition-colors">{{ s.titulo }}</p>
                                    <p class="text-xs text-white/50">{{ s.descricao }}</p>
                                </div>
                                <i class="pi pi-chevron-right text-white/30 text-xs ml-auto opacity-0 group-hover:opacity-100 transition-opacity" />
                            </li>
                        </ul>

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

                    <!-- Direita — Card de acesso -->
                    <div class="flex justify-center lg:justify-end">
                        <div class="bg-white rounded-2xl shadow-2xl p-8 w-full max-w-sm backdrop-blur-sm">

                            <!-- Cabeçalho do card -->
                            <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 text-base">Área do Contribuinte</p>
                                    <p class="text-xs text-slate-500">Acesso seguro ao portal</p>
                                </div>
                            </div>

                            <!-- Formulário -->
                            <div class="space-y-4">
                                <div>
                                    <label class="block text-sm font-medium text-slate-700 mb-1.5">
                                        CPF ou CNPJ
                                    </label>
                                    <DocumentoInput
                                        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"
                                    @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">
                                <RouterLink
                                    :to="{ name: 'primeiro-acesso' }"
                                    class="flex items-center justify-center gap-2 w-full px-4 py-2.5 rounded-lg border border-slate-200 text-sm text-slate-700 hover:bg-slate-50 hover:border-slate-300 transition-colors font-medium"
                                >
                                    <i class="pi pi-key text-slate-500 text-sm" />
                                    Criar minha senha
                                </RouterLink>
                                <RouterLink
                                    :to="{ name: 'credenciamento' }"
                                    class="block text-xs text-slate-400 hover:text-slate-600 transition-colors"
                                >
                                    Ainda não cadastrado? <span class="text-primary font-semibold">Credenciar-se</span>
                                </RouterLink>
                            </div>

                        </div>
                    </div>

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

        <!-- ─── CAROUSEL DE AVISOS ────────────────────────────────────────── -->
        <section class="bg-white border-b border-slate-100">
            <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="6000"
                    circular
                    class="aviso-carousel"
                >
                    <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">
                                <div class="flex items-start justify-between gap-4">
                                    <div>
                                        <p class="font-semibold text-slate-800 text-sm">{{ aviso.titulo }}</p>
                                        <p class="text-xs text-slate-600 mt-0.5 leading-relaxed">{{ aviso.descricao }}</p>
                                    </div>
                                    <RouterLink
                                        v-if="aviso.acao"
                                        :to="aviso.acao.to"
                                        class="flex-shrink-0"
                                    >
                                        <Button
                                            :label="aviso.acao.label"
                                            size="small"
                                            outlined
                                            class="whitespace-nowrap"
                                        />
                                    </RouterLink>
                                </div>
                            </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">
            <div class="flex items-center justify-between mb-6">
                <div>
                    <h2 class="text-xl font-bold text-slate-800">Área logada</h2>
                    <p class="text-sm text-slate-500 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"
                    :require-auth="true"
                />
            </div>

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

    </div>
</template>

<style scoped>
/* Remove as setas de navegação padrão do Carousel no contexto dos avisos */
.aviso-carousel :deep(.p-carousel-prev),
.aviso-carousel :deep(.p-carousel-next) {
    width: 1.75rem;
    height: 1.75rem;
}
</style>
