import AvatarInput from "@/components/Forms/InputAvatar";
import ModalRestauracao from "@/components/Modal/ModalRestauracao";
import User1 from "@/public/images/user/user-01.png";
import {
  listarComponentesKitByKitId,
  reabrirColetaDados,
} from "@/requests/CRUD/ColetaDados/cadastroColetaDados";
import { listarTiposTelhados } from "@/requests/CRUD/TiposTelhados/listarTiposTelhados";
import { useAuth } from "@/src/contexts/authContext";
import BoardContext from "@/src/contexts/boardContext";
import { useCapaCard } from "@/src/contexts/CardContext";
import { useKanbanContext } from "@/src/contexts/kanbanContext";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { useUsuarios } from "@/src/contexts/userContext";
import { Tooltip } from "@mui/material";
import {
  addDays,
  differenceInDays,
  isAfter,
  isSameDay,
  parseISO,
  startOfDay,
} from "date-fns";
import {
  AlertTriangle,
  CalendarArrowUp,
  CalendarCheck,
  CheckSquare,
  Clock8,
  FilePlus,
  FileText,
  Mail,
  Map,
  MapPin,
  MoreVertical,
  Phone,
  User,
} from "lucide-react";
import Image from "next/image";
import { Fragment, memo, useContext, useEffect, useRef, useState } from "react";
import { useDrag } from "react-dnd";
import { GrInstall } from "react-icons/gr";
import { IoArrowUndo } from "react-icons/io5";
import { MdOutlineRoofing } from "react-icons/md";
import { twMerge } from "tailwind-merge";

interface DadosExibidos {
  id: string;
  label: string;
  value: any;
}
interface CardProps {
  kanbanId: number;
  data: any;
  index: any;
  listIndex: any;
  tipoKanban: string;
  pendencias: any;
  aceitaProposta: boolean;
  validadeLista: string;
  clickedCard: () => void;
}
interface TipoNegocio {
  id_tipo_negocio: string;
  nome_tipo_negocio: string;
}
type MyElementType = HTMLDivElement;

const CountdownTimer = ({
  cardID,
  targetDateTime,
  validadeLista,
  isTimeExpired,
  setIsTimeExpired,
  isExpiringToday,
  setIsExpiringToday,
  data,
}: any) => {
  const [timeRemaining, setTimeRemaining] = useState<number>(0);

  useEffect(() => {
    calculateTimeRemaining();
  }, [targetDateTime, validadeLista, data?.datahora_na_lista]);

  function calculateTimeRemaining() {
    if (!targetDateTime || !data?.datahora_na_lista) {
      setTimeRemaining(0);
      return;
    }

    try {
      let dataCriacao = parseISO(targetDateTime);
      const datahora = new Date(data.datahora_na_lista);

      if (isNaN(dataCriacao.getTime()) || isNaN(datahora.getTime())) {
        setTimeRemaining(0);
        return;
      }

      dataCriacao = startOfDay(dataCriacao);
      const hoje = startOfDay(new Date());
      // const dddd = differenceInDays(hoje, datahora);
      const dddd = differenceInDays(hoje, startOfDay(datahora));
      const diasNaEtapa = differenceInDays(hoje, dataCriacao);
      const dataValidadeCalculada = addDays(dataCriacao, Number(validadeLista));

      if (isAfter(hoje, dataValidadeCalculada)) {
        setIsTimeExpired(true);
        setIsExpiringToday(false);
      } else if (isSameDay(hoje, dataValidadeCalculada)) {
        setIsExpiringToday(true);
        setIsTimeExpired(false);
      } else {
        setIsTimeExpired(false);
        setIsExpiringToday(false);
      }
      setTimeRemaining(dddd);
    } catch (error) {
      console.error("Erro ao calcular tempo restante:", error);
      setTimeRemaining(0);
    }
  }

  return (
    <div
      className={`text-xs lg:text-[11px] flex items-center gap-1 justify-end text-right ${
        isTimeExpired
          ? "text-error"
          : isExpiringToday
            ? "text-warning"
            : "text-black"
      }`}
    >
      {isTimeExpired ? (
        <AlertTriangle color="red" size={13} />
      ) : isExpiringToday ? (
        <Clock8 color="yellow" size={13} />
      ) : (
        <Clock8 color="#008000" size={13} />
      )}
      {`${timeRemaining} dias`}
    </div>
  );
};

const ResponsavelComponent = ({
  perfil,
  data,
  setCargoResponsavel,
  ordemDesejada,
}: any) => {
  const [allResponsaveis, setAllResponsaveis] = useState<any>([]);
  const { usuarios } = useUsuarios();
  const badgeRef = useRef<HTMLDivElement>(null);
  const [popupOpen, setPopupOpen] = useState(false);
  const [popupPos, setPopupPos] = useState({ top: 0, left: 0 });
  const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const { isMobile } = useScreenContext();
  const clearCloseTimeout = () => {
    if (closeTimeoutRef.current) {
      clearTimeout(closeTimeoutRef.current);
      closeTimeoutRef.current = null;
    }
  };

  const scheduleClose = () => {
    clearCloseTimeout();
    closeTimeoutRef.current = setTimeout(() => setPopupOpen(false), 150);
  };

  useEffect(() => {
    return () => clearCloseTimeout();
  }, []);

  useEffect(() => {
    if (data && data.responsaveis) {
      const fetchResponsaveis = async () => {
        const responsaveisPromises = Object.entries(data.responsaveis)
          .filter(([nome, id]) => id) // Filtra apenas IDs que existem
          .map(async ([nome, id]) => {
            const usuario = usuarios.find((e: any) => e.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;
        }, {});

        if (responsaveisMap) {
          setAllResponsaveis(
            ordemDesejada.map((posicao: any) => {
              if (responsaveisMap[posicao]) {
                return [posicao, responsaveisMap[posicao]];
              } else {
                return [
                  posicao,
                  {
                    nome_usuario: "Usuário não definido",
                    cargo_perfil: "N/A",
                    avatar_usuario: "placeholder",
                  },
                ];
              }
            }),
          );
        }
      };
      fetchResponsaveis();
    }
  }, [data?.responsaveis]);

  const responsaveisDefinidos = allResponsaveis.filter(
    ([_, r]: any) => r.nome_usuario !== "Usuário não definido",
  );

  const total = responsaveisDefinidos.length;

  const firstRow = responsaveisDefinidos.slice(0, total <= 3 ? total : 4);

  const secondRow = total > 4 ? responsaveisDefinidos.slice(4) : [];

  return (
    <>
      {allResponsaveis.length > 0 ? (
        <div className="relative flex items-center">
          <div className="flex flex-col gap-1">
            <div className="flex items-center">
              {firstRow.map(([nome, responsavel]: any, index: number) => (
                <div key={index} className="relative -ml-2 first:ml-0 z-1">
                  <AvatarInput
                    nome_responsavel={responsavel.nome_usuario}
                    cargo_responsavel={nome}
                    height="7"
                    width="7"
                  />
                </div>
              ))}
            </div>

            {secondRow.length > 0 && (
              <div className="flex items-center">
                {secondRow.map(([nome, responsavel]: any, index: number) => (
                  <div key={index} className="relative -ml-2 first:ml-0 ">
                    <AvatarInput
                      nome_responsavel={responsavel.nome_usuario}
                      cargo_responsavel={nome}
                      height="7"
                      width="7"
                    />
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      ) : (
        <div className="flex justify-center items-center">Carregando...</div>
      )}
    </>
  );
};

function Card({
  kanbanId,
  data,
  index,
  listIndex,
  clickedCard,
  pendencias,
  validadeLista,
  tipoKanban,
  aceitaProposta,
}: CardProps) {
  const [guardaAprovacao, setGuardaAprovacao] = useState("");
  const [isTimeExpired, setIsTimeExpired] = useState(false);
  const [isExpiringToday, setIsExpiringToday] = useState(false);

  const [modalRestauracao, setModalRestauracao] = useState<any>(false);
  const [openModalRestaurar, setOpenModalRestaurar] = useState(false);
  const [tiposNegocio, setTiposNegocio] = useState<any>([]);
  const [origemCliente, setOrigemCliente] = useState<any>([]);
  const [responsaveis, setResponsaveis] = useState<any>([]);
  const [allResponsaveis, setAllResponsaveis] = useState<any>([]);
  const [cargoResponsavel, setCargoResponsavel] = useState<any>();
  // const [notasCard, setNotasCard] = useState<any>([]);
  const { logout, valuesSession, perfil, usuario } = useAuth();
  const [tipoPessoa, setTipoPessoa] = useState<any>([]);
  const { reListarDadosKanban } = useKanbanContext();
  const { isMobile } = useScreenContext();

  const [itensParaExibir, setItensParaExibir] = useState<DadosExibidos[]>([]);
  const {
    tiposNegocios,
    origensClientes,
    // notasCards,
    tiposPessoas,
  } = useCapaCard();

  // const [isLoading, setIsLoading] = useState(data.isLoading);

  const ref = useRef<MyElementType>(null);

  const { move }: any = useContext(BoardContext);
  let memTime = 0;

  const urgencias = [
    { title: "Sem urgência", cor: "" },
    { id: 1, title: "Alta", cor: "danger" },
    { id: 2, title: "Média", cor: "" },
    { id: 3, title: "Baixa", cor: "" },
  ];

  const selectedUrgencia = urgencias.find(
    (urgencia) => urgencia.id === parseInt(data.urgencia),
  );

  let backgroundUrgencia = "transparent";

  if (selectedUrgencia) {
    switch (selectedUrgencia.title) {
      case "Baixa":
        backgroundUrgencia = "blue";
        break;
      case "Média":
        backgroundUrgencia = "orange";
        break;
      case "Alta":
        backgroundUrgencia = "red";
        break;
      default:
        backgroundUrgencia = "transparent";
    }
  }

  const [{ isDragging }, dragRef] = useDrag({
    type: "CARD",
    item: () => ({
      type: "CARD",
      index,
      data,
      listIndex,
      aceitaProposta,
      guardaAprovacao,
    }),
    canDrag: kanbanId !== 0,
    collect: (monitor) => ({
      isDragging: kanbanId !== 0 && monitor.isDragging(),
    }),
  });

  const ordemDesejada = [
    "Criador",
    "Administrativo",
    "Vendedor",
    "Técnico",
    "Pré-Vendedor",
    "Instalador",
    "Gerente",
    "Supervisor",
  ];

  const [dataLogCard, setDataLogCard] = useState(data.datahora_na_lista);
  const paramsToListarDataLogCard = {
    id_etapa: data.id_lista,
    id_card: data.id,
  };

  useEffect(() => {
    if (data.logs) {
      const filteredLogs = data.logs.filter(
        (log: any) => log.id_lista_log_kanban == data.id_lista,
      );

      if (filteredLogs.length == 0)
        return setDataLogCard(data.datahora_na_lista);
      const dataLog = filteredLogs[filteredLogs.length - 1].datahora_log_kanban;
      setDataLogCard(dataLog);
    }
  }, [data]);

  useEffect(() => {
    const idCliente = data?.id_cliente;
    const idColeta = data?.id_coleta_cliente;

    const clienteOrigem: any = origensClientes.filter(
      (e: any) => (e.id_cliente = idCliente),
    );
    setOrigemCliente(clienteOrigem);

    // const notasCard: any = notasCards.filter(
    //   (e: any) =>
    //     // e.coleta_id_nota_kanban === idColeta &&
    //     e.id_card_nota_kanban === data.id,
    // );
    // setNotasCard(notasCard);

    const tipoPessoa = tiposPessoas
      .filter((e: any) => e.id_cliente == idCliente)
      .map((e: any) => e.tipoPessoa_cliente)[0];

    if (tipoPessoa) {
      const tipo_pessoaCliente = tipoPessoa == "F" ? "Fisica" : "Juridica";
      setTipoPessoa(tipo_pessoaCliente);
    }
  }, [
    data,
    // notasCards
  ]);

  const valorOriginalPropostas = data?.propostas || [];
  const propostaAprovada = valorOriginalPropostas.find(
    (proposta: any) => proposta.status_proposta == 1,
  );

  const formatador = new Intl.NumberFormat("pt-BR", {
    style: "currency",
    currency: "BRL",
  });

  const valorPropostaAprovada = propostaAprovada
    ? formatador.format(propostaAprovada.valorTotal_proposta)
    : undefined;

  function getDateCreated() {
    const data2 = new Date(data.datahora);
    if (isNaN(data2.getTime())) return data.datahora;
    const dia = data2.getDate();
    const mes = data2.getMonth() + 1;
    const ano = data2.getFullYear();
    const diaFormatado = dia < 10 ? `0${dia}` : dia;
    const mesFormatado = mes < 10 ? `0${mes}` : mes;
    return `${diaFormatado}/${mesFormatado}/${ano}`;
  }

  const closeModalRestaurar = () => {
    setOpenModalRestaurar(false);
  };

  const datahora = new Date(data.datahora_na_lista);
  const dataFormatada = datahora.toLocaleDateString("pt-BR");

  const onSubmitRestaurar = async (
    motivo: string,
    desc_motivo: string,
    destino?: { funil_destino: string; etapa_destino: string },
  ) => {
    const data_reabrir = {
      id_coleta: data.id_coleta_cliente,
      id_card: data.id,
      motivoCancel_coleta: null,
      dataCancelamento_coleta: null,
      motivoReabertura_coleta: motivo,
      status_coleta: 1,
      id_responsavel: usuario.id_usuario,
      descricao_motivo: desc_motivo,
      funil_destino: destino?.funil_destino,
      etapa_destino: destino?.etapa_destino,
    };

    return reabrirColetaDados(data_reabrir).then(() => {
      reListarDadosKanban();
      setOpenModalRestaurar(false);
    });
  };

  async function handleClickReabrir(e: any) {
    e.stopPropagation();

    setOpenModalRestaurar(!openModalRestaurar);
  }
  const potenciaSistema =
    data.propostas && data.propostas.length > 0
      ? data.propostas.find((proposta: any) => proposta.status_proposta == 1)
          ?.potenciaSistema_proposta
      : undefined;

  const EtiquetasUsuario = () => {
    return (
      data.etiquetas &&
      data.etiquetas.length > 0 && (
        <div className="flex py-2 flex-wrap gap-1">
          {data.etiquetas.map((etiqueta: any, index: number) => (
            <span
              key={index}
              style={{
                backgroundColor: etiqueta.cor_etiqueta_kanban,
              }}
              className="bg-primary rounded-full px-2 text-white font-medium lg:text-[11px] text-xs"
            >
              {etiqueta.titulo_etiqueta_kanban}
            </span>
          ))}
        </div>
      )
    );
  };

  const NomeTipoNegocio = ({ tipoNegocioId }: { tipoNegocioId: string }) => {
    const [tiposNegocio, setTiposNegocio] = useState<TipoNegocio[]>([]);

    useEffect(() => {
      const filtered = tiposNegocios.filter(
        (negocio: TipoNegocio) => negocio.id_tipo_negocio == tipoNegocioId,
      );
      setTiposNegocio(filtered);
    }, [tipoNegocioId]);

    return (
      <div>
        {tiposNegocio.length > 0 ? (
          <span>{tiposNegocio[0].nome_tipo_negocio}</span>
        ) : (
          <span>Carregando...</span>
        )}
      </div>
    );
  };
  const [componentesKit, setComponentesKit] = useState<any[]>([]);
  const [tiposTelhados, setTiposTelhados] = useState<any[]>([]);

  useEffect(() => {
    const fetchKit = async () => {
      const dados = await getDataKit();

      setComponentesKit(dados || []);
    };
    listarTiposTelhados().then(setTiposTelhados);

    fetchKit();
  }, []);
  const getDataKit = async () => {
    const dadosExibidos = data.propostas.filter((p: any) =>
      ["0", "1"].includes(p.status_proposta),
    )[0];

    if (dadosExibidos?.kit_proposta && dadosExibidos.api_kit_proposta == "0") {
      const { componentesKit } = await listarComponentesKitByKitId(
        dadosExibidos?.kit_proposta,
        true,
      );
      return componentesKit;
    }
  };

  const dadosExibidos = [
    { id: "1", label: "Loja", value: data.loja_coleta },
    {
      id: "2",
      label: "Tipo de negócio",
      value: <NomeTipoNegocio tipoNegocioId={data?.tipoNegocio_coleta} />,
    },
    {
      id: "3",
      label: "Criado em (Data que foi criado)",
      value: getDateCreated() || "Data não Informada",
    },
    {
      id: "4",
      label: "Data que Entrou na Etapa",
      value: dataFormatada || "Data não Informada",
    },
    {
      id: "5",
      label: "Responsável",
      value: (
        <ResponsavelComponent
          responsaveis={responsaveis}
          data={data}
          ordemDesejada={ordemDesejada}
          perfil={perfil}
          setCargoResponsavel={setCargoResponsavel}
        />
      ),
    },
    // {
    //   id: "6",
    //   label: "Dias na etapa",
    //   value: (
    //     <CountdownTimer
    //       cardID={data.id_coleta_cliente}
    //       targetDateTime={dataLogCard}
    //       validadeLista={validadeLista}
    //       isTimeExpired={isTimeExpired}
    //       isExpiringToday={isExpiringToday}
    //       setIsExpiringToday={setIsExpiringToday}
    //       setIsTimeExpired={setIsTimeExpired}
    //     />
    //   ),
    // },

    {
      id: "7",
      label: "Telefone do Contato",
      value: data.telefone1_cliente ?? "Telefone não Informado",
    },

    {
      id: "8",
      label: "E-mail do Contato",
      value: data.email_cliente ?? "Email não Informado",
    },
    {
      id: "9",
      label: "Cidade e UF do Contato",
      value:
        data.cidade_cliente && data.estado_cliente
          ? `${data.cidade_cliente} - ${data.estado_cliente}`
          : "Cidade não Informada",
    },
    {
      id: "10",
      label: "Origem do Contato",
      value: data?.nome_origem_coleta ?? "Origem não Informada",
    },

    {
      id: "11",
      label: "Tipo Pessoa do Contato",
      value: tipoPessoa,
    },

    {
      id: "12",
      label: "Documento do Contato (CPF ou CNPJ)",
      value: data.cpfcnpj_cliente ?? "Doc não Informado",
    },
    {
      id: "13",
      label: "Potência do Sistema",
      value: potenciaSistema
        ? `${potenciaSistema} Kw`
        : "Sem proposta aprovada",
    },
    {
      id: "14",
      label: "Consumo Médio",
      value: data?.media_consumo_coleta
        ? `${data?.media_consumo_coleta} (Kw/h)`
        : "Consumo não Informado",
    },

    {
      id: "15",
      label: "Cidade e UF da Instalação",
      value:
        data.cidade_coleta && data.uf_coleta
          ? `${data.cidade_coleta} - ${data.uf_coleta}`
          : "Cidade não Informada",
    },
    {
      id: "16",
      label: "Qtd Propostas Geradas",
      value:
        data.propostas.filter((e: any) => e.status_proposta !== "3").length ||
        "0",
    },
    {
      id: "17",
      label: "Vlr Proposta Aprovada",
      value: valorPropostaAprovada ?? "",
    },
    {
      id: "18",
      label: "Tarefas Pendentes",
      value: data.listaAgendamentos.length ?? "0",
    },
    {
      id: "19",
      label: "Follow-ups Gerados",
      value: data.qtd_follow_ups ?? "0",
    },
    {
      id: "20",
      label: "Prioridade",
      value: selectedUrgencia?.title,
    },
    {
      id: "21",
      label: "Etiquetas",
      value: EtiquetasUsuario(),
    },
    {
      id: "22",
      label: "Linha do Tempo",
      value: pendencias,
    },
    // {
    //   id: "23",
    //   label: "Quantidade de módulos",
    //   value: componentesKit
    //     ?.filter((m: any) => m.tipo_item === "9")
    //     .reduce((acc: number, cur: any) => acc + Number(cur.qtd_item || 0), 0),
    // },
    // {
    //   id: "24",
    //   label: "Quantidade de inversores",
    //   value: componentesKit
    //     ?.filter((m: any) => m.tipo_item === "8")
    //     .reduce((acc: number, cur: any) => acc + Number(cur.qtd_item || 0), 0),
    // },
    // {
    //   id: "25",
    //   label: "Tipo de telhado",
    //   value: pendencias,
    // },
    // {
    //   id: "26",
    //   label: "Potência do módulo",
    //   value: componentesKit
    //     ?.filter((m: any) => m.tipo_item === "9")
    //     .reduce(
    //       (acc: number, cur: any) => acc + Number(cur.potencia_item || 0),
    //       0,
    //     ),
    // },
    // {
    //   id: "27",
    //   label: "Potência do inversor",
    //   value: componentesKit
    //     ?.filter((m: any) => m.tipo_item === "8")
    //     .reduce(
    //       (acc: number, cur: any) => acc + Number(cur.potencia_item || 0),
    //       0,
    //     ),
    // },
  ];
  useEffect(() => {
    let dadosAtualizados = [...dadosExibidos];

    dadosAtualizados = [
      ...dadosAtualizados,
      {
        id: "6",
        label: "Dias na etapa",
        value: (
          <CountdownTimer
            cardID={data.id_coleta_cliente}
            data={data}
            targetDateTime={dataLogCard}
            validadeLista={validadeLista}
            isTimeExpired={isTimeExpired}
            isExpiringToday={isExpiringToday}
            setIsExpiringToday={setIsExpiringToday}
            setIsTimeExpired={setIsTimeExpired}
          />
        ),
      },
      {
        id: "23",
        label: "Quantidade de módulos",
        value: componentesKit
          ?.filter((m: any) => m.tipo_item === "9")
          .reduce(
            (acc: number, cur: any) => acc + Number(cur.qtd_item || 0),
            0,
          ),
      },
      {
        id: "24",
        label: "Quantidade de inversores",
        value: componentesKit
          ?.filter((m: any) => m.tipo_item === "8")
          .reduce(
            (acc: number, cur: any) => acc + Number(cur.qtd_item || 0),
            0,
          ),
      },
      {
        id: "25",
        label: "Tipo de telhado",
        value: tiposTelhados?.find(
          (t: any) =>
            t.id_telhado ==
            data.propostas.filter((p: any) =>
              ["0", "1"].includes(p.status_proposta),
            )[0]?.telhado_proposta,
        )?.nome_telhado,
      },
      {
        id: "26",
        label: "Potência do módulo",
        value: componentesKit
          ?.filter((m: any) => m.tipo_item === "9")
          .reduce(
            (acc: number, cur: any) => acc + Number(cur.potencia_item || 0),
            0,
          ),
      },
      {
        id: "27",
        label: "Potência do inversor",
        value: componentesKit
          ?.filter((m: any) => m.tipo_item === "8")
          .reduce(
            (acc: number, cur: any) => acc + Number(cur.potencia_item || 0),
            0,
          ),
      },
    ];
    if (usuario?.itens_card_usuario) {
      const idsArray = usuario.itens_card_usuario.split("^");
      const filtrados = dadosAtualizados.filter((item) =>
        idsArray.some((usuarioId: any) => usuarioId == item.id),
      );
      setItensParaExibir(filtrados);
    } else {
      setItensParaExibir([]);
    }
  }, [
    componentesKit,
    tiposTelhados,
    index,
    usuario,
    data,
    // notasCard,
    dataLogCard,
    validadeLista,
    isTimeExpired,
    isExpiringToday,
  ]);

  const [tooltipVisible, setTooltipVisible] = useState(false);

  const handleToggleTooltip = (e: any) => {
    e.stopPropagation();
    setTooltipVisible(!tooltipVisible);
  };

  return (
    <div
      onClick={(e) => {
        if (
          (e.target as HTMLElement).classList.contains(
            "react-icons__bs__BsThreeDotsVertical",
          ) ||
          (e.target as HTMLElement).parentElement?.classList.contains(
            "react-icons__bs__BsThreeDotsVertical",
          )
        ) {
        } else if (!openModalRestaurar) {
          clickedCard();
        }
      }}
      ref={dragRef}
      className={twMerge(
        `${
          isDragging
            ? "bg-[rgba(0,0,0,0.1)] shadow-none cursor-grabbing border-[rgba(0,0,0,0.8)]"
            : ` ${kanbanId != 0 ? "cursor-grab " : "cursor-pointer "} ${
                kanbanId == 0
                  ? "bg-white bg-opacity-40 border-2 border-[#94a3b8]"
                  : isTimeExpired
                    ? "bg-white bg-opacity-40 border-2 border-[#ff6666]"
                    : isExpiringToday
                      ? "bg-white bg-opacity-40 border-2 border-[#d8cd2f]"
                      : "bg-white bg-opacity-40 border-2 border-[#2a7323]"
              }    `
        } relative dark:shadow-xl pl-4 shadow-[0_1px_4px_0_rgba(192,208,230,0.8)]   mb-2.5 p-[15px] rounded-xl `,
        // data.isLoading ? "bg-black-2/[0.04]" : "",
      )}
    >
      {/* {data.isLoading && (
        <div className="absolute flex flex-col items-center justify-center top-0 left-0 w-full h-full">
          <div className="flex relative overflow-hidden items-center justify-center w-full">
            <LoaderSun height={80} />
          </div>
        </div>
      )} */}
      {tipoKanban == "task" ? (
        <Fragment>
          <header
            className={`absolute -top-[22px] left-4 ${
              isDragging ? "opacity-0" : "opacity-100"
            }`}
          >
            {data.labels.map((label: any, index: number) => (
              <span
                key={index}
                style={{ backgroundColor: `${label}` }}
                className={`w-2.5 h-2.5 inline-block rounded-sm  ${
                  isDragging ? "opacity-0" : "opacity-100"
                }`}
              />
            ))}
          </header>
          <p
            className={`${
              isDragging ? "opacity-0" : "opacity-100"
            } font-semibold leading-5 dark:text-white`}
          >
            {data.content}
          </p>
          <Image
            className={`w-6 h-6 rounded-sm mt-1 ${
              isDragging ? "opacity-0" : "opacity-100"
            }`}
            src={User1}
            alt=""
          />
        </Fragment>
      ) : (
        <Fragment>
          <header
            className={`left-4 ${isDragging ? "opacity-0" : "opacity-100"}`}
          ></header>

          <div className="relative pt-[22px]">
            <div className="mt-[-20px] lg:!text-[11px] !text-xs">
              <div className="flex items-center mb-1">
                <div className="flex-shrink-0">
                  <div
                    style={{
                      backgroundColor: isTimeExpired
                        ? "#ff6666"
                        : isExpiringToday
                          ? "#ffd700" // Cor para expiração hoje (amarelo)
                          : "#008000", // Cor padrão
                      color: "white",
                      borderRadius: "15%",
                      width:
                        String(data.id_coleta_cliente).length >= 5
                          ? "39px"
                          : "30px",
                      height: "28px",
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                      fontWeight: "bold",
                      fontSize:
                        String(data.id_coleta_cliente).length >= 5
                          ? "9px"
                          : String(data.id_coleta_cliente).length >= 4
                            ? "10px"
                            : "12px",
                    }}
                  >
                    {data.id_coleta_cliente}
                  </div>
                </div>
                <div className="ml-3">
                  <h3 className="text-sm font-semibold break-words max-w-[150px] -z-1">
                    {data.content}
                  </h3>
                  <p className=" font-normal break-words max-w-[150px]">
                    Negócio: {data.nome_negocio_coleta}
                  </p>
                </div>
                {kanbanId == 0 && (
                  <IoArrowUndo
                    size={24}
                    title="Restaurar Card"
                    className="hover:brightness-150 transition-all duration-200 ml-auto shrink-0"
                    onClick={handleClickReabrir}
                  />
                )}
              </div>
              {kanbanId == 0 && (
                <div className="mb-2 rounded-md bg-black/[0.04] px-2 py-1.5 text-[11px] leading-snug text-black/80">
                  <div className="font-semibold truncate">
                    Fluxo:{" "}
                    {data.titulo_funil_origem ||
                      data.funil_card ||
                      "Não informado"}
                  </div>
                  <div className="truncate">
                    Etapa:{" "}
                    {data.titulo_etapa_origem ||
                      data.id_lista ||
                      "Não informada"}
                  </div>
                  {(data.dataCancelamento_coleta ||
                    data.motivo_perdido_coleta) && (
                    <div className="truncate mt-0.5">
                      {data.dataCancelamento_coleta
                        ? `Perda: ${String(data.dataCancelamento_coleta)
                            .split("-")
                            .reverse()
                            .join("/")}`
                        : null}
                      {data.dataCancelamento_coleta &&
                      data.motivo_perdido_coleta
                        ? " · "
                        : null}
                      {data.motivo_perdido_coleta || null}
                    </div>
                  )}
                </div>
              )}
              {/* sasa above */}
              <div className="mb-1 ">{/* <hr /> */}</div>
              <div className="mb-1">
                <div className="flex justify-between items-center">
                  <div className="flex-1 min-w-0">
                    {itensParaExibir
                      .filter((item) => item.id == "2")
                      .map((item) => (
                        <Tooltip title="Tipo do Negócio" key={item.id}>
                          <div
                            key={item.id}
                            className=" font-semibold  truncate block max-w-[160px]"
                          >
                            {item.value}
                          </div>
                        </Tooltip>
                      ))}
                  </div>

                  {itensParaExibir
                    .filter((item) => item.id == "1")
                    .map((item) => (
                      <Tooltip title="Loja" key={item.id}>
                        <div
                          key={item.id}
                          className=" font-semibold ml-4 truncate block max-w-[160px]"
                        >
                          {item.value}
                        </div>
                      </Tooltip>
                    ))}
                </div>
              </div>
              <div className="mb-0">
                <div className="flex justify-between">
                  <div className="flex items-center">
                    {/* Verifica se itensParaExibir contém itens com IDs "11" ou "12" */}
                    {itensParaExibir.some((item) => item.id == "11") ? (
                      <>
                        <div className="flex-shrink-0">
                          <User
                            size={29}
                            className="bg-stroke rounded-md p-2"
                          />
                        </div>
                        <div className="ml-3">
                          {itensParaExibir
                            .filter((item) => item.id == "11")
                            .map((item) => (
                              <Tooltip title="Tipo da Pessoa" key={item.id}>
                                <div className=" text-gray-500">
                                  {item.value}
                                </div>
                              </Tooltip>
                            ))}

                          {itensParaExibir
                            .filter((item) => item.id == "12")
                            .map((item) => (
                              <Tooltip
                                title="Documento do Contato"
                                key={item.id}
                              >
                                <div className=" truncate block max-w-[160px]">
                                  {item.value}
                                </div>
                              </Tooltip>
                            ))}
                        </div>
                      </>
                    ) : null}{" "}
                  </div>
                  <div className="lg:mr-4 text-right">
                    <div className="flex items-center">
                      <div className="ml-3">
                        {itensParaExibir.some((item) => item.id == "3") ? (
                          <>
                            <div className=" text-gray-500 max-sm:text-[11px] flex items-center">
                              <CalendarCheck size={12} className="mr-2" />
                              {itensParaExibir
                                .filter((item) => item.id == "3")
                                .map((item) => (
                                  <Tooltip title="Criado em" key={item.id}>
                                    <div className="truncate block max-w-[160px]">
                                      {item.value}
                                    </div>
                                  </Tooltip>
                                ))}
                            </div>
                          </>
                        ) : null}{" "}
                        {itensParaExibir.some((item) => item.id == "4") ? (
                          <>
                            <div className=" text-gray-500 max-sm:text-[11px] flex items-center">
                              <CalendarArrowUp size={12} className="mr-2" />
                              {itensParaExibir
                                .filter((item) => item.id == "4")
                                .map((item) => (
                                  <Tooltip
                                    title="Entrou na Etapa em"
                                    key={item.id}
                                  >
                                    <div className="truncate block max-w-[160px]">
                                      {item.value}
                                    </div>
                                  </Tooltip>
                                ))}
                            </div>
                          </>
                        ) : null}{" "}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="mb-0 mt-1">
                <div className="flex justify-between">
                  <div className="flex items-center">
                    <div className="ml-3">
                      {itensParaExibir
                        .filter((item) => item.id == "14")
                        .map((item) => (
                          <Tooltip title="Consumo Médio" key={item.id}>
                            <div
                              key={item.id}
                              className=" text-gray-500 truncate block max-w-[160px]"
                            >
                              {item.value}
                            </div>
                          </Tooltip>
                        ))}

                      {itensParaExibir
                        .filter((item) => item.id == "13")
                        .map((item) => (
                          <Tooltip title="Potência do Sistema" key={item.id}>
                            <div
                              key={item.id}
                              className=" text-gray-500 truncate block max-w-[160px]"
                            >
                              {item.value}
                            </div>
                          </Tooltip>
                        ))}
                    </div>
                  </div>
                  <div className="mr-4 text-right ">
                    <div className="flex items-center">
                      <div className="">
                        <div className=" font-normal">
                          {" "}
                          {itensParaExibir
                            .filter((item) => item.id == "6")
                            .map((item) => (
                              <Tooltip title="Dias na Etapa" key={item.id}>
                                <div
                                  key={item.id}
                                  className="truncate lg:!text-[11px] !text-xs block max-w-[160px]"
                                >
                                  {item.value}
                                </div>
                              </Tooltip>
                            ))}
                        </div>
                        <div className=" text-gray-500">
                          {itensParaExibir
                            .filter((item) => item.id == "17")
                            .map((item) => (
                              <Tooltip
                                title="Valor da Proposta Aprovada"
                                key={item.id}
                              >
                                <div
                                  key={item.id}
                                  className="truncate block max-w-[160px]"
                                >
                                  {item.value}
                                </div>
                              </Tooltip>
                            ))}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div>
                {itensParaExibir
                  .filter((item) => item.id == "23")
                  .map((item) => (
                    <Tooltip title="Quantidade de módulos" key={item.id}>
                      <div
                        key={item.id}
                        className="truncate block max-w-[160px]"
                      >
                        <b>{item.label}:</b> {item.value}
                      </div>
                    </Tooltip>
                  ))}
                {itensParaExibir
                  .filter((item) => item.id == "26")
                  .map((item) => (
                    <Tooltip title="Potência de módulo" key={item.id}>
                      <div
                        key={item.id}
                        className="truncate block max-w-[160px]"
                      >
                        <b>{item.label}:</b> {item.value}
                      </div>
                    </Tooltip>
                  ))}
                {itensParaExibir
                  .filter((item) => item.id == "24")
                  .map((item) => (
                    <Tooltip title="Quantidade de inversores" key={item.id}>
                      <div
                        key={item.id}
                        className="truncate block max-w-[160px]"
                      >
                        <b>{item.label}:</b> {item.value}
                      </div>
                    </Tooltip>
                  ))}
                {itensParaExibir
                  .filter((item) => item.id == "27")
                  .map((item) => (
                    <Tooltip title="Potência de inversor" key={item.id}>
                      <div
                        key={item.id}
                        className="truncate block max-w-[160px]"
                      >
                        <b>{item.label}:</b> {item.value}
                      </div>
                    </Tooltip>
                  ))}
                {itensParaExibir
                  .filter((item) => item.id == "25")
                  .map((item) => (
                    <Tooltip title="Tipo de telhado" key={item.id}>
                      <div
                        key={item.id}
                        className="truncate  block max-w-[260px]"
                      >
                        <span className="flex">
                          <MdOutlineRoofing /> {item.value}
                        </span>
                      </div>
                    </Tooltip>
                  ))}
              </div>
              <div className="mt-1 mr-4 flex">
                {itensParaExibir
                  .filter((item) => item.id == "22")
                  .map((item) => {
                    const conclusaoPendencia =
                      data.todasPendencias_concluidas_coleta;
                    const searchPendencia =
                      pendencias &&
                      pendencias.find(
                        (pe: any) =>
                          pe.id_pendencia === data?.id_pedenciaAtual_coleta,
                      );

                    const statusPendencia = searchPendencia?.nome_pendencia;
                    const statusPendenciaFilter =
                      data?.id_pedenciaAtual_coleta === "20"
                        ? "Concluir Projeto"
                        : statusPendencia;

                    return (
                      <Tooltip title="Pendência" key={item.id}>
                        <div
                          className={` font-normal lg:text-[11px] text-white ${conclusaoPendencia == 1 ? "bg-success" : "bg-warning"}  rounded-full px-3 py-1 mr-2`}
                        >
                          {conclusaoPendencia == 1
                            ? "Projeto Finalizado"
                            : data?.nome_pendencia_card}
                        </div>
                      </Tooltip>
                    );
                  })}
                {itensParaExibir
                  .filter((item) => item.id == "20")
                  .map((item) => (
                    <Tooltip title="Prioridade" key={item.id}>
                      <div
                        style={{ backgroundColor: backgroundUrgencia }}
                        className="rounded-full px-3 text-white font-normal text-xs lg:text-[11px]  py-1"
                      >
                        {item.value}
                      </div>
                    </Tooltip>
                  ))}
              </div>

              {itensParaExibir
                .filter((item) => item.id == "21")
                .map((item) => (
                  <Tooltip title="Etiquetas" key={item.id}>
                    <div key={item.id}>{item.value}</div>
                  </Tooltip>
                ))}

              <div className="mb-1 mt-1">{/* <hr /> */}</div>
              <div className="flex justify-between text-xs font-medium mt-2 mb-0 mr-4 ">
                <div className="flex items-center space-x-4 ml-3 cursor-pointer">
                  {itensParaExibir.some((item) => item.id == "18") ? (
                    <div className="flex flex-col items-center">
                      <Tooltip title="Tarefas Pendentes" arrow={true}>
                        <div>
                          <CheckSquare size={isMobile ? 16 : 14} />
                        </div>
                      </Tooltip>
                      <div className="flex items-center mt-2">
                        {itensParaExibir
                          .filter((item) => item.id == "18")
                          .map((item) => (
                            <div key={item.id} className=" font-semibold">
                              {item.value}
                            </div>
                          ))}
                      </div>
                    </div>
                  ) : null}{" "}
                  {itensParaExibir.some((item) => item.id == "19") ? (
                    <div className="flex flex-col items-center">
                      <Tooltip title="Follow-ups Gerados" arrow={true}>
                        <div>
                          <FileText size={isMobile ? 16 : 14} />
                        </div>
                      </Tooltip>
                      <div className="flex items-center mt-2">
                        {itensParaExibir
                          .filter((item) => item.id == "19")
                          .map((item) => (
                            <div key={item.id} className=" font-semibold">
                              {item.value}
                            </div>
                          ))}
                      </div>
                    </div>
                  ) : null}{" "}
                  {itensParaExibir.some((item) => item.id == "16") ? (
                    <div className="flex flex-col items-center">
                      <Tooltip title="Propostas Geradas" arrow={true}>
                        <div>
                          <FilePlus size={isMobile ? 16 : 14} />
                        </div>
                      </Tooltip>
                      <div className="flex items-center mt-2">
                        {itensParaExibir
                          .filter((item) => item.id == "16")
                          .map((item) => (
                            <div key={item.id} className=" font-semibold">
                              {item.value}
                            </div>
                          ))}
                      </div>
                    </div>
                  ) : null}{" "}
                </div>

                <div>
                  {itensParaExibir
                    .filter((item) => item.id == "5")
                    .map((item) => (
                      <div className="mt-2" key={item.id}>
                        {item.value}
                      </div>
                    ))}
                </div>
              </div>
            </div>
            {itensParaExibir.some(
              (item) =>
                item.id == "10" ||
                item.id == "7" ||
                item.id == "8" ||
                item.id == "9" ||
                item.id == "15",
            ) ? (
              <div className="text-end !text-xs mb-0 z-1">
                <Tooltip
                  title={
                    <div className="flex flex-col  ">
                      <div className="flex justify-between mb-4">
                        <div className=" flex flex-col">
                          {itensParaExibir
                            .filter((item) => item.id == "10")
                            .map((item) => (
                              <Tooltip title="Origem do Contato" key={item.id}>
                                <div
                                  key={item.id}
                                  className="flex items-center mb-2 "
                                >
                                  <Map size={15} className="mr-2 font-black" />
                                  {item.value}
                                </div>
                              </Tooltip>
                            ))}

                          {itensParaExibir
                            .filter((item) => item.id == "7")
                            .map((item) => (
                              <Tooltip
                                title="Telefone do Contato"
                                key={item.id}
                              >
                                <div
                                  key={item.id}
                                  className="flex items-center mb-2 "
                                >
                                  <Phone
                                    size={15}
                                    className="mr-2 font-black"
                                  />
                                  {item.value}
                                </div>
                              </Tooltip>
                            ))}

                          {itensParaExibir
                            .filter((item) => item.id == "8")
                            .map((item) => (
                              <Tooltip title="Email do Contato" key={item.id}>
                                <div
                                  key={item.id}
                                  className="flex items-center mb-2 "
                                >
                                  <Mail size={15} className="mr-2 font-black" />
                                  {item.value}
                                </div>
                              </Tooltip>
                            ))}

                          {itensParaExibir
                            .filter((item) => item.id == "9")
                            .map((item) => (
                              <Tooltip title="Cidade do Contato" key={item.id}>
                                <div
                                  key={item.id}
                                  className="flex items-center mb-2 "
                                >
                                  <MapPin size={15} className="mr-2 shrink-0" />
                                  {item.value}
                                </div>
                              </Tooltip>
                            ))}

                          {itensParaExibir
                            .filter((item) => item.id == "15")
                            .map((item) => (
                              <Tooltip
                                title="Cidade de Instalação"
                                key={item.id}
                              >
                                <div
                                  key={item.id}
                                  className="flex items-center mb-2 "
                                >
                                  <GrInstall
                                    size={15}
                                    className="mr-2 shrink-0"
                                  />
                                  {item.value}
                                </div>
                              </Tooltip>
                            ))}
                        </div>
                      </div>
                    </div>
                  }
                  arrow
                  placement="right-end"
                  open={isMobile ? tooltipVisible : undefined} // Abre no clique apenas no mobile
                  onMouseEnter={() => !isMobile && setTooltipVisible(true)} // Abre no hover apenas no desktop
                  onMouseLeave={() => !isMobile && setTooltipVisible(false)} // Fecha no hover apenas no desktop
                  className="absolute top-0 right-0"
                >
                  <button
                    className="p-1"
                    onClick={isMobile ? handleToggleTooltip : undefined}
                  >
                    <MoreVertical size={17} />
                  </button>

                  {/* NÃO APAGAR */}
                  {/* arrow={true}
                  placement="right-end"
                  open={tooltipVisible} // Controla a abertura do tooltip
                  onChange={handleToggleTooltip} // Altera a visibilidade ao clicar
                >
                  <button className="p-1" onClick={handleToggleTooltip}>
                    {" "}
                    {/* Adiciona onClick ao botão */}
                  {/* <MoreVertical size={20} />
                  </button> */}
                </Tooltip>
              </div>
            ) : null}{" "}
          </div>
          {openModalRestaurar && (
            <ModalRestauracao
              isColeta={true}
              dadosCard={data}
              onSubmitRestaurar={onSubmitRestaurar}
              openModalRestaurar={openModalRestaurar}
              closeFuncion={closeModalRestaurar}
            />
          )}
        </Fragment>
      )}
    </div>
  );
}

// Memoizar o componente para evitar re-renderizações desnecessárias
// Compara apenas as props relevantes
export default memo(Card, (prevProps, nextProps) => {
  // Re-renderizar apenas se dados importantes mudarem
  return (
    prevProps.data?.id === nextProps.data?.id &&
    prevProps.data?.id_lista === nextProps.data?.id_lista &&
    prevProps.index === nextProps.index &&
    prevProps.listIndex === nextProps.listIndex &&
    prevProps.kanbanId === nextProps.kanbanId &&
    prevProps.validadeLista === nextProps.validadeLista &&
    prevProps.data?.isLoading === nextProps.data?.isLoading
  );
});