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 ModalComponente from "@/components/Modal/ModalComponente";
import ReactTable from "@/components/ReactTable/ReactTable";
import {
  listarComissoes,
  listarNegocioComissao,
} 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";
import { FaSearch } from "react-icons/fa";

const ConsultaMensalComissoes = () => {
  const { usuario: usuarioLogado, perfil, valuesSession } = useAuth();
  const { session } = valuesSession();
  const form: any = GetForm();
  const [usuarios, setUsuarios] = useState<any>([]);
  const [openModal, setOpenModal] = useState(false);
  const [lojasOptions, setLojasOptions] = useState<any>([]);
  const [selectedLoja, setSelectedLoja] = useState<any>([]);
  const [dataReactTable, setDataReactTable] = useState<any>([]);
  const [loaded, setLoaded] = useState(false);
  const [negocios, setNegocios] = useState<any>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [showUser, setShowUser] = useState<any>([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const [usuarios, lojas] = await Promise.all([
          listarUsuarios(),
          listarLojas(session.id_usuario),
        ]);

        setUsuarios(usuarios);

        const idsLojaUsuario = session.id_loja_usuario
          .split(",")
          .map((id: any) => id.trim());

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

        setLojasOptions(filteredLojas);
        setSelectedLoja([session.loja_padrao_usuario]);

        setLoaded(true); // só aqui depois que tudo terminou
      } catch (error) {
        console.error("Erro ao carregar dados:", error);
      }
    };

    fetchData();
  }, []);

  const meses = [
    { value: "1", label: "Janeiro" },
    { value: "2", label: "Fevereiro" },
    { value: "3", label: "Março" },
    { value: "4", label: "Abril" },
    { value: "5", label: "Maio" },
    { value: "6", label: "Junho" },
    { value: "7", label: "Julho" },
    { value: "8", label: "Agosto" },
    { value: "9", label: "Setembro" },
    { value: "10", label: "Outubro" },
    { value: "11", label: "Novembro" },
    { value: "12", label: "Dezembro" },
  ];

  const columns: any = [
    {
      header: "Mês",
      accessorKey: "mes_apuracao",
    },
    {
      header: "Ano",
      accessorKey: "ano_apuracao",
    },
    {
      header: "Usuario",
      accessorKey: "usuario_apuracao",
    },
    {
      header: "Valor Total",
      accessorKey: "valorTotal",
    },
  ];

  const filtroFunction = async (data: any) => {
    if (data.cod_usuario_pre_apuracao[0] == "*") {
      setShowUser([{ nome_usuario: "Todos" }]);
    } else {
      setShowUser(
        usuarios.filter((vendedor: any) =>
          data.cod_usuario_pre_apuracao.includes(vendedor.id_usuario),
        ),
      );
    }

    setIsLoading(true);
    const response = await listarComissoes(data).finally(() =>
      setIsLoading(false),
    );
    setDataReactTable(response);
  };

  const formatFunction = (data: any) => {
    return data.map((item: any) => {
      item["valorTotal"] = formatarValor(item["total_comissao"]);
      item["mes_apuracao"] = meses.find(
        (mes) => mes.value == item["mes_apuracao"],
      )?.label;
      if (item["usuario_apuracao"] != "Todos") {
        item["usuario_apuracao"] = usuarios.find(
          (usuario: any) => usuario.id_usuario == item["usuario_apuracao"],
        )?.nome_usuario;
      }
      return item;
    });
  };
  return (
    <>
      <Container className="p-6 bg-white shadow-lg rounded-lg">
        <form key={form.key}>
          {" "}
          <Breadcrumb pageName="Consulta Mensal Comissões" />
          <InputGroup className="grid grid-cols-5 gap-6">
            <InputSelectComponent
              label="Mês"
              formulario={form}
              name="mes"
              options={meses}
              error="Selecione um mês"
            />
            <InputSelectComponent
              label="Ano"
              name="ano"
              formulario={form}
              options={[
                { value: "2021", label: "2021" },
                { value: "2022", label: "2022" },
                { value: "2023", label: "2023" },
                { value: "2024", label: "2024" },
                { value: "2025", label: "2025" },
              ]}
              error="Selecione um ano"
            />
            <InputSelectComponent
              label="Loja"
              formulario={form}
              name="loja"
              options={lojasOptions.map((e: any) => ({
                label: `${e.nome_loja}`,
                value: `${e.id_loja}`,
              }))}
              error="Selecione uma loja"
              defaultValue={session.loja_padrao_usuario}
            />
            <InputSelectComponent
              label="Usuário"
              name="cod_usuario_pre_apuracao"
              formulario={form}
              isMulti
              required
              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,
                  })),
              ]}
              error="Selecione um usuário"
              defaultValue={
                perfil?.visualiza_todos_contatos_perfil != "1" &&
                usuarioLogado?.id_usuario
              }
              disabled={perfil?.visualiza_todos_contatos_perfil != "1"}
            />
          </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 mt-4 ">
          {showUser?.length > 0 && (
            <div className="text-center">
              <strong>Usuário(s):</strong>{" "}
              {showUser?.map((usuario: any, index: number) => (
                <span key={index}>
                  {usuario.nome_usuario}
                  {index < showUser?.length - 1 ? ", " : ""}
                </span>
              ))}
            </div>
          )}
        </div>
        {loaded && (
          <ReactTable
            columns={columns}
            data={dataReactTable}
            idCol="mes_apuracao"
            listFunction={() =>
              new Promise((resolve, reject) => resolve(dataReactTable))
            }
            formatFunction={formatFunction}
            actionButtons={(
              rowData: any,
              updateTable: any,
              setIsLoading: any,
              { listData, idCol, rowOriginal },
            ) => {
              const buttons = [];
              buttons.push({
                className: "bg-primary text-white",
                onClick: (e: any) => {
                  setOpenModal(true);
                  listarNegocioComissao(
                    rowOriginal.codigos_negocios,
                    rowOriginal.usuario_apuracao,
                  ).then((res) => {
                    setNegocios(res);
                  });
                },
                content: <FaSearch title="Visualizar" />,
              });
              return buttons;
            }}
          />
        )}
      </Container>
      <ModalComponente
        header={`Visualizar Valor Dos Negócios`}
        onClose={() => setOpenModal(false)}
        hasSaveButton={false}
        hasForm={false}
        opened={openModal}
      >
        <div className="space-y-2 p-4">
          {/* Legenda para as cores */}
          <div className="flex items-center space-x-4 mb-4">
            <div className="flex items-center space-x-2">
              <span className="w-4 h-4 bg-danger block"></span>
              <span>Desconto</span>
            </div>
            <div className="flex items-center space-x-2">
              <span className="w-4 h-4 bg-success block"></span>
              <span>Acréscimo</span>
            </div>
          </div>
          <table className="table-auto w-full border-collapse border border-graydark">
            <thead>
              <tr className="bg-gray">
                <th className="border border-graydark px-4 py-2">
                  Nº do Negócio
                </th>
                <th className="border border-graydark px-4 py-2">
                  Nome do Cliente
                </th>
                <th className="border border-graydark px-4 py-2">Usuário</th>
                <th className="border border-graydark px-4 py-2">
                  Data da Finalização da Venda
                </th>
                <th className="border border-graydark px-4 py-2">
                  Desconto/Acréscimo
                </th>
                <th className="border border-graydark px-4 py-2">
                  Valor Negociado (R$)
                </th>
                <th className="border border-graydark px-4 py-2">% Comissão</th>
                <th className="border border-graydark px-4 py-2">
                  Valor da Comissão (R$)
                </th>
                <th className="border border-graydark px-4 py-2">
                  Tipo Comissão
                </th>
              </tr>
            </thead>
            <tbody>
              {negocios.map((negocio: any, index: number) => (
                <tr key={index} className="text-center">
                  <td className="border border-graydark px-4 py-2">
                    {negocio.id_coleta}
                  </td>
                  <td className="border border-graydark px-4 py-2">
                    {negocio.nome_cliente}
                  </td>
                  <td className="border border-graydark px-4 py-2">
                    {
                      usuarios.find(
                        (usuario: any) =>
                          usuario.id_usuario == negocio.id_usuario_comissao,
                      )?.nome_usuario
                    }
                  </td>
                  <td className="border border-graydark px-4 py-2">
                    {new Date(
                      negocio.dataFinalizacaoVenda_coleta,
                    ).toLocaleDateString("pt-BR")}
                  </td>
                  <td
                    className={`border border-graydark px-4 py-2
                       ${negocio.descontoTotal_proposta != 0 ? "text-danger" : "text-success"}`}
                  >
                    {formatarValor(negocio.descontoTotal_proposta) ||
                      formatarValor(negocio.acrescimoTotal_proposta) ||
                      "0,00"}
                  </td>
                  <td className="border border-graydark px-4 py-2 text-success">
                    {formatarValor(negocio.valor_proposta_apuracao) || "N/A"}
                  </td>
                  <td className="border border-graydark px-4 py-2">
                    {negocio.percentual_comissao || "N/A"}%
                  </td>
                  <td className="border border-graydark px-4 py-2 text-success">
                    {formatarValor(negocio.valor_comissao) || "N/A"}
                  </td>
                  <td className="border border-graydark px-4 py-2">
                    {negocio.tipo_comissao || "N/A"}
                  </td>
                </tr>
              ))}
            </tbody>
            <tfoot>
              <tr className="font-bold">
                <td
                  colSpan={5}
                  className="border border-graydark px-4 py-2 text-right"
                >
                  Totais:
                </td>
                <td className="border border-graydark px-4 py-2 text-success">
                  {formatarValor(
                    negocios.reduce(
                      (sum: number, negocio: any) =>
                        +sum + +negocio.valor_proposta_apuracao || 0,
                      0,
                    ),
                  )}
                </td>
                <td className="border border-graydark px-4 py-2"></td>
                <td className="border border-graydark px-4 py-2 text-success">
                  {formatarValor(
                    negocios.reduce(
                      (sum: number, negocio: any) =>
                        +sum + +negocio.valor_comissao || 0,
                      0,
                    ),
                  )}
                </td>
                <td className="border border-graydark px-4 py-2"></td>
              </tr>
            </tfoot>
          </table>
        </div>
      </ModalComponente>
    </>
  );
};

export default ConsultaMensalComissoes;