import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
import LoaderSun from "@/components/common/Loader/LoaderSun";
import Button from "@/components/Forms/Button";
import Container from "@/components/Forms/Container";
import ModalComponente from "@/components/Modal/ModalComponente";
import ReactTable from "@/components/ReactTable/ReactTable";
import { listarContatos } from "@/requests/CRUD/Cliente/listarClientes";
import { listarColetasInstalacoes } from "@/requests/CRUD/Instalacoes/listarColetasInstalacoes";
import { listarPendencias } from "@/requests/CRUD/LinhaPendencias/listarLinhaPendencias";
import { listarLojas } from "@/requests/CRUD/Lojas/listarLojas";
import { editarParcelamento } from "@/requests/CRUD/Parcelamentos/editarParcelamento";
import { salvarPagamentoParcelamento } from "@/requests/CRUD/Parcelamentos/salvarPagamentoParcelamento";
import { listarTiposNegocios } from "@/requests/CRUD/TiposNegocios/listarTiposNegocios";
import { listarUsuarios } from "@/requests/CRUD/Usuario/listarUsuarios";
import { useAuth } from "@/src/contexts/authContext";
import { useKanbanContext } from "@/src/contexts/kanbanContext";
import { formatarValor, FormatFields, getDateBrasil } from "@/utils";
import { useEffect, useState } from "react";
import FormFiltroConsultaRelatorioInstalacoes from "./FormFiltroConsultaRelatorioInstalacoes";
import FormPagamento from "./FormPagamento";
import RelatorioInstalacoes from "./RelatorioInstalacoes";

const statusParcelas = [
  { label: "Parcelamento Gerado, mas não aprovado o crédito", value: "0" },
  { label: "Pendente de Pagamento", value: "1" },
  { label: "Paga", value: "2" },
  { label: "Vencida", value: "3" },
];

const ConsultaRelatorioInstalacoes = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [isLoaded, setIsLoaded] = useState(false);
  const [clientes, setClientes] = useState<any[]>([]);
  const [usuarios, setUsuarios] = useState<any[]>([]);
  const [tiposNegocios, setTiposNegocios] = useState<any[]>([]);
  const [lojas, setLojas] = useState<any[]>([]);
  const [dados, setDados] = useState<any[]>([]);
  const [filtros, setFiltros] = useState<any>();
  const [isOpenModalPagamento, setIsOpenModalPagamento] = useState<any>();
  const [pagamentoData, setPagamentoData] = useState<any>();
  const [dadosFormatados, setDadosFormatados] = useState<any[]>([]);
  const [pendencias_card, setPendencias_card] = useState<any[]>([]);

  const { usuario } = useAuth();
  const { cidades, estadosFiltro } = useKanbanContext();

  useEffect(() => {
    // setLoading(true);
    // const fetchColetasPerdas = listarRelatorioPerdas().then(setDados);
    if (usuario) {
      Promise.all([
        listarLojas().then((res) => {
          const idsLojaUsuario = usuario?.loja_usuario
            ?.split(",")
            ?.map((id: any) => id.trim());

          const filtered = res.filter((loja: any) =>
            idsLojaUsuario?.includes(loja.id_loja.toString())
          );
          setLojas(filtered);
        }),
        listarUsuarios(usuario?.loja_usuario).then(setUsuarios),
        listarContatos({ id_usuario: usuario?.id_usuario }).then(setClientes),
        listarTiposNegocios().then(setTiposNegocios),
        listarPendencias({ tipoNegocio_pendencia: "*" }).then(
          setPendencias_card
        ),
      ]).then(() => setIsLoaded(true));
    }
  }, [usuario]);
  const fakeList = async (): Promise<any[]> => {
    const promise: Promise<any[]> = new Promise((resolve, reject) =>
      resolve(dados)
    );
    return promise;
  };
  const onSubmitFilter = async (value: any) => {
    setFiltros(value);
    return fetchData(value);
  };

  async function fetchData(filtrosData = filtros) {
    setIsLoading(true);

    return listarColetasInstalacoes(filtrosData)
      .then((res) => {
        setIsLoaded(true);

        setDados(res);
      })
      .finally(() => setIsLoading(false));
  }

  const onEditParcelamento = async (data: any) => {
    return editarParcelamento(data).then(() => {
      fetchData(filtros);
    });
  };

  const columns = [
    { header: "Loja", accessorKey: "nome_loja" },
    { header: "Tipo do Negócio", accessorKey: "nome_tipo_negocio" },
    { header: "ID do Cliente", accessorKey: "id_cliente" },
    { header: "Nome do Cliente", accessorKey: "nome_cliente" },
    { header: "Nº do Projeto", accessorKey: "id_coleta" },
    { header: "Nome do Projeto", accessorKey: "nome_negocio_coleta" },
    { header: "Data do Projeto", accessorKey: "datetime_coleta" },
    { header: "Status do Projeto", accessorKey: "nome_pendencia" },
    { header: "UF da Instalação", accessorKey: "uf_coleta" },
    { header: "Cidade da Instalação", accessorKey: "cidade_coleta" },
    { header: "Bairro da Instalação", accessorKey: "bairro_coleta" },
    { header: "Rua da Instalação", accessorKey: "logradouro_coleta" },
    { header: "Número da Instalação", accessorKey: "numero_endereco_coleta" },


    { header: "Qtd de Inversores do Proejto", accessorKey: "qtd_inversores" },
    {
      header: "Marca dos Inversores do Projeto",
      accessorKey: "marca_inversores",
    },
    {
      header: "Potência dos Inversores do Projeto",
      accessorKey: "potencia_inversores",
    },
    {
      header: "Qtd de Modúlos do Projeto",
      accessorKey: "modulosDigitado_proposta",
    },
    { header: "Marca do Módulo do Projeto", accessorKey: "marca_modulos" },
    {
      header: "Potência do Módulo do Projeto",
      accessorKey: "potencia_modulos",
    },
    {
      header: "Potência do Sistema do Projeto",
      accessorKey: "potenciaSistema_proposta",
    },
    { header: "Valor do Projeto", accessorKey: "valorTotal_proposta" },
    {
      header: "Valor Mão de Obra por Placa",
      accessorKey: "obra_por_placa_servico_proposta",
    },
    {
      header: "Valor Mão de Obra por Potência",
      accessorKey: "obra_por_potencia_servico_proposta",
    },
    {
      header: "Valor Fixo Mão de Obra",
      accessorKey: "valor_fixo_servico_proposta",
    },
    { header: "Total do Serviço", accessorKey: "valor_obra_servico" },
    { header: "Data da Instalação", accessorKey: "data_instalacao" },
    { header: "Nome do Instalador", accessorKey: "nome_instalador" },
    { header: "Data da Conclusão", accessorKey: "data_conclusao_instalacao" },
    { header: "Obs da Instalação", accessorKey: "observacoes_instalacao" },
  ];

  const formatFunction = (arr: any) => {
    const values = arr.map((e: any) => {
      // e.valor_obra_servico = [
      //   "valor_fixo_servico_proposta",
      //   "obra_por_placa_servico_proposta",
      //   "obra_por_potencia_servico_proposta",
      // ].some((key) => e[key])
      //   ? Number(e.valor_fixo_servico_proposta) +
      //     Number(e.obra_por_placa_servico_proposta) * Number(e.qtd_modulos) +
      //     Number(e.obra_por_potencia_servico_proposta) *
      //       Number(e.potenciaSistema_proposta)
      //   : "";
      e.valor_obra_servico = e?.valor_obra_servico
        ? formatarValor(e?.valor_obra_servico)
        : "";
      e.valorTotal_proposta = formatarValor(e?.valorTotal_proposta);
      e.obra_por_placa_servico_proposta = e?.obra_por_placa_servico_proposta
        ? formatarValor(e?.obra_por_placa_servico_proposta)
        : "";
      e.obra_por_potencia_servico_proposta =
        e?.obra_por_potencia_servico_proposta
          ? formatarValor(e?.obra_por_potencia_servico_proposta)
          : "";
      e.valor_fixo_servico_proposta = e?.valor_fixo_servico_proposta
        ? formatarValor(e?.valor_fixo_servico_proposta)
        : "";
      e.datetime_coleta = e?.datetime_coleta
        ? getDateBrasil(undefined, e?.datetime_coleta)
        : "";
      e.data_instalacao = e?.data_instalacao
        ? getDateBrasil(undefined, e?.data_instalacao)
        : "";
      e.data_conclusao_instalacao = e?.data_conclusao_instalacao
        ? getDateBrasil(undefined, e?.data_conclusao_instalacao)
        : "";
      e.nome_instalador = e?.nome_usuario;
      e.potencia_modulos = e.potencia_modulos
        ? FormatFields.formatarNumero(e.potencia_modulos) + " Wp"
        : "";
      e.potenciaSistema_proposta = e.potenciaSistema_proposta
        ? FormatFields.formatarNumero(e.potenciaSistema_proposta) + " kWp"
        : "";
      // e.dataVencimento_parcelamento = e?.dataVencimento_parcelamento
      //   ? FormatFields.formatarDataHora(
      //       e?.dataVencimento_parcelamento?.split("-"),
      //       "dd/mm/AAAA"
      //     )
      //   : "";
      // e.dataPagamento_parcelamento = e?.dataPagamento_parcelamento
      //   ? FormatFields.formatarDataHora(
      //       e?.dataPagamento_parcelamento?.split("-"),
      //       "dd/mm/AAAA"
      //     )
      //   : "";
      // e.codTipoNegocio_parcelamento = tiposNegocios?.find(
      //   (tipoNegocio) =>
      //     tipoNegocio?.id_tipo_negocio == e?.codTipoNegocio_parcelamento
      // )?.nome_tipo_negocio;
      // e.status_parcelamento = statusParcelas?.find(
      //   (status) => status.value == e?.status_parcelamento
      // )?.label;
      // e.codNegocio_parcelamento = e.codNegocio_parcelamento;
      return e;
    });
    setDadosFormatados(values);
    return values;
  };
  return (
    <>
      <Breadcrumb pageName="Relatório das Instalações" />
      <Container>
        <FormFiltroConsultaRelatorioInstalacoes
          onSubmitFunction={onSubmitFilter}
          lojas={lojas}
          tiposNegocios={tiposNegocios}
          clientes={clientes}
          statusParcelas={statusParcelas}
          usuarios={usuarios}
          pendencias_card={pendencias_card}
          estados={estadosFiltro}
          cidades={cidades}
        />
        {isLoaded ? (
          <ReactTable
            columns={columns}
            pageName={"Coletas"}
            listFunction={fakeList}
            data={dados}
            formatFunction={formatFunction}
            // Form={FormParcela}
            // canEdit
            // editFunction={onEditParcelamento}
            idCol="id_coleta"
            customizedComponents={[
              {
                component: "div",
                children: (
                  <RelatorioInstalacoes
                    dados={dadosFormatados}
                    columns={columns}
                  />
                ),
              },
            ]}
            // actionButtons={(
            //   rowData: any,
            //   updateTable: any,
            //   setIsLoading: any,
            //   {
            //     idCol,
            //     isActive,
            //     isActiveCol,
            //     pageName,
            //     editFunction,
            //     listData,
            //     rowOriginal,
            //   }
            // ) => [
            //   // {
            //   //   className: `navButton ${isActive ? "buttonSuccess" : "buttonDanger"} transition-all duration-300`,

            //   //   onClick: (e: any) => {
            //   //     handleSweetAlert(
            //   //       {
            //   //         icon: "warning",
            //   //         title: `${!isActive ? "Ativar" : "Desativar"} ${pageName}`,
            //   //         html: `Tem certeza que deseja <b>${!isActive ? "Ativar" : "Desativar"}</b> o registro ${rowData[idCol]}?`,
            //   //       },
            //   //       async () => {
            //   //         return editFunction({
            //   //           [idCol]: rowData[idCol],
            //   //           [isActiveCol]: !isActive,
            //   //         }).then(() => updateTable());
            //   //       }
            //   //     );
            //   //   },
            //   //   content:
            //   //     isActive &&
            //   //     rowData["cargo_perfil"] ==
            //   //       cargos.find((cargo) => cargo.id_cargo == "-1").nome_cargo &&
            //   //     listData.filter(
            //   //       (usuario: any) =>
            //   //         usuario["cargo_perfil"] == "-1" &&
            //   //         usuario[isActiveCol] == "1"
            //   //     ).length == 1 ? undefined : isActive ? (
            //   //       <MdOutlineToggleOn />
            //   //     ) : (
            //   //       <CalendarX />
            //   //     ),
            //   // },
            //   ...(["1", "2"].includes(rowOriginal?.satus_original_parcelamento)
            //     ? [
            //         {
            //           className: `navButton ${rowOriginal?.status_parcelamento == "1" ? "buttonSuccess" : "buttonDanger"} transition-all duration-300`,
            //           onClick: (e: any) => {
            //             handleSweetAlert(
            //               {
            //                 icon: "question",
            //                 title:
            //                   rowOriginal?.satus_original_parcelamento == "1"
            //                     ? "Realizar Baixa"
            //                     : "Estornar Parcela",
            //                 html:
            //                   rowOriginal?.satus_original_parcelamento == "1"
            //                     ? `Deseja realizar a baixa desta parcela?`
            //                     : rowOriginal?.satus_original_parcelamento ==
            //                         "2"
            //                       ? `Deseja estornar esta parcela?`
            //                       : "",
            //               },
            //               () => {
            //                 if (
            //                   rowOriginal?.satus_original_parcelamento == "1"
            //                 ) {
            //                   setIsOpenModalPagamento(true);
            //                   setPagamentoData(rowOriginal);
            //                 } else {
            //                   return estornarPagamentoParcelamento({
            //                     ...rowOriginal,
            //                     status_parcelamento: "1",
            //                     id_usuario: usuario?.id_usuario,
            //                   }).then(() => {
            //                     fetchData();
            //                   });
            //                 }
            //                 // setIsLoading(true);
            //                 // refreshFunction(rowData)
            //                 //   .then(() => updateTable())
            //                 //   .finally(() => setIsLoading(false));
            //               }
            //             );
            //           },
            //           content: (
            //             <>
            //               {rowOriginal?.satus_original_parcelamento == "1" ? (
            //                 <CalendarCheck />
            //               ) : (
            //                 <CalendarX />
            //               )}
            //             </>
            //           ),
            //         },
            //       ]
            //     : []),
            // ]}
            tfoot={
              <td
                className="bg-gradient-to-r from-gray-50 to-gray-100 p-4 border-t-2 border-blue-200"
                colSpan={columns.length}
              >
                <div className="flex flex-row gap-4 text-sm font-semibold rounded-lg shadow-sm border border-gray-200">
                  <div className="flex flex-col  p-3 bg-white ">
                    <span className="text-gray-600 text-xs uppercase tracking-wide">
                      Total de Projetos
                    </span>
                    <span className="text-lg font-bold text-blue-600">
                      {dadosFormatados.length}
                    </span>
                  </div>
                  <div className="flex flex-col  p-3 bg-white ">
                    <span className="text-gray-600 text-xs uppercase tracking-wide">
                      Valor Total dos Serviços
                    </span>
                    <span className="text-lg font-bold text-blue-600">
                      {formatarValor(
                        dados.reduce(
                          (acc, item) => acc + Number(item.valor_obra_servico),
                          0
                        )
                      )}
                    </span>
                  </div>
                  <div className="flex flex-col  p-3 bg-white ">
                    <span className="text-gray-600 text-xs uppercase tracking-wide">
                      Valor Total dos Projetos
                    </span>
                    <span className="text-lg font-bold text-blue-600">
                      {formatarValor(
                        dados
                          .reduce(
                            (acc, item) =>
                              acc + Number(item.valorTotal_proposta),
                            0
                          )
                      )}
                    </span>
                  </div>
                </div>
              </td>
            }
          />
        ) : (
          <div className="flex justify-center items-center h-96">
            <LoaderSun />
          </div>
        )}
      </Container>

      {isOpenModalPagamento && (
        <ModalComponente
          header={`Dados do Pagamento`}
          size={"md"}
          onClose={() => setIsOpenModalPagamento(false)}
          hasSaveButton={false}
          hasForm={false}
          opened={isOpenModalPagamento}
        >
          <FormPagamento
            onSubmitFunction={async (data: any) => {
              return salvarPagamentoParcelamento({
                ...pagamentoData,
                ...data,
                id_usuario: usuario?.id_usuario,
              }).then(() => {
                fetchData();
                setIsOpenModalPagamento(false);
                setPagamentoData(undefined);
              });
            }}
          >
            <div className="flex flex-row-reverse gap-3">
              <Button
                onClick={() => {
                  setIsOpenModalPagamento(false);
                  setPagamentoData(undefined);
                }}
                // className="bg-error text-white"
                variant="destructive"
              >
                Cancelar
              </Button>
              <Button loading={isLoading}>Salvar</Button>
            </div>
          </FormPagamento>
        </ModalComponente>
      )}
    </>
  );
};
export default ConsultaRelatorioInstalacoes;