import LoaderSun from "@/components/common/Loader/LoaderSun";
import Button from "@/components/Forms/Button";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { atualizarContatos } from "@/requests/CRUD/Contatos/atualizarContatos";
import { obterContatos } from "@/requests/CRUD/Contatos/obterContatos";
import { listarUsuarios } from "@/requests/CRUD/Usuario/listarUsuarios";
import { useAuth } from "@/src/contexts/authContext";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { GetForm } from "@/utils";
import { ArrowRight } from "lucide-react";
import { useEffect, useState } from "react";
import Swal from "sweetalert2";
import ConsultaTransferenciaContatos from "./ConsultaTransferenciaContatos";

const TransferenciaContatos = ({}) => {
  const [usuarios, setUsuarios] = useState<any[]>([]);

  const [responsavel, setResponsavel] = useState<any>();
  const [responsavel_alvo, setResponsavel_alvo] = useState<any>();
  const [negocios, setNegocios] = useState<any[]>([]);
  const [ids_contatos, setIdsContatos] = useState<any[]>([]);
  const [lastIdChecked, setLastIdChecked] = useState();
  const [isLoading, setIsLoading] = useState(false);
  const [isLoaded, setIsLoaded] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isConsulta, setIsConsulta] = useState(false);

  const { isMobile } = useScreenContext();
  const { usuario } = useAuth();

  const { handleSubmit, ...formTransferencia } = GetForm();

  useEffect(() => {
    // listarUsuarios()
    listarUsuarios()
      .then(setUsuarios)
      .finally(() => setIsLoaded(true));
  }, []);

  useEffect(() => {
    if (responsavel) {
      atualizarListaContatos();
    } else if (!responsavel) {
      // listarUsuarios("", tipo).then(setUsuariosResponsavelDe);
      setNegocios([]);
    }
  }, [responsavel]);

  async function atualizarListaContatos() {
    setIsLoading(true);
    obterContatos({ responsavel })
      .then((res) => setNegocios(res))
      .finally(() => setIsLoading(false));
  }

  useEffect(() => {
    setIdsContatos([]);
    setLastIdChecked(undefined);
  }, [negocios]);

  async function submitTransferencia(data: any) {
    setIsSubmitting(true);

    const negocios_loja_diferente: any[] = [];
    const responsavelAlvo = usuarios.find(
      (u) => u.id_usuario == data.responsavel_alvo
    );
    for (let i = 0; i < ids_contatos.length; i++) {
      const negocio = negocios.find((n) => n.id_cliente == ids_contatos[i]);
      if (
        !responsavelAlvo?.loja_usuario
          ?.split(",")
          ?.includes(negocio.loja_cliente)
      ) {
        negocios_loja_diferente.push(ids_contatos[i]);
      }
    }
    if (negocios_loja_diferente.length > 0) {
      Swal.fire({
        title: "Erro ao validar as lojas dos contatos",
        icon: "error",
        html: `Responsável alvo ${responsavelAlvo?.nome_usuario} não pode receber ${negocios_loja_diferente.length > 1 ? "os contatos" : "o contato"}: ${negocios_loja_diferente.join(", ")} pois ele não pertence a loja ${negocios_loja_diferente.length > 1 ? "destes contatos" : "deste contato"}`,
      });
      return setIsSubmitting(false);
    }
    return atualizarContatos({
      ...data,
      ids_contatos,
      id_usuario: usuario?.id_usuario,
    })
      .then(() => {
        atualizarListaContatos();
        // listarUsuarios("", tipo).then(setUsuariosResponsavelDe);
      })
      .finally(() => setIsSubmitting(false));
  }

  return (
    <div className="flex flex-col gap-4">
      <h2 className="text-l font-bold flex flex-row gap-3">
        {/* <button
          type="button"
          className={`${!isConsulta && "opacity-50"} border-b border-[rgba(50,50,50,0.8)] relative`}
          onClick={() => {
            setIsConsultaClicked(true);
            setIsConsulta((prev) => !prev);
          }}
        >
          Consulta de
          {!isConsultaClicked && (
            <div className="absolute -right-[10%] -bottom-[90%] animate-bounce">
              <MousePointer size={20} />
            </div>
          )}
        </button> */}
        <button
          type="button"
          className={`px-3 py-1 rounded-full bg-body/20 font-bold  ${isConsulta ? "" : "bg-primary text-white"}`}
          style={{ boxShadow: "3px 3px 2px -1px rgba(0,0,0,0.3)" }}
          onClick={() => {
            // setIsConsultaClicked(true);
            // setIsConsulta((prev) => !prev);
            setIsConsulta(false);
          }}
        >
          Transferência{" "}
        </button>
        <button
          type="button"
          className={`px-3 py-1 rounded-full bg-body/20 font-bold ${isConsulta ? "bg-primary text-white" : ""}`}
          style={{ boxShadow: "3px 3px 2px -1px rgba(0,0,0,0.3)" }}
          onClick={() => setIsConsulta(true)}
        >
          Consulta
        </button>
      </h2>
      <div className={isConsulta ? "" : "hidden"}>
        <ConsultaTransferenciaContatos
          isLoaded={isLoaded}
          usuarios={usuarios}
        />
      </div>
      {!isConsulta && (
        <>
          <div className="flex flex-col gap-2">
            <div className="flex flex-row justify-between">
              {/* <Button
                type="button"
                className={`h-fit bg-primary flex flex-row gap-2 rounded-full p-0 self-end`}
                onClick={(e: any) => {
                  e.stopPropagation();
                  handleSweetAlert({
                    icon: "info",
                    // title: "Cálculo Markup",
                    showDenyButton: false,
                    confirmButtonText: "Ok",
                    html: `
                      <div class="flex flex-col gap-2">
                        <div>
                          <div class="font-bold">
                            Quais contatos estão disponíveis para transferir?
                          </div>
                          <div class="italic text-meta-1 flex flex-col gap-2 items-center">
                            <div>
                              Na troca de: <strong>Vendedor, Pré-Vendedor e Gerente</strong> apenas os negócios com <strong>comissão não apurada</strong>.
                            </div>
                            <div>
                              Na troca de: <strong>Instalador</strong> apenas negócios em que ainda <strong>não foi realizado o pagamento da instalação</strong>.
                            </div>
                            <div>
                              Apenas negócios que <strong>não possuem todas as pendências concluídas</strong>.
                            </div>
                          </div>
                        </div>
                      </div>`,
                  });
                }}
              >
                <Info />
              </Button> */}
              <div></div>
              <Button
                type="button"
                onClick={() => {
                  setResponsavel(undefined);
                  formTransferencia.setValue("responsavel", "");
                  setResponsavel_alvo(undefined);
                  formTransferencia.setValue("responsavel_alvo", "");
                  setNegocios([]);
                }}
              >
                Limpar Filtro
              </Button>
            </div>
            <div className={`flex flex-${isMobile ? "col" : "row"} gap-2`}>
              <div
                className={`border p-2 flex-1 flex flex-${isMobile ? "col" : "row"} gap-2 justify-center items-center`}
              >
                <InputSelectComponent
                  name="responsavel"
                  label="Responsável"
                  options={usuarios.map((usuario) => ({
                    label: usuario.nome_usuario,
                    value: usuario.id_usuario,
                  }))}
                  formulario={formTransferencia}
                  onChange={(e: any) => {
                    setResponsavel(e?.value);
                    if (
                      formTransferencia.control._formValues?.responsavel_alvo
                        ?.value == e?.responsavel_alvo
                    ) {
                      formTransferencia.setValue("responsavel_alvo", "");
                    }
                  }}
                  required
                />
              </div>

              <div
                className={`flex flex-col items-center justify-center transition-all ${isMobile ? "rotate-90" : "rotate-0"}`}
              >
                <ArrowRight
                  className={`${isSubmitting && "text-success"} transition-all`}
                />
              </div>
              <div className="flex-1 p-2 border border-transparent">
                <InputSelectComponent
                  name="responsavel_alvo"
                  label="Responsável Para"
                  options={usuarios
                    .filter((user: any) => user.status_usuario == "1")
                    .map((usuario) => ({
                      label: usuario.nome_usuario,
                      value: usuario.id_usuario,
                    }))}
                  formulario={formTransferencia}
                  onChange={(e: any) => {
                    setResponsavel_alvo(e?.value);
                  }}
                  required
                />
              </div>
            </div>
          </div>
          {isLoading ? (
            <div className="flex flex-col justify-center items-center w-full">
              <LoaderSun />
            </div>
          ) : responsavel && !isLoading && negocios.length < 1 ? (
            <div className="flex flex-col justify-center items-center">
              <div className="p-3 px-5 bg-error/5 dark:bg-error/20 rounded border-2 border-error/20 dark:text-white">
                Responsável{" "}
                {
                  usuarios.find((u) => u.id_usuario == responsavel)
                    ?.nome_usuario
                }{" "}
                não possui nenhum contato disponível para transferência.
              </div>
            </div>
          ) : (
            negocios.length > 0 && (
              <div className="w-full flex flex-row items-center justify-center">
                <div
                  className={`p-3 px-6 border rounded shadow-3 ${!isMobile && "min-w-[55%]"}`}
                >
                  <div className={`flex flex-row gap-2 py-2`}>
                    <button
                      type="button"
                      className="bg-primary shadow-2 text-white font-bold p-1 px-2 rounded opacity-70 hover:opacity-80 active:opacity-100 hover:scale-[101%] transition-all"
                      onClick={() =>
                        setIdsContatos(
                          negocios.map((negocio) => negocio.id_cliente)
                        )
                      }
                    >
                      Selecionar Todos
                    </button>
                    <button
                      type="button"
                      className="bg-meta-1 shadow-2 text-white font-bold p-1 px-2 rounded opacity-70 hover:opacity-80 active:opacity-100 hover:scale-[101%] transition-all"
                      onClick={() => setIdsContatos([])}
                    >
                      Limpar Seleção
                    </button>
                  </div>
                  <div className="p-2 w-full border max-h-[600px] overflow-auto">
                    <table className="w-full select-none">
                      <thead>
                        <tr>
                          <th className="border-b"></th>
                          <th className="border-b">Nº do Contato</th>
                          <th className="border-b text-left">
                            Nome do Cliente
                          </th>
                        </tr>
                      </thead>
                      <tbody>
                        {negocios.map((negocio, index) => (
                          <tr
                            key={index}
                            className={`cursor-pointer ${
                              negocio.id_cliente == lastIdChecked
                                ? "bg-body/[15%]"
                                : ids_contatos.includes(negocio.id_cliente)
                                  ? "bg-body/[5%]"
                                  : "hover:bg-body/10"
                            }`}
                            onClick={(e: any) => {
                              e.stopPropagation();
                              if (!ids_contatos.includes(negocio.id_cliente)) {
                                if (e.shiftKey && lastIdChecked) {
                                  const start = index;
                                  const end = negocios.findIndex(
                                    (negocio) =>
                                      negocio.id_cliente == lastIdChecked
                                  );
                                  setIdsContatos((prev) => [
                                    ...new Set([
                                      ...prev,
                                      ...negocios
                                        .slice(
                                          Math.min(start, end),
                                          Math.max(start, end) + 1
                                        )
                                        .map((negocio) => negocio.id_cliente),
                                    ]),
                                  ]);
                                } else {
                                  setIdsContatos((prev) => [
                                    ...new Set([...prev, negocio.id_cliente]),
                                  ]);
                                }
                              } else {
                                if (e.shiftKey && lastIdChecked) {
                                  const start = index;
                                  const end = negocios.findIndex(
                                    (negocio) =>
                                      negocio.id_cliente == lastIdChecked
                                  );
                                  setIdsContatos((prev) =>
                                    prev.filter(
                                      (id) =>
                                        !negocios
                                          .slice(
                                            Math.min(start, end),
                                            Math.max(start, end) + 1
                                          )
                                          .map((negocio) => negocio.id_cliente)
                                          .includes(id)
                                    )
                                  );
                                } else {
                                  setIdsContatos((prev) =>
                                    prev.filter(
                                      (id) => id != negocio.id_cliente
                                    )
                                  );
                                }
                              }
                              setLastIdChecked(negocio.id_cliente);
                            }}
                          >
                            <td>
                              <div className="flex flex-row justify-center p-1">
                                <input
                                  type="checkbox"
                                  checked={ids_contatos.includes(
                                    negocio.id_cliente
                                  )}
                                  onClick={(e: any) => {
                                    e.stopPropagation();
                                    if (e.target.checked) {
                                      if (e.shiftKey && lastIdChecked) {
                                        const start = index;
                                        const end = negocios.findIndex(
                                          (negocio) =>
                                            negocio.id_cliente == lastIdChecked
                                        );
                                        setIdsContatos((prev) => [
                                          ...new Set([
                                            ...prev,
                                            ...negocios
                                              .slice(
                                                Math.min(start, end),
                                                Math.max(start, end) + 1
                                              )
                                              .map(
                                                (negocio) => negocio.id_cliente
                                              ),
                                          ]),
                                        ]);
                                      } else {
                                        setIdsContatos((prev) => [
                                          ...new Set([
                                            ...prev,
                                            negocio.id_cliente,
                                          ]),
                                        ]);
                                      }
                                    } else {
                                      if (e.shiftKey && lastIdChecked) {
                                        const start = index;
                                        const end = negocios.findIndex(
                                          (negocio) =>
                                            negocio.id_cliente == lastIdChecked
                                        );
                                        setIdsContatos((prev) =>
                                          prev.filter(
                                            (id) =>
                                              !negocios
                                                .slice(
                                                  Math.min(start, end),
                                                  Math.max(start, end) + 1
                                                )
                                                .map(
                                                  (negocio) =>
                                                    negocio.id_cliente
                                                )
                                                .includes(id)
                                          )
                                        );
                                      } else {
                                        setIdsContatos((prev) =>
                                          prev.filter(
                                            (id) => id != negocio.id_cliente
                                          )
                                        );
                                      }
                                    }
                                    setLastIdChecked(negocio.id_cliente);
                                  }}
                                />
                              </div>
                            </td>
                            <td className="flex flex-row justify-center p-1 px-2 font-semibold">
                              {negocio?.id_cliente}
                            </td>
                            <td className="font-medium text-left">
                              {negocio?.nome_cliente}
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                  <div className="p-2 w-full flex flex-row justify-center">
                    <Button
                      type="button"
                      className={`bg-success shadow-2 text-white font-bold p-1 px-3 rounded opacity-70 hover:opacity-80 active:opacity-100 hover:scale-[101%] transition-all ${ids_contatos.length == 0 && "cursor-not-allowed hover:scale-[100%]"}`}
                      onClick={handleSubmit(submitTransferencia)}
                      disabled={
                        ids_contatos.length == 0 ||
                        !responsavel_alvo ||
                        !responsavel
                      }
                    >
                      Transferir
                    </Button>
                  </div>
                </div>
              </div>
            )
          )}
        </>
      )}
    </div>
  );
};

export default TransferenciaContatos;