<script setup>
import { ref, reactive, onMounted } from 'vue'
import { portalService } from '@/services/portalService'

definePageMeta({
    layout: 'portal',
    middleware: 'auth',
})

const carregando = ref(true)
const salvando = ref(false)
const modoEditar = ref(false)
const mensagemErro = ref('')
const mensagemSucesso = ref('')

const dados = ref(null)
const contato = reactive({ email: '', telefone: '', whatsapp: false })

onMounted(async () => {
    try {
        const res = await portalService.getDadosCadastrais()
        dados.value = res.data
        contato.email = dados.value?.email ?? ''
        contato.telefone = dados.value?.telefone ?? ''
        contato.whatsapp = dados.value?.whatsapp ?? false
    } catch (e) {
        mensagemErro.value = e?.data?.description ?? 'Não foi possível carregar os dados cadastrais.'
    } finally {
        carregando.value = false
    }
})

async function salvarContato() {
    salvando.value = true
    mensagemErro.value = ''
    mensagemSucesso.value = ''
    try {
        await portalService.atualizarContato({
            email: contato.email,
            telefone: contato.telefone.replace(/\D/g, ''),
            whatsapp: contato.whatsapp,
        })
        dados.value.email = contato.email
        dados.value.telefone = contato.telefone
        dados.value.whatsapp = contato.whatsapp
        mensagemSucesso.value = 'Dados de contato atualizados com sucesso!'
        modoEditar.value = false
    } catch (e) {
        mensagemErro.value = e?.data?.description ?? 'Erro ao salvar. Tente novamente.'
    } finally {
        salvando.value = false
    }
}

function cancelarEdicao() {
    contato.email = dados.value?.email ?? ''
    contato.telefone = dados.value?.telefone ?? ''
    contato.whatsapp = dados.value?.whatsapp ?? false
    modoEditar.value = false
    mensagemErro.value = ''
}

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

<template>
    <div class="space-y-6 max-w-2xl">

        <div>
            <h1 class="text-2xl font-bold text-slate-800 dark:text-slate-100">Dados Cadastrais</h1>
            <p class="text-sm text-slate-500 dark:text-slate-400 mt-0.5">Visualize seus dados e mantenha o contato atualizado.</p>
        </div>

        <div v-if="carregando" class="space-y-4">
            <div v-for="i in 2" :key="i" class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-6 space-y-4">
                <div class="h-4 bg-slate-200 dark:bg-slate-700 rounded animate-pulse w-1/4" />
                <div class="space-y-3">
                    <div class="h-3.5 bg-slate-200 dark:bg-slate-700 rounded animate-pulse w-3/4" />
                    <div class="h-3.5 bg-slate-200 dark:bg-slate-700 rounded animate-pulse w-1/2" />
                </div>
            </div>
        </div>

        <template v-else-if="dados">

            <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-6">
                <p class="text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wide mb-4">Identificação</p>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <p class="text-xs text-slate-400 dark:text-slate-500">{{ dados.tipoPessoa === 'JURIDICA' ? 'CNPJ' : 'CPF' }}</p>
                        <p class="text-sm font-semibold text-slate-800 dark:text-slate-100 mt-0.5 font-mono">{{ dados.documento }}</p>
                    </div>
                    <div>
                        <p class="text-xs text-slate-400 dark:text-slate-500">{{ dados.tipoPessoa === 'JURIDICA' ? 'Razão Social' : 'Nome completo' }}</p>
                        <p class="text-sm font-semibold text-slate-800 dark:text-slate-100 mt-0.5">{{ dados.nomeCompleto }}</p>
                    </div>
                    <div v-if="dados.nomeFantasia">
                        <p class="text-xs text-slate-400 dark:text-slate-500">Nome fantasia</p>
                        <p class="text-sm font-semibold text-slate-800 dark:text-slate-100 mt-0.5">{{ dados.nomeFantasia }}</p>
                    </div>
                    <div v-if="dados.dataNascimento">
                        <p class="text-xs text-slate-400 dark:text-slate-500">Data de nascimento</p>
                        <p class="text-sm font-semibold text-slate-800 dark:text-slate-100 mt-0.5">{{ dados.dataNascimento }}</p>
                    </div>
                </div>
            </div>

            <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-6">
                <p class="text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wide mb-4">Endereço</p>
                <p class="text-sm text-slate-800 dark:text-slate-100">
                    {{ dados.endereco?.logradouro }}, {{ dados.endereco?.numero }}
                    <template v-if="dados.endereco?.complemento"> — {{ dados.endereco.complemento }}</template>
                </p>
                <p class="text-sm text-slate-600 dark:text-slate-300 mt-0.5">
                    {{ dados.endereco?.bairro }} — {{ dados.endereco?.cidade }}/{{ dados.endereco?.uf }}
                </p>
                <p class="text-xs text-slate-400 dark:text-slate-500 mt-1">CEP: {{ dados.endereco?.cep }}</p>
                <p class="text-xs text-slate-400 dark:text-slate-500 mt-3">
                    Para alterar o endereço, compareça ao setor de atendimento da Prefeitura.
                </p>
            </div>

            <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-6">
                <div class="flex items-center justify-between mb-4">
                    <p class="text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wide">Contato</p>
                    <Button
                        v-if="!modoEditar"
                        label="Editar"
                        icon="pi pi-pencil"
                        size="small"
                        text
                        @click="modoEditar = true"
                    />
                </div>

                <div v-if="!modoEditar" class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <p class="text-xs text-slate-400 dark:text-slate-500">E-mail</p>
                        <p class="text-sm font-semibold text-slate-800 dark:text-slate-100 mt-0.5">{{ dados.email }}</p>
                    </div>
                    <div>
                        <p class="text-xs text-slate-400 dark:text-slate-500">Telefone</p>
                        <p class="text-sm font-semibold text-slate-800 dark:text-slate-100 mt-0.5">
                            {{ dados.telefone }}
                            <span v-if="dados.whatsapp" class="ml-1.5 text-xs text-emerald-600 dark:text-emerald-400 font-normal">(WhatsApp)</span>
                        </p>
                    </div>
                </div>

                <div v-else 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="contato.email" type="email" class="w-full" size="large" />
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-1.5">Telefone / Celular</label>
                        <InputText :value="contato.telefone" 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="contato.whatsapp" :binary="true" input-id="whatsapp-dados" />
                        <label for="whatsapp-dados" class="text-sm text-slate-700 dark:text-slate-200 cursor-pointer">
                            Este número também recebe WhatsApp
                        </label>
                    </div>
                    <p v-if="mensagemErro" 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" /> {{ mensagemErro }}
                    </p>
                    <div class="flex gap-3">
                        <Button label="Cancelar" severity="secondary" outlined class="flex-1" @click="cancelarEdicao" />
                        <Button label="Salvar" icon="pi pi-check" class="flex-1" :loading="salvando" @click="salvarContato" />
                    </div>
                </div>

                <p v-if="mensagemSucesso && !modoEditar" role="status" class="mt-4 text-sm text-emerald-600 dark:text-emerald-400 flex items-center gap-1.5">
                    <i class="pi pi-check-circle" aria-hidden="true" /> {{ mensagemSucesso }}
                </p>
            </div>

        </template>

        <div v-else-if="mensagemErro" class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-8 text-center">
            <p class="text-sm text-slate-600 dark:text-slate-300">{{ mensagemErro }}</p>
        </div>

    </div>
</template>
