'use client'

import { useCheckoutContext } from "@/hooks/UseCheckout"
import { API_URL, cartoes, TOKEN } from "@/utils/constants/selectConstants";
import { appendStoredUtmToPayload, clearStoredUtmParams } from "@/utils/functions/utm";
import { onlyNumbers, validateCPF } from "@/utils/functions";
import { ICheckoutLead, ICheckoutSale } from "@/utils/Interfaces/ICheckoutContext";
import { useSearchParams, useRouter } from "next/navigation";
import { toast } from "react-toastify";
import moment from "moment";
import sanitizeHtml from 'sanitize-html';
import { useState } from "react";

const ButtonNetxStep = () => {
    const router = useRouter();
    const {
        step,
        pets,
        name,
        email,
        phoneNumber,
        setLeadsId,
        document,
        zipCode,
        state,
        city,
        address,
        district,
        number,
        complement,
        paymentMethod,
        creditCardNumber,
        creditCardName,
        creditCardMonth,
        creditCardYear,
        creditCardCvv,
        budgetId,
        consultantId,
        contratoCheck,
        planId
    } = useCheckoutContext();

    const [load, setLoad] = useState<boolean>(false);

    const searchParams = useSearchParams();

    const tipoCoberturasId = searchParams.get('plano');
    const consultor = searchParams.get("consultor");
    const origem = searchParams.get("origem");
    const cupomDesconto = searchParams.get("cupom");

    const handleNextStep = () => {

        if (step === 1) {
            if (!planId) {
                toast.error('Selecione um plano para dar continuidade na compra.')
                return;
            }

            if (!pets || pets.length === 0) {
                toast.error('Adicione ao menos um pet para continuar.');
                return;
            }

            const camposIncompletos = pets.some(
                (pet) => !pet.NomePet?.trim()
            );

            if (camposIncompletos) {
                toast.error('Preencha o nome e a idade aproximada de todos os pets.');
                return;
            }

            router.push(
                `/cadastro${tipoCoberturasId ? `?plano=${tipoCoberturasId}` : ''
                }${origem ? `${tipoCoberturasId ? `&` : `?`}origem=${origem}` : ''
                }${consultor ? `${tipoCoberturasId || origem ? `&` : `?`}consultor=${consultor}` : ''
                }${cupomDesconto ? `${tipoCoberturasId || origem || consultor ? `&` : `?`}cupom=${cupomDesconto}` : ''
                }`
            );

        }

        if (step === 2) {
console.log(!sanitizeHtml(name) || !phoneNumber || !sanitizeHtml(email) || planId.length === 0, !sanitizeHtml(name) , !phoneNumber , !sanitizeHtml(email) , planId.length === 0);
            if (!sanitizeHtml(name) || !phoneNumber || !sanitizeHtml(email) || planId.length === 0) {
                console.log('aqui');
                toast.error('Preencha os campos obrigatórios corretamente.')
                return;
            }

            let formData = {} as ICheckoutLead;

            formData.Nome = sanitizeHtml(name);
            formData.Email = sanitizeHtml(email);
            formData.LeadsPets = pets;
            formData.Ddd = sanitizeHtml(onlyNumbers(phoneNumber).substring(0, 2));
            formData.Telefone = sanitizeHtml(onlyNumbers(phoneNumber).substring(2));
            formData.ConsultoresId = consultantId ?? "7490682A-02B3-4558-85FF-32ED04FD508D";   

            if (origem === 'caixa') {
                formData.OrigensId = "CEFColaboradores";
            }

            const payload = appendStoredUtmToPayload({ ...formData });

            fetch(`${API_URL}Leads/NovoLeadSite`, {
                method: 'POST',
                headers: {
                    Authorization: TOKEN
                },
                body: JSON.stringify(payload)
            })
                .then(res => res.json())
                .then(body => setLeadsId(body.Id))

            router.push(
                `/pagamento${tipoCoberturasId ? `?plano=${tipoCoberturasId}` : ''
                }${origem ? `${tipoCoberturasId ? `&` : `?`}origem=${origem}` : ''
                }${consultor ? `${tipoCoberturasId || origem ? `&` : `?`}consultor=${consultor}` : ''
                }${cupomDesconto ? `${tipoCoberturasId || origem || consultor ? `&` : `?`}cupom=${cupomDesconto}` : ''
                }`
            );

        }

        if (step === 3) {
            
            if (!sanitizeHtml(document) || !zipCode || !sanitizeHtml(address) || !sanitizeHtml(number) || !sanitizeHtml(district) || !state || !city || !sanitizeHtml(creditCardName) || !sanitizeHtml(creditCardNumber) || !sanitizeHtml(creditCardCvv) || !sanitizeHtml(creditCardMonth) || !sanitizeHtml(creditCardYear) || (complement && !sanitizeHtml(complement)) || !sanitizeHtml(district)) {
                toast.error('Preencha os campos obrigatórios corretamente.1')
                return;
            }

            if (!validateCPF(document)) {
                toast.error('CPF inválido.');
                return;
            }

            if (!contratoCheck) {
                toast.error('Você precisa aceitar os termos do contrato.');
                return;
            }

            let formData = {} as ICheckoutSale;

            formData.CotacoesId = budgetId;

            // Forma de Pagamento fixo ate realizar ajustes do giftcard , valores estão divergente  quando forma da pagamento = 3 card: https://runrun.it/pt-BR/tasks/56281

            formData.FormaPagamento = "2";
            formData.FormaPagamentoAdesao = paymentMethod
            formData.DataAgendamentoPagamentoAdesao = moment().format('YYYY-MM-DD')

            if (consultantId) {
                formData.ConsultoresId = consultantId
            }

            formData.Clientes = {
                Nome: sanitizeHtml(name),
                Documento: document,
                Email: sanitizeHtml(email),
                IndividuosContatos: [],
                IndividuosEnderecos: [],
                IndividuosCartoesCredito: []
            }

            formData.Clientes.IndividuosContatos.push({
                Ddd: onlyNumbers(phoneNumber).substring(0, 2),
                Telefone: onlyNumbers(phoneNumber).substring(2),
                Nome: sanitizeHtml(name),
                Padrao: 1
            });

            formData.Clientes.IndividuosEnderecos.push({
                Cep: zipCode,
                Logradouro: sanitizeHtml(address),
                Numero: sanitizeHtml(number),
                Complemento: sanitizeHtml(complement),
                EstadosId: state,
                CidadesId: city,
                Bairro: sanitizeHtml(district),
                Padrao: 1
            })

            const imgCreditCard = cartoes.find(item => item.Regex.test(creditCardNumber));

            formData.Clientes.IndividuosCartoesCredito.push({
                NomeCartao: sanitizeHtml(creditCardName),
                NumeroCartao: sanitizeHtml(creditCardNumber),
                MesValidade: sanitizeHtml(creditCardMonth),
                AnoValidade: sanitizeHtml(creditCardYear),
                CodigoSegurancaCartao: sanitizeHtml(creditCardCvv),
                BandeiraCartao: imgCreditCard?.Id.toString() ?? "1",
                Padrao: 1
            })

            setLoad(true);
            fetch(`${API_URL}Vendas/VendasPet`, {
                method: 'POST',
                headers: {
                    Authorization: TOKEN
                },
                body: JSON.stringify({ ...formData })
            })
                .then(res => res.json())
                .then(body => {
                    setLoad(false);
                    if (body.erro) {
                        toast.error(body.mensagem);
                        return;
                    }
                    clearStoredUtmParams();
                    router.push(`/parabens`);
                })
        }
    }

    return (
        <>
            {step !== 4 &&
                <button
                    type="button"
                    onClick={() => handleNextStep()}
                    disabled={load}
                    className="bg-plamev-blue-500 text-plamev-light-50 font-semibold rounded-md w-[220px] h-[54px] flex items-center justify-center"
                >
                    {step === 1 && !load && 'Avançar'}
                    {step === 2 && !load && 'Avançar'}
                    {step === 3 && !load && 'Finalizar compra'}

                    {load && 'Carregando...'}
                </button>
            }
        </>
    )
}

export default ButtonNetxStep;