import LoaderSun from "@/components/common/Loader/LoaderSun";
import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { handleSweetAlert } from "@/components/Modal/SweetAlertConfirm";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { listarPendencias } from "@/requests/CRUD/ColetaDados/cadastroColetaDados";
import { atualizarLinhaPendenciasDosNegocios } from "@/requests/CRUD/LinhaPendencias/atualizarLinhaPendenciasDosNegocios";
import { listarLinhaPendencias } from "@/requests/CRUD/LinhaPendencias/listarLinhaPendencias";
import { listarLojas } from "@/requests/CRUD/Lojas/listarLojas";
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 { Tooltip } from "@mui/material";
import { Info } from "lucide-react";
import { useEffect, useState } from "react";
import ConsultaTransferenciaLinhaPendencias from "./ConsultaTransferenciaLinhaPendencias";

export default function TransferenciaLinhaPendencias() {
  const [lojas, setLojas] = useState<any[]>([]);
  const [loja, setLoja] = useState<any>();
  const [pendencias, setPendencias] = useState<any[]>([]);
  const [usuarios, setUsuarios] = useState<any[]>([]);
  const [linhasPendencias, setLinhasPendencias] = useState<any[]>([]);
  const [tiposNegocios, setTiposNegocios] = useState<any[]>([]);
  const [ids_coletas, setIds_coletas] = useState<any[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [lastIdChecked, setLastIdChecked] = useState();
  const [negocios, setNegocios] = useState<any[]>([]);
  const [parametrosFiltro, setParametrosFiltro] = useState<any>();
  const [isLoaded, setIsLoaded] = useState(false);

  const [isConsulta, setIsConsulta] = useState(false);

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

  const { handleSubmit: handleSubmitFiltro, ...form } = GetForm();

  async function pesquisarNegocios(data: any) {
    const formData = { ...data };
    setParametrosFiltro(formData);
    setIsLoading(true);

    data.vendedores_coletas = data?.vendedores_coletas?.join(",");
    if (data?.vendedores_coletas) {
      data.tipo = "vendedor_coleta";
      data.responsavel = data?.vendedores_coletas;
    }
    setLoja(data?.id_loja);

    Object.keys(data).map((key) => {
      if (data[key] == "*") {
        delete data[key];
      }
    });

    return obterNegocios(data)
      .then((res) => {
        setNegocios(res);
        setIds_coletas([]);
      })
      .finally(() => setIsLoading(false));
  }

  useEffect(() => {
    Promise.all([
      listarLojas(usuario.id_usuario).then((res) => {
        setLojas(res);
      }),
      listarPendencias().then((res) => {
        setPendencias(res);
      }),
      listarUsuarios().then(setUsuarios),
      listarLinhaPendencias().then(setLinhasPendencias),
      listarTiposNegocios().then(setTiposNegocios),
    ]).finally(() => {
      setIsLoaded(true);
    });
  }, []);

  async function submitTransferencia() {
    return atualizarLinhaPendenciasDosNegocios({
      id_usuario: usuario?.id_usuario,
      ids_coletas: ids_coletas?.join(","),
    }).then(() => {
      setIds_coletas([]);
      return pesquisarNegocios(parametrosFiltro);
    });
  }

  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"}>
        <ConsultaTransferenciaLinhaPendencias
          isLoaded={isLoaded}
          lojas={lojas}
          usuarios={usuarios}
          pendencias={pendencias}
        />
      </div>
      {!isConsulta && (
        <div>
          <div>
            <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">
                          Atenção!
                        </div>
                        <div class="italic text-meta-1 flex flex-col gap-3 items-start mt-2">
                          <div>
                            Só é possível atualizar as pendências dos negócios que ainda não foi FINALIZADO A VENDA, os demais caso seja necessário terá que estornar a FINALIZAÇÃO DA VENDA
                          </div>
                        </div>
                        <div class="italic flex flex-col gap-3 items-start mt-2">
                          <div>
                            E serão mostrados a caixa de seleção para alterar apenas os projetos com a "Linha de Pendências" diferentes da "Linha de Pendencias atual" e com status antes da FINALIZAÇÃO DA VENDA.
                          </div>
                        </div>
                      </div>
                    <div class="flex flex-col gap-2 mt-4">
                  `,
                  // html: `
                  //   <div class="flex flex-col gap-2">
                  //     <div>
                  //       <div class="font-bold text-center">
                  //         Atenção!
                  //       </div>
                  //       <div class="italic text-meta-1 flex flex-col gap-3 items-start mt-2">
                  //         <div>
                  //           Só é possível atualizar as pendências dos negócios que ainda não foi FINALIZADO A VENDA, os demais caso seja necessário terá que estornar a FINALIZAÇÃO DA VENDA
                  //         </div>
                  //       </div>
                  //       <div class="italic flex flex-col gap-3 items-start mt-2">
                  //         <div>
                  //           A linha de pendência aplicada será a mesma do tipo de negócio do negócio a ser atualizado
                  //         </div>
                  //       </div>
                  //     </div>
                  //   <div class="flex flex-col gap-2 mt-4">
                  // `,
                });
              }}
            >
              <Info />
            </Button>
          </div>
          <div className="flex flex-row gap-2">
            <div className="flex flex-col gap-3 py-2">
              <InputSelectComponent
                name="id_loja"
                label="Loja"
                formulario={form}
                options={[
                  { value: "*", label: "Todas" },
                  ...lojas?.map((loja: any) => ({
                    value: loja.id_loja,
                    label: loja.nome_loja,
                  })),
                ]}
                required
                error="Informe a Loja"
              />
              <div className="flex flex-row flex-wrap gap-3">
                <Input
                  name="nr_negocio_i"
                  label="Nr. Negocio incial"
                  formulario={form}
                  mascara="numerico"
                  width={"flex-1"}
                />
                <Input
                  name="nr_negocio_f"
                  label="Nr. Negocio final"
                  formulario={form}
                  mascara="numerico"
                  width={"flex-1"}
                />
              </div>

              <InputSelectComponent
                name="pendencias_atuais"
                label="Status da linha de pendências"
                formulario={form}
                options={[
                  { value: "*", label: "Todos" },
                  ...pendencias?.map((pendencia: any) => ({
                    value: pendencia.id_pendencia,
                    label: pendencia.nome_pendencia,
                  })),
                ]}
                isMulti
              />
              <InputSelectComponent
                name="vendedores_coletas"
                label="Vendedores"
                formulario={form}
                options={[
                  { value: "*", label: "Todos" },
                  ...usuarios
                    ?.filter((user: any) => user.cargo_perfil == "2")
                    ?.map((user: any) => ({
                      label: user.nome_usuario,
                      value: user.id_usuario,
                    })),
                ]}
                isMulti
              />
              <InputSelectComponent
                name="tipoNegocio_coleta"
                label="Tipo de Negócio"
                formulario={form}
                options={[
                  { value: "*", label: "Todos" },
                  ...tiposNegocios?.map((tipo: any) => ({
                    value: tipo.id_tipo_negocio,
                    label: tipo.nome_tipo_negocio,
                  })),
                ]}
              />
              <div className="w-full flex flex-row-reverse">
                <Button
                  onClick={(e: any) => handleSubmitFiltro(pesquisarNegocios)(e)}
                >
                  Pesquisar
                </Button>
              </div>
            </div>

            <div className="pt-2">
              <div className="font-bold">Sequencias de Pendências</div>
              <div className="flex flex-row flex-wrap items-start gap-2 pb-2">
                {tiposNegocios?.map((tipoNegocio, indexTipoNegocio) => {
                  const linhaPendencias = linhasPendencias?.filter(
                    (pendencias) =>
                      pendencias?.codTipoNegocio_sequenciamento_pendencia ==
                      tipoNegocio?.id_tipo_negocio
                  );
                  return (
                    <table key={indexTipoNegocio} className="">
                      {/* <thead>
                    <tr>
                      <td className="font-bold p-3 text-center">
                        {tipoNegocio?.nome_tipo_negocio}
                      </td>
                    </tr>
                  </thead> */}
                      <tbody className="overflow-hidden text-sm">
                        <tr>
                          <td>
                            <Accordion type="single" collapsible>
                              <AccordionItem
                                value={tipoNegocio?.nome_tipo_negocio}
                              >
                                <AccordionTrigger>
                                  <div className="font-bold p-3 text-center">
                                    {tipoNegocio?.nome_tipo_negocio}
                                  </div>
                                </AccordionTrigger>
                                <AccordionContent className="flex flex-col gap-2">
                                  {linhaPendencias?.map(
                                    (pendenciaNaSequencia, indexPendencia) => {
                                      const pendencia = pendencias?.find(
                                        (pendencia) =>
                                          pendencia?.id_pendencia ==
                                          pendenciaNaSequencia?.codPendencia_sequenciamento_pendencia
                                      );
                                      return (
                                        // <tr key={indexPendencia}>
                                        //   <td className="p-1 text-white">
                                        //     {pendencia?.nome_pendencia}
                                        //   </td>
                                        // </tr>
                                        <div key={indexPendencia}>
                                          <div className="p-1 ">
                                            {pendencia?.nome_pendencia}
                                          </div>
                                        </div>
                                      );
                                    }
                                  )}
                                </AccordionContent>
                              </AccordionItem>
                            </Accordion>
                          </td>
                        </tr>
                        {/* {linhaPendencias?.map(
                      (pendenciaNaSequencia, indexPendencia) => {
                        const pendencia = pendencias?.find(
                          (pendencia) =>
                            pendencia?.id_pendencia ==
                            pendenciaNaSequencia?.codPendencia_sequenciamento_pendencia
                        );
                        return (
                          // <tr key={indexPendencia}>
                          //   <td className="p-1 text-white">
                          //     {pendencia?.nome_pendencia}
                          //   </td>
                          // </tr>
                          <div key={indexPendencia}>
                            <div className="p-1 text-white">
                              {pendencia?.nome_pendencia}
                            </div>
                          </div>
                        );
                      }
                    )} */}
                      </tbody>
                    </table>
                  );
                })}
              </div>
              School. Hey, Cortana. Nice. Hey, Cortana.
            </div>
          </div>
          {isLoading ? (
            <div className="flex flex-col justify-center items-center w-full">
              <LoaderSun />
            </div>
          ) : loja && !isLoading && negocios.length == 0 ? (
            <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">
                Loja {lojas.find((u) => u.id_loja == loja)?.nome_loja} 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={() => {
                        const filtredNegocios = negocios.filter(
                          (negocio) => !negocio.dataFinalizacaoVenda_coleta
                        );
                        setIds_coletas(
                          filtredNegocios.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>
                    <span className="text-xs  bg-warning/10 border border-warning/30 rounded px-2 py-1 italic ml-2">
                      ⚠ Só é possível transferir negócios que não tiveram a
                      venda finalizada
                    </span>
                  </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="border-b"></th>
                          <th className="border-b">Pendências</th>
                          <th className="border-b">Nº do Negócio</th>
                          <th className="p-3 border-b text-left">
                            Nome do Negócio
                          </th>
                          <th className="p-3 border-b text-left">
                            Status do Negócio
                          </th>
                          <th className="p-3 border-b text-left">
                            Tipo do Negócio
                          </th>
                          <th className="p-3 border-b text-left">Loja</th>
                          <th className="p-3 border-b text-left">Vendedor</th>
                        </tr>
                      </thead>
                      <tbody>
                        {negocios.map((negocio, index) => {
                          const linhaPendenciasDoNegocio =
                            negocio?.sequenciaPendencias_coleta
                              ?.split(",")
                              ?.map((id_pendencia: string) =>
                                pendencias?.find(
                                  (pendencia) =>
                                    pendencia?.id_pendencia == id_pendencia
                                )
                              );

                          const linhaPendencias = linhasPendencias?.filter(
                            (pendencias) =>
                              pendencias?.codTipoNegocio_sequenciamento_pendencia ==
                              negocio?.tipoNegocio_coleta
                          );

                          return (
                            <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) => {
                                if (
                                  negocio.dataFinalizacaoVenda_coleta ||
                                  negocio?.sequenciaPendencias_coleta ==
                                    linhaPendencias
                                      .map(
                                        (p) =>
                                          p?.codPendencia_sequenciamento_pendencia
                                      )
                                      ?.join(",")
                                )
                                  return;
                                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 px-2">
                                  {!negocio.dataFinalizacaoVenda_coleta &&
                                    negocio?.sequenciaPendencias_coleta !=
                                      linhaPendencias
                                        .map(
                                          (p) =>
                                            p?.codPendencia_sequenciamento_pendencia
                                        )
                                        ?.join(",") && (
                                      <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="p-1">
                                <Tooltip title={"Linha de Pendências"}>
                                  <div
                                    className="flex flex-row justify-center items-center"
                                    onClick={(e: any) => {
                                      e.stopPropagation();

                                      const indexAtual_coleta =
                                        negocio?.indexAtual_coleta;
                                      handleSweetAlert({
                                        icon: "info",
                                        // title: "Cálculo Markup",
                                        showDenyButton: false,
                                        confirmButtonText: "Ok",
                                        html: `
                                        <div class="flex flex-row gap-2 justify-center">
                                          <div class="flex flex-col gap-3">
                                            <div class="font-bold">Sequência Atual</div>
                                            <div class="flex flex-col gap-1 max-h-[50vh] overflow-auto">
                                              ${linhaPendenciasDoNegocio
                                                ?.map(
                                                  (
                                                    pendencia: any,
                                                    indexPendencia: number
                                                  ) => {
                                                    return `<div>
                                                        <div class="px-1 ">
                                                          ${Number(indexAtual_coleta) > 0 && indexAtual_coleta == indexPendencia + 1 ? "<strong class='text-primary'>" : ""}
                                                          ${
                                                            pendencia?.nome_pendencia
                                                          }
                                                          ${Number(indexAtual_coleta) > 0 && indexAtual_coleta == indexPendencia + 1 ? "</strong>" : ""}
                                                        </div>
                                                      </div>`;
                                                  }
                                                )
                                                ?.join("\n")}
                                            </div>
                                          </div>
                                          <div class="flex flex-col gap-3">
                                            <div class="font-bold">Sequência Nova</div>
                                            <div class="flex flex-col gap-1 max-h-[50vh] overflow-auto">
                                              ${linhaPendencias
                                                ?.map(
                                                  (
                                                    pendenciaNaSequencia,
                                                    indexPendencia
                                                  ) => {
                                                    const pendencia =
                                                      pendencias?.find(
                                                        (pendencia) =>
                                                          pendencia?.id_pendencia ==
                                                          pendenciaNaSequencia?.codPendencia_sequenciamento_pendencia
                                                      );
                                                    return `<div>
                                                      <div class="px-1 ">
                                                        ${
                                                          pendencia?.nome_pendencia
                                                        }
                                                      </div>
                                                    </div>`;
                                                  }
                                                )
                                                ?.join("\n")}
                                            </div>
                                          </div>
                                        </div>
                                      `,
                                      });
                                    }}
                                  >
                                    <Button
                                      type="button"
                                      className={`h-fit bg-primary flex flex-row gap-2 rounded-full p-0 self-end`}
                                    >
                                      <Info />
                                    </Button>
                                  </div>
                                </Tooltip>
                              </td>
                              <td className="p-2 px-2 font-semibold">
                                <div className="flex flex-row justify-center items-center">
                                  {negocio?.id_coleta}
                                </div>
                              </td>
                              <td className="font-medium text-left border-l p-1">
                                {negocio?.nome_negocio_coleta}
                              </td>
                              <td className="font-medium border-l p-1">
                                {negocio?.nome_pendencia}
                              </td>
                              <td className="font-medium border-l p-1">
                                {
                                  tiposNegocios?.find(
                                    (tipo) =>
                                      tipo?.id_tipo_negocio ==
                                      negocio?.tipoNegocio_coleta
                                  )?.nome_tipo_negocio
                                }
                              </td>
                              <td className="font-medium border-l p-1">
                                {
                                  lojas?.find(
                                    (loja) =>
                                      loja?.id_loja == negocio?.loja_coleta
                                  )?.nome_loja
                                }
                              </td>
                              <td className="font-medium border-l p-1">
                                {
                                  usuarios?.find(
                                    (usuario) =>
                                      usuario?.id_usuario ==
                                      negocio?.vendedor_coleta
                                  )?.nome_usuario
                                }
                              </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)}
                      onClick={submitTransferencia}
                      disabled={ids_coletas.length == 0 || !loja}
                    >
                      Transferir
                    </Button>
                  </div>
                </div>
              </div>
            )
          )}
        </div>
      )}
    </div>
  );
}