'use client'

import EtapaCheckout from "../_components/EtapaCheckout"

import React, { useEffect, useState } from "react";
import { useCheckoutContext } from "@/hooks/UseCheckout";
import { API_URL, TOKEN } from "@/utils/constants/selectConstants";
import { decryptAes256Gcm, formatarValor, onlyNumbers } from "@/utils/functions";
import { toast } from "react-toastify";
import { ICheckoutBudget, ICheckoutCotacaoPets, ICheckoutPets } from "@/utils/Interfaces/ICheckoutContext";
import { IoWarningOutline } from "react-icons/io5";

import moment from "moment";
import FrontCreditCard from "./_components/FrontCreditCard";
import BackCreditCard from "./_components/BackCreditCard";
import FrontCardMembership from "./_components/FrontCardMembership";
import BackCardMembership from "./_components/BackCardMembership";
import Image from "next/image";
import sanitizeHtml from "sanitize-html";

import visa from "../../../../public/assets/Images/ImageFooter/visaMasterElo.svg";
import paypal from "../../../../public/assets/Images/ImageFooter/paypal.svg";
import compraSegura from "../../../../public/assets/Images/ImageFooter/compraSegura.svg";
import { useSearchParams } from "next/navigation";
import { useWebContext } from "@/app/(site)/providers";

const Page = () => {
    const [planName, setPlanName] = useState<string>('');
    const [cupomDesconto, setCupomDesconto] = useState<string>('');
    const [composicaoCampanha, setComposicaoCampanha] = useState<{ Tabela: { PetNome: string; Linhas: { Periodo: string; ValorBase: string; DescontoCartao: string; DescontoCampanha: string; Total: string; Detalhes?: { Descricao: string; Tipo: string; Valor: string }[] }[] }[] } | null>(null);
    const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());

    const searchParams = useSearchParams();
    const origem = searchParams.get("origem")
    const cupom = searchParams.get("cupom")

    const {
        pets,
        setStep,
        name,
        email,
        phoneNumber,
        document,
        zipCode,
        state,
        city,
        address,
        district,
        number,
        complement,
        paymentMethod,
        setPaymentMethod,
        creditCardNumber,
        setCreditCardNumber,
        creditCardName,
        setCreditCardName,
        creditCardMonth,
        setCreditCardMonth,
        creditCardYear,
        setCreditCardYear,
        creditCardCvv,
        setCreditCardCvv,
        budgetId,
        setBudgetId,
        membershipValue,
        setMembershipValue,
        consultantId,
        planId,
        planTypeId,
        membershipCard,
        setMembershipCard,
        giftCardLoteItemId,
        setGiftCardLoteItemId,
        setModalContratoCliente,
        setPetsBudget,
        petsBudget,
        contratoCheck,
        setContratoCheck
    } = useCheckoutContext();
    const { newComparePlans } = useWebContext();

    useEffect(() => {
        setStep(3);
    }, [setStep])

    useEffect(() => {
        if (cupom) {
            const cupomDescrytografado = decryptAes256Gcm(cupom as any, 'b5e5844bc1c09cffe482d756dab360e476d570b5718b84740b4f20d666c7da30');
            setCupomDesconto(cupomDescrytografado as any);
        }
    }, [cupom]);

    useEffect(() => {
        if (parseInt(paymentMethod) === 2) {
            getCotacoes(paymentMethod);
        }
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [paymentMethod]);

    useEffect(() => {
        if (origem === 'lp') {
            setPaymentMethod('3');
        }

        if (origem === 'caixa') {
            setPaymentMethod('2');
        }
    }, [origem, setPaymentMethod])

    useEffect(() => {
        if (membershipCard) {
            if (membershipCard.length === 6) {
                fetch(`${API_URL}GiftCardLoteItem/ValidaCodigoPodeSerVendido?Codigo=${membershipCard}&TiposCoberturasId=${planTypeId}`, {
                    method: 'GET',
                    headers: {
                        Authorization: TOKEN
                    }
                })
                    .then(res => res.json())
                    .then((body) => {
                        if (body.erro) {
                            toast.error(body.mensagem)
                        } else {
                            toast.success('Cupom de Adesão Plamev Válidado')
                            getCotacoes(paymentMethod, body.giftCardLoteItem.Id);
                            setGiftCardLoteItemId(body.giftCardLoteItem.Id)
                        }
                    })
            }
        }
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [membershipCard])

    const handleCheckCupom = (cupomDeDesconto: string) => {
        if (!cupomDeDesconto && !planTypeId && !state) return;

        let filtros = ``;
        filtros = `&TiposCoberturasId=${planTypeId}&EstadosId=${state}`;

        fetch(`${API_URL}CampanhasCoberturasTabelas/BuscarPorRegraValidacaoCampanha/?Cupom=${cupomDeDesconto}${filtros}`, {
            method: 'GET',
            headers: {
                Authorization: TOKEN
            }
        })
            .then(res => res.json())
            .then((body) => {
       
                if (!body || (Array.isArray(body) && body.length === 0)) {
                    toast.error('Cupom não é válido!');
                    return;
                }

                setCupomDesconto(cupomDeDesconto);
                getCotacoes(paymentMethod, undefined, cupomDeDesconto, body[1].CampanhasCoberturasId, body[1].Id);
                toast.success("Cupom aplicado com sucesso!");
            });
    }

    async function getCotacoes(paymentMethod: string, giftCardLoteItem?: string, cupomDesconto?: string, campanhasCoberturasId?: string, campanhasCoberturasTabelasId?: string) {
        let formData = {} as ICheckoutBudget;

        if (consultantId) {
            formData.ConsultoresId = consultantId;
        }

        if (cupomDesconto) {
            formData.CupomDesconto = cupomDesconto;
        }

        if (!sanitizeHtml(name) || !sanitizeHtml(email) || !sanitizeHtml(address) || !sanitizeHtml(district) || !sanitizeHtml(number) || (complement && !sanitizeHtml(complement))) {
            toast.error('Preencha os campos obrigatórios corretamente.')
            return;
        }

        formData.Documento = sanitizeHtml(onlyNumbers(document));
        formData.Nome = sanitizeHtml(name);
        formData.Email = sanitizeHtml(email);
        formData.Ddd = onlyNumbers(phoneNumber).substring(0, 2);
        formData.Telefone = onlyNumbers(phoneNumber).substring(2);
        formData.Site = 1;

        // formData.CampanhasCoberturasId = newComparePlans?.Coberturas
        formData.CotacoesPets = pets.map((item) => {
            let campanhasCoberturasIdValue = null;
            let campanhasCoberturasTabelasIdValue = null;

            if (cupomDesconto) {
                campanhasCoberturasIdValue = campanhasCoberturasId;
                campanhasCoberturasTabelasIdValue = campanhasCoberturasTabelasId;
            } else if (item.CampanhasCoberturasId && item.CoberturasId) {
                campanhasCoberturasIdValue = item.CampanhasCoberturasId;
                campanhasCoberturasTabelasIdValue = item.CampanhasCoberturasTabelasId;
            }

            return {
                Nome: item.NomePet,
                IdadeAproximada: item.IdadeAproximada,
                DataNascimento: item.DataNascimento,
                CoberturasId: item.CoberturasId,
                TiposCoberturasId: item.TiposCoberturasId,
                CoberturasNome: item.CoberturasNome,
                Especie: item.Especie,
                CampanhasCoberturasIdCupom: campanhasCoberturasIdValue,
                CampanhasCoberturasTabelasIdCupom: campanhasCoberturasTabelasIdValue
            };
        });

        formData.Cep = zipCode;
        formData.Logradouro = sanitizeHtml(address);
        formData.Bairro = sanitizeHtml(district);
        formData.Numero = sanitizeHtml(number);
        formData.Complemento = sanitizeHtml(complement);
        formData.EstadosId = state;
        formData.CidadesId = city;

        formData.FormaPagamento = 2;
        formData.CotacoesOrigensId = 2;
        formData.CoberturasId = planId;
        formData.TiposCoberturasId = planTypeId;
        formData.CotacaoViaSiteIdadeAproximada=true;

        formData.CotacaoViaSiteIdadeAproximada = true;

        if (paymentMethod === '3' && giftCardLoteItem) {
            formData.GiftCardLoteItemId = giftCardLoteItem;
        }

        if (origem === "caixa") {
            formData.OrigemCheckout = "CAIXA"
        } else if (origem === "lp") {
            formData.OrigemCheckout = "LP"
        } else {
            formData.OrigemCheckout = "SITE"
        }


        fetch(`${API_URL}Cotacoes/SolicitaCotacaoPet`, {
            method: 'POST',
            headers: {
                Authorization: TOKEN
            },
            body: JSON.stringify({ ...formData })
        })
            .then(res => res.json())
            .then((body) => {
                if (body.erro) {
                    setPaymentMethod('');
                    toast.error(body.mensagem);
                    return;
                }
                setPetsBudget(body.Pets);
                setPlanName(body.Pets[0].Planos.Nome);
                setBudgetId(body.Id);
                setMembershipValue(body.ValorAdesao);
                setComposicaoCampanha(body.ComposicaoCampanha ?? null);
            });
    }

    const toggleDetalhe = (petIndex: number, linhaIndex: number) => {
        const key = `${petIndex}-${linhaIndex}`;
        setExpandedItems(prev => {
            const next = new Set(prev);
            if (next.has(key)) next.delete(key);
            else next.add(key);
            return next;
        });
    };

    const getNomeCobertura = (pets: ICheckoutPets[], PetsCoberturasId: string) => {
        const pet = pets.filter(item => item.CoberturasId === PetsCoberturasId);
        if (pet.length > 0) {
            return pet[0].CoberturasNome;
        }
        return ''
    }

    return (
        <div className="my-[32px]">
            <EtapaCheckout etapa={3} />

            <div className="flex flex-col justify-center items-center px-8 mt-[10px] w-full sm:w-[850px] m-auto">
                <h2 className="m-0 p-0 text-center sm:text-left text-plamev-blue-500 leading-[32px] text-[32px] mb-[16px]">Falta
                    pouco, estamos quase lá!</h2>

                <div className="w-full flex flex-col gap-4">
                    <p className="m-0 p-0 text-plamev-dark-400 font-bold mt-[16px]">Preencha os dados do cartão abaixo:</p>

                    <div className="flex justify-between items-center gap-4">
                        <select
                            value={paymentMethod}
                            onChange={({ target }) => setPaymentMethod(target.value)}
                            className="bg-plamev-light-50 flex-1 border-plamev-dark-50 border-2 border-solid rounded-md w-full h-[52px] pl-2"
                            disabled={origem === 'lp' || origem === 'caixa'}
                        >
                            <option value="">Escolha a forma de pagamento</option>
                            <option value="2">Cartão de Crédito</option>
                        </select>
                    </div>

                    {paymentMethod === '3' &&
                        <>
                            <div className="flex flex-col sm:flex-row justify-center gap-5 items-center">
                                <FrontCardMembership />
                                <BackCardMembership />
                            </div>

                            <div className="flex items-center gap-5">
                                <IoWarningOutline className="text-plamev-yellow-500 text-[70px]" />
                                <p className="m-0 p-0 text-plamev-dark-300">Cupom para Plano de Saúde Plamev Pet Válido
                                    por 30 dias após a ativação. Este cartão é válido para apenas um plano por vez. Não
                                    cumulativo.</p>
                            </div>

                            <div className="flex flex-col justify-between items-center gap-4">
                                <input
                                    type="text"
                                    placeholder="Código do Cartão de  Adesão"
                                    value={membershipCard}
                                    onChange={({ target }) => setMembershipCard(target.value)}
                                    className="bg-plamev-light-50 border-plamev-dark-50 border-2 border-solid rounded-md w-full h-[52px] pl-2"
                                />
                            </div>
                        </>
                    }

                    {(paymentMethod === '2' || paymentMethod === '3') && budgetId &&
                        <>
                            <p className="m-0 p-0 text-plamev-dark-400 font-bold mt-[16px] text-center">
                                Preencha os dados do cartão de crédito abaixo para pagamento das próximas mensalidades.
                            </p>

                            <div className="flex flex-col sm:flex-row justify-center gap-5 items-center">
                                <FrontCreditCard
                                    creditCardMonth={creditCardMonth}
                                    creditCardNumber={creditCardNumber}
                                    creditCardYear={creditCardYear}
                                    creditCardName={creditCardName}
                                />

                                <BackCreditCard creditCardCvv={creditCardCvv} />
                            </div>

                            <div className="flex flex-col justify-between items-center gap-4">
                                <input
                                    type="text"
                                    placeholder="Número do Cartão"
                                    value={creditCardNumber}
                                    onChange={({ target }) => setCreditCardNumber(target.value)}
                                    className="bg-plamev-light-50 border-plamev-dark-50 border-2 border-solid rounded-md w-full h-[52px] pl-2"
                                />

                                <input
                                    type="text"
                                    placeholder="Nome do Impresso no Cartão"
                                    value={creditCardName}
                                    onChange={({ target }) => setCreditCardName(target.value)}
                                    className="bg-plamev-light-50 border-plamev-dark-50 border-2 border-solid rounded-md w-full h-[52px] pl-2"
                                />
                            </div>

                            <div className="flex flex-col sm:flex-row justify-between items-center gap-4">
                                <select
                                    value={creditCardMonth}
                                    onChange={({ target }) => setCreditCardMonth(target.value)}
                                    className="bg-plamev-light-50 border-plamev-dark-50 border-2 border-solid rounded-md w-full h-[52px] pl-2"
                                >
                                    <option value="">Mês</option>
                                    <option value="01">Jan</option>
                                    <option value="02">Fev</option>
                                    <option value="03">Mar</option>
                                    <option value="04">Abr</option>
                                    <option value="05">Mai</option>
                                    <option value="06">Jun</option>
                                    <option value="07">Jul</option>
                                    <option value="08">Ago</option>
                                    <option value="09">Set</option>
                                    <option value="10">Out</option>
                                    <option value="11">Nov</option>
                                    <option value="12">Dez</option>
                                </select>

                                <input
                                    type="text"
                                    placeholder="Ano"
                                    value={creditCardYear}
                                    onChange={({ target }) => setCreditCardYear(target.value)}
                                    className="bg-plamev-light-50 border-plamev-dark-50 border-2 border-solid rounded-md w-full h-[52px] pl-2"
                                />

                                <input
                                    type="text"
                                    placeholder="CVV"
                                    value={creditCardCvv}
                                    onChange={({ target }) => setCreditCardCvv(target.value)}
                                    className="bg-plamev-light-50 border-plamev-dark-50 border-2 border-solid rounded-md w-full h-[52px] pl-2"
                                />
                            </div>

                            {paymentMethod === '2' &&
                                <>
                                    <p className="m-0 p-0 text-plamev-dark-400 font-bold mt-[16px]">Cupom:</p>

                                    <div className="flex flex-row items-center gap-2 w-full">
                                        <input
                                            type="text"
                                            placeholder="Cupom de Desconto"
                                            value={cupomDesconto}
                                            onChange={({ target }) => setCupomDesconto(target.value)}
                                            readOnly={!!cupom}
                                            className="bg-plamev-light-50 border-plamev-dark-50 border-2 border-solid rounded-md flex-1 h-[52px] pl-2"
                                        />
                                        {/* {!!exibeBUttonDesconto && */}
                                            <button
                                                type="button"
                                                onClick={() => handleCheckCupom(cupomDesconto)}
                                                className="bg-plamev-blue-500 text-white rounded-md px-4 h-[52px] min-w-[140px]"
                                            >
                                                Aplicar Cupom
                                            </button>
                                        {/* } */}
                                    </div>

                                </>
                            }

                            <p className="m-0 p-0 text-plamev-dark-400 font-bold mt-[16px]">Resumo da sua compra:</p>

                            <div className="flex flex-col gap-5">
                                <div className="w-full border-b-2 border-dashed pb-4 border-plamev-dark-100">
                                    {paymentMethod === '3' &&
                                        <p className="text-plamev-dark-400">Forma Pagamento Adesão: <span className="font-bold">Cupom de Adesão Plamev</span></p>
                                    }

                                    {paymentMethod === '2' &&
                                        <p className="text-plamev-dark-400">Forma Pagamento Adesão: <span className="font-bold">Cartão de Crédito</span></p>
                                    }

                                    <p className="text-plamev-dark-400">Forma Pagamento Mensalidade: <span className="font-bold">Cartão de Crédito</span></p>
                                    <p className="text-plamev-dark-400">Data da Compra: <span className="font-bold">{moment().format('DD/MM/YYYY')}</span></p>
                                </div>

                                {composicaoCampanha?.Tabela.map((petTabela, petIndex) => (
                                    <div className="w-full border-b-2 border-dashed pb-4 border-plamev-dark-100" key={petIndex}>
                                        <p className="text-plamev-dark-400 mb-2">Nome do Pet: <span className="font-bold">{petTabela.PetNome}</span></p>

                                        {petTabela.Linhas.map((linha, linhaIndex) => {
                                            const itemKey = `${petIndex}-${linhaIndex}`;
                                            const isExpanded = expandedItems.has(itemKey);
                                            const hasDetalhes = !!(linha.Detalhes && linha.Detalhes.length > 0);
                                            return (
                                                <div key={linhaIndex} className="mb-1">
                                                    <div
                                                        className={`flex justify-between items-center ${hasDetalhes ? 'cursor-pointer' : ''}`}
                                                        onClick={() => hasDetalhes && toggleDetalhe(petIndex, linhaIndex)}
                                                    >
                                                        <span className="text-plamev-dark-400">{linha.Periodo}:</span>
                                                        <div className="flex items-center gap-2">
                                                            <span className="font-bold text-plamev-dark-400">{formatarValor(Number(linha.Total))}</span>
                                                            {hasDetalhes && (
                                                                <span className={`w-5 h-5 rounded-full border-2 flex items-center justify-center text-xs font-bold leading-none ${isExpanded ? 'border-red-500 text-red-500' : 'border-plamev-blue-500 text-plamev-blue-500'}`}>
                                                                    {isExpanded ? '−' : '+'}
                                                                </span>
                                                            )}
                                                        </div>
                                                    </div>

                                                    {isExpanded && linha.Detalhes && linha.Detalhes.length > 0 && (
                                                        <div className="ml-3 border-l-2 border-plamev-dark-100 pl-3 mt-1">
                                                            {linha.Detalhes.map((detalhe, i) => (
                                                                <div key={i} className="flex justify-between items-center py-0.5">
                                                                    <span className="text-plamev-dark-400 text-sm">{detalhe.Descricao}</span>
                                                                    <span className={`text-sm font-medium ${detalhe.Tipo === 'Desconto' ? 'text-red-500' : 'text-plamev-dark-400'}`}>
                                                                        {detalhe.Tipo === 'Desconto' ? `- ${formatarValor(Number(detalhe.Valor))}` : formatarValor(Number(detalhe.Valor))}
                                                                    </span>
                                                                </div>
                                                            ))}
                                                        </div>
                                                    )}
                                                </div>
                                            );
                                        })}
                                    </div>
                                ))}

                                {!composicaoCampanha && petsBudget.length > 0 && petsBudget.map((item, i) => (
                                    <div className="w-full border-b-2 border-dashed pb-4 border-plamev-dark-100" key={i}>
                                        <p className="text-plamev-dark-400">Nome do Pet: <span className="font-bold">{item.Nome}</span></p>
                                        <p className="text-plamev-dark-400">Plano: <span className="font-bold">{getNomeCobertura(pets, item.CoberturasId)}</span></p>
                                    </div>
                                ))}
                            </div>

                            <div className="flex justify-between items-center">
                                <p className="text-plamev-dark-400 font-bold">Total Adesão:</p>
                                <p className="text-plamev-blue-500 font-bold text-[24px]">{formatarValor(membershipValue || 0)}</p>
                            </div>

                            <p className="text-plamev-dark-300 flex gap-2">
                                <input type="checkbox" checked={contratoCheck}
                                    onClick={() => setContratoCheck(!contratoCheck)} />
                                <p className="m-0 p-0">Li e aceito os termos de contrato do Plano Plamev.</p>
                                <span className="text-plamev-blue-500 cursor-pointer"
                                    onClick={() => setModalContratoCliente && setModalContratoCliente(true)}>Ler Contrato</span>
                            </p>
                        </>
                    }

                    {paymentMethod &&
                        <div className="flex flex-col gap-2">
                            <h2 className="m-0 p-0 text-plamev-dark-400 font-bold mt-[16px]">Meios de pagamento</h2>

                            <div className="flex flex-wrap items-center gap-4 flex-column">
                                {/* Primeira linha */}
                                <div className="flex items-center gap-4">
                                    <Image src={visa} alt="Visa" className="h-6" />
                                    <Image src={compraSegura} alt="Visa" className="h-6" />
                                </div>
                            </div>
                            <div className="flex flex-wrap items-center gap-4 flex-column">
                                {/* Segunda linha */}
                                <div className="flex items-center gap-4">
                                    <Image src={paypal} alt="Visa" className="h-6" />
                                </div>
                            </div>
                        </div>
                    }
                </div>
            </div>
        </div>
    )
}

export default Page