import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import InputSelectComponent from "@/components/Forms/InputSelect";
import ModalComponente from "@/components/Modal/ModalComponente";
import { handleSweetAlert } from "@/components/Modal/SweetAlertConfirm";
import { atualizarEtapaFunilNovo } from "@/requests/CRM/kanban";
import { useAuth } from "@/src/contexts/authContext";
import { useKanbanContext } from "@/src/contexts/kanbanContext";
import { FormatFields, GetForm } from "@/utils";
import { Info } from "lucide-react";
import { useRouter } from "next/router";
import { useEffect, useRef, useState } from "react";
import { BiSearch } from "react-icons/bi";
import { MdOutlineTransitEnterexit } from "react-icons/md";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";

const SearchDropdown = ({
  contatos,
  perfil,
}: {
  contatos: any[];
  perfil: any;
}) => {
  const [filteredContatos, setFilteredContatos] = useState<any[]>([]);
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const { setBusinessFilters, funil } = useKanbanContext();
  const router = useRouter();
  const dropdownRef = useRef<HTMLDivElement>(null);
  const [isSubmitting, setIsSubmitting] = useState(false);

  const [etapas, setEtapas] = useState<any[]>([]);
  const [openModalChangeFunil, setOpenModalChangeFunil] = useState([false, ""]);
  const [selectedFunilDestiny, setSelectedFunilDestiny] = useState<any>("");
  const [dadosCard, setDadosCard] = useState<any>();

  const { todosKanbans, reListarDadosKanban } = useKanbanContext();
  const { usuario } = useAuth();

  const [searchFilters, setSearchFilters] = useState<any[]>([
    {
      label: "Número do Projeto",
      value: "id_coleta",
    },
    {
      label: "Nome do Projeto",
      value: "nome_negocio_coleta",
    },
    {
      label: "Nome do Cliente",
      value: "nome_cliente",
    },
    {
      label: "Número de UCs",
      value: "ucs_coleta",
    },
    {
      label: "Numero do Telefone do Cliente",
      value: "telefone1_cliente",
    },
  ]);
  const [selectedSearchFilters, setSelectedSearchFilters] = useState<any[]>([
    "id_coleta",
    "nome_negocio_coleta",
    "nome_cliente",
  ]);
  // const [isOpenEditSearchFilters, setIsOpenEditSearchFilters] = useState(false);

  // Fecha ao clicar fora
  useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      if (
        dropdownRef.current &&
        !dropdownRef.current.contains(event.target as Node)
      ) {
        setDropdownOpen(false);
      }
    }

    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
    const searchValue = e.target.value.toLowerCase();
    const formattedTelefone = FormatFields.formatarTelefone(searchValue);

    const results = contatos.filter(
      (contato) =>
        (selectedSearchFilters?.includes("nome_cliente") &&
          contato.nome_cliente?.toLowerCase().includes(searchValue)) ||
        (selectedSearchFilters?.includes("nome_negocio_coleta") &&
          contato.nome_negocio_coleta?.toLowerCase().includes(searchValue)) ||
        (selectedSearchFilters?.includes("id_coleta") &&
          contato.id_coleta?.toString().includes(searchValue)) ||
        (selectedSearchFilters?.includes("ucs_coleta") &&
          contato.ucs_coleta?.toString().includes(searchValue)) ||
        (selectedSearchFilters?.includes("telefone1_cliente") &&
          formattedTelefone !== "" &&
          contato.telefone1_cliente?.includes(formattedTelefone)),
    );
    setFilteredContatos(results);
    setDropdownOpen(true); // Abre o "dropdown" se houver resultados
  };

  const formDados = GetForm();

  const handleChangeEtapaFunil = async (funil: any) => {
    const data = {
      id_lista: dadosCard?.id_etapa_funil,
      id_card: dadosCard?.id_card,
      index_card: dadosCard?.index_card,
      funil: selectedFunilDestiny,
      etapa_destino: funil.etapa_destino,
      id_usuario: usuario?.id_usuario,
      id_coleta_cliente: dadosCard?.id_coleta,
    };

    atualizarEtapaFunilNovo(data)
      .then(() => {
        setOpenModalChangeFunil([false, ""]);
        reListarDadosKanban();
        // closeModal();
      })
      .finally(() => {
        setIsSubmitting(false);
      });
  };

  return (
    <div className="relative w-full" ref={dropdownRef}>
      <Input
        type="text"
        className="w-full  text-sm border-stroke bg-transparent  px-1 font-medium outline-none transition focus:border-primary dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary text-black-2"
        placeholder="Pesquisar Contato"
        onChange={handleSearch}
        prefix={
          <span className="w-fit flex flex-row gap-1 items-center">
            <Button
              type="button"
              className={` bg-primary flex flex-row gap-2 rounded-full p-0 w-5 h-5`}
              onClick={(e: any) => {
                e.stopPropagation();
                // setIsOpenEditSearchFilters(true);
                withReactContent(Swal).fire({
                  icon: "info",
                  showDenyButton: false,
                  confirmButtonText: "Ok",
                  html: (
                    <div>
                      <div>
                        Nesta lupa é possível pesquisar os projetos em todos os
                        FLUXOS por:
                      </div>
                      <div>
                        {searchFilters?.map((searchFilter, indexFilter) => (
                          <Input
                            label={searchFilter?.label}
                            checked={selectedSearchFilters.some(
                              (id) => id == searchFilter.value,
                            )}
                            key={indexFilter}
                            type="checkbox"
                            onChange={(e) => {
                              if (e.target.checked) {
                                setSelectedSearchFilters((previous) => [
                                  ...previous,
                                  searchFilter?.value,
                                  // ...menu.menus.map((submenu: MenuItem) => submenu.id_menu),
                                ]);
                              } else {
                                setSelectedSearchFilters((previous) =>
                                  previous.filter(
                                    (menufiltro) =>
                                      menufiltro !== searchFilter?.value,
                                    // &&
                                    //   menu.menus.every(
                                    //     (submenu: MenuItem) =>
                                    //       submenu.id_menu != menufiltro,
                                    //   ),
                                  ),
                                );
                              }
                            }}
                          />
                        ))}
                      </div>
                    </div>
                  ),
                  // `
                  //   <div>
                  //     <div>Nesta lupa é possível pesquisar os projetos em todos os FLUXOS por:</div>
                  //     <div>
                  //       <div>01-Número do Projeto,</div>
                  //       <div>02-Nome do Projeto,</div>
                  //       <div>03-Nome do Cliente,</div>
                  //       <div>04-Número de UCs,</div>
                  //       <div>05-Numero do Telefone do Cliente;</div>
                  //     </div>
                  //     <div>Pra isto basta digitar a informação</div>
                  //   </div>
                  // `,
                });
                // .then((searchFilters) => {

                // });
              }}
            >
              <Info size={12} />
            </Button>
            <BiSearch size={17} />
          </span>
        }
        prefixWidth={"50px"}
      />
      {/* {isOpenEditSearchFilters && (
        <ModalComponente
          onClose={() => {
            setIsOpenEditSearchFilters(false);
          }}
          size="lg"
          className="overflow-hidden bg-white"
          opened={isOpenEditSearchFilters}
          hasForm={false}
        >
          <div>
            <div>
              Nesta lupa é possível pesquisar os projetos em todos os FLUXOS
              por:
            </div>
            <div>
              {searchFilters?.map((searchFilter, indexFilter) => (
                <Input
                  label={searchFilter?.label}
                  checked={selectedSearchFilters.some(
                    (id) => id == searchFilter.value,
                  )}
                  key={indexFilter}
                  type="checkbox"
                  onChange={(e) => {
                    if (e.target.checked) {
                      setSelectedSearchFilters((previous) => [
                        ...previous,
                        searchFilter?.value,
                        // ...menu.menus.map((submenu: MenuItem) => submenu.id_menu),
                      ]);
                    } else {
                      setSelectedSearchFilters((previous) =>
                        previous.filter(
                          (menufiltro) => menufiltro !== searchFilter?.value,
                          // &&
                          //   menu.menus.every(
                          //     (submenu: MenuItem) =>
                          //       submenu.id_menu != menufiltro,
                          //   ),
                        ),
                      );
                    }
                  }}
                />
              ))}
            </div>
          </div>
        </ModalComponente>
      )} */}

      {dropdownOpen && (
        <div
          style={{ zIndex: 9999 }}
          className="absolute w-auto min-w-[300px] right-0 mt-1 bg-white border border-gray-300 rounded-lg shadow-lg  max-h-60 overflow-y-auto p-2 gap-2 flex flex-col"
        >
          {filteredContatos.length > 0 ? (
            filteredContatos.map((contato) => {
              const permissoes_etapas_perfil =
                perfil?.permissoes_etapas_perfil.split("^");
              const permissoes_funis_perfil =
                perfil?.permissoes_funis_perfil.split("^");
              const havePermission =
                perfil?.id_perfil == "1000" ||
                (contato.id_funil == "0"
                  ? permissoes_funis_perfil?.includes(contato.id_funil)
                  : permissoes_etapas_perfil?.includes(contato.id_etapa_funil));
              return (
                <div
                  key={contato.id_cliente}
                  style={{
                    backgroundColor: contato?.cor_funil
                      ? `rgba(${parseInt(contato?.cor_funil?.slice(1, 3), 16)}, ${parseInt(contato?.cor_funil?.slice(3, 5), 16)}, ${parseInt(contato?.cor_funil?.slice(5, 7), 16)}, 0.2)`
                      : "transparent",
                  }}
                  className="flex flex-row px-4 py-2 justify-between"
                >
                  <div
                    className={`hover:bg-gray-100 cursor-pointer flex flex-col rounded-md shadow-sm`}
                    onClick={() => {
                      handleSweetAlert(
                        {
                          icon: `${havePermission ? "question" : "error"}`,
                          title: `${
                            havePermission
                              ? `Redirecionar Para o Negócio ${contato.id_coleta}`
                              : `Sem Permissão`
                          }`,
                          html: `${
                            havePermission
                              ? `Tem certeza que deseja ser <b>redirecionado</b> para o fluxo <b>${contato.titulo_funil}</b> na etapa <b>${contato.titulo_etapa_funil}</b>?`
                              : `Você não tem permissão para acessar o funil/etapa deste negócio`
                          }`,
                          showDenyButton: `${havePermission ? true : false}`,
                        },
                        () => {
                          if (!havePermission) return;
                          setBusinessFilters({
                            numNegocio_filtro: contato.id_coleta,
                            noRelist: funil != contato.id_funil,
                          } as any);
                          router
                            .push(`CXESCRM002?funil=${contato.id_funil}`)
                            .then(() => {
                              // setBusinessFilters({
                              //   numNegocio_filtro: contato.id_coleta,
                              // } as any);
                            });
                        },
                      );
                    }}
                  >
                    <span className="font-semibold text-[14px] text-black-2">
                      {contato.nome_cliente} - Negócio {contato.id_coleta}
                    </span>
                    <span className="text-[12px] text-black-2">
                      <b>Nome Negócio:</b> {contato.nome_negocio_coleta}
                    </span>
                    <span className="text-[12px] text-black-2">
                      <b>Fluxo:</b> {contato.titulo_funil}
                    </span>
                    <span className="text-[12px] text-black-2">
                      <b>Etapa:</b> {contato.titulo_etapa_funil}
                    </span>
                  </div>
                  {usuario?.visualiza_mover_card_pesquisa_usuario == "1" && (
                    <div>
                      <button
                        type="button"
                        className="p-2"
                        onClick={() => {
                          setDadosCard(contato);
                          setOpenModalChangeFunil([true, "Mover"]);
                        }}
                      >
                        <MdOutlineTransitEnterexit size={18} />
                      </button>
                    </div>
                  )}
                </div>
              );
            })
          ) : (
            <div className="px-4 py-2 text-gray-500 text-center">
              Nenhum contato encontrado
            </div>
          )}
        </div>
      )}

      {dadosCard && (
        <ModalComponente
          isSubmitting={isSubmitting}
          saved={formDados.handleSubmit(handleChangeEtapaFunil)}
          onClose={() => {
            setOpenModalChangeFunil([false, ""]);
            setDadosCard(undefined);
          }}
          size="md"
          className="overflow-hidden bg-white"
          opened={openModalChangeFunil[0] as boolean}
          hasForm={false}
        >
          <div className="pb-3 w-115">
            <p className="text-black pb-3 text-lg text-left">
              Selecione o <b>Fluxo Destino</b> e a <b>Etapa Destino</b> para{" "}
              {openModalChangeFunil[1]} o card:
            </p>
            <p className="text-black pb-3 text-lg text-Left">
              {`Cliente: `}
              <br />
              <b>{`${dadosCard?.nome_cliente}`}</b>
            </p>
            <p className="text-black pb-3 text-lg text-Left">
              {`Negócio: `}
              <br />
              <b>{`${dadosCard?.id_coleta} - ${dadosCard?.nome_negocio_coleta}`}</b>
            </p>
            <p className="text-black pb-3 text-lg text-Left">
              {`Fluxo Origem: `}
              <br />
              <b>{`${dadosCard?.titulo_funil}`}</b>
            </p>
            <p className="text-black pb-3 text-lg text-Left">
              {`Etapa Origem: `}
              <br />
              <b>{`${dadosCard?.titulo_etapa_funil}`}</b>
            </p>
            <InputSelectComponent
              name="funil_destino"
              required
              formulario={formDados}
              error="Selecione um fluxo!"
              label="Fluxo Destino"
              onChange={(e: any) => {
                setSelectedFunilDestiny(String(e.value));
                setEtapas([
                  ...todosKanbans.map((funil) => funil.listas_kanban).flat(),
                ]);
              }}
              options={todosKanbans
                // .filter(
                //   (e) => e.id_funil !== dadosLista.id_funil && e.id_funil !== 0
                // )
                .sort((a: any, b: any) => {
                  return a.titulo_funil.localeCompare(
                    b.titulo_funil,
                    undefined,
                    {
                      numeric: true,
                    },
                  );
                })
                .map((res: any) => ({
                  label: res.titulo_funil,
                  value: res.id_funil,
                }))}
            />
            <InputSelectComponent
              name="etapa_destino"
              required
              formulario={formDados}
              error="Selecione uma etapa!"
              label="Etapa Destino"
              options={etapas
                .filter(
                  (etapa: any) =>
                    etapa.grupo_etapa_funil == selectedFunilDestiny,
                )
                .sort((a: any, b: any) => {
                  return String(a.index_etapa_funil).localeCompare(
                    String(b.index_etapa_funil),
                    undefined,
                    { numeric: true },
                  );
                })

                .map((etapa: any) => ({
                  value: String(etapa.id_etapa_funil),
                  label: etapa.titulo_etapa_funil,
                }))}
            />
          </div>
        </ModalComponente>
      )}
    </div>
  );
};

export default SearchDropdown;