import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import InputGroup from "@/components/Forms/InputGroup";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { listarUsuarios } from "@/requests/CRM/Dashboard/listarDashboard";
import { listarClassificacoes } from "@/requests/CRUD/Classificacao/listarClassificacoes";
import { listarContatos } from "@/requests/CRUD/Cliente/listarClientes";
import { listarLojas } from "@/requests/CRUD/Lojas/listarLojas";
import { obterNegocios } from "@/requests/CRUD/Negocios/obterNegocios";
import { listarServicos } from "@/requests/CRUD/TiposServico/listarServicos";
import { useAuth } from "@/src/contexts/authContext";
import { IValueLabel } from "@/types/formInterfaces";
import { FormatFields, GetForm } from "@/utils";
import { Tooltip } from "@mui/material";
import { Info } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import { BiSearch } from "react-icons/bi";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";

const FormContatoExistente = ({
  onSubmitFunction,
  defaultValues,
  disabledFields,
  children,
  hasGerarProposta,
  vendedor,
  tipoNegocio,
  ...rest
}: any) => {
  const { handleSubmit, ...form } = GetForm();
  const [clientes, setClientes] = useState<any[]>([]);
  const [vendedores, setVendedores] = useState<any[]>([]);
  const [simultaneidade, setSimultaneidade] = useState<IValueLabel[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [cpfCnpj, setCpfCnpj] = useState<any>([]);
  const [tipoPessoa, setTipoPessoa] = useState<any>([]);
  const { valuesSession, usuario } = useAuth();
  const { session } = valuesSession();
  const id_usuario = usuario.id_usuario;
  const cargoUsuario = usuario.cargo_perfil;
  const [vendedorAtual, setVendedorAtual] = useState({ label: "", value: "" });
  const [isVendedorDisabled, setIsVendedorDisabled] = useState(false);
  const [lojas, setLojas] = useState<any[]>([]);
  const [negocios, setNegocios] = useState<any[]>([]);
  const [negociosClientes, setNegociosClientes] = useState<any[]>([]);
  const [clienteSelecionado, setClienteSelecionado] = useState<any>();
  const [tiposServicos, setTiposServicos] = useState<any[]>([]);
  const [gerenteProjeto, setGerenteProjeto] = useState<string>("Não definido");
  const [supervisorProjeto, setSupervisorProjeto] =
    useState<string>("Não definido");
  const [lojaSelecionada, setLojaSelecionada] = useState<any>(null);

  const [filteredContatos, setFilteredContatos] = useState<any[]>([]);
  const [dropdownOpen, setDropdownOpen] = useState(false);

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

  const dropdownRef = useRef<HTMLDivElement>(null);
  // const { dadosFunil } = useKanbanContext();

  useEffect(() => {
    if (["2", "3"].includes(tipoNegocio) && !!clienteSelecionado) {
      obterNegocios({
        id_cliente: clienteSelecionado?.id_cliente,
        tipoNegocio_coleta: "1",
        // concluidos: "1",
      }).then((res) => {
        setNegocios(
          res,
          // res.filter((n: any) => n.todasPendencias_concluidas_coleta === "1"),
        );
      });
    }
  }, [clienteSelecionado]);

  useEffect(() => {
    listarUsuarios().then((res) =>
      setVendedores(
        res.map((vendedor: any) => ({
          ...vendedor,
          label: `${vendedor.nome_usuario}`,
          value: `${vendedor.id_usuario}`,
        })),
      ),
    );

    if (tipoNegocio == "2") {
      listarServicos().then((e) => setTiposServicos(e));
    }

    listarClassificacoes().then((res) =>
      setSimultaneidade(
        res
          .filter((e: any) => e.status_classificacao == 1)
          .map((simultaneidade: any) => ({
            label: `${simultaneidade.nome_classificacao}`,
            value: `${simultaneidade.id_classificacao}`,
          })),
      ),
    );
    const buscarClientes = async () => {
      Promise.all([
        listarContatos({
          include_ucs: "1",
        }),
        // obterNegocios(),
      ]).then(([newListaClientes]) => {
        setClientes(newListaClientes);

        // setNegociosClientes(newListaNegocios);
      });
    };
    buscarClientes();
  }, [tipoNegocio]);

  useEffect(() => {
    if (cargoUsuario === 2) {
      setVendedorAtual({
        ...usuario,
        label: usuario?.nome_usuario,
        value: usuario?.id_usuario,
      });
      setIsVendedorDisabled(true);
    }
  }, [usuario]);

  useEffect(() => {
    listarLojas().then((res) => {
      const idsLojaUsuario = session?.id_loja_usuario
        ?.split(",")
        .map((id: any) => id.trim());

      const filtered = res.filter((loja: any) =>
        idsLojaUsuario?.includes(loja.id_loja.toString()),
      );

      setLojas(filtered);

      // Carrega o gerente da loja padrão inicialmente
      const lojaPadrao = filtered.find(
        (loja: any) =>
          loja.id_loja ==
          (usuario?.loja_usuario?.split(",").length == 1
            ? usuario?.loja_usuario
            : usuario?.loja_padrao_usuario || ""),
      );
      setLojaSelecionada(lojaPadrao);

      if (lojaPadrao?.gerente_loja && vendedores.length > 0) {
        const gerenteNome = vendedores.find(
          (v: any) => v.id_usuario == lojaPadrao.gerente_loja,
        )?.nome_usuario;
        setGerenteProjeto(gerenteNome || "Não definido");
      } else {
        setGerenteProjeto("Não definido");
      }
    });
  }, [id_usuario, vendedores]);

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

    const results = clientes.filter(
      (contato) =>
        (selectedSearchFilters?.includes("nome_cliente") &&
          contato.nome_cliente?.toLowerCase().includes(searchValue)) ||
        (selectedSearchFilters?.includes("ucs") &&
          contato.ucs?.toString().includes(searchValue)) ||
        (selectedSearchFilters?.includes("telefone1_cliente") &&
          formattedTelefone !== "" &&
          (contato.telefone1_cliente?.includes(formattedTelefone) ||
            contato.telefone2_cliente?.includes(formattedTelefone))) ||
        (selectedSearchFilters?.includes("cpfcnpj_cliente") &&
          formattedCpfCnpj !== "" &&
          contato.cpfcnpj_cliente
            ?.toString()
            .includes(formattedCpfCnpj)),
    );
    // const results = negocios.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") &&
    //       contato.telefone1_cliente?.includes(
    //         FormatFields.formatarTelefone(searchValue),
    //       )),
    // );
    setFilteredContatos(results);
    setDropdownOpen(true);
  };

  function selectCliente(e: any) {
    const cliente: any = clientes.find((c: any) => c.id_cliente == e.value);

    if (!cliente) {
      setClienteSelecionado(undefined);
      setGerenteProjeto("Não definido");
      setSupervisorProjeto("Não definido");
      return;
    }

    setCpfCnpj(cliente.cpfcnpj_cliente);
    setTipoPessoa(cliente.tipoPessoa_cliente);

    form.setValue("vendedor_negocio" as never, e.responsavel_cliente as never);

    // Busca o vendedor responsável pelo cliente
    const vendedorResponsavel = vendedores.find(
      (vendedor: any) => vendedor.id_usuario == e.responsavel_cliente,
    );

    // Define o supervisor do projeto baseado no supervisor do vendedor
    if (vendedorResponsavel?.supervisor_usuario) {
      const supervisorNome = vendedores.find(
        (v: any) => v.id_usuario == vendedorResponsavel.supervisor_usuario,
      )?.nome_usuario;
      setSupervisorProjeto(supervisorNome || "Não definido");
    } else {
      setSupervisorProjeto("Não definido");
    }

    form.setValue(
      "supervisor_coleta",
      vendedorResponsavel?.supervisor_usuario || null,
    );

    // Define o gerente do projeto baseado na loja selecionada ou loja padrão
    const lojaParaUsar =
      lojaSelecionada ||
      lojas.find((l: any) => l.id_loja == usuario?.loja_padrao_usuario);
    if (lojaParaUsar?.gerente_loja) {
      const gerenteNome = vendedores.find(
        (v: any) => v.id_usuario == lojaParaUsar.gerente_loja,
      )?.nome_usuario;
      setGerenteProjeto(gerenteNome || "Não definido");
    } else {
      setGerenteProjeto("Não definido");
    }

    form.setValue("gerente_coleta", lojaParaUsar?.gerente_loja || null);

    setClienteSelecionado(cliente);
  }

  return (
    <>
      <form onSubmit={handleSubmit(onSubmitFunction)} {...rest}>
        <div className="pt-4">
          <InputGroup align="center">
            <div className="flex items-center w-full gap-5">
              <div className="relative w-full" ref={dropdownRef}>
                <Input
                  type="text"
                  inputClassName="bg-stroke"
                  className="pl-10! pr-4 py-2 w-full rounded-lg border border-trueGray-300
                           focus:outline-none focus:ring-2 focus:ring-gray-400"
                  placeholder="Pesquisar Nome de cliente, Negócio, ID..."
                  onChange={handleSearch}
                  // onChange={() => {}}
                  // prefix={<BiSearch size={17} />}
                  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"}
                />

                {dropdownOpen && (
                  <div
                    style={{ zIndex: 9999 }}
                    className="absolute w-full left-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) => {
                        return (
                          <div
                            key={contato.id_cliente}
                            className={`px-4 py-2 bg-stroke hover:bg-opacity-75 cursor-pointer flex flex-col rounded-md shadow-sm`}
                            onClick={() => {
                              // setDadosCliente(contato);
                              setDropdownOpen(false);
                              const clienteOption = {
                                responsavel_cliente:
                                  contato.responsavel_cliente,
                                value: contato.id_cliente,
                                label: contato.nome_cliente,
                              };
                              form.setValue("cliente", clienteOption);
                              selectCliente(clienteOption);
                            }}
                          >
                            <span className="font-semibold text-[14px] text-black-2">
                              {contato.nome_cliente}
                            </span>
                            <span className="text-[12px] text-black-2">
                              <b>CPF/CNPJ:</b> {contato.cpfcnpj_cliente}
                            </span>
                            <span className="text-[12px] text-black-2">
                              <b>Telefone:</b> {contato.telefone1_cliente}
                            </span>
                            {contato.telefone2_cliente && (
                              <span className="text-[12px] text-black-2">
                                <b>Telefone 2:</b> {contato.telefone2_cliente}
                              </span>
                            )}
                          </div>
                        );
                      })
                    ) : (
                      <div className="px-4 py-2 text-gray-500 text-center">
                        Nenhum contato encontrado
                      </div>
                    )}
                  </div>
                )}
              </div>
              {/* <Tooltip title="ATENÇÃO!!! A busca só retorna contatos de Negócios que já foram totalmente CONCLUÍDOS.">
                <Info size={25} className=" cursor-pointer text-primary" />
              </Tooltip> */}
            </div>
          </InputGroup>
        </div>
        <div className="flex flex-col gap-5 p-3">
          <InputGroup align="center">
            <InputSelectComponent
              formulario={form}
              label="Cliente"
              width={"xl:w-1/4"}
              name="cliente"
              options={clientes
                .filter((e: any) => {
                  const condicaoPendencia =
                    tipoNegocio === "3"
                      ? e.todasPendencias_concluidas_coleta == "1"
                      : true;

                  return condicaoPendencia;
                })
                .map((cliente: any) => ({
                  responsavel_cliente: cliente.responsavel_cliente,
                  value: cliente.id_cliente,
                  label: cliente.nome_cliente,
                }))}
              required
              error={"Preencha o Cliente!"}
              onChange={selectCliente}
            />
            {/* {tipoNegocio === "3" && (
              <InputSelectComponent
                name="negocio"
                label="Negócio"
                formulario={form}
                width={"xl:w-1/4"}
                options={negocios.map((negocio: any) => ({
                  value: negocio.id_coleta,
                  label: negocio.nome_negocio_coleta,
                }))}
                required
                error={"Informe o negócio!"}
              />
            )} */}
            {tipoNegocio == "2" && (
              <>
                <InputSelectComponent
                  name="tipo_servico_coleta"
                  label="Tipo do Serviço"
                  options={tiposServicos
                    ?.filter((tipo: any) => tipo.categoria_tipo_servico == "1")
                    ?.map((tipo) => ({
                      label: tipo.nome_tipo_servico,
                      value: tipo.id_tipo_servico,
                    }))}
                  formulario={form}
                  width={"xl:w-1/4"}
                  required
                  error={"Informe o tipo do Serviço!"}
                />
                {!!clienteSelecionado && negocios?.length > 0 && (
                  <InputSelectComponent
                    name="negocio"
                    label="Negócio"
                    formulario={form}
                    width={"xl:w-1/4"}
                    options={negocios.map((negocio: any) => ({
                      value: negocio.id_coleta,
                      label: negocio.nome_negocio_coleta,
                    }))}
                  />
                )}
              </>
            )}

            <InputSelectComponent
              formulario={form}
              width={"xl:w-1/4"}
              // label="Loja"
              label={
                <span className="w-fit flex flex-row gap-1">
                  <div>Loja</div>
                  <div className="px-1">
                    <Tooltip
                      title={`As Lojas Listadas aqui, são as com o status ATIVO e que tem este tipo de negócio liberado nas configurações da loja.`}
                      placement="top"
                      // type="button"
                      // className={` bg-primary flex flex-row gap-2 rounded-full p-0`}
                      // onClick={(e: any) => {
                      //   e.stopPropagation();
                      //   handleSweetAlert({
                      //     icon: "info",
                      //     title: "Prazos após a primeira parcela",
                      //     showDenyButton: false,
                      //     confirmButtonText: "Ok",
                      //     html: `A primieira parcela é gerada com base na data do primeiro vencimento informado no momento de utilizar a forma de pagamento, portanto uma condição com 2 Prazos irão gerar 03 parcelas, uma condição com 04 prazos irão gerar 05 parcelas, para ficar claro identifique isso na descrição da sua forma de pagamento`,
                      //   });
                      // }}
                    >
                      <Info />
                    </Tooltip>
                  </div>
                </span>
              }
              name="loja_coleta"
              options={lojas
                ?.filter((loja: any) =>
                  loja?.tipos_negocios_loja
                    ?.split(",")
                    ?.includes(String(tipoNegocio)),
                )
                ?.map((loja: any) => ({
                  value: loja.id_loja,
                  label: loja.nome_loja,
                }))}
              required
              error={"Preencha o Representante!"}
              defaultValue={
                usuario?.loja_usuario?.split(",").length == 1
                  ? usuario?.loja_usuario
                  : usuario?.loja_padrao_usuario || ""
              }
              onChange={(e: any) => {
                const loja = lojas.find((l: any) => l.id_loja == e.value);
                setLojaSelecionada(loja);

                // Atualiza o gerente do projeto baseado na loja selecionada
                if (loja?.gerente_loja && vendedores.length > 0) {
                  const gerenteNome = vendedores.find(
                    (v: any) => v.id_usuario == loja.gerente_loja,
                  )?.nome_usuario;
                  setGerenteProjeto(gerenteNome || "Não definido");
                  form.setValue("gerente_coleta", loja.gerente_loja);
                } else {
                  setGerenteProjeto("Não definido");
                  form.setValue("gerente_coleta", null);
                }
              }}
              disabled={usuario?.loja_usuario?.split(",").length == 1}
            />

            <Input
              formulario={form}
              label="Nome do Negócio a ser criado"
              width={"xl:w-1/4"}
              name="nome_negocio"
              required
              error={"Preencha o Negócio!"}
            />
          </InputGroup>

          <Input
            formulario={form}
            label="Observação do negócio"
            name="obs_negocio"
            type="textarea"
            autoComplete="off"
            maxLength={100}
            rows={9}
          />

          {/* Campos informativos de Gerente e Supervisor do Projeto */}
          <div className="text-sm text-gray-600 mb-2">
            <strong>Informações para o Novo Projeto a ser criado</strong>
          </div>
          <div className="p-[2vh] bg-gray-50 border-[#e2e8f0] border-[.1vh] rounded-lg">
            <InputGroup className="mb-4">
              <Input
                label={
                  tipoPessoa ? (tipoPessoa == "F" ? "CPF" : "CNPJ") : "CPF/CNPJ"
                }
                name="cpf_cnpj_display"
                disabled={true}
                value={cpfCnpj || "Não cadastrado"}
                className="bg-gray-100"
                width="xl:w-1/2"
              />
              <Input
                label="Vendedor Responsável"
                name="vendedor_responsavel_display"
                disabled={true}
                value={
                  vendedores.find(
                    (v: any) =>
                      v.id_usuario == clienteSelecionado?.responsavel_cliente,
                  )?.nome_usuario || "Não definido"
                }
                className="bg-gray-100"
                width="xl:w-1/2"
              />
            </InputGroup>
            <InputGroup>
              <Input
                label="Gerente do Projeto"
                name="gerente_projeto_display"
                disabled={true}
                value={gerenteProjeto}
                className="bg-gray-100"
                width="xl:w-1/2"
              />
              <Input
                label="Supervisor do Projeto"
                name="supervisor_projeto_display"
                disabled={true}
                value={supervisorProjeto}
                className="bg-gray-100"
                width="xl:w-1/2"
              />
            </InputGroup>
          </div>

          {children}
        </div>
      </form>
    </>
  );
};

export default FormContatoExistente;