"use client";

import Image from "next/image";
import ImageAdesao from "../../../../../public/assets/Images/Image/novas-adesoes.png";
import { useCredentialContext } from "@/hooks/credenciado";
import { useEffect, useState } from "react";
import moment from "moment";
import { ucFirst } from "@/utils/functions";
import { useWebContext } from "../../providers";

const NovasAdesoes = () => {
    const { adesoes } = useCredentialContext();
    const [num, setNum] = useState<number>(0);
    const [visible, setVisible] = useState(true);
    const { isMobile } = useWebContext();

    useEffect(() => {
        if (!adesoes || adesoes.length === 0) return;

        const intervalMs = 5000; // 2 segundos por item
        const fadeMs = 400; // duração do fade-out antes de trocar o item
        let innerTimeout: ReturnType<typeof setTimeout> | null = null;

        const intervalId = setInterval(() => {
            setVisible(false); // inicia fade-out
            innerTimeout = setTimeout(() => {
                setNum(prevNum => (prevNum >= adesoes.length - 1 ? 0 : prevNum + 1));
                setVisible(true); // inicia fade-in
            }, fadeMs);
        }, intervalMs);

        return () => {
            clearInterval(intervalId);
            if (innerTimeout) clearTimeout(innerTimeout);
        };
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [adesoes.length]);


    const MENSAGENS = [
        "XclienteX decidiu proteger quem ama de verdade.",
        "A escolha de XclienteX mostra o quanto esse pet é especial.",
        "Com essa adesão, XclienteX garante cuidado contínuo ao seu pet.",
        "XclienteX fez hoje um gesto de amor com responsabilidade.",
        "O bem-estar do pet agora fala mais alto no coração de XclienteX.",
        "XclienteX escolheu saúde e proteção para seu melhor amigo.",
        "Amor virou atitude no cuidado que XclienteX assumiu.",
        "XclienteX deu um passo importante para a segurança do pet.",
        "Porque quem ama cuida, XclienteX fez a adesão certa.",
        "XclienteX decidiu transformar amor em proteção real.",
        "O pet agora está mais seguro graças à decisão de XclienteX.",
        "A adesão de hoje reflete o carinho de XclienteX.",
        "XclienteX priorizou a saúde e a tranquilidade do seu pet.",
        "Um cuidado que faz diferença: escolha de XclienteX.",
        "XclienteX decidiu investir em prevenção e amor ao pet.",
        "A responsabilidade de XclienteX garante mais qualidade de vida ao pet.",
        "Hoje o pet ganhou proteção, e XclienteX ganhou tranquilidade.",
        "XclienteX mostrou que cada detalhe importa quando se ama um pet.",
        "A decisão de adesão feita por XclienteX muda tudo para melhor.",
        "XclienteX fez a melhor escolha por quem está sempre ao seu lado."
    ];

    const MENSAGENS_PET = [
        "O pet XpetX agora está protegido pelo XplanoX, em XlocalX – XufX.",
        "O XplanoX já está ativo para XpetX, em XlocalX – XufX.",
        "XpetX passou a contar com o XplanoX, em XlocalX – XufX.",
        "Cuidado garantido para XpetX com o XplanoX, em XlocalX – XufX.",
        "O XplanoX chegou para proteger XpetX, em XlocalX – XufX.",
        "Agora XpetX tem acompanhamento via XplanoX, em XlocalX – XufX.",
        "O XplanoX é a nova segurança de XpetX, em XlocalX – XufX.",
        "Mais tranquilidade para XpetX através do XplanoX, em XlocalX – XufX.",
        "O cuidado certo para XpetX com o XplanoX, em XlocalX – XufX.",
        "XpetX está com a proteção ideal do XplanoX, em XlocalX – XufX.",
        "Assistência garantida ao pet XpetX com o XplanoX, em XlocalX – XufX.",
        "O XplanoX começa a proteger XpetX hoje, em XlocalX – XufX.",
        "O pet XpetX ganhou segurança com o XplanoX, em XlocalX – XufX.",
        "A partir de agora, XpetX está seguro com o XplanoX, em XlocalX – XufX.",
        "O XplanoX é o novo aliado de XpetX, em XlocalX – XufX.",
        "XpetX conta com cobertura completa do XplanoX, em XlocalX – XufX.",
        "O pet XpetX está assistido pelo XplanoX, em XlocalX – XufX.",
        "O cuidado com XpetX está reforçado com o XplanoX, em XlocalX – XufX.",
        "XpetX agora tem proteção contínua com o XplanoX, em XlocalX – XufX.",
        "O XplanoX protege XpetX no dia a dia, em XlocalX – XufX."
    ];

    const MENSAGENS_PLAMEV = [
        "Cuidar é amar na prática. Bem-vinda à Plamev!",
        "Seu pet merece o melhor. Conte com a Plamev!",
        "A vida do seu pet ficou mais segura. A Plamev está com vocês!",
        "A proteção começa agora. Bem-vinda à Plamev!",
        "Aqui, amor e cuidado andam juntos. Seja bem-vinda à Plamev!",
        "Parceiros na saúde do seu pet. Conte sempre com a Plamev!",
        "O futuro do seu pet ficou ainda melhor. Bem-vinda à Plamev!",
        "Cuidar também é amar. Nós estamos aqui com vocês!",
        "Seu pet agora tem proteção de verdade. Bem-vinda à Plamev!",
        "Mais segurança, mais tranquilidade. Plamev está com vocês!",
        "Amor que cuida e protege. Seja bem-vinda à Plamev!",
        "Aqui seu pet é tratado como família. Bem-vinda à Plamev!",
        "Saúde e carinho para todos os momentos. Conte com a Plamev!",
        "Uma vida mais protegida começa hoje. Bem-vinda à Plamev!",
        "Aqui, cada pet importa. O seu está em boas mãos!",
        "Vocês agora fazem parte da família Plamev!",
        "A escolha que muda tudo para melhor. Bem-vinda à Plamev!",
        "Proteção que acompanha todo dia. Conte com a Plamev!",
        "O cuidado do seu pet é nossa prioridade. Seja bem-vinda!",
        "Amor e responsabilidade caminham juntos. Bem-vinda à Plamev!",
        "Agora vocês têm uma parceria para a vida toda. Plamev com vocês!",
        "Porque quem cuida ama. Bem-vinda à Plamev!",
        "Segurança e carinho para quem é parte da família. Bem-vinda!",
        "A saúde do seu pet está em boas mãos. Conte com a Plamev!",
        "Aqui o cuidado nunca para. Seja bem-vinda à Plamev!",
        "Vocês agora têm um time inteiro cuidando junto. Bem-vinda!",
        "Decisões de amor merecem companhia. Conte com a Plamev!",
        "Mais qualidade de vida para quem te faz tão bem. Bem-vinda!",
        "Cuidar de quem ama é extraordinário. A Plamev está com vocês!",
        "Sua escolha fez toda a diferença. Bem-vinda à Plamev!",
        "Amor com proteção é Plamev. Bem-vinda à família!",
        "Estamos felizes por cuidar de vocês. Plamev presente!",
        "Tranquilidade que transforma dias. Bem-vinda à Plamev!",
        "Vocês nunca estarão sozinhos no cuidado. Conte conosco!",
        "Parceiros no que importa: a saúde do seu pet. Bem-vinda!",
        "O carinho agora tem companhia. Plamev com vocês!",
        "Aqui, cada conquista do seu pet é nossa também. Bem-vinda!",
        "Uma vida mais segura começa com uma boa escolha. Bem-vinda!",
        "Que bom ter vocês com a gente. Família Plamev unida!",
        "Cuidar é a forma mais bonita de amar. Plamev está com vocês!"
    ];


    function getMensagemRandomica(nomeCliente: string) {
        if (!nomeCliente) return null;

        const randomIndex = Math.floor(Math.random() * MENSAGENS.length);
        const frase = MENSAGENS[randomIndex];

        const nomeFormatado = ucFirst(nomeCliente);
        const partes = frase.split("XclienteX");

        return (
            <>
                {partes.map((parte, index) => (
                    <span key={index} className="m-0">
                        {parte}
                        {index < partes.length - 1 && <strong>{nomeFormatado}</strong>}
                    </span>
                ))}
            </>
        );
    }

    function getMensagemPetJSX(pet: string, plano: string, local: string, uf: string) {
        if (!pet || !plano || !local || !uf) return null;

        const randomIndex = Math.floor(Math.random() * MENSAGENS_PET.length);
        const frase = MENSAGENS_PET[randomIndex];

        const replacements: Record<string, JSX.Element> = {
            "XpetX": <strong>{pet}</strong>,
            "XplanoX": <strong>plano {plano}</strong>,
            "XlocalX": <strong>{local}</strong>,
            "XufX": <strong>{uf}</strong>,
        };

        // Regex captura todos os placeholders
        const regex = /XpetX|XplanoX|XlocalX|XufX/g;

        const parts = frase.split(regex);
        const matches = frase.match(regex) || [];

        return (
            <>
                {parts.map((part, index) => (
                    <span key={index}>
                        {part}
                        {matches[index] && replacements[matches[index]]}
                    </span>
                ))}
            </>
        );
    }

    function getMensagemBoasVindas() {
        const index = Math.floor(Math.random() * MENSAGENS_PLAMEV.length);
        return MENSAGENS_PLAMEV[index];
    }


    return (
        <>
            {!isMobile && adesoes && adesoes[num] &&
                <div className={`fade ${!visible ? 'hidden' : ''} ml-4 mr-4 sm:m-0 flex items-center gap-4 fixed border-[#1DA1C2] border-2 bottom-2 sm:bottom-4 left-0 sm:left-4 bg-white p-4 rounded-lg shadow-lg z-50`}>
                    <Image src={ImageAdesao} alt="Novas Adesoes" />
                    <div className="flex flex-col">
                        <div>🎉 {getMensagemRandomica(adesoes[num] ? adesoes[num].ClientesNome.split(' ')[0] : '')}</div>
                        <div>{getMensagemPetJSX(
                            adesoes[num] ? adesoes[num].PetsNome : '',
                            adesoes[num] ? ucFirst(adesoes[num].PlanosNome) : '',
                            adesoes[num] ? adesoes[num].IndividuosEnderecosCidadesNome : '',
                            adesoes[num] ? adesoes[num].IndividuosEnderecosEstadosUF : ''
                        )}</div>
                        <div>🗓️ Contratação realizada em {adesoes[num] ? moment(adesoes[num].VendasDataCadastro).format('DD/MM/YYYY') : ''} às {adesoes[num] ? moment(adesoes[num].VendasDataCadastro).format('HH:mm') : ''}.</div>
                        <div className="mt-2">{getMensagemBoasVindas()} {adesoes[num].PetsEspecie === "2" ? '🐶' : '🐱'}✨</div>
                    </div>
                </div>
            }
        </>
    );
};

export default NovasAdesoes;