import LoaderSun from "@/components/common/Loader/LoaderSun";
import Button from "@/components/Forms/Button";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { handleSweetAlert } from "@/components/Modal/SweetAlertConfirm";
import { atualizarNegocios } from "@/requests/CRUD/Negocios/atualizarNegocios";
import { obterNegocios } from "@/requests/CRUD/Negocios/obterNegocios";
import { listarTiposNegocios } from "@/requests/CRUD/TiposNegocios/listarTiposNegocios";
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, Info } from "lucide-react";
import { useEffect, useState } from "react";
import Swal from "sweetalert2";
import ConsultaTransferenciaNegocios from "./ConsultaTransferenciaNegocios";

const TransferenciaNegocios = ({}) => {
  const [usuarios, setUsuarios] = useState<any[]>([]);
  // const [usuariosResponsavelDe, setUsuariosResponsavelDe] = useState<any[]>([]);

  const [tipo, setTipo] = useState();
  const [responsavel, setResponsavel] = useState<any>();
  const [responsavel_alvo, setResponsavel_alvo] = useState<any>();
  const [negocios, setNegocios] = useState<any[]>([]);
  const [tipoNegocio, setTipoNegocio] = useState<any>([]);
  const [tiposNegociosOptions, setTiposNegociosOptions] = useState<any[]>([]);
  const [ids_coletas, setIds_coletas] = 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 [isConsultaClicked, setIsConsultaClicked] = useState(false);

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

  // const tiposResponsaveis: any = {
  //   Administrativo: "responsavel_coleta",
  //   Vendedor: "vendedor_coleta",
  //   "Pré-Vendedor": "preVendedor_coleta",
  //   Técnico: "tecnico_coleta",
  //   Instalador: "responsavelInstalador_coleta",
  //   Gerente: "gerente_coleta",
  // };
  const tiposResponsaveis: any = {
    administrativo_coleta: "Administrativo",
    vendedor_coleta: "Vendedor",
    preVendedor_coleta: "Pré-Vendedor",
    tecnico_coleta: "Técnico",
    responsavelInstalador_coleta: "Instalador",
    gerente_coleta: "Gerente",
    supervisor_coleta: "Supervisor",
  };

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

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

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

  async function atualizarListaNegocios() {
    setIsLoading(true);
    obterNegocios({
      tipo,
      responsavel,
      ...(tipoNegocio !== "*" && { tipoNegocio_coleta: tipoNegocio }),
    })
      .then((res) => setNegocios(res))
      .finally(() => setIsLoading(false));
  }

  useEffect(() => {
    setIds_coletas([]);
    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_coletas.length; i++) {
      const negocio = negocios.find((n) => n.id_coleta == ids_coletas[i]);
      if (
        !responsavelAlvo?.loja_usuario
          ?.split(",")
          ?.includes(negocio.loja_coleta)
      ) {
        negocios_loja_diferente.push(ids_coletas[i]);
      }
    }
    if (negocios_loja_diferente.length > 0) {
      Swal.fire({
        title: "Erro ao validar as lojas dos negócios",
        icon: "error",
        html: `Responsável alvo ${responsavelAlvo?.nome_usuario} não pode receber ${negocios_loja_diferente.length > 1 ? "os negócios" : "o negócio"}: ${negocios_loja_diferente.join(", ")} pois ele não pertence a loja ${negocios_loja_diferente.length > 1 ? "destes negócios" : "deste negócio"}`,
      });
      return setIsSubmitting(false);
    }
    return atualizarNegocios({
      ...data,
      ids_coletas,
      id_usuario: usuario?.id_usuario,
      nomeTipo: tiposResponsaveis[data.tipo],
    })
      .then(() => {
        atualizarListaNegocios();
        // 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"}>
        <ConsultaTransferenciaNegocios
          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 text-center">
        Quais negócios podem ser transferidos?
      </div>
      <div class="italic text-meta-1 flex flex-col gap-3 items-start mt-2">
        <div>
          Se for trocar o <strong>Vendedor, Pré-Vendedor</strong> ou <strong>Gerente</strong>, 
          só é possível transferir os negócios <strong>que ainda não tiveram a comissão calculada</strong>.
        </div>
        <div>
          Se for trocar o <strong>Instalador</strong>, só podem ser transferidos os negócios 
          <strong>em que o pagamento da instalação ainda não foi feito</strong>.
        </div>
        <div>
          Não é possível transferir negócios que <strong>já resolveram todas as pendências</strong>.
        </div>
      </div>
    </div>
  </div>
                    <div class="flex flex-col gap-2 mt-4">  `,
                  });
                }}
              >
                <Info />
              </Button>
              <Button
                type="button"
                onClick={() => {
                  setTipo(undefined);
                  formTransferencia.setValue("tipo", "");
                  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="tipo"
                  label="Tipo de Responsável"
                  options={Object.keys(tiposResponsaveis).map((tipo) => ({
                    label: tiposResponsaveis[tipo],
                    value: tipo,
                  }))}
                  formulario={formTransferencia}
                  onChange={(e: any) => {
                    setTipo((prev) => {
                      if (prev != e.value) {
                        setResponsavel(undefined);
                        formTransferencia.setValue("responsavel", "");
                        setResponsavel_alvo(undefined);
                        formTransferencia.setValue("responsavel_alvo", "");
                      }
                      return e.value;
                    });
                  }}
                  required
                />
                <InputSelectComponent
                  name="responsavel"
                  label={
                    <div className="flex flex-row gap-1">
                      <div>Responsável de</div>
                      {/* <Button
                        type="button"
                        className={` bg-primary flex flex-row gap-2 rounded-full p-0`}
                        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 usuários disponíveis?
                                  </div>
                                  <div class="italic text-meta-1 flex flex-col gap-2 items-center">
                                    <div>
                                      Apenas usuários que sejam responsáveis do tipo selecionado por algum negócio.
                                    </div>
                                  </div>
                                </div>
                              </div>`,
                          });
                        }}
                      >
                        <Info />
                      </Button> */}
                    </div>
                  }
                  options={usuarios
                    .filter(
                      (usuario) =>
                        usuario.id_usuario != responsavel_alvo &&
                        (tipo
                          ? tipo == "vendedor_coleta" ||
                            tipo == "preVendedor_coleta"
                            ? usuario.comissionado_usuario == "1"
                            : tipo == "gerente_coleta"
                              ? usuario.cargo_perfil == "4"
                              : tipo == "responsavelInstalador_coleta"
                                ? usuario.cargo_perfil == "6"
                                : tipo == "tecnico_coleta"
                                  ? usuario.cargo_perfil == "5"
                                  : tipo == "supervisor_coleta"
                                    ? usuario.cargo_perfil == "7"
                                    : true
                          : false)
                    )
                    .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
                />
                {/* colocar o tipo de negocio aqui para filtrar os responsáveis de acordo com o tipo do negócio selecionado */}
                <InputSelectComponent
                  name="tipo_negocio"
                  label={
                    <div className="flex flex-row gap-1">
                      <div>Tipo de Negócio</div>
                    </div>
                  }
                  options={[
                    { value: "*", label: "Todos" },
                    ...tiposNegociosOptions.map((tipo) => ({
                      label: tipo.nome_tipo_negocio,
                      value: tipo.id_tipo_negocio,
                    })),
                  ]}
                  required
                  onChange={(e: any) => {
                    setTipoNegocio(e.value);
                  }}
                  formulario={formTransferencia}
                />
              </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(
                      (usuario) =>
                        usuario.id_usuario != responsavel &&
                        usuario.status_usuario == "1" &&
                        (tipo
                          ? tipo == "vendedor_coleta" ||
                            tipo == "preVendedor_coleta"
                            ? usuario.comissionado_usuario == "1"
                            : tipo == "gerente_coleta"
                              ? usuario.cargo_perfil == "4"
                              : tipo == "responsavelInstalador_coleta"
                                ? usuario.cargo_perfil == "6"
                                : tipo == "tecnico_coleta"
                                  ? usuario.cargo_perfil == "5"
                                  : tipo == "supervisor_coleta"
                                    ? usuario.cargo_perfil == "7"
                                    : true
                          : false)
                      // (tipo
                      //   ? tipo == "vendedor_coleta"
                      //     ? usuario.comissionado_usuario == "1"
                      //     : tipo == "preVendedor_coleta"
                      //       ? usuario.cargo_perfil == "3"
                      //       : tipo == "gerente_coleta"
                      //         ? usuario.cargo_perfil == "4"
                      //         : true
                      //   : true)
                    )
                    .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>
          ) : tipo &&
            responsavel &&
            tipoNegocio &&
            !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 negócio na Responsabilidade{" "}
                {tiposResponsaveis[tipo]}
              </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={() =>
                        setIds_coletas(
                          negocios.map((negocio) => negocio.id_coleta)
                        )
                      }
                    >
                      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={() => setIds_coletas([])}
                    >
                      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 className="text-center bg-gray-100 text-gray-700 text-sm uppercase tracking-wider">
                          <th className="p-3 border-b"></th>
                          <th className="p-3 border-b">Nº do Negócio</th>
                          <th className="p-3 border-b text-left">
                            Nome do Cliente
                          </th>
                          <th className="p-3 border-b text-left">
                            Nome do Projeto
                          </th>
                          <th className="p-3 border-b text-left">
                            Tipo do Negócio
                          </th>
                          <th className="p-3 border-b text-left">
                            Status do Projeto
                          </th>
                        </tr>
                      </thead>
                      <tbody>
                        {negocios.map((negocio, index) => (
                          <tr
                            key={index}
                            className={`cursor-pointer ${
                              negocio.id_coleta == lastIdChecked
                                ? "bg-body/[15%]"
                                : ids_coletas.includes(negocio.id_coleta)
                                  ? "bg-body/[5%]"
                                  : "hover:bg-body/10"
                            }`}
                            onClick={(e: any) => {
                              e.stopPropagation();
                              if (!ids_coletas.includes(negocio.id_coleta)) {
                                if (e.shiftKey && lastIdChecked) {
                                  const start = index;
                                  const end = negocios.findIndex(
                                    (negocio) =>
                                      negocio.id_coleta == lastIdChecked
                                  );
                                  setIds_coletas((prev) => [
                                    ...new Set([
                                      ...prev,
                                      ...negocios
                                        .slice(
                                          Math.min(start, end),
                                          Math.max(start, end) + 1
                                        )
                                        .map((negocio) => negocio.id_coleta),
                                    ]),
                                  ]);
                                } else {
                                  setIds_coletas((prev) => [
                                    ...new Set([...prev, negocio.id_coleta]),
                                  ]);
                                }
                              } else {
                                if (e.shiftKey && lastIdChecked) {
                                  const start = index;
                                  const end = negocios.findIndex(
                                    (negocio) =>
                                      negocio.id_coleta == lastIdChecked
                                  );
                                  setIds_coletas((prev) =>
                                    prev.filter(
                                      (id) =>
                                        !negocios
                                          .slice(
                                            Math.min(start, end),
                                            Math.max(start, end) + 1
                                          )
                                          .map((negocio) => negocio.id_coleta)
                                          .includes(id)
                                    )
                                  );
                                } else {
                                  setIds_coletas((prev) =>
                                    prev.filter((id) => id != negocio.id_coleta)
                                  );
                                }
                              }
                              setLastIdChecked(negocio.id_coleta);
                            }}
                          >
                            <td>
                              <div className="flex flex-row justify-center p-1">
                                <input
                                  type="checkbox"
                                  checked={ids_coletas.includes(
                                    negocio.id_coleta
                                  )}
                                  onClick={(e: any) => {
                                    e.stopPropagation();
                                    if (e.target.checked) {
                                      if (e.shiftKey && lastIdChecked) {
                                        const start = index;
                                        const end = negocios.findIndex(
                                          (negocio) =>
                                            negocio.id_coleta == lastIdChecked
                                        );
                                        setIds_coletas((prev) => [
                                          ...new Set([
                                            ...prev,
                                            ...negocios
                                              .slice(
                                                Math.min(start, end),
                                                Math.max(start, end) + 1
                                              )
                                              .map(
                                                (negocio) => negocio.id_coleta
                                              ),
                                          ]),
                                        ]);
                                      } else {
                                        setIds_coletas((prev) => [
                                          ...new Set([
                                            ...prev,
                                            negocio.id_coleta,
                                          ]),
                                        ]);
                                      }
                                    } else {
                                      if (e.shiftKey && lastIdChecked) {
                                        const start = index;
                                        const end = negocios.findIndex(
                                          (negocio) =>
                                            negocio.id_coleta == lastIdChecked
                                        );
                                        setIds_coletas((prev) =>
                                          prev.filter(
                                            (id) =>
                                              !negocios
                                                .slice(
                                                  Math.min(start, end),
                                                  Math.max(start, end) + 1
                                                )
                                                .map(
                                                  (negocio) => negocio.id_coleta
                                                )
                                                .includes(id)
                                          )
                                        );
                                      } else {
                                        setIds_coletas((prev) =>
                                          prev.filter(
                                            (id) => id != negocio.id_coleta
                                          )
                                        );
                                      }
                                    }
                                    setLastIdChecked(negocio.id_coleta);
                                  }}
                                />
                              </div>
                            </td>
                            <td className="flex flex-row justify-center p-2 px-2 font-semibold">
                              {negocio?.id_coleta}
                            </td>
                            <td className="font-medium text-left border-l p-1">
                              {negocio?.nome_cliente}
                            </td>
                            <td className="font-medium border-l p-1">
                              {negocio?.nome_negocio_coleta}
                            </td>
                            <td className="font-medium border-l p-1">
                              {
                                tiposNegociosOptions.find(
                                  (e: any) =>
                                    e.id_tipo_negocio ==
                                    negocio?.tipoNegocio_coleta
                                )?.nome_tipo_negocio
                              }
                            </td>
                            <td className="font-medium border-l pn-1">
                              {negocio?.nome_pendencia}
                            </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_coletas.length == 0 && "cursor-not-allowed hover:scale-[100%]"}`}
                      onClick={handleSubmit(submitTransferencia)}
                      disabled={
                        ids_coletas.length == 0 ||
                        !responsavel_alvo ||
                        !tipo ||
                        !responsavel
                      }
                    >
                      Transferir
                    </Button>
                  </div>
                </div>
              </div>
            )
          )}
        </>
      )}
    </div>
  );
};

export default TransferenciaNegocios;