'use client'

import MaskedInputField from "@/components/InputMask";
import api from "@/services/api";
import sanitizeHtml from "sanitize-html";
import * as Yup from 'yup';

import { onlyNumbers, validateCPF, validateDocument } from "@/utils/functions";
import { FormControl, InputLabel, MenuItem, Select } from "@mui/material";
import { Input } from "@/components/Input";
import { Form, Formik } from "formik";
import { useEffect, useState } from "react";
import { BiSearch } from "react-icons/bi";
import { toast } from "react-toastify";
import { useWebContext } from "@/app/(site)/providers";
import { postDataAccredited } from "@/actions/pageGetAccrenditedAction";
import { IStates } from "@/utils/Interfaces/interfacesHome";
import { maskCEP, maskCNPJ, maskCPF, phoneMask } from "@/utils/functions/Masks";
import { useRouter, useSearchParams } from "next/navigation";

export interface IUtms {
    UtmSource: string,
    UtmMedium: string,
    UtmCampaign: string,
    UtmId: string,
    UtmTerm: string,
    UtmContent: string
};

const initialData = {
    Nome: '',
    Email: '',
    Cnpj: '',
    Cep: '',
    Logradouro: '',
    Numero: '',
    Complemento: '',
    Telefone: '',
    Bairro: '',
    Estados: '',
    Cidades: '',
    Utm: {} as IUtms
};

const validationFormUserSchema = Yup.object({
    Nome: Yup.string().required('Campo obrigatório'),
    Cnpj: Yup.string().required('Campo obrigatório'),
    Email: Yup.string().email('Preencha o campo com um e-mail válido').required('O campo obrigatório'),
    Cep: Yup.string().required('Campo obrigatório'),
    Logradouro: Yup.string().required('Campo obrigatório'),
    Numero: Yup.string().required('Campo obrigatório'),
    Telefone: Yup.string().required('Campo obrigatório'),
    Bairro: Yup.string().required('Campo obrigatório'),
    Estados: Yup.string().required('Campo obrigatório'),
    Cidades: Yup.string().required('Campo obrigatório'),
    Utm: Yup.object().notRequired(),
});

export default function FormGetAccrendited() {
    const [citys, setCitysId] = useState<IStates[]>([]);
    const [statesId, setStatesId] = useState<string>('');

    const { dataStates } = useWebContext();
    const router = useRouter();

    const searchParams = useSearchParams();
    const [utmParams, setUtmParams] = useState<IUtms>({} as IUtms);

    const documentMask = (value: string) => {
        const numericValue = onlyNumbers(value);
        return numericValue.length <= 11 ? maskCPF : maskCNPJ;
    };

    const isValidCpfOrCnpj = (document: string) => {
        const numericValue = onlyNumbers(document);
        return numericValue.length <= 11 ? validateCPF(document) : validateDocument(document);
    };

    const handleSendContact = async (e: any, resetForm: () => void) => {
        try {
            if (!sanitizeHtml(e.Nome) || !sanitizeHtml(e.Logradouro) || !sanitizeHtml(e.Numero) || !sanitizeHtml(e.Bairro)) {
                toast.error('Preencha os campos obrigatórios corretamente.')
                return;
            }

            const data: any = {
                Nome: sanitizeHtml(e.Nome),
                Email: e.Email,
                Documento: onlyNumbers(e.Cnpj),
                Telefone: onlyNumbers(e.Telefone),
                Endereco: sanitizeHtml(e.Logradouro),
                Numero: sanitizeHtml(e.Numero),
                EstadosId: e.Estados,
                CidadesId: e.Cidades,
                Bairro: sanitizeHtml(e.Bairro),
                Complemento: sanitizeHtml(e.Complemento),
                Cep: onlyNumbers(e.Cep),
                Origem: Object.values(utmParams).some(value => value) ? 'CAMPANHA' : 'SITE',
                Local: 2
            };

            if (Object.values(utmParams).some(value => value)) {
                data.Utm = { ...utmParams };
            }

            if (isValidCpfOrCnpj(e.Cnpj) === false) {
                toast.error('Verifique o campo de CPF/CNPJ, talvez ele esteja errado!');
            }

            if (isValidCpfOrCnpj(e.Cnpj) === true) {
                const response = await postDataAccredited(data);
                if (response.Salvo) {
                    toast.success('Dados enviados com sucesso.')
                    router.push(`/parabens-credenciado`);
                    resetForm();
                } else {
                    toast.error(JSON.stringify(response.mensagem));
                }
            }

            Promise.resolve({});
        } catch (e) {
            toast.error('Erro ao enviar dados, verifique os campos abaixo.');
            Promise.resolve({ e });
        }
    };

    useEffect(() => {
        (async () => {
            if (statesId) {
                let res = await api.get(`Cidades/consultar/?EstadosId=${statesId}&order=Nome`);
                if (!res.data.erro) {
                    setCitysId(res.data);
                }
            }
        })()
    }, [statesId]);

    useEffect(() => {
        function getValidUtm(paramName: string) {
            const value = searchParams.get(paramName);
            if (!value) return '';
            if (value.startsWith('amp;')) return '';
            return value;
        }

        const newUtmParams = {
            UtmSource: getValidUtm('utm_source'),
            UtmMedium: getValidUtm('utm_medium'),
            UtmCampaign: getValidUtm('utm_campaign'),
            UtmId: getValidUtm('utm_id'),
            UtmTerm: getValidUtm('utm_term'),
            UtmContent: getValidUtm('utm_content'),
        };
        setUtmParams(newUtmParams);
    }, [searchParams]);
    return (
        <section className="flex justify-center items-center pt-4 relative md:container mx-auto p-8 bg-[#FDF8ED]" id="credenciamento">
            <div className=" pt-4 max-w-xl w-full z-30">
                <h1 className="text-[40px] lg:text-5xl md:text-5xl leading-10 font-bold text-[--primary] md:leading-snug text-center">
                    PREENCHA  <span className="text-[--secundary]">O FORMULÁRIO.</span>
                </h1>
                <p className="mt-5 text-base text-center text-[#504F4B]">
                    <strong>Após envio nosso time entrará em contato.</strong> E logo você fará parte do melhor time de atendimento veterinário do Brasil.
                </p>

                <Formik
                    onSubmit={(values, { resetForm }) => handleSendContact(values, resetForm)}
                    enableReinitialize
                    validationSchema={validationFormUserSchema}
                    validateOnChange={true}
                    validateOnBlur={true}
                    initialValues={{ ...initialData }}
                >
                    {({ errors, values, setFieldValue }) => {

                        return (
                            <Form className="space-y-4 mt-8">
                                <p className="text-sm">Digite os dados da sua clínica:</p>
                                <Input
                                    placeholder="Nome da sua clínica:"
                                    name="Nome"
                                    value={values.Nome}
                                    error={errors ? (errors.Nome as string) : ''}
                                    style={{ "border": 'none' }}
                                />

                                <MaskedInputField
                                    placeholder="CPF/CNPJ"
                                    name="Cnpj"
                                    value={values.Cnpj}
                                    error={errors ? (errors.Cnpj as string) : ''}
                                    mask={documentMask}
                                    label={"CPF/CNPJ"}
                                />

                                <Input
                                    placeholder="E-mail"
                                    name="Email"
                                    value={values.Email}
                                    error={errors ? (errors.Email as string) : ''}
                                    style={{ "border": 'none' }}
                                    type="email"
                                />

                                <MaskedInputField
                                    placeholder="Telefone"
                                    name="Telefone"
                                    value={values.Telefone}
                                    error={errors ? (errors.Telefone as string) : ''}
                                    mask={phoneMask}
                                    label={""}
                                />

                                <div className="relative">
                                    <MaskedInputField
                                        placeholder="CEP"
                                        name="Cep"
                                        value={values.Cep}
                                        error={errors ? (errors.Cep as string) : ''}
                                        mask={maskCEP}
                                        label={""}
                                        onChange={(e: { target: { value: any; }; }) => { return setFieldValue('Cep', e.target.value); }}
                                    />
                                    <button
                                        className="absolute right-3 top-1/2 transform -translate-y-1/2"
                                        type="button"
                                        onClick={async e => {
                                            setFieldValue('Cep', values.Cep);
                                            if (onlyNumbers(values.Cep).length === 8) {
                                                try {
                                                    let Cep = onlyNumbers(values.Cep);
                                                    let res = await api.post('IndividuosEnderecos/ConsultaCep', { Cep });

                                                    if (!res.data.erro) {
                                                        const { logradouro, bairro, estado_id, cidade_id } = res.data;
                                                        setFieldValue('Logradouro', logradouro);
                                                        setFieldValue('Bairro', bairro);
                                                        setFieldValue('Estados', estado_id);
                                                        setStatesId(estado_id)
                                                        setFieldValue('Cidades', cidade_id)
                                                    }
                                                } catch {
                                                    toast.error('Erro ao consultar cep.')
                                                }
                                            }
                                        }}
                                    >
                                        <BiSearch size={25} color="#BBC4C8" />
                                    </button>
                                </div>

                                <a
                                    href="https://buscacepinter.correios.com.br/app/endereco/index.php"
                                    className="text-sm"
                                >
                                    Não sabe seu CEP?
                                </a>

                                <Input
                                    placeholder="Logradouro"
                                    name="Logradouro"
                                    value={values.Logradouro}
                                    error={errors ? (errors.Logradouro as string) : ''}
                                    style={{ "border": 'none' }}
                                />

                                <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
                                    <Input
                                        placeholder="Bairro"
                                        name="Bairro"
                                        value={values.Bairro}
                                        error={errors ? (errors.Bairro as string) : ''}
                                        onFocus={() => setFieldValue(initialData.Bairro, "Bairro")}
                                        style={{ "border": 'none' }}
                                    />

                                    <Input
                                        placeholder="Número"
                                        name="Numero"
                                        value={values.Numero}
                                        error={errors ? (errors.Numero as string) : ''}
                                        style={{ "border": 'none' }}
                                    />

                                    <Input
                                        placeholder="Complemento"
                                        name="Complemento"
                                        value={values.Complemento}
                                        style={{ "border": 'none' }}
                                    />
                                </div>

                                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                                    <FormControl>
                                        <InputLabel className="text-[#a7a7a7]">Estado</InputLabel>
                                        <Select
                                            label="Estados"
                                            style={{ height: 50 }}
                                            size="small"
                                            value={dataStates && Object.values(dataStates).some(state => state.Id === values.Estados) ? values.Estados : ''}
                                            onChange={({ target }) => { setFieldValue('Estados', target.value), setStatesId(target.value) }}
                                            className="w-full p-3 bg-white rounded-lg focus:outline-none focus:ring-2 focus:ring-[#ec9f46]"
                                        >
                                            <MenuItem value="">- Selecione -</MenuItem>
                                            {!!dataStates && Object.values(dataStates).map(item => (
                                                <MenuItem key={item.Id} value={item.Id}>{item.Nome}</MenuItem>
                                            ))}
                                        </Select>
                                    </FormControl>

                                    <FormControl>
                                        <InputLabel className="text-[#a7a7a7]">Cidade</InputLabel>
                                        <Select
                                            label="Cidades"
                                            size="small"
                                            style={{ height: 50 }}
                                            value={citys && Object.values(citys).some(city => city.Id === values.Cidades) ? values.Cidades : ''}
                                            onChange={({ target }) => { setFieldValue('Cidades', target.value) }}
                                            className="w-full p-3 bg-white rounded-lg focus:outline-none focus:ring-2 focus:ring-[#ec9f46] !border-none"
                                        >
                                            <MenuItem value="">- Selecione -</MenuItem>
                                            {!!citys && Object.values(citys).map(item => (
                                                <MenuItem key={item.Id} value={item.Id}>{item.Nome}</MenuItem>
                                            ))}
                                        </Select>
                                    </FormControl>
                                </div>

                                <button
                                    type="submit"
                                    className="mt-6 font-semibold bg-[--secundary] w-full h-[56px] text-white py-2 px-4 rounded-lg shadow-md hover:bg-[#D8A844] flex items-center justify-center"
                                >
                                    Cadastrar
                                </button>
                            </Form>
                        );
                    }}
                </Formik>
            </div>
        </section>
    );
}