<script setup>
import { ref, computed, watch } from 'vue'
import { credenciamentoService } from '@/services/credenciamentoService'

const router = useRouter()

const etapa = ref(0)
const carregando = ref(false)
const erro = ref('')

const form = ref({
    documento: '',
    tipoPessoa: '',
    nomeCompleto: '',
    nomeFantasia: '',
    dataNascimento: '',
    inscricaoEstadual: '',
    cep: '',
    logradouro: '',
    numero: '',
    complemento: '',
    bairro: '',
    cidade: '',
    uf: '',
    email: '',
    emailConfirm: '',
    telefone: '',
    whatsapp: false,
    representanteNome: '',
    representanteCpf: '',
    representanteCargo: '',
})

const docDigitos = computed(() => form.value.documento.replace(/\D/g, ''))
const isPJ = computed(() => form.value.tipoPessoa === 'JURIDICA')

const totalEtapas = computed(() => isPJ.value ? 6 : 5)

const etapaLabels = computed(() => {
    const base = ['Documento', 'Dados', 'Endereço', 'Contato']
    if (isPJ.value) base.push('Representante')
    base.push('Revisão')
    return base
})

const emailsIguais = computed(() => form.value.email === form.value.emailConfirm)
const emailValido = computed(() => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.value.email))

async function verificarDocumento() {
    const d = docDigitos.value
    if (d.length !== 11 && d.length !== 14) return
    carregando.value = true
    erro.value = ''
    try {
        const res = await credenciamentoService.verificarDocumento(d)
        if (res.data.situacao === 'JA_CREDENCIADO') {
            erro.value = 'Este documento já possui cadastro. Use "Esqueci minha senha" se precisar recuperar o acesso.'
            return
        }
        form.value.tipoPessoa = d.length === 14 ? 'JURIDICA' : 'FISICA'
        etapa.value = 1
    } catch (e) {
        erro.value = e?.data?.description ?? 'Não foi possível verificar o documento. Tente novamente.'
    } finally {
        carregando.value = false
    }
}

const buscandoCep = ref(false)
async function buscarCep() {
    const cep = form.value.cep.replace(/\D/g, '')
    if (cep.length !== 8) return
    buscandoCep.value = true
    try {
        const res = await credenciamentoService.buscarCep(cep)
        const end = res.data
        form.value.logradouro = end.logradouro ?? ''
        form.value.bairro = end.bairro ?? ''
        form.value.cidade = end.localidade ?? ''
        form.value.uf = end.uf ?? ''
    } catch {
        // silencioso — usuário preenche manualmente
    } finally {
        buscandoCep.value = false
    }
}

watch(() => form.value.cep, (v) => {
    if (v.replace(/\D/g, '').length === 8) buscarCep()
})

function avancar() {
    erro.value = ''
    etapa.value++
}

function voltar() {
    erro.value = ''
    etapa.value--
}

async function solicitar() {
    carregando.value = true
    erro.value = ''
    try {
        await credenciamentoService.solicitar({
            documento: docDigitos.value,
            tipoPessoa: form.value.tipoPessoa,
            nomeCompleto: form.value.nomeCompleto,
            nomeFantasia: form.value.nomeFantasia || undefined,
            dataNascimento: form.value.dataNascimento || undefined,
            inscricaoEstadual: form.value.inscricaoEstadual || undefined,
            endereco: {
                cep: form.value.cep.replace(/\D/g, ''),
                logradouro: form.value.logradouro,
                numero: form.value.numero,
                complemento: form.value.complemento || undefined,
                bairro: form.value.bairro,
                cidade: form.value.cidade,
                uf: form.value.uf,
            },
            contato: {
                email: form.value.email,
                telefone: form.value.telefone.replace(/\D/g, ''),
                whatsapp: form.value.whatsapp,
            },
            representante: isPJ.value ? {
                nome: form.value.representanteNome,
                cpf: form.value.representanteCpf.replace(/\D/g, ''),
                cargo: form.value.representanteCargo,
            } : undefined,
        })
        etapa.value = totalEtapas.value
    } catch (e) {
        erro.value = e?.data?.description ?? 'Erro ao enviar solicitação. Tente novamente.'
    } finally {
        carregando.value = false
    }
}

function formatarTelefone(e) {
    const d = e.target.value.replace(/\D/g, '').slice(0, 11)
    form.value.telefone = d
        .replace(/(\d{2})(\d)/, '($1) $2')
        .replace(/(\d{5})(\d{1,4})$/, '$1-$2')
}

function formatarCep(e) {
    const d = e.target.value.replace(/\D/g, '').slice(0, 8)
    form.value.cep = d.replace(/(\d{5})(\d{1,3})/, '$1-$2')
}

const estados = ['AC','AL','AP','AM','BA','CE','DF','ES','GO','MA','MT','MS','MG','PA','PB','PR','PE','PI','RJ','RN','RS','RO','RR','SC','SP','SE','TO']
</script>

<template>
    <div class="min-h-[calc(100vh-8rem)] flex items-center justify-center px-4 py-12">
        <div class="w-full max-w-lg">

            <div v-if="etapa < totalEtapas" class="mb-8">
                <div class="flex items-center justify-between mb-2">
                    <p class="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide">
                        Passo {{ etapa + 1 }} de {{ totalEtapas }}
                    </p>
                    <p class="text-xs text-slate-500 dark:text-slate-400">{{ etapaLabels[etapa] }}</p>
                </div>
                <div class="h-1.5 bg-slate-200 dark:bg-slate-700 rounded-full overflow-hidden">
                    <div
                        class="h-full bg-primary rounded-full transition-all duration-300"
                        :style="{ width: `${((etapa + 1) / totalEtapas) * 100}%` }"
                    />
                </div>
            </div>

            <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-lg border border-slate-200 dark:border-slate-700 overflow-hidden">

                <div class="bg-gradient-to-r from-primary to-primary-700 px-8 py-6">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center" aria-hidden="true">
                            <i class="pi pi-user-plus text-white text-lg" />
                        </div>
                        <div>
                            <h1 class="text-white font-bold text-base">Credenciamento</h1>
                            <p class="text-white/80 text-xs mt-0.5">
                                {{ etapa < totalEtapas ? etapaLabels[etapa] : 'Solicitação enviada!' }}
                            </p>
                        </div>
                    </div>
                </div>

                <div class="px-8 py-8 space-y-5">

                    <template v-if="etapa === 0">
                        <p class="text-sm text-slate-600 dark:text-slate-300">
                            Informe seu CPF (pessoa física) ou CNPJ (empresa) para iniciar o credenciamento.
                        </p>
                        <div>
                            <label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-1.5">CPF ou CNPJ</label>
                            <DocumentoInput v-model="form.documento" @keyup.enter="verificarDocumento" />
                        </div>
                        <p v-if="erro" role="alert" class="text-sm text-red-600 dark:text-red-400 flex items-center gap-1.5">
                            <i class="pi pi-exclamation-circle" aria-hidden="true" /> {{ erro }}
                        </p>
                        <Button
                            label="Verificar documento"
                            icon="pi pi-arrow-right" icon-pos="right"
                            class="w-full" size="large"
                            :loading="carregando"
                            :disabled="docDigitos.length !== 11 && docDigitos.length !== 14"
                            @click="verificarDocumento"
                        />
                        <p class="text-center text-sm text-slate-500 dark:text-slate-400">
                            Já tem cadastro?
                            <NuxtLink to="/" class="text-primary font-semibold hover:underline">Entrar</NuxtLink>
                        </p>
                    </template>

                    <template v-else-if="etapa === 1">
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-1.5">
                                    {{ isPJ ? 'Razão Social' : 'Nome completo' }}
                                </label>
                                <InputText v-model="form.nomeCompleto" :placeholder="isPJ ? 'Nome da empresa conforme CNPJ' : 'Seu nome completo'" class="w-full" size="large" />
                            </div>
                            <div v-if="isPJ">
                                <label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-1.5">Nome fantasia <span class="font-normal text-slate-400">(opcional)</span></label>
                                <InputText v-model="form.nomeFantasia" placeholder="Nome fantasia" class="w-full" size="large" />
                            </div>
                            <div v-if="!isPJ">
                                <label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-1.5">Data de nascimento</label>
                                <DatePicker v-model="form.dataNascimento" date-format="dd/mm/yy" placeholder="DD/MM/AAAA" class="w-full" size="large" show-icon />
                            </div>
                            <div v-if="isPJ">
                                <label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-1.5">Inscrição estadual <span class="font-normal text-slate-400">(opcional)</span></label>
                                <InputText v-model="form.inscricaoEstadual" placeholder="IE ou ISENTO" class="w-full" size="large" />
                            </div>
                        </div>
                        <div class="flex gap-3 pt-2">
                            <Button label="Voltar" severity="secondary" outlined class="flex-1" @click="voltar" />
                            <Button label="Continuar" icon="pi pi-arrow-right" icon-pos="right" class="flex-1" :disabled="!form.nomeCompleto.trim()" @click="avancar" />
                        </div>
                    </template>

                    <template v-else-if="etapa === 2">
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-1.5">CEP</label>
                                <div class="relative">
                                    <InputText :value="form.cep" placeholder="00000-000" class="w-full" size="large" @input="formatarCep" />
                                    <i v-if="buscandoCep" class="pi pi-spin pi-spinner absolute right-3 top-1/2 -translate-y-1/2 text-slate-400" aria-hidden="true" />
                                </div>
                            </div>
                            <div class="grid grid-cols-3 gap-3">
                                <div class="col-span-2">
                                    <label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-1.5">Logradouro</label>
                                    <InputText v-model="form.logradouro" placeholder="Rua, Av., ..." class="w-full" size="large" />
                                </div>
                                <div>
                                    <label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-1.5">Número</label>
                                    <InputText v-model="form.numero" placeholder="Nº" class="w-full" size="large" />
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-1.5">Complemento <span class="font-normal text-slate-400">(opcional)</span></label>
                                <InputText v-model="form.complemento" placeholder="Apto, sala, bloco..." class="w-full" size="large" />
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-1.5">Bairro</label>
                                <InputText v-model="form.bairro" class="w-full" size="large" />
                            </div>
                            <div class="grid grid-cols-3 gap-3">
                                <div class="col-span-2">
                                    <label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-1.5">Cidade</label>
                                    <InputText v-model="form.cidade" class="w-full" size="large" />
                                </div>
                                <div>
                                    <label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-1.5">UF</label>
                                    <Select v-model="form.uf" :options="estados" placeholder="UF" class="w-full" size="large" />
                                </div>
                            </div>
                        </div>
                        <div class="flex gap-3 pt-2">
                            <Button label="Voltar" severity="secondary" outlined class="flex-1" @click="voltar" />
                            <Button label="Continuar" icon="pi pi-arrow-right" icon-pos="right" class="flex-1"
                                :disabled="!form.logradouro || !form.numero || !form.bairro || !form.cidade || !form.uf"
                                @click="avancar" />
                        </div>
                    </template>

                    <template v-else-if="etapa === 3">
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-1.5">E-mail</label>
                                <InputText v-model="form.email" type="email" placeholder="seu@email.com" class="w-full" size="large" :invalid="form.email.length > 0 && !emailValido" />
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-1.5">Confirmar e-mail</label>
                                <InputText v-model="form.emailConfirm" type="email" placeholder="Repita o e-mail" class="w-full" size="large" :invalid="form.emailConfirm.length > 0 && !emailsIguais" />
                                <p v-if="form.emailConfirm.length > 0 && !emailsIguais" class="mt-1 text-xs text-red-600 dark:text-red-400">Os e-mails não coincidem.</p>
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-1.5">Telefone / Celular</label>
                                <InputText :value="form.telefone" placeholder="(00) 00000-0000" class="w-full" size="large" inputmode="numeric" @input="formatarTelefone" />
                            </div>
                            <div class="flex items-center gap-3 p-4 bg-slate-50 dark:bg-slate-700/50 rounded-xl">
                                <Checkbox v-model="form.whatsapp" :binary="true" input-id="whatsapp" />
                                <label for="whatsapp" class="text-sm text-slate-700 dark:text-slate-200 cursor-pointer">
                                    Este número também recebe WhatsApp
                                </label>
                            </div>
                        </div>
                        <p v-if="erro" role="alert" class="text-sm text-red-600 dark:text-red-400 flex items-center gap-1.5">
                            <i class="pi pi-exclamation-circle" aria-hidden="true" /> {{ erro }}
                        </p>
                        <div class="flex gap-3 pt-2">
                            <Button label="Voltar" severity="secondary" outlined class="flex-1" @click="voltar" />
                            <Button label="Continuar" icon="pi pi-arrow-right" icon-pos="right" class="flex-1"
                                :disabled="!emailValido || !emailsIguais || form.telefone.replace(/\D/g,'').length < 10"
                                @click="avancar" />
                        </div>
                    </template>

                    <template v-else-if="etapa === 4 && isPJ">
                        <p class="text-sm text-slate-600 dark:text-slate-300">
                            Informe os dados do representante legal da empresa que será responsável pelo acesso ao portal.
                        </p>
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-1.5">Nome completo</label>
                                <InputText v-model="form.representanteNome" placeholder="Nome do representante" class="w-full" size="large" />
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-1.5">CPF</label>
                                <DocumentoInput v-model="form.representanteCpf" />
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-1.5">Cargo / Função</label>
                                <InputText v-model="form.representanteCargo" placeholder="Ex.: Sócio-Administrador, Diretor..." class="w-full" size="large" />
                            </div>
                        </div>
                        <div class="flex gap-3 pt-2">
                            <Button label="Voltar" severity="secondary" outlined class="flex-1" @click="voltar" />
                            <Button label="Continuar" icon="pi pi-arrow-right" icon-pos="right" class="flex-1"
                                :disabled="!form.representanteNome || form.representanteCpf.replace(/\D/g,'').length !== 11 || !form.representanteCargo"
                                @click="avancar" />
                        </div>
                    </template>

                    <template v-else-if="(isPJ && etapa === 5) || (!isPJ && etapa === 4)">
                        <p class="text-sm text-slate-600 dark:text-slate-300 mb-2">Confira os dados antes de enviar a solicitação.</p>
                        <div class="space-y-3 text-sm">
                            <div class="bg-slate-50 dark:bg-slate-700/50 rounded-xl p-4 space-y-2">
                                <p class="font-semibold text-slate-500 dark:text-slate-400 text-xs uppercase tracking-wide">Identificação</p>
                                <p class="text-slate-800 dark:text-slate-100"><span class="text-slate-500 dark:text-slate-400">Documento:</span> {{ form.documento }}</p>
                                <p class="text-slate-800 dark:text-slate-100"><span class="text-slate-500 dark:text-slate-400">Nome:</span> {{ form.nomeCompleto }}</p>
                            </div>
                            <div class="bg-slate-50 dark:bg-slate-700/50 rounded-xl p-4 space-y-2">
                                <p class="font-semibold text-slate-500 dark:text-slate-400 text-xs uppercase tracking-wide">Endereço</p>
                                <p class="text-slate-800 dark:text-slate-100">{{ form.logradouro }}, {{ form.numero }}{{ form.complemento ? ` — ${form.complemento}` : '' }}</p>
                                <p class="text-slate-800 dark:text-slate-100">{{ form.bairro }} — {{ form.cidade }}/{{ form.uf }} — CEP {{ form.cep }}</p>
                            </div>
                            <div class="bg-slate-50 dark:bg-slate-700/50 rounded-xl p-4 space-y-2">
                                <p class="font-semibold text-slate-500 dark:text-slate-400 text-xs uppercase tracking-wide">Contato</p>
                                <p class="text-slate-800 dark:text-slate-100">{{ form.email }}</p>
                                <p class="text-slate-800 dark:text-slate-100">{{ form.telefone }}{{ form.whatsapp ? ' (WhatsApp)' : '' }}</p>
                            </div>
                        </div>
                        <p v-if="erro" role="alert" class="text-sm text-red-600 dark:text-red-400 flex items-center gap-1.5">
                            <i class="pi pi-exclamation-circle" aria-hidden="true" /> {{ erro }}
                        </p>
                        <div class="flex gap-3 pt-2">
                            <Button label="Voltar" severity="secondary" outlined class="flex-1" @click="voltar" />
                            <Button label="Enviar solicitação" icon="pi pi-send" class="flex-1" :loading="carregando" @click="solicitar" />
                        </div>
                    </template>

                    <template v-else>
                        <div class="text-center py-4">
                            <div class="w-16 h-16 bg-emerald-100 dark:bg-emerald-900/30 rounded-2xl flex items-center justify-center mx-auto mb-4">
                                <i class="pi pi-check-circle text-emerald-600 dark:text-emerald-400 text-3xl" aria-hidden="true" />
                            </div>
                            <h2 class="text-lg font-bold text-slate-800 dark:text-slate-100 mb-2">Solicitação enviada!</h2>
                            <p class="text-sm text-slate-500 dark:text-slate-400">
                                Sua solicitação de credenciamento foi recebida e será analisada em até
                                <strong class="text-slate-700 dark:text-slate-300">2 dias úteis</strong>.
                                Você receberá um e-mail em <strong class="text-slate-700 dark:text-slate-300">{{ form.email }}</strong> com o resultado.
                            </p>
                        </div>
                        <Button label="Voltar à página inicial" icon="pi pi-home" class="w-full" size="large" @click="router.push('/')" />
                    </template>

                </div>
            </div>

            <div v-if="etapa === 0" class="text-center mt-4">
                <button
                    class="inline-flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 transition-colors py-3 px-4 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800"
                    @click="router.push('/')"
                >
                    <i class="pi pi-arrow-left text-xs" aria-hidden="true" />
                    Voltar à página inicial
                </button>
            </div>

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