'use client';

import { useState } from "react";
import { IoMdCloseCircleOutline, IoMdCheckmarkCircleOutline } from "react-icons/io";
import sanitizeHtml from "sanitize-html";
import { toast } from "react-toastify";
import { ISitePopUps } from "@/utils/Interfaces/apiInterfaces";
import { API_URL, TOKEN } from "@/utils/constants/selectConstants";
import { inputMask, onlyNumbers, validateEmail } from "@/utils/functions";
import { appendStoredUtmToPayload } from "@/utils/functions/utm";

type Props = {
    aberto: boolean;
    onFechar: () => void;
    config?: ISitePopUps;
    slugPost?: string;
};

type PossuiPlanoSaudePet = 'SIM' | 'NAO' | 'JA_TEVE';

const ORIGEM_LEAD_BLOG = 'F35E17AB-C292-D7A4-C29F-F03B64804D89';

const OPCOES_PLANO: { valor: PossuiPlanoSaudePet; label: string }[] = [
    { valor: 'SIM', label: 'Sim' },
    { valor: 'NAO', label: 'Não' },
    { valor: 'JA_TEVE', label: 'Já teve' },
];

interface INovoLeadBlog {
    Nome: string;
    Email: string;
    Ddd: string;
    Telefone: string;
    OrigensId: string;
    PossuiPlanoSaudePet: PossuiPlanoSaudePet;
    Slug?: string;
}

type Erros = Partial<Record<'nome' | 'email' | 'whatsapp' | 'plano', string>>;

const ModalFormularioPost = ({ aberto, onFechar, config, slugPost }: Props) => {
    const [nome, setNome] = useState('');
    const [email, setEmail] = useState('');
    const [whatsapp, setWhatsapp] = useState('');
    const [possuiPlanoSaudePet, setPossuiPlanoSaudePet] = useState<PossuiPlanoSaudePet | ''>('');
    const [erros, setErros] = useState<Erros>({});
    const [enviando, setEnviando] = useState(false);
    const [enviado, setEnviado] = useState(false);

    if (!aberto || !config) {
        return null;
    }

    const fecharEResetar = () => {
        onFechar();
        setNome('');
        setEmail('');
        setWhatsapp('');
        setPossuiPlanoSaudePet('');
        setErros({});
        setEnviado(false);
    };

    const validar = (): boolean => {
        const novosErros: Erros = {};

        if (!sanitizeHtml(nome).trim()) {
            novosErros.nome = 'Informe seu nome.';
        }

        if (!validateEmail(email.trim())) {
            novosErros.email = 'Informe um e-mail válido.';
        }

        const numerosWhatsapp = onlyNumbers(whatsapp);
        if (numerosWhatsapp.length < 10 || numerosWhatsapp.length > 11) {
            novosErros.whatsapp = 'Informe um WhatsApp válido, com DDD.';
        }

        if (!possuiPlanoSaudePet) {
            novosErros.plano = 'Selecione uma opção.';
        }

        setErros(novosErros);
        return Object.keys(novosErros).length === 0;
    };

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();

        if (!validar()) {
            return;
        }

        const numerosWhatsapp = onlyNumbers(whatsapp);

        const payload = appendStoredUtmToPayload<INovoLeadBlog>({
            Nome: sanitizeHtml(nome),
            Email: sanitizeHtml(email),
            Ddd: numerosWhatsapp.substring(0, 2),
            Telefone: numerosWhatsapp.substring(2),
            OrigensId: ORIGEM_LEAD_BLOG,
            PossuiPlanoSaudePet: possuiPlanoSaudePet as PossuiPlanoSaudePet,
            Slug: slugPost,
        });

        setEnviando(true);

        try {
            const res = await fetch(`${API_URL}Leads/NovoLeadSite/`, {
                method: 'POST',
                headers: {
                    Authorization: TOKEN,
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(payload),
            });

            const body = await res.json();

            if (body.erro) {
                toast.error(body.mensagem || 'Não foi possível enviar. Tente novamente.');
                return;
            }

            setEnviado(true);
        } catch (err) {
            toast.error('Falha de conexão. Tente novamente.');
        } finally {
            setEnviando(false);
        }
    };

    return (
        <div
            className="h-full w-full fixed top-0 left-0 z-[9999999] bg-zinc-900/[.70] flex justify-center items-center p-4"
            onClick={fecharEResetar}
        >
            <div
                className="w-full max-w-[620px] max-h-[90vh] overflow-y-auto rounded-[24px] p-5 sm:p-6 relative"
                style={{ backgroundColor: config.PopUpsCorModal ?? '' }}
                onClick={(e) => e.stopPropagation()}
            >
                <button
                    onClick={fecharEResetar}
                    aria-label="Fechar"
                    className="absolute top-4 right-4 text-[24px] leading-none cursor-pointer hover:opacity-70 transition"
                    style={{ color: config.PopUpsTituloCor ?? '' }}
                >
                    <IoMdCloseCircleOutline />
                </button>

                {enviado ? (
                    <div className="flex flex-col items-center text-center py-6">
                        <IoMdCheckmarkCircleOutline
                            className="text-[56px] mb-4"
                            style={{ color: config.PopUpsBotaoCor ?? '' }}
                        />

                        <h5 className="text-[20px] font-bold mb-2" style={{ color: config.PopUpsTituloCor ?? '' }}>
                            Recebemos seus dados!
                        </h5>

                        <p className="text-[15px]" style={{ color: config.PopUpsDescricaoCor ?? '' }}>
                            Em breve entraremos em contato.
                        </p>
                    </div>
                ) : (
                    <>
                        <h5
                            className="text-[20px] font-bold mb-4 pr-8"
                            style={{ color: config.PopUpsTituloCor ?? '' }}
                        >
                            {config.PopUpsTitulo || ''}
                        </h5>

                        <form className="flex flex-col gap-3" onSubmit={handleSubmit} noValidate>
                            <div>
                                <input
                                    type="text"
                                    placeholder="Nome"
                                    value={nome}
                                    onChange={(e) => setNome(e.target.value)}
                                    className="w-full bg-plamev-light-50 border border-plamev-dark-50 rounded-[10px] px-4 py-3 text-[15px] outline-none focus:border-plamev-blue-500 transition"
                                />
                                {!!erros.nome && <p className="text-red-600 text-[13px] mt-1">{erros.nome}</p>}
                            </div>

                            <div>
                                <input
                                    type="email"
                                    placeholder="E-mail"
                                    value={email}
                                    onChange={(e) => setEmail(e.target.value)}
                                    className="w-full bg-plamev-light-50 border border-plamev-dark-50 rounded-[10px] px-4 py-3 text-[15px] outline-none focus:border-plamev-blue-500 transition"
                                />
                                {!!erros.email && <p className="text-red-600 text-[13px] mt-1">{erros.email}</p>}
                            </div>

                            <div>
                                <div className="w-full bg-plamev-light-50 border border-plamev-dark-50 rounded-[10px] px-4 py-3 flex items-center gap-2 focus-within:border-plamev-blue-500 transition">
                                    <span className="text-[15px] text-plamev-dark-900 shrink-0">WhatsApp</span>
                                    <span
                                        className="text-[15px] font-semibold shrink-0"
                                        style={{ color: config.PopUpsBotaoCor ?? '' }}
                                    >
                                        +55
                                    </span>
                                    <input
                                        type="tel"
                                        placeholder="(  )"
                                        value={whatsapp}
                                        onChange={(e) => setWhatsapp(inputMask(e.target.value, 'telefone'))}
                                        className="w-full text-[15px] outline-none min-w-0"
                                    />
                                </div>
                                {!!erros.whatsapp && <p className="text-red-600 text-[13px] mt-1">{erros.whatsapp}</p>}
                            </div>

                            <div className="mt-1">
                                <p className="text-[15px] mb-2" style={{ color: config.PopUpsDescricaoCor ?? '' }}>
                                    Seu pet tem plano de saúde?
                                </p>

                                <div className="flex items-center gap-6">
                                    {OPCOES_PLANO.map((opcao) => (
                                        <label
                                            key={opcao.valor}
                                            className="flex items-center gap-2 text-[15px] cursor-pointer"
                                            style={{ color: config.PopUpsDescricaoCor ?? '' }}
                                        >
                                            <input
                                                type="radio"
                                                name="possuiPlanoSaudePet"
                                                value={opcao.valor}
                                                checked={possuiPlanoSaudePet === opcao.valor}
                                                onChange={() => setPossuiPlanoSaudePet(opcao.valor)}
                                                className="w-4 h-4"
                                                style={{ accentColor: config.PopUpsBotaoCor ?? '' }}
                                            />
                                            {opcao.label}
                                        </label>
                                    ))}
                                </div>
                                {!!erros.plano && <p className="text-red-600 text-[13px] mt-1">{erros.plano}</p>}
                            </div>

                            <button
                                type="submit"
                                disabled={enviando}
                                className="w-full h-[52px] mt-2 rounded-[10px] text-white font-semibold text-[16px] hover:brightness-110 transition disabled:opacity-60 disabled:cursor-not-allowed"
                                style={{ backgroundColor: config.PopUpsBotaoCor ?? '' }}
                            >
                                {enviando ? 'Enviando...' : 'Enviar'}
                            </button>
                        </form>
                    </>
                )}
            </div>
        </div>
    );
};

export default ModalFormularioPost;