import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
import Button from "@/components/Forms/Button";
import Container from "@/components/Forms/Container";
import InputGroup from "@/components/Forms/InputGroup";
import InputSelectComponent from "@/components/Forms/InputSelect";
import ReactTable from "@/components/ReactTable/ReactTable";
import { listarComissoesAnual } from "@/requests/CRUD/Comissoes/listarComissoes";
import { listarLojas } from "@/requests/CRUD/Lojas/listarLojas";
import { listarUsuarios } from "@/requests/CRUD/Usuario/listarUsuarios";
import { useAuth } from "@/src/contexts/authContext";
import { formatarValor, GetForm } from "@/utils";
import { useEffect, useState } from "react";

const ConsultaAnualComissoes = () => {
  const { usuario: usuarioLogado, perfil, valuesSession } = useAuth();
  const { session } = valuesSession();
  const [filtro, setFiltro] = useState<any>({});
  const [isLoading, setIsLoading] = useState(false);

  const [data, setData] = useState<any[]>([]);

  const form = GetForm();
  const [usuarios, setUsuarios] = useState<any[]>([]);
  const [lojasOptions, setLojasOptions] = useState<any>([]);
  const [selectedLoja, setSelectedLoja] = useState<any>([]);

  useEffect(() => {
    listarUsuarios().then((response) => {
      setUsuarios(response);
    });
    listarLojas(session.id_usuario).then((res) => {
      const idsLojaUsuario = session.id_loja_usuario
        .split(",")
        .map((id: any) => id.trim());

      const filtered = res.filter((loja: any) =>
        idsLojaUsuario.includes(loja.id_loja?.toString()),
      );

      setLojasOptions(filtered);
      setSelectedLoja([session.loja_padrao_usuario]);
    });

    // listarUsuarios().then((response) => {
    //   setUsuarios(response);
    // });
  }, []);

  useEffect(() => {
    if (perfil?.visualiza_todos_contatos_perfil != "1") {
      setFiltro((prev: any) => ({
        ...prev,
        cod_usuario_pre_apuracao: [{ value: usuarioLogado?.id_usuario }],
      }));
    }
  }, [perfil, usuarioLogado]);

  const meses = [
    "janeiro",
    "fevereiro",
    "marco",
    "abril",
    "maio",
    "junho",
    "julho",
    "agosto",
    "setembro",
    "outubro",
    "novembro",
    "dezembro",
  ];

  function filtrarPorMultiSelecao(
    row: any,
    columnId: string,
    filterValue: any[],
  ) {
    // if (!row.original[columnId]) {
    //   return true;
    // }
    if (
      filterValue?.length == 0 ||
      filterValue.some(
        (optionSelected) =>
          optionSelected.value == "*" ||
          (optionSelected.label == row.original[columnId] &&
            row.original[columnId] != null),
      )
    ) {
      return true;
    }

    return false;
  }

  const columns: any = [
    {
      header: "Vendedor",
      accessorKey: "cod_usuario_pre_apuracao",
      filterFn: filtrarPorMultiSelecao,
    },
    {
      header: "Ano",
      accessorKey: "ano_pagamento_apuracao",
      filterFn: filtrarPorMultiSelecao,
    },
    {
      header: "Jan",
      accessorKey: "valorTotal_janeiro",
    },
    {
      header: "Fev",
      accessorKey: "valorTotal_fevereiro",
    },
    {
      header: "Mar",
      accessorKey: "valorTotal_marco",
    },
    {
      header: "Abr",
      accessorKey: "valorTotal_abril",
    },
    {
      header: "Mai",
      accessorKey: "valorTotal_maio",
    },
    {
      header: "Jun",
      accessorKey: "valorTotal_junho",
    },
    {
      header: "Jul",
      accessorKey: "valorTotal_julho",
    },
    {
      header: "Ago",
      accessorKey: "valorTotal_agosto",
    },
    {
      header: "Set",
      accessorKey: "valorTotal_setembro",
    },
    {
      header: "Out",
      accessorKey: "valorTotal_outubro",
    },
    {
      header: "Nov",
      accessorKey: "valorTotal_novembro",
    },
    {
      header: "Dez",
      accessorKey: "valorTotal_dezembro",
    },
    {
      header: "Total",
      accessorKey: "valorTotal",
    },
  ];

  const calcularTotal = (data: any) => {
    let total = 0;

    if (
      filtro.ano_pagamento_apuracao?.length > 0 ||
      filtro.cod_usuario_pre_apuracao?.length > 0
    ) {
      const filtredData = data.filter((item: any) => {
        const anoValido =
          !filtro.ano_pagamento_apuracao?.length ||
          filtro.ano_pagamento_apuracao[0]?.value === "*" ||
          item.ano_pagamento_apuracao ===
            filtro.ano_pagamento_apuracao[0]?.value;

        const usuarioValido =
          !filtro.cod_usuario_pre_apuracao?.length ||
          filtro.cod_usuario_pre_apuracao[0]?.value === "*" ||
          item.cod_usuario_pre_apuracao ===
            filtro.cod_usuario_pre_apuracao[0]?.value;

        return anoValido && usuarioValido;
      });

      filtredData.forEach((item: any) => {
        total += item.valorTotal_janeiro;
        total += item.valorTotal_fevereiro;
        total += item.valorTotal_marco;
        total += item.valorTotal_abril;
        total += item.valorTotal_maio;
        total += item.valorTotal_junho;
        total += item.valorTotal_julho;
        total += item.valorTotal_agosto;
        total += item.valorTotal_setembro;
        total += item.valorTotal_outubro;
        total += item.valorTotal_novembro;
        total += item.valorTotal_dezembro;
      });
    } else {
      data.forEach((item: any) => {
        total += item.valorTotal_janeiro;
        total += item.valorTotal_fevereiro;
        total += item.valorTotal_marco;
        total += item.valorTotal_abril;
        total += item.valorTotal_maio;
        total += item.valorTotal_junho;
        total += item.valorTotal_julho;
        total += item.valorTotal_agosto;
        total += item.valorTotal_setembro;
        total += item.valorTotal_outubro;
        total += item.valorTotal_novembro;
        total += item.valorTotal_dezembro;
      });
    }

    return total;
  };

  const calcularValorPorMes = (data: any, mes: string) => {
    let total = 0;

    if (
      filtro.ano_pagamento_apuracao?.length > 0 ||
      filtro.cod_usuario_pre_apuracao?.length > 0
    ) {
      const filtredData = data.filter((item: any) => {
        const anoValido =
          !filtro.ano_pagamento_apuracao?.length ||
          filtro.ano_pagamento_apuracao[0]?.value === "*" ||
          item.ano_pagamento_apuracao ===
            filtro.ano_pagamento_apuracao[0]?.value;

        const usuarioValido =
          !filtro.cod_usuario_pre_apuracao?.length ||
          filtro.cod_usuario_pre_apuracao[0]?.value === "*" ||
          item.cod_usuario_pre_apuracao ===
            filtro.cod_usuario_pre_apuracao[0]?.value;

        return anoValido && usuarioValido;
      });

      filtredData.forEach((item: any) => {
        total += item[mes];
      });
    } else {
      data.forEach((item: any) => {
        total += item[mes];
      });
    }

    return total;
  };

  const formatFunction = (data: any) => {
    return data.map((item: any) => {
      item["cod_usuario_pre_apuracao"] =
        usuarios &&
        usuarios.find(
          (usuario: any) =>
            usuario.id_usuario == item["cod_usuario_pre_apuracao"],
        )?.nome_usuario;
      item["valorTotal"] = formatarValor(
        item["valorTotal_janeiro"] +
          item["valorTotal_fevereiro"] +
          item["valorTotal_marco"] +
          item["valorTotal_abril"] +
          item["valorTotal_maio"] +
          item["valorTotal_junho"] +
          item["valorTotal_julho"] +
          item["valorTotal_agosto"] +
          item["valorTotal_setembro"] +
          item["valorTotal_outubro"] +
          item["valorTotal_novembro"] +
          item["valorTotal_dezembro"],
      );
      item["valorTotal_janeiro"] = formatarValor(
        item["valorTotal_janeiro"] || 0,
      );
      item["valorTotal_fevereiro"] = formatarValor(
        item["valorTotal_fevereiro"] || 0,
      );
      item["valorTotal_marco"] = formatarValor(item["valorTotal_marco"] || 0);
      item["valorTotal_abril"] = formatarValor(item["valorTotal_abril"] || 0);
      item["valorTotal_maio"] = formatarValor(item["valorTotal_maio"] || 0);
      item["valorTotal_junho"] = formatarValor(item["valorTotal_junho"] || 0);
      item["valorTotal_julho"] = formatarValor(item["valorTotal_julho"] || 0);
      item["valorTotal_agosto"] = formatarValor(item["valorTotal_agosto"] || 0);
      item["valorTotal_setembro"] = formatarValor(
        item["valorTotal_setembro"] || 0,
      );
      item["valorTotal_outubro"] = formatarValor(
        item["valorTotal_outubro"] || 0,
      );
      item["valorTotal_novembro"] = formatarValor(
        item["valorTotal_novembro"] || 0,
      );
      item["valorTotal_dezembro"] = formatarValor(
        item["valorTotal_dezembro"] || 0,
      );

      return item;
    });
  };
  const filtroFunction = async (data: any) => {
    listarComissoesAnual().then((response: any) => {
      setData(response);
    });
  };

  return (
    <>
      <Container className="p-6 bg-white shadow-lg rounded-lg">
        <Breadcrumb pageName="Consulta Anual De Comissões" />
        <form key={form.key}>
          <InputGroup className="grid grid-cols-5 gap-6">
            <InputSelectComponent
              label="Ano"
              name="ano"
              isMulti
              formulario={form}
              options={[
                { value: "2021", label: "2021" },
                { value: "2022", label: "2022" },
                { value: "2023", label: "2023" },
                { value: "2024", label: "2024" },
                { value: "2025", label: "2025" },
              ]}
              onChange={(e: any) =>
                setFiltro((prev: any) => ({
                  ...prev,
                  ano_pagamento_apuracao: e,
                }))
              }
            />
            <InputSelectComponent
              label="Loja"
              formulario={form}
              // width="w-[450px]"
              isMulti
              name="loja"
              options={lojasOptions.map((e: any) => ({
                label: `${e.nome_loja}`,
                value: `${e.id_loja}`,
              }))}
              onChange={(selectedOptions: any) => {
                if (selectedOptions.some((e: any) => e.value == "*")) {
                  setSelectedLoja(lojasOptions.map((e: any) => e.id_loja));
                } else {
                  setSelectedLoja(selectedOptions.map((e: any) => e.value));
                }
              }}
              defaultValue={session.loja_padrao_usuario}
            />
            <InputSelectComponent
              formulario={form}
              label="Usuário"
              name="cod_usuario_pre_apuracao"
              isMulti
              options={[
                { value: "*", label: "Todos" },
                ...usuarios
                  .filter(
                    (vendedor: any) =>
                      vendedor.comissionado_usuario == "1" &&
                      selectedLoja?.some((loja: any) =>
                        vendedor.loja_usuario?.split(",").includes(loja),
                      ),
                  )
                  .map((vendedor: any) => ({
                    value: vendedor.id_usuario,
                    label: vendedor.nome_usuario,
                  })),
              ]}
              defaultValue={
                perfil?.visualiza_todos_contatos_perfil != "1" &&
                usuarioLogado?.id_usuario
              }
              disabled={perfil?.visualiza_todos_contatos_perfil != "1"}
              onChange={(e: any) => {
                setFiltro((prev: any) => ({
                  ...prev,
                  cod_usuario_pre_apuracao: e,
                }));
              }}
            />
          </InputGroup>
          <div className="flex justify-center mt-4 w-full">
            <Button
              type="submit"
              onClick={form.handleSubmit(filtroFunction)}
              className="bg-primary text-white px-4 py-2 rounded-md"
              loading={isLoading}
            >
              Filtrar
            </Button>
          </div>
        </form>
        <div className="flex justify-center items-center w-full text-lg font-bold text-black dark:text-white">
          Valor Total: {formatarValor(calcularTotal(data))}
        </div>
        <ReactTable
          columns={columns}
          data={data}
          listFunction={() => new Promise((resolve, reject) => resolve(data))}
          formatFunction={formatFunction}
          filters={filtro}
          tfoot={
            <tr>
              <td className="text-left font-bold text-lg" colSpan={2}></td>

              {meses.map((mes) => (
                <td
                  key={mes}
                  className="text-right text-success text-lg font-bold"
                  colSpan={1}
                >
                  {formatarValor(
                    calcularValorPorMes(data, `valorTotal_${mes}`),
                  )}
                </td>
              ))}
              <td
                className="text-right text-success text-lg font-bold"
                colSpan={1}
              >
                {formatarValor(calcularTotal(data))}
              </td>
            </tr>
          }
        />
      </Container>
    </>
  );
};

export default ConsultaAnualComissoes;