import AvatarInput from "@/components/Forms/InputAvatar";
import PopoverResponsaveis from "@/components/Kanban/popoverResponsaveis";
import ModalComponente from "@/components/Modal/ModalComponente";
import { trocarIndicatorColeta } from "@/requests/CRUD/ColetaDados/cadastroColetaDados";
import { listarTiposNegocios } from "@/requests/CRUD/TiposNegocios/listarTiposNegocios";
import { useAuth } from "@/src/contexts/authContext";
import { useKanbanContext } from "@/src/contexts/kanbanContext";
import { FormatFields, GetForm } from "@/utils";
import { Check, InfoIcon, ShieldAlert, Tags, User } from "lucide-react";
import Link from "next/link";
import { Fragment, useEffect, useState } from "react";
import { BsWhatsapp } from "react-icons/bs";
import * as yup from "yup";

import LoaderSun from "@/components/common/Loader/LoaderSun";
import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import InputSelectComponent from "@/components/Forms/InputSelect";
import PopoverEtiqueta from "@/components/Kanban/popoverEtiqueta";
import { handleSweetAlert } from "@/components/Modal/SweetAlertConfirm";
import NewContactScheduler from "@/components/SpeedDial/modalNewContactScheduler";
import ConsultaIndicadores from "@/pages/Indicadores/ConsultaIndicadores";
import { obterAgendamentoInstalacaoNegocio } from "@/requests/CRM/AgendamentosInstalacoes/obterAgendamentoInstalacaoNegocio";
import { obterConclusaoInstalacao } from "@/requests/CRM/AgendamentosInstalacoes/obterConclusaoInstalacao";
import {
  cadastrarEtiquetasCard,
  cadastrarUrgenciaCard,
  cadastroEtiquetas,
  listarDadosCard,
} from "@/requests/CRM/kanban";
import { editarCliente } from "@/requests/CRUD/Cliente/editarCliente";
import { listarContatos } from "@/requests/CRUD/Cliente/listarClientes";
import { editarNomeNegocio } from "@/requests/CRUD/ColetaDados/editarColeta";
import { listarMeiosPagamento } from "@/requests/CRUD/MeiosPagamento/listarMeioPagamento";
import { obterNegocios } from "@/requests/CRUD/Negocios/obterNegocios";
import { listarServicos } from "@/requests/CRUD/TiposServico/listarServicos";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { useUsuarios } from "@/src/contexts/userContext";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@radix-ui/react-popover";
import { BiMoney } from "react-icons/bi";
import { CiBank } from "react-icons/ci";
import { FaEdit } from "react-icons/fa";
import { FaPix } from "react-icons/fa6";
import { MdOutlineChangeCircle } from "react-icons/md";
import { toast } from "react-toastify";

const CardInfoCliente = ({
  dadosCard,
  dadosCliente,
  setNovoNomeNegocio,
  dadosEtiquetas,
  updateDados,
  blockEditCard,
  responsaveisInativos,
  reListarDadosKanban,
}: any) => {
  const { listarDadosKanban, cardsState, setCardsState, renameMenu } =
    useKanbanContext();

  const [yupSchema, setYupSchema] = useState<
    yup.ObjectSchema<{}, yup.AnyObject, {}, "">
  >(yup.object().shape({}));
  const { handleSubmit, isSubmitting, ...form } = GetForm(
    yupSchema,
    setYupSchema,
  );
  const [negocios, setNegocios] = useState<any[]>([]);
  const { logout, valuesSession, perfil, usuario } = useAuth();
  const { usuarios } = useUsuarios();
  // const [consumoCliente, setConsumoCliente] = useState<any>([]);
  const [hasAgendamentoInstalacoes, setHasAgendamentoInstalacoes] =
    useState<any>([]);
  const [todasPendenciasConcluidas, setTodasPendenciasConcluidas] =
    useState<any>([]);
  const [hasConclusaoInstalacoes, setHasConclusaoInstalacoes] = useState<any>(
    [],
  );
  // const [ucGeradora, setUcGeradora] = useState<any>([]);
  const [allResponsaveis, setAllResponsaveis] = useState<any>([]);
  const [openModalResponsavel, setOpenModalResponsavel] = useState(false);
  const [tiposNegocio, setTiposNegocio] = useState<any>([]);
  const [cargoResponsavel, setCargoResponsavel] = useState<any>();
  const [responsaveis, setResponsaveis] = useState<any>([]);
  const [contatoData, setContatoData] = useState<any>([]);
  const { session } = valuesSession();
  const { isMobile } = useScreenContext();
  const telefoneFormatado = dadosCliente?.telefone1_cliente?.replace(
    /[\(\)\-\s]/g,
    "",
  );

  const [etiquetas, setEtiquetas] = useState(dadosEtiquetas);
  const [editNomeNegocio, setEditNomeNegocio] = useState(false);
  const [etiquetasCard, setEtiquetasCard] = useState<any[]>([]);
  const [openModalEditarCliente, setOpenModalEditarCliente] = useState(false);
  const [meiosPagamento, setMeiosPagamento] = useState<any>([]);
  const [selectedMeioPagamento, setSelectedMeioPagamento] = useState<any>(
    dadosCard?.recebimentoIndicador_coleta,
  );
  const [indicatorButtonLoading, setIndicatorButtonLoading] =
    useState<any>(false);

  const [urgenciaSelecionada, setUrgenciaSelecionada] = useState<[any, any]>([
    "Sem urgência",
    "",
  ]);
  const [openModalTrocaIndicador, setOpenModalTrocaIndicador] = useState(false);
  const [selectedIndicador, setSelectedIndicador] = useState<any>(
    dadosCard?.indicador_cliente,
  );
  // const [indicadores, setIndicadores] = useState<any>([]);
  // const [indicadoresFiltrados, setIndicadoresFiltrados] = useState<any>([]);
  const [openModalMeioPagamento, setOpenModalMeioPagamento] = useState(false);
  let todasEtiquetas = [] as any;
  const CamposTags = [
    { id: 1, name: "Etiquetas", icone: <Tags size={18} /> },
    { id: 2, name: "Urgência", icone: <ShieldAlert size={17} /> },
  ];
  const urgencias = [
    { title: "Sem urgência", cor: "" },
    { id: 1, title: "Alta", cor: "danger" },
    { id: 2, title: "Média", cor: "warning" },
    { id: 3, title: "Baixa", cor: "primary" },
  ];
  const { openMenu } = useKanbanContext();
  const [nomeNeg, setNomeNeg] = useState({
    nome_negocio_coleta: dadosCard?.nome_negocio_coleta,
    tipo_servico_coleta: dadosCard?.tipo_servico_coleta,
    qtdModulos_coleta: dadosCard?.qtdModulos_coleta,
  });

  const [tiposServicos, setTiposServicos] = useState<any[]>([]);
  const [isLoaded, setIsLoaded] = useState(false);

  const handleInputChange = (event: any) => {
    setNovoNomeNegocio(event.target.value);
    setNomeNeg((prev) => ({
      ...prev,
      nome_negocio_coleta: event.target.value,
    }));
  };
  useEffect(() => {
    if (dadosCard) {
      const foundUrgencia = urgencias.find((e) => e.id == dadosCard?.urgencia);

      setUrgenciaSelecionada(
        foundUrgencia
          ? [foundUrgencia.title, foundUrgencia.cor]
          : ["Sem urgência", ""],
      );

      const etiquetasFiltradas = dadosEtiquetas.filter((etiqueta: any) => {
        if (dadosCard?.etiquetas) {
          return dadosCard?.etiquetas.some(
            (cardEtiqueta: any) =>
              cardEtiqueta.id_etiqueta_kanban === etiqueta.id_etiqueta_kanban,
          );
        }
        return false;
      });

      setEtiquetasCard(etiquetasFiltradas);
    }
  }, [dadosEtiquetas]);

  useEffect(() => {
    // listarTodasPendenciasConcluida(dadosCard?.id_coleta_cliente).then((res) => {
    //   setTodasPendenciasConcluidas(res[0]?.todasPendencias_concluidas_coleta);
    // });
    obterAgendamentoInstalacaoNegocio(dadosCard?.id_coleta_cliente).then(
      (res) => {
        setHasAgendamentoInstalacoes(res);
      },
    );
    obterConclusaoInstalacao(dadosCard?.id_coleta_cliente).then((res) => {
      setHasConclusaoInstalacoes(res);
    });
  }, [dadosCard]);

  const salvaEtiquetas = () => {
    if (dadosCard) {
      const idCard = dadosCard?.id;
      const data = { todasEtiquetas, idCard, id_usuario: session.id_usuario };

      cadastrarEtiquetasCard(data).then(() => {
        listarDadosKanban();
      });
    }
  };
  const salvaUrgencia = (e: string) => {
    if (dadosCard) {
      const idCard = dadosCard?.id;
      const data = { urgencia: e, idCard, id_usuario: session.id_usuario };
      cadastrarUrgenciaCard(data).then(() => {
        listarDadosKanban();
      });
    }
  };
  useEffect(() => {
    if (dadosCard.tipoNegocio_coleta === "3" && dadosCard.cod_coleta) {
      obterNegocios({
        tipoNegocio_coleta: "1",
      }).then((res) => {
        setNegocios(res.filter((c: any) => Number(c.indexAtual_coleta) >= 6));
      });
    }
  }, [dadosCard]);
  const handleTags = (tag: any) => {
    const etiquetasTeste = etiquetasCard.filter((etiqueta: any) => {
      return tag.id_etiqueta_kanban.includes(etiqueta.id_etiqueta_kanban);
    });
    if (etiquetasTeste.length > 0) {
      setEtiquetasCard(
        etiquetasCard.filter((etiqueta: any) => {
          return tag.id_etiqueta_kanban !== etiqueta.id_etiqueta_kanban;
        }),
      );
      todasEtiquetas = etiquetasCard.filter((etiqueta: any) => {
        return tag.id_etiqueta_kanban !== etiqueta.id_etiqueta_kanban;
      });
      salvaEtiquetas();
    } else {
      setEtiquetasCard([...etiquetasCard, tag]);
      todasEtiquetas = [...etiquetasCard, tag];
      salvaEtiquetas();
    }
  };

  const handleTickets = (ticket: any) => {
    cadastroEtiquetas(ticket).then((res) => {
      listarDadosCard(
        dadosCard?.id,
        dadosCard?.id_cliente,
        dadosCard?.id_coleta_cliente,
        dadosCard?.financiador,
      ).then((res) => {
        setEtiquetas(res.etiquetas);
        listarDadosKanban();
      });
    });
  };
  useEffect(() => {
    if (dadosCard.tipoNegocio_coleta === "3" && dadosCard.cod_coleta) {
      obterNegocios({
        tipoNegocio_coleta: "1",
        concluidos: 1,
      }).then((res) => {
        setNegocios(res.filter((c: any) => Number(c.indexAtual_coleta) >= 6));
      });
    }
  }, [dadosCard]);
  const handleChangeUrgencia = (e: any) => {
    setUrgenciaSelecionada([e.name, e.color]);
    salvaUrgencia(e.name);
  };

  const ordemDesejada = [
    "Administrativo",
    "Vendedor",
    "Pré-Vendedor", // <- movido para cima
    "Técnico",
    "Instalador", // <- agora está depois do Pré-Vendedor
    "Gerente",
    "Supervisor",
  ];

  useEffect(() => {
    listarTiposNegocios().then((res) => {
      setTiposNegocio(
        res.filter(
          (negocio: any) =>
            negocio.id_tipo_negocio == dadosCard?.tipoNegocio_coleta,
        ),
      );
    });
    if (dadosCard?.tipoNegocio_coleta == "2") {
      listarServicos()
        .then((res) =>
          setTiposServicos(
            res.filter((tipo: any) => tipo.categoria_tipo_servico == "1"),
          ),
        )
        .finally(() => setIsLoaded(true));
    } else {
      setIsLoaded(true);
    }
  }, []);

  const consumoMedio = dadosCard?.media_consumo_coleta
    ? FormatFields.formatarNumero(dadosCard?.media_consumo_coleta)
    : "Não disponível";

  const negocioCard =
    tiposNegocio.length > 0
      ? tiposNegocio[0].nome_tipo_negocio
      : "Não disponível";

  const ucCard = dadosCard?.numero_uc_coleta
    ? dadosCard?.numero_uc_coleta
    : "Não disponível";

  useEffect(() => {
    if (dadosCard && dadosCard?.responsaveis) {
      const fetchResponsaveis = async () => {
        const responsaveisPromises = Object.entries(dadosCard?.responsaveis)
          .filter(([nome, id]) => id) // Filtra apenas IDs que existem
          .map(async ([nome, id]) => {
            const usuario = usuarios?.find(
              (usuario) => usuario.id_usuario == id,
            );
            return [nome, usuario];
          });

        const results = await Promise.all(responsaveisPromises);
        const responsaveisMap = results.reduce((acc: any, [nome, usuario]) => {
          acc[nome] = usuario;
          return acc;
        }, {});

        setResponsaveis(responsaveisMap);
      };
      fetchResponsaveis();
    }
    // listarIndicadores().then((res) => {
    //   setIndicadores(res);
    //   setIndicadoresFiltrados(res);
    // });
  }, [dadosCard?.responsaveis]);

  useEffect(() => {
    if (responsaveis) {
      setAllResponsaveis(
        ordemDesejada.map((posicao) => {
          if (responsaveis[posicao]) {
            return [posicao, responsaveis[posicao]];
          } else {
            return [
              posicao,
              {
                nome_usuario: "Usuário não definido",
                cargo_perfil: "N/A",
                avatar_usuario: "placeholder", // Adicione o caminho para a imagem de placeholder
              },
            ];
          }
        }),
      );
    }
  }, [responsaveis, dadosCard?.responsaveis]);

  // useEffect(() => {
  //   const idColeta = dadosCard?.id_coleta_cliente;

  //   listarConsumoCliente(idColeta).then((res) => {
  //     setConsumoCliente(res);
  //   });
  // }, [dadosCard]);
  useEffect(() => {
    const isDadosClienteValido =
      dadosCliente && Object.keys(dadosCliente).length > 0;
    if (!isDadosClienteValido) {
      return;
    }

    const data = {
      id_usuario: dadosCliente.responsavel_cliente,
      estado_cliente: dadosCliente.estado_cliente,
      cidade_cliente: dadosCliente.cidade_cliente,
      origem_cliente: dadosCliente.origem_cliente,
      status_cliente: dadosCliente.status_cliente,
      tipoPessoa_cliente: dadosCliente.tipoPessoa_cliente,
    };

    const getDadosContatos = async (data: any) => {
      try {
        const res = await listarContatos(data);
        const findContato = res.find(
          (contato: any) => contato.id_cliente == dadosCard?.id_cliente,
        );
        setContatoData(findContato);
      } catch (error) {
        console.error("Erro ao listar contatos:", error);
      }
    };

    getDadosContatos(data);
  }, [dadosCliente]);

  // useEffect(() => {
  //   const idColeta = dadosCard?.id_coleta_cliente;

  //   listarConsumoUcGeradora(idColeta).then((res) => {
  //     setUcGeradora(res);
  //   });
  // }, [dadosCard]);

  const submitEditContact = async (data: any) => {
    //verificar data nascimento
    // const validated = validarDataNascimento(
    //   data["dataNascimentoResponsavel_cliente"]
    // );

    // if (!validated) {
    //   toast.error("Data Nascimento Inválida, deve ser maior de 18 anos!");
    //   return;
    // }
    data["id_cliente"] = dadosCliente.id_cliente;
    editarCliente(data).then(() => {
      listarDadosKanban();
      updateDados();
      listarContatos().then((res) => {
        const findContato = res.find(
          (contato: any) => contato.id_cliente == dadosCard?.id_cliente,
        );
        setContatoData(findContato);
      });
      setOpenModalEditarCliente(false);
    });
  };
  const selectMeioPagamentoFunction = () => {
    setIndicatorButtonLoading(true);

    setOpenModalMeioPagamento(false);
    setIndicatorButtonLoading(false);
  };

  useEffect(() => {
    if (selectedIndicador) {
      listarMeiosPagamento().then((res) => {
        const filtred = res.filter(
          (meio: any) =>
            meio.codIndicador_meio_recebimento == selectedIndicador,
        );
        setMeiosPagamento(filtred);
      });
    } else {
      setMeiosPagamento([]);
    }
  }, [selectedIndicador]);

  const proposta = dadosCard?.propostas?.find(
    (proposta: any) =>
      proposta.status_proposta == "1" || proposta.status_proposta == "0",
  );
  const handleChangeName = () => {
    setNovoNomeNegocio(nomeNeg.nome_negocio_coleta);
    setEditNomeNegocio(false);
    // if (nomeNeg.nome_negocio_coleta == dadosCard?.nome_negocio_coleta) return;
    const dados = {
      // nome_negocio_coleta: nomeNeg.nome_negocio_coleta,
      ...nomeNeg,
      id_coleta: dadosCard?.id_coleta_cliente,
    };

    editarNomeNegocio(dados).then(async () => {
      await reListarDadosKanban();
      const cardInfo = cardsState[String(dadosCard.id)];
      renameMenu(`Detalhes do Negócio ${dadosCard?.id_coleta_cliente} -
    ${nomeNeg.nome_negocio_coleta}`);
      setCardsState((prev: any) => ({
        ...prev,
        [String(dadosCard.id)]: {
          ...cardInfo,
          nome_negocio_coleta: nomeNeg.nome_negocio_coleta,
        },
      }));
    });
  };
  const closeModalResponsavel = () => {
    setOpenModalResponsavel(false);
  };

  const canEditColetaInfo = dadosCard?.sequenciaPendencias_coleta
    ?.split(",")
    ?.includes("3")
    ? dadosCard.propostas.every(
        (proposta: any) => proposta.status_proposta != "1",
      )
    : dadosCard?.sequenciaPendencias_coleta?.split(",")?.includes("5")
      ? dadosCard.contratos.every(
          (contrato: any) => contrato.status_contrato != "1",
        )
      : dadosCard?.sequenciaPendencias_coleta?.split(",")?.includes("8") &&
        +dadosCard?.indexAtual_coleta >
          +dadosCard?.sequenciaPendencias_coleta?.split(",")?.indexOf("8");

  return (
    <>
      <Fragment>
        <div
          className={`max-md:grid text-xs lg:h-full flex w-full lg:space-x-2`}
        >
          <div className="relative max-sm:pb-4 justify-start items-center max-md:w-full w-[25%] pt-1 lg:pr-4 lg:pl-4 lg:border border-gray-300 max-sm:rounded-t-lg lg:rounded-lg bg-white flex flex-col gap-4">
            <div className=" relative flex  lg:justify-center items-center w-full">
              <h2 className="text-sm font-bold max-md:hidden">Contato</h2>
              {!blockEditCard &&
                perfil.permite_editar_contato_perfil == "1" && (
                  <button
                    disabled={blockEditCard}
                    title="Editar"
                    className="absolute max-sm:top-[1px] right-0 bg-gray-200 p-2 rounded-full hover:bg-gray-300"
                    type="button"
                    onClick={() => {
                      !isMobile
                        ? setOpenModalEditarCliente(true)
                        : openMenu(
                            <NewContactScheduler
                              defaultValues={contatoData}
                              onSubmitFunction={submitEditContact}
                            >
                              <button id="onlyforsubmit"></button>
                            </NewContactScheduler>,
                          );
                    }}
                  >
                    <FaEdit
                      size={isMobile ? 15 : 21}
                      className="text-gray-600"
                    />
                  </button>
                )}
            </div>
            <div className="flex w-full px-4 max-md:!self-start lg:justify-center items-center h-full">
              <div className="flex  justify-center items-center">
                <User size={50} className="bg-stroke rounded-md p-2" />
              </div>
              <div className="flex flex-col w-full lg:gap-1 ml-4">
                <span className="font-medium buttonTeste dark:text-white text-black">
                  {dadosCliente?.nome_cliente}
                </span>
                <Link
                  target="_blank"
                  href={`https://wa.me/${telefoneFormatado}`}
                >
                  <span
                    title="Enviar Whatsapp"
                    className=" max-md:hidden flex items-center gap-2 text-success cursor-pointer mt-1"
                  >
                    <BsWhatsapp />
                    {dadosCliente?.telefone1_cliente}
                  </span>
                </Link>
                {dadosCliente?.rua_cliente ||
                dadosCliente?.cidade_cliente ||
                dadosCliente?.estado_cliente ? (
                  <span className=" lg:mt-1">
                    {[
                      dadosCliente?.rua_cliente,
                      dadosCliente?.nro_cliente,
                      dadosCliente?.comp_cliente,
                      dadosCliente?.bairro_cliente,
                      dadosCliente?.cidade_cliente,
                      dadosCliente?.estado_cliente,
                    ]
                      .filter(Boolean)
                      .join(", ")}
                  </span>
                ) : (
                  <span className="  mt-1">Endereço não disponível</span>
                )}
                <div className=" flex items-center">
                  <span className="font-bold">Origem:</span>
                  <span className="ml-1">{dadosCard?.nome_origem_coleta} </span>
                </div>
                <div className=" flex items-center">
                  {dadosCard?.nomeIndicador_coleta && (
                    <>
                      <span className="font-bold">Indicador:</span>
                      <span className="ml-1">
                        {dadosCard?.nomeIndicador_coleta}
                      </span>
                    </>
                  )}
                  {
                    // dadosCard?.status_coleta < 3 &&
                    //   dadosCard?.indicacao_origem_coleta != 0 &&
                    dadosCliente?.indicador_cliente && (
                      <MdOutlineChangeCircle
                        size={22}
                        color="blue"
                        className="ml-1 cursor-pointer hover:shadow-lg"
                        onClick={() => setOpenModalTrocaIndicador(true)}
                      />
                    )
                  }
                </div>
              </div>
              <div className="w-full  md:hidden">
                {" "}
                <Link
                  target="_blank"
                  href={`https://wa.me/${telefoneFormatado}`}
                >
                  <span
                    title="Enviar Whatsapp"
                    className=" justify-self-end  flex items-center gap-2 text-success cursor-pointer mt-1"
                  >
                    <BsWhatsapp />
                    {dadosCliente?.telefone1_cliente}
                  </span>
                </Link>
              </div>
            </div>
          </div>
          <hr className="lg:hidden " />
          <div className="relative  justify-start items-center max-md:w-full max-sm:w-full w-[25%] pt-1 lg:pr-4 lg:pl-4 lg:border border-gray-300 rounded-b-lg lg:rounded-lg bg-white flex flex-col gap-2">
            <div className="relative flex lg:justify-center items-center w-full">
              <h2 className="text-sm max-sm:w-full max-sm:hidden font-bold">
                Negócio
              </h2>
              {!blockEditCard &&
                perfil.permite_editar_nome_negocio_perfil == "1" && (
                  <button
                    title="Editar"
                    disabled={
                      blockEditCard ||
                      dadosCard?.todasPendencias_concluidas_coleta == "1"
                    }
                    className="absolute max-sm:top-[2px]  right-0 bg-gray-200 p-2 rounded-full hover:bg-gray-300"
                    type="button"
                    onClick={() => {
                      setEditNomeNegocio(true);
                      editNomeNegocio && handleChangeName();
                    }}
                  >
                    {!editNomeNegocio ? (
                      <FaEdit
                        size={isMobile ? 15 : 21}
                        className="text-gray-600"
                      />
                    ) : (
                      <Check size={isMobile ? 15 : 21} />
                    )}
                  </button>
                )}
            </div>
            <div className="text-md text-sm max-sm:pl-4 max-sm:w-full lg:mt-4 max-sm:mb-4">
              <span className="font-bold text-black">
                <input
                  type="text"
                  className={`${editNomeNegocio && "border"} text-center rounded-md`}
                  readOnly={!editNomeNegocio}
                  value={nomeNeg.nome_negocio_coleta}
                  // onBlur={handleChangeName}
                  onChange={handleInputChange}
                />
                {dadosCard?.tipoNegocio_coleta == "2" && isLoaded ? (
                  canEditColetaInfo &&
                  (editNomeNegocio ? (
                    <InputSelectComponent
                      options={tiposServicos?.map((tipo) => ({
                        label: tipo.nome_tipo_servico,
                        value: tipo.id_tipo_servico,
                      }))}
                      defaultValue={nomeNeg.tipo_servico_coleta}
                      onChange={(e: any) => {
                        setNomeNeg((prev) => ({
                          ...prev,
                          tipo_servico_coleta: e?.value,
                        }));
                      }}
                    />
                  ) : (
                    <div>
                      {tiposServicos?.find(
                        (tipo: any) =>
                          tipo.id_tipo_servico == nomeNeg.tipo_servico_coleta,
                      )?.nome_tipo_servico || "Sem tipo de serviço"}
                    </div>
                  ))
                ) : (
                  <div className="flex justify-center w-full">
                    <LoaderSun height={20} />
                  </div>
                )}
                {/* <input
                  type="text"
                  className={`${editNomeNegocio && "border"} text-center rounded-md`}
                  readOnly={!editNomeNegocio}
                  value={nomeNeg.nome_negocio_coleta}
                  onBlur={handleChangeName}
                  onChange={(e) => {
                    setNomeNeg((prev) => ({
                      ...prev,
                      nome_negocio_coleta: e.target.value,
                    }));
                  }}
                /> */}
              </span>
            </div>
            <div className="flex lg:justify-center max-sm:px-4 max-sm:w-full items-center h-full -translate-y-4  ">
              <InfoIcon size={50} className="bg-stroke rounded-md p-2" />
              <div className="flex flex-col gap-1 ml-4">
                <div className="">
                  <span className="font-bold">Loja: </span>
                  {dadosCard?.loja_coleta}
                </div>
                <div className="">
                  <span className="font-bold">Tipo Negócio: </span>
                  {negocioCard}
                </div>
                {dadosCard.tipoNegocio_coleta != "1" &&
                  dadosCard.cod_coleta &&
                  negocios.length > 0 && (
                    <div className="font-bold text-primary">
                      <span className="">Projeto Origem: </span>
                      {dadosCard.cod_coleta} -{" "}
                      {
                        negocios.find(
                          (n: any) => n.id_coleta === dadosCard.cod_coleta,
                        )?.nome_negocio_coleta
                      }
                    </div>
                  )}
                {dadosCard.tipoNegocio_coleta !== "3" && (
                  <div className="">
                    <span className="font-bold">Qtd modulos: </span>
                    {dadosCard?.qtdModulos_coleta}
                  </div>
                )}
                {/* {dadosCard?.tipoNegocio_coleta == "2" ? (
                  <>
                    {canEditColetaInfo && editNomeNegocio ? (
                      <>
                        <Input
                          label={"Qtd modulos"}
                          className={`${editNomeNegocio && "border"} text-center rounded-md`}
                          readOnly={!editNomeNegocio}
                          value={nomeNeg.qtdModulos_coleta}
                          // onBlur={handleChangeName}
                          mascara="numerico"
                          onChange={(e: any) => {
                            setNomeNeg((prev) => ({
                              ...prev,
                              qtdModulos_coleta: e?.target?.value,
                            }));
                          }}
                        />
                      </>
                    ) : (
                      <div className="">
                        <span className="font-bold">Qtd modulos: </span>
                        {dadosCard?.qtdModulos_coleta}
                      </div>
                    )}
                  </>
                ) : (
                  <>
                    <div className="">
                      <span className="font-bold">Unidade Geradora: </span>
                      {ucCard}
                    </div>
                    <div className="">
                      <span className="font-bold">Consumo Médio: </span>
                      {consumoMedio} kW/h
                    </div>
                  </>
                )}
                {dadosCard.tipoNegocio_coleta === "3" &&
                  dadosCard.cod_coleta &&
                  negocios.length > 0 && (
                    <div className="font-bold text-primary">
                      <span className="">Projeto Origem: </span>
                      {dadosCard.cod_coleta} -{" "}
                      {
                        negocios.find(
                          (n: any) => n.id_coleta === dadosCard.cod_coleta,
                        )?.nome_negocio_coleta
                      }
                    </div>
                  )}
                {/* {dadosCard.tipoNegocio_coleta !== "3" && (
                  <div className="">
                    <span className="font-bold">Qtd modulos: </span>
                    {dadosCard?.qtdModulos_coleta}
                  </div>
                )} */}
              </div>
            </div>
          </div>

          <div className="relative justify-start items-center max-sm:hidden lg:w-[25%] lg:pt-1 lg:pr-4 lg:pl-4 lg:border border-gray-300 rounded-lg lg:bg-white flex flex-col gap-4">
            <div className="relative flex justify-center max-sm:hidden items-center w-full">
              <h2 className="text-lg font-bold">Prioridades</h2>
            </div>
            <div className="flex max-sm:grid max-sm:w-full flex-wrap md:gap-2 md:justify-center items-center">
              {CamposTags.map((campo) => (
                <Fragment key={campo.id}>
                  <Popover>
                    <PopoverTrigger asChild>
                      <div
                        key={campo.id}
                        className={`flex gap-1 ${blockEditCard ? "bg-opacity-20 cursor-not-allowed" : "cursor-pointer "} px-2 max-sm:h-9 font-medium items-center bg-stroke max-sm:bg-white max-sm:w-full text-sm w-fit rounded mt-2 lg:mt-3 text-black p-[2px]`}
                      >
                        {campo.name} {campo.icone}
                      </div>
                    </PopoverTrigger>
                    {!blockEditCard &&
                      perfil.permite_editar_prioridade_negocio_perfil ==
                        "1" && (
                        <PopoverContent className="z-9999 dark:bg-black w-fit p-2">
                          <PopoverEtiqueta
                            setUrgencia={handleChangeUrgencia}
                            etiquetasSelecionadas={etiquetasCard}
                            dadosEtiqueta={etiquetas}
                            allTags={handleTags}
                            dados={campo}
                            cadastrarEtiquetas={handleTickets}
                          />
                        </PopoverContent>
                      )}
                  </Popover>
                </Fragment>
              ))}
            </div>

            {/* Urgência e Etiquetas */}
            <div className="grid grid-cols-1 max-md:hidden w-full gap-4">
              <div className="flex flex-col w-full">
                {/* Urgência */}
                <div className="grid w-full mb-2">
                  <span className="text-sm font-medium">Urgência</span>
                  <span
                    className={`text-sm text-center ${
                      urgenciaSelecionada[0] != "Sem urgência" &&
                      "rounded-sm text-white px-9"
                    } bg-${urgenciaSelecionada[1]}`}
                  >
                    {urgenciaSelecionada[0]}
                  </span>
                </div>

                {/* Etiquetas */}
                <div className="grid w-full">
                  <span className="text-sm font-medium">Etiquetas</span>
                  <div className="flex flex-col gap-1 mt-0">
                    {etiquetasCard && etiquetasCard.length === 0 && (
                      <span className="text-sm text-center">
                        Nenhuma etiqueta
                      </span>
                    )}
                    {etiquetasCard &&
                      etiquetasCard.map((item, index) => (
                        <span
                          key={index}
                          style={{
                            backgroundColor: item.cor_etiqueta_kanban,
                          }}
                          className="text-sm text-center px-5 rounded text-white w-full"
                        >
                          {item.titulo_etiqueta_kanban}
                        </span>
                      ))}
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div className="relative justify-start items-center max-sm:mt-3 lg:w-[30%] pt-1 pb-2 lg:pr-4 lg:pl-4 lg:border border-gray-300 rounded-lg bg-white flex flex-col">
            <div className="relative flex justify-center items-center w-full">
              <h2 className="text-sm font-bold max-sm:hidden">Responsáveis</h2>
            </div>
            <div className="grid grid-cols-3 lg:grid-cols-4 gap-1 justify-center items-center w-full">
              {allResponsaveis.map(([nome, responsavel]: any, index: any) => {
                const isUndefinedUser =
                  responsavel.nome_usuario == "Usuário não definido";
                return (
                  <div
                    key={index}
                    className={`flex flex-col ${
                      blockEditCard
                        ? "cursor-not-allowed"
                        : "lg:hover:shadow-lg transition duration-150 cursor-pointer"
                    } items-center justify-center p-1 lg:border rounded-lg lg:shadow-sm ${
                      isUndefinedUser ? "border-red-500" : "border-gray-300"
                    } h-[100%] ${nome === "Administrativo" ? "col-span-2 bg-yellow-50 border-yellow-400" : "w-[100%]"}`}
                    onClick={() => {
                      if (blockEditCard) return;
                      if (
                        nome == "Instalador" &&
                        hasConclusaoInstalacoes?.agendamento
                      ) {
                        toast.warning(
                          `Não é possível alterar o responsável ${allResponsaveis[index][0]}`,
                        );
                        return;
                      }
                      if (
                        perfil.permite_alterar_responsaveis == 0 &&
                        perfil.id_perfil != 1000
                      )
                        return;
                      if (
                        dadosCard?.status_coleta >= 3 &&
                        (nome == "Pré-Vendedor" ||
                          nome == "Vendedor" ||
                          nome == "Gerente")
                      ) {
                        if (perfil.permite_alterar_responsaveis == 1) {
                          handleSweetAlert(
                            {
                              icon: "question",
                              title: `Alteração de ${nome}`,
                              html: `Se houver propostas geradas, as comissões permanecerão para os responsáveis gravados na proposta`,
                              showDenyButton: false,
                            },
                            () => {
                              setOpenModalResponsavel(true);
                              setCargoResponsavel(nome);
                            },
                          );
                        } else if (
                          responsavel.cargo_perfil == perfil.cargo_perfil
                        ) {
                          handleSweetAlert(
                            {
                              icon: "question",
                              title: `Alteração de ${nome}`,
                              html: `Se houver propostas geradas, as comissões permanecerão para os responsáveis gravados na proposta`,
                              showDenyButton: false,
                            },
                            () => {
                              setOpenModalResponsavel(true);
                              setCargoResponsavel(responsavel.cargo_perfil);
                            },
                          );
                        }

                        return;
                      }
                      if (perfil.permite_alterar_responsaveis == 1) {
                        setOpenModalResponsavel(true);
                        setCargoResponsavel(nome);
                      }
                    }}
                  >
                    <div className="relative flex items-center justify-center w-full">
                      <AvatarInput
                        nome_responsavel={responsavel.nome_usuario}
                        cargo_responsavel={nome}
                        height="7"
                        width="7"
                        imageValue={responsavel.avatar_usuario}
                      />
                      {/* {nome === "Administrativo" && (
                        <div className="absolute top-0 right-0 text-yellow-500 text-lg">
                          👑
                        </div>
                      )} */}
                    </div>

                    <span className="mt-1 text-xs font-bold text-gray-700">
                      {nome}
                    </span>
                    <span
                      className={`text-[11px] ${isUndefinedUser ? "text-red-500" : "text-gray-600"} max-sm:text-xs text-center`}
                    >
                      {responsavel.nome_usuario}
                    </span>
                    {!isUndefinedUser && (
                      <div className="mt-2 border-t border-gray-300 w-full"></div>
                    )}
                  </div>
                );
              })}
            </div>
          </div>

          <div className="relative justify-start items-center md:hidden lg:w-[25%] lg:pt-1 lg:pr-4 lg:pl-4 lg:border border-gray-300 rounded-lg lg:bg-white flex flex-col gap-4">
            <div className="relative flex justify-center max-sm:hidden items-center w-full">
              <h2 className="text-lg font-bold">Prioridades</h2>
            </div>
            <div className="flex max-sm:grid max-sm:w-full flex-wrap md:gap-2 md:justify-center items-center">
              {CamposTags.map((campo) => (
                <Fragment key={campo.id}>
                  <Popover>
                    <PopoverTrigger asChild>
                      <div
                        key={campo.id}
                        className={`flex gap-1 ${blockEditCard ? "bg-opacity-20 cursor-not-allowed" : "cursor-pointer "} px-2 max-sm:h-9 font-medium items-center bg-stroke max-sm:bg-white max-sm:w-full text-sm w-fit rounded mt-2 lg:mt-3 text-black p-[2px]`}
                      >
                        {campo.name} {campo.icone}
                      </div>
                    </PopoverTrigger>
                    {!blockEditCard &&
                      perfil.permite_editar_prioridade_negocio_perfil ==
                        "1" && (
                        <PopoverContent className="z-9999 dark:bg-black w-fit p-2">
                          <PopoverEtiqueta
                            setUrgencia={handleChangeUrgencia}
                            etiquetasSelecionadas={etiquetasCard}
                            dadosEtiqueta={etiquetas}
                            allTags={handleTags}
                            dados={campo}
                            cadastrarEtiquetas={handleTickets}
                          />
                        </PopoverContent>
                      )}
                  </Popover>
                </Fragment>
              ))}
            </div>

            {/* Urgência e Etiquetas */}
            <div className="grid grid-cols-1 max-md:hidden w-full gap-4">
              <div className="flex flex-col w-full">
                {/* Urgência */}
                <div className="grid w-full mb-2">
                  <span className="text-sm font-medium">Urgência</span>
                  <span
                    className={`text-sm text-center ${
                      urgenciaSelecionada[0] != "Sem urgência" &&
                      "rounded-sm text-white px-9"
                    } bg-${urgenciaSelecionada[1]}`}
                  >
                    {urgenciaSelecionada[0]}
                  </span>
                </div>

                {/* Etiquetas */}
                <div className="grid w-full">
                  <span className="text-sm font-medium">Etiquetas</span>
                  <div className="flex flex-col gap-1 mt-0">
                    {etiquetasCard && etiquetasCard.length === 0 && (
                      <span className="text-sm text-center">
                        Nenhuma etiqueta
                      </span>
                    )}
                    {etiquetasCard &&
                      etiquetasCard.map((item, index) => (
                        <span
                          key={index}
                          style={{
                            backgroundColor: item.cor_etiqueta_kanban,
                          }}
                          className="text-sm text-center px-5 rounded text-white w-full"
                        >
                          {item.titulo_etiqueta_kanban}
                        </span>
                      ))}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Fragment>

      <ModalComponente
        defaultW="w-[400px]"
        header={`Troca de ${cargoResponsavel}`}
        onClose={closeModalResponsavel}
        hasSaveButton={false}
        opened={openModalResponsavel}
        hasDenyButton={false}
        otherButtons={false}
      >
        <PopoverResponsaveis
          cargoUsuario={perfil.cargo_perfil}
          statusColeta={dadosCard?.status_coleta}
          idColeta={dadosCard?.id_coleta_cliente}
          defaultValues={responsaveis}
          openState={setOpenModalResponsavel}
          cargoSelected={cargoResponsavel || perfil.cargo_perfil}
          ordemDesejada={ordemDesejada}
          idLoja={dadosCard?.id_loja_coleta}
          reListarDadosKanban={reListarDadosKanban}
        />
      </ModalComponente>
      <ModalComponente
        header="Troca de Indicador"
        onClose={() => setOpenModalTrocaIndicador(false)}
        hasSaveButton={false}
        opened={openModalTrocaIndicador}
        hasDenyButton={false}
        otherButtons={false}
        hasForm={false}
        className="h-[80%] w-[80%] overflow-hidden"
      >
        <ConsultaIndicadores
          defaultValues={{
            selectedIndicador: { id_indicador: selectedIndicador },
            codUsuario_indicador: dadosCard?.responsaveis?.["Vendedor"],
          }}
          setSelectedIndicador={(selected: any) =>
            setSelectedIndicador(selected?.id_indicador)
          }
        />
        {/* <div className="flex justify-center items-center">
          <input
            type="text"
            placeholder="Buscar indicador"
            className="border border-gray-300 rounded-lg p-2 w-50 mb-8"
            onChange={(e) => {
              const value = e.target.value;
              const filteredIndicadores = indicadores.filter((indicador: any) =>
                indicador.nome_indicador
                  .toLowerCase()
                  .includes(value.toLowerCase()),
              );
              setIndicadoresFiltrados(filteredIndicadores);
            }}
          />
        </div> */}

        {/* <div className="max-h-150 mb-16">
          <div
            className={`${isMobile ? "grid grid-cols-1" : "grid grid-cols-3"} gap-4`}
          >
            {indicadoresFiltrados.map((indicador: any, index: any) => (
              <label
                key={index}
                className={`flex flex-col p-4 border rounded-lg shadow-sm cursor-pointer transition duration-150 hover:scale-[102%] hover:shadow-lg  ${selectedIndicador == indicador.id_indicador
                    ? "border-success"
                    : ""
                  }`}
                onClick={() => {
                  if (
                    selectedMeioPagamento !=
                    dadosCard?.recebimentoIndicador_coleta
                  ) {
                    setSelectedMeioPagamento(null);
                  }
                  setOpenModalMeioPagamento(true);
                  setSelectedIndicador(indicador.id_indicador);
                }}
              >
                <input
                  type="radio"
                  name="indicador"
                  value={indicador.cpfCnpj_indicador}
                  className="hidden"
                />
                <span className="font-bold">{indicador.nome_indicador}</span>
                <span>CPF/CNPJ: {indicador.cpfCnpj_indicador}</span>
                <span>Telefone: {indicador.telefone_indicador}</span>
                <span>Email: {indicador.email_indicador}</span>
              </label>
            ))}
          </div>
        </div> */}

        <div className="fixed bottom-0 right-0 p-4 w-full bg-white flex justify-end items-center">
          <Button
            type="button"
            className="bg-success text-white rounded-lg p-2"
            onClick={() => {
              if (!selectedMeioPagamento)
                return toast.error("Selecione um Método de pagamento compatível");
              trocarIndicatorColeta({
                id_coleta: dadosCard?.id_coleta_cliente,
                codIndicador_coleta: selectedIndicador,
                recebimentoIndicador_coleta:
                  selectedMeioPagamento?.id_meio_recebimento,
              }).then(() => {
                setOpenModalTrocaIndicador(false);
                listarDadosKanban();
              });
            }}
          >
            Salvar
          </Button>
        </div>
      </ModalComponente>
      <ModalComponente
        header="Método de Pagamento"
        onClose={() => setOpenModalMeioPagamento(false)}
        hasSaveButton={false}
        opened={openModalMeioPagamento}
        hasDenyButton={false}
        otherButtons={false}
        hasForm={false}
      >
        <div className="max-w-lg mx-auto p-4">
          <div className="flex flex-col gap-6">
            {meiosPagamento.length === 0 && (
              <div className="text-center text-gray-500">
                Nenhum Método de pagamento disponível
              </div>
            )}
            {meiosPagamento.map((meio: any) => {
              const getIcon =
                meio.tipo_meio_recebimento === "0" ? (
                  <BiMoney size={20} className="text-green-500" />
                ) : meio.tipo_meio_recebimento === "1" ? (
                  <FaPix size={20} className="text-blue-500" />
                ) : (
                  <CiBank size={20} className="text-gray-500" />
                );

              return (
                <>
                  <div
                    key={meio.id_meio_recebimento}
                    onClick={() => {
                      setSelectedMeioPagamento(meio);
                    }}
                    className={`cursor-pointer p-5 rounded-lg shadow-md transition-transform transform hover:scale-105 hover:shadow-xl border 
            ${
              selectedMeioPagamento?.id_meio_recebimento ===
              meio.id_meio_recebimento
                ? "border-success bg-blue-50"
                : "border-gray-200 bg-white"
            }`}
                  >
                    <div className="flex items-center justify-between">
                      <div className="text-lg font-semibold text-gray-700">
                        {meio.tipo_meio_recebimento === "0"
                          ? "Dinheiro"
                          : meio.tipo_meio_recebimento === "1"
                            ? "Pix"
                            : "Transferência"}
                      </div>
                      <div className="ml-2">{getIcon}</div>
                    </div>
                  </div>
                </>
              );
            })}
          </div>
        </div>
        {meiosPagamento.length > 0 && (
          <div className="flex justify-end">
            <Button
              onClick={() => selectMeioPagamentoFunction()}
              isLoading={indicatorButtonLoading}
              disabled={!selectedMeioPagamento?.id_meio_recebimento}
              className={`px-4 py-2 rounded-lg font-semibold text-white 
            ${selectedMeioPagamento?.id_meio_recebimento ? "bg-success hover:bg-secondaryMenu" : "bg-bodydark2 cursor-not-allowed"}`}
            >
              Salvar
            </Button>
          </div>
        )}
      </ModalComponente>
      <ModalComponente
        header={"Editar Contato"}
        opened={openModalEditarCliente}
        onClose={() => setOpenModalEditarCliente(false)}
        hasSaveButton={true}
        hasForm={false}
        saved={() => {
          document.getElementById("onlyforsubmit")?.click();
        }}
      >
        <NewContactScheduler
          defaultValues={contatoData}
          onSubmitFunction={submitEditContact}
        >
          <button id="onlyforsubmit"></button>
        </NewContactScheduler>
      </ModalComponente>
    </>
  );
};

export default CardInfoCliente;