import Container from "../../components/Forms/Container";
import InputGroup from "../../components/Forms/InputGroup";
import InputSelectComponent from "../../components/Forms/InputSelect";

import Button from "@/components/Forms/Button";
import { handleSweetAlert } from "@/components/Modal/SweetAlertConfirm";
import { useAuth } from "@/src/contexts/authContext";
import { FormatFields } from "@/utils";
import {
  calcularConsumoBaseUcs,
  calcularConsumoComAumentoFromUcs,
} from "@/utils/calcularConsumoComAumento";
import { buildFormulaModulosHtml } from "@/utils/calcules";
import katex from "katex";
import "katex/dist/katex.min.css";
import { Info } from "lucide-react";
import { useEffect, useState } from "react";
import { BsPatchCheckFill } from "react-icons/bs";
import { RiErrorWarningFill } from "react-icons/ri";
import Swal from "sweetalert2";
import Input from "../../components/Forms/Input";

const DistribuicaoModulos = ({
  form,
  blockNextStep,
  defaultValues,

  ucs,
  perdasMedias,
  imgTelhados,
  tiposInstalacao,
  categoriasTelhados,
  orientacoes,
  inclinacoes,
  telhados,
  estruturas,
  dadosCard,
  camposPersonalizados,
  setNextStepAction,
}: {
  orientacoes: any[];
  inclinacoes: any[];
  telhados: any[];
  estruturas: any[];
  [x: string]: any;
}) => {
  const [nomeTelhadoEscolhido, setNomeTelhadoEscolhido] = useState<any>(
    form.control._formValues.nomeTelhadoEscolhido ||
      categoriasTelhados?.find(
        (telhado: any) =>
          telhado.id_categoria_telhado ==
          defaultValues?.categoria_telhado_parametro
      )?.nome_categoria_telhado
  );

  const { usuario, valuesSession } = useAuth();
  const { session } = valuesSession();
  let msgUcsConsumo =
    "ATENÇÃO!!! Este projeto tem mais de uma UC, e a geração do sistema dimensionado não irá atender 100% todas as UCs, e com isso aumenta os 'Análise de Faturas'.";
  const { potencia_modulo, kitProprio, telhadosDistribuidor } =
    form.control._formValues;
  const porcentagemGeracaoWatch = form.watch("porcentagemGeracao");

  const [categoriaEscolhida, setCategoriaEscolhida] = useState<any>(
    form.control._formValues.categoriaEscolhida ||
      defaultValues?.categoria_telhado_parametro
  );
  const [dadosParaCalculo, setDadosParaCalculo] = useState<any>();

  const [showMsg, setShowMsg] = useState(false);
  const calcTotalConsumo = () => {
    let mediaConsumoMedioBeneficiariaLet = 0;
    let mediaConsumoMensalBeneficiariaLet = 0;

    ucs.map((ucBeneficiaria: any) => {
      if (ucBeneficiaria.tipoValor === "Média") {
        mediaConsumoMedioBeneficiariaLet += Number(ucBeneficiaria.valor) || 0;
      } else if (Array.isArray(ucBeneficiaria.valor)) {
        const valoresNumericos = ucBeneficiaria.valor
          .map((mes: any) => parseFloat(mes))
          .filter((val: any) => !isNaN(val)); // remove valores inválidos

        const media =
          valoresNumericos.reduce((acc: any, cur: any) => acc + cur, 0) /
          (valoresNumericos.length || 1);

        mediaConsumoMensalBeneficiariaLet += media;
      }
    });

    const consumoTotal =
      mediaConsumoMedioBeneficiariaLet + mediaConsumoMensalBeneficiariaLet;
    return String(Math.round(consumoTotal));
  };
  const [modulosError, setModulosError] = useState(false);
  const [ultrapassouPotenciaMaxSistema, setUltrapassouPotenciaMaxSistema] =
    useState("");
  const [camposVazios, setCamposVazios] = useState<string[]>([]);

  const setValue = form.setValue;
  const [defaultTelhado, setDefaultTelhado] = useState(
    defaultValues?.telhado_parametro
  );
  const [camposEstruturas, setCamposEstruturas] = useState([
    { suporte: "", numeroLinhas: "", modulosPorLinha: "" },
  ]);

  useEffect(() => {
    blockNextStep(true);
    return () => blockNextStep(false);
  }, []);

  const [keyOrientacoes, setKeyOrientacoes] = useState<number>(1);
  const [distribuicaoDosModulos, setDistribuicaoDosModulos] = useState<any[]>(
    form.control._formValues.distribuicaoDosModulos || [
      {
        numero_modulos: "",
        numero_linhas: "1",
        estrutura: defaultValues?.estrutura_parametro,
        label_estrutura: "",
        orientacao: defaultValues?.orientacao_parametro,
        label_orientacao: "",
        inclinacao: defaultValues?.inclinacao_parametro,
        label_inclinacao: "",
        perda_media: "",
      },
    ]
  );

  const mediaDiasMesAno = 30.36;
  useEffect(() => {
    atualizarDistribuicaoDosModulos();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [distribuicaoDosModulos, porcentagemGeracaoWatch]);

  async function atualizarDistribuicaoDosModulos() {
    const {
      // potenciaKwp,
      performance_ratio_parametro,
      media_irradiacao,
      media_irradiacao_mensal,
      irradiacao_mensal,
      // sombreamentos_coleta,
      kitEscolhido,
      ucs,
    } = form.control._formValues;

    const sombreamentos_coleta = +FormatFields.desformatarNumeros(
      form.control._formValues.sombreamentos_coleta
    );

    const consumos_ucs_mensal = ucs.map((uc: any) =>
      +uc.valor == +uc.valor
        ? Array.from({ length: 12 }).map((_) => +uc.valor)
        : uc.valor.map((valor: number | string) => valor)
    );

    const media_consumos_ucs_mensal = consumos_ucs_mensal.reduce(
      (soma: number[], array: any[]) =>
        array.map(
          (valor, i, arr) =>
            soma[i] +
            (valor === ""
              ? arr.reduce(
                  (acc: any, cur: any) => acc + (parseFloat(cur) || 0),
                  0
                ) / arr.filter((val) => val !== "").length
              : Number(valor))
        ),
      Array(12).fill(0)
    );

    form.setValue(
      "media_consumos_ucs_mensal" as never,
      media_consumos_ucs_mensal as never
    );

    const eficiencia_sombreamento = 1 - +sombreamentos_coleta / 100;

    const {
      estimativaGeracao,
      totalModulos,
      perda,
      newDistribuicaoDosModulos,
    } = distribuicaoDosModulos.reduce(
      (acc, curr, currIndex) => {
        const {
          numero_modulos,
          numero_linhas,
          orientacao,
          inclinacao,
          estrutura,
        } = curr;

        let {
          estimativaGeracao,
          totalModulos,
          perda,
          newDistribuicaoDosModulos,
        } = acc;

        const newDistribuicao = [...newDistribuicaoDosModulos];

        const qtdModulos = +numero_modulos;
        totalModulos += qtdModulos;

        const perdaMedia = perdasMedias.find(
          (perda: any) =>
            perda.cod_orientacao_solar == orientacao &&
            perda.cod_inclinacao_telhado == inclinacao
        )?.valor_perda;

        perda += (100 - +perdaMedia) / 100;
        if (
          numero_modulos &&
          numero_linhas &&
          (session?.sigla?.toLowerCase() != "elb" ? estrutura : true) &&
          (currIndex == 0 || estimativaGeracao)
        ) {
          newDistribuicao.push({
            ...curr,
            label_orientacao: orientacoes?.find(
              (orientacao) => orientacao.id_orientacao == curr.orientacao
            )?.nome_orientacao,
            label_inclinacao: inclinacoes.find(
              (inclinacao) => inclinacao.id_inclinacao == curr.inclinacao
            )?.valor_inclinacao,
            label_estrutura: estruturas.find(
              (estrutura) => estrutura.id_estrutura == curr.estrutura
            )?.nome_estrutura,
            perda_media: ((100 - +perdaMedia) / 100).toFixed(2),
          });

          estimativaGeracao +=
            (+potencia_modulo *
              qtdModulos *
              (performance_ratio_parametro.value / 100) *
              media_irradiacao_mensal *
              (1 - +sombreamentos_coleta / 100) *
              (100 - +perdaMedia)) /
            100 /
            1000;

          return {
            totalModulos,
            estimativaGeracao,
            perda,
            newDistribuicaoDosModulos: newDistribuicao,
          };
        }
        return {
          estimativaGeracao: 0,
          totalModulos,
          perda,
          newDistribuicaoDosModulos: [...distribuicaoDosModulos],
        };
      },
      {
        estimativaGeracao: 0,
        totalModulos: 0,
        perda: 0,
        newDistribuicaoDosModulos: [],
      }
    );

    const media_perda = perda / distribuicaoDosModulos.length;

    const { porcentagemGeracao } = form.control._formValues;
    const consumoBase = calcularConsumoBaseUcs(ucs);
    const consumoComAumento = calcularConsumoComAumentoFromUcs(
      ucs,
      porcentagemGeracao,
      defaultValues?.margem_geracao_parametro
    );

    form.setValue("consumoBase", consumoBase.toFixed(2));
    form.setValue("consumoTotal", consumoComAumento.toFixed(2));

    const modulos_necessarios =
      (consumoComAumento * 1000) /
      (+potencia_modulo *
        media_perda *
        media_irradiacao_mensal *
        (performance_ratio_parametro?.value / 100)) /
      eficiencia_sombreamento;

    setDadosParaCalculo({
      consumoTotal: consumoComAumento.toFixed(2),
      potencia_modulo,
      perda,
      media_irradiacao_mensal,
      performance_ratio_parametro,
      modulos_necessarios,
    });

    const int_modulos_necessarios = Math.ceil(modulos_necessarios);

    const indice_tipo_instalacao = tiposInstalacao.find(
      (e: any) =>
        (e.id_tipo =
          categoriaEscolhida == 5 ? 3 : categoriaEscolhida == 4 ? 2 : 1)
    )?.indice_tipo;

    form.setValue("area_ocupada", indice_tipo_instalacao * totalModulos); // ver para colocar após a obtenção do kit
    form.setValue("area_modulo", indice_tipo_instalacao);

    let modulos_recomendados = 0;
    if (!form.control._formValues.obrigar_recomendado) {
      modulos_recomendados = int_modulos_necessarios;
      form.setValue("modulos_recomendados", int_modulos_necessarios);
    } else {
      modulos_recomendados = form.control._formValues.modulos_recomendados;
    }
    if (form.control._formValues.primeira_renderizacao === undefined) {
      form.setValue("primeira_renderizacao", false);
      setDistribuicaoDosModulos((prev) => [
        { ...prev[0], numero_modulos: String(modulos_recomendados) },
      ]);
      setKeyOrientacoes((prev) => prev + 1);
    }
    const abatimento =
      consumoComAumento > 0 ? (estimativaGeracao / consumoComAumento) * 100 : 0;
    form.setValue("distribuicaoDosModulos", newDistribuicaoDosModulos);
    form.setValue(
      "estimativa_geracao",
      estimativaGeracao ? estimativaGeracao.toFixed(2) : ""
    );

    if (
      ucs.length > 1 &&
      Number(calcTotalConsumo()) > +estimativaGeracao.toFixed(2)
    ) {
      setShowMsg(true);
      form.setValue(`avisos.msgUsuario`, msgUcsConsumo);
    } else {
      form.setValue("avisos.msgUsuario", "");

      setShowMsg(false);
    }
    form.setValue(
      "estimativa_geracao_formatado",
      estimativaGeracao
        ? FormatFields.formatarNumero(+estimativaGeracao.toFixed(2)) + " kWh"
        : ""
    );

    const estimativa_geracao_mensal = irradiacao_mensal.reduce(
      (acc: any[], curr: number) => [
        ...acc,
        +(
          (+potencia_modulo *
            totalModulos *
            (performance_ratio_parametro?.value / 100) *
            curr *
            (1 - +sombreamentos_coleta / 100) *
            media_perda) /
          1000
        ).toFixed(2),
        // ).toFixed(0),
      ],
      []
    );

    const potenciaKwp = (+potencia_modulo * totalModulos) / 1000;

    form.setValue("potenciaKwp", potenciaKwp);

    form.setValue("estimativa_geracao_mensal", estimativa_geracao_mensal);
    form.setValue("abatimento", abatimento ? abatimento.toFixed(2) : "");
    form.setValue("totalModulos", totalModulos);

    // Verificar campos vazios
    const camposVaziosArray: string[] = [];
    distribuicaoDosModulos.forEach((dist, index) => {
      if (!dist.numero_modulos) {
        camposVaziosArray.push(`Orientação ${index + 1}: Nº de Módulos`);
      }
      if (session?.sigla?.toLowerCase() !== "elb" && !dist.estrutura) {
        camposVaziosArray.push(`Orientação ${index + 1}: Estrutura`);
      }
    });
    setCamposVazios(camposVaziosArray);

    const potenciaMaxSistema = dadosCard.tipoLigacao_coleta == "1" ? 10 : 20;
    blockNextStep(
      !estimativaGeracao ||
        camposVaziosArray.length > 0 ||
        (form.control._formValues.obrigar_recomendado &&
          totalModulos != modulos_recomendados)
    );

    // if (
    //   potenciaKwp > potenciaMaxSistema &&
    //   dadosCard.tipoLigacao_coleta != "3"
    // ) {
    //   setUltrapassouPotenciaMaxSistema(
    //     `A potência máxima excede os ${potenciaMaxSistema}kWp`
    //   );
    // } else {
    //   setUltrapassouPotenciaMaxSistema(``);
    // }

    if (
      form.control._formValues.obrigar_recomendado &&
      totalModulos != modulos_recomendados
    ) {
      setModulosError(true);
    } else {
      setModulosError(false);
    }
    if (totalModulos != modulos_recomendados) {
      setNextStepAction(
        () => () =>
          new Promise(async (resolve, reject) => {
            return Swal.fire({
              showDenyButton: true,
              denyButtonText: "Não",
              denyButtonColor: "#FF0000",

              customClass: {
                popup: "dark:bg-form-strokedark  dark:text-white ",

                container: "!z-9999999999999999999999",
              },

              title: "Atenção!",
              text: "A soma da quantidade de módulos digitados não condiz com a quantidade de módulos recomendada. Deseja continuar?",
              icon: "warning",
              confirmButtonColor: "#3085d6",
              confirmButtonText: "Sim",
            })
              .then((result) => {
                if (result.isConfirmed) {
                  setNextStepAction(undefined);
                  return resolve("");
                } else {
                  return reject("");
                }
                return result;
              })
              .finally(() => reject(""));
          })
      );
    } else {
      setNextStepAction(undefined);
    }

    return int_modulos_necessarios;
  }
  function telhadoAtivo(sigla: string): boolean {
    const td = telhadosDistribuidor;
    if (!td) return false;

    if (Array.isArray(td)) {
      // Se vier array, procura qualquer item com a flag "1"
      return td.some((item: any) => item?.[sigla] === "1");
    }

    // Se for objeto (flags)
    return td?.[sigla] === "1";
  }
  useEffect(() => {
    form.setValue("categoriaEscolhida", categoriaEscolhida);
    form.setValue(
      "tipoTelhadoEscolhido",
      categoriasTelhados?.find(
        (telhado: any) => telhado.id_categoria_telhado == categoriaEscolhida
      )?.sigla_categoria_telhado
    );

    const novoNomeTelhado = categoriasTelhados?.find(
      (telhado: any) => telhado.id_categoria_telhado == categoriaEscolhida
    )?.nome_categoria_telhado;

    form.setValue("nomeTelhadoEscolhido", novoNomeTelhado);
    setNomeTelhadoEscolhido(novoNomeTelhado);
  }, [categoriaEscolhida]);

  const updateSelectDynamic = (categoria: string) => {
    const idProximo = telhados.filter(
      (telhado: any) => telhado.categoria_telhado == categoria
    )[0].id_telhado;
    return idProximo;
  };
  return (
    <>
      {showMsg && (
        <div className=" mb-5 w-full flex border items-center  bg-[#fff5ea]  gap-2 px-4 p-2 rounded-md border-[#fcdcaa] shadow-sm">
          <div className="rounded-full p-1 shadow-md bg-[#fef9f6]">
            <RiErrorWarningFill size={20} color="#ffb747" />
          </div>
          <p className="text-black text-sm">{msgUcsConsumo}</p>
        </div>
      )}

      <div className="max-sm:h-[80vh] overflow-auto">
        <div className="flex flex-col pl-3">
          <p className="text-lg max-sm:text-sm ">
            Categoria da <span className="font-bold">Instalação</span>
          </p>
          {nomeTelhadoEscolhido != "" && (
            <p className="text-sm max-sm:text-xs ">
              Categoria escolhida:{" "}
              <span className="font-bold">{nomeTelhadoEscolhido}</span>
            </p>
          )}
        </div>

        <div className="flex flex-wrap justify-center items-center gap-4 p-6 text-black dark:text-white text-center">
          {categoriasTelhados &&
            categoriasTelhados
              .filter((t: any) => {
                if (kitProprio.value === "1") return true;
                return telhadoAtivo(t.sigla_categoria_telhado);
              })
              .map((categoriaTelhado: any, index: number) => {
                const Image = imgTelhados[index + 1];
                return (
                  <div
                    onClick={() => {
                      setCategoriaEscolhida(
                        categoriaTelhado.id_categoria_telhado
                      );
                      setDistribuicaoDosModulos((prev) =>
                        prev.map((distribuicao) => ({
                          ...distribuicao,
                          estrutura: "",
                        }))
                      );

                      setKeyOrientacoes((prev) => prev + 1);
                      setDefaultTelhado(
                        updateSelectDynamic(
                          categoriaTelhado.id_categoria_telhado
                        )
                      );
                    }}
                    key={index}
                    className={`h-16 relative max-sm:text-sm w-48 md:w-56 lg:w-64 bg-white flex items-center justify-center border-[1px] cursor-pointer transition-all hover:shadow-md ${
                      categoriaEscolhida ==
                      categoriaTelhado.id_categoria_telhado
                        ? "border-success border-2"
                        : "hover:border-success border-stroke"
                    }  py-4 gap-4 px-4 rounded-md dark:bg-form-input`}
                  >
                    <span
                      className={`absolute max-sm:text-sm  top-0 right-0 transform translate-x-[30%]  -translate-y-1/3 text-success text-xl bg-white rounded-xl p-[2px]`}
                    >
                      {categoriaEscolhida ==
                        categoriaTelhado.id_categoria_telhado && (
                        <BsPatchCheckFill size={23} />
                      )}
                    </span>
                    <img src={Image} className="w-14 max-sm:hidden" alt="" />
                    {categoriaTelhado.nome_categoria_telhado}
                  </div>
                );
              })}
        </div>

        <Container className="w-full">
          {modulosError && (
            <div className="bg-meta-1 w-full text-center p-3 text-white rounded mb-4 flex items-center justify-center gap-2">
              <RiErrorWarningFill size={20} />
              <span>
                A soma da quantidade de módulos digitados (
                {form.control._formValues.totalModulos}) deve coincidir com a
                quantidade de módulos recomendada (
                {form.control._formValues.modulos_recomendados})
              </span>
            </div>
          )}

          {camposVazios.length > 0 && (
            <div className="bg-gradient-to-r from-warning/90 to-warning w-full p-3 text-white rounded-lg mb-4 shadow-md">
              <div className="flex items-center gap-2">
                <RiErrorWarningFill size={18} />
                <span className="text-sm font-medium">
                  Preencha{" "}
                  {camposVazios.length === 1
                    ? "o campo obrigatório (" + camposVazios[0] + ")"
                    : `os ${camposVazios.length} campos obrigatórios`}{" "}
                  para continuar
                </span>
              </div>
            </div>
          )}
          <div className="max-sm:flex-col-reverse  flex justify-between">
            <div className="grid-cols-2 grid md:flex gap-3 mb-9"></div>
            <div className="grid-cols-2 grid max-sm:hidden md:flex gap-3 mb-9"></div>
            <div className="grid  md:justify-end mb-2">
              <Input
                name="modulos_recomendados"
                label={
                  <div className="flex items-center gap-2">
                    <span>Quantidade de Módulos Recomendados</span>
                    <div className="relative group">
                      <Info
                        size={20}
                        className="text-primary cursor-pointer hover:text-blue-700 transition-colors"
                        onClick={(e: any) => {
                          e.stopPropagation();

                          const formulaLatex = String.raw`
                      \frac{
                        \text{Consumo Médio (kWh)} \times \left(1 + \frac{\text{Aumento de Consumo (\%)}}{100}\right) \times 1000
                      }{
                        \text{Potência do Módulo (W)} \times \text{Perda} \times \text{Irradiação Média (kWh/m²)} \times \left(\frac{\text{Performance Ratio}}{100}\right)
                      }
                    `;

                          const formulaHtml = `
                      <div style="
                        max-width: 100%;
                        font-size: 1rem;
                        text-align: center;
                      ">
                        ${katex.renderToString(formulaLatex, { throwOnError: false, displayMode: true })}
                      </div>
                    `;

                          Swal.fire({
                            title: "Quantidade de Módulos",
                            html: buildFormulaModulosHtml(
                              dadosParaCalculo,
                              form.control._formValues?.modulos_recomendados
                            ),
                            icon: "info",
                            confirmButtonText: "OK",
                            width: "50%",
                          });
                        }}
                      />
                    </div>
                  </div>
                }
                formulario={form}
                disabled
              />
            </div>
          </div>

          <InputGroup className="flex flex-col justify-center items-center">
            <InputSelectComponent
              name="qtdOrientacoes"
              label="Quantidade de Orientações"
              options={Array.from({
                length: dadosCard.tipoLigacao_coleta == "1" ? 4 : 10,
              }).map((_, index) => ({
                value: String(index + 1),
                label: String(index + 1),
              }))}
              defaultValue={String(distribuicaoDosModulos.length)}
              onChange={(e: any) => {
                if (Number(e.value) != distribuicaoDosModulos.length) {
                  setDistribuicaoDosModulos(
                    Array.from({ length: Number(e.value) }).map((_, index) => ({
                      numero_modulos: "",
                      numero_linhas: "1",
                      estrutura: defaultValues?.estrutura_parametro,
                      label_estrutura: estruturas.find(
                        (estrutura) =>
                          estrutura.id_estrutura ==
                          defaultValues?.estrutura_parametro
                      ),
                      orientacao: defaultValues?.orientacao_parametro,
                      label_orientacao: orientacoes?.find(
                        (orientacao) =>
                          orientacao.id_orientacao ==
                          defaultValues?.orientacao_parametro
                      )?.nome_orientacao,
                      inclinacao: defaultValues?.inclinacao_parametro,
                      label_inclinacao: inclinacoes.find(
                        (inclinacao) =>
                          inclinacao.id_inclinacao ==
                          defaultValues?.inclinacao_parametro
                      )?.valor_inclinacao,
                      perda_media: "",
                    }))
                  );
                  setKeyOrientacoes((prev) => prev + 1);
                }
              }}
              disabled={
                usuario.edita_orientacao_inclinacao_modulos_usuario == "0"
              }
              width="w-fit"
            />
            <InputSelectComponent
              name="telhado"
              label="Telhado"
              menuPlacement="top"
              formulario={form}
              options={telhados
                .filter(
                  (telhado: any) =>
                    telhado.categoria_telhado == categoriaEscolhida
                )
                .map((telhado) => ({
                  label: telhado.nome_telhado,
                  value: telhado.id_telhado,
                }))}
              defaultValue={defaultTelhado}
              required
              error="Selecione um Telhado"
              width="w-fit"
            />
          </InputGroup>

          <div>
            {distribuicaoDosModulos.map((distribuicao, index) => {
              const {
                performance_ratio_parametro,
                media_irradiacao,
                media_irradiacao_mensal,
                irradiacao_mensal,
                kitEscolhido,
                ucs,
              } = form.control._formValues;

              const sombreamentos_coleta = +FormatFields.desformatarNumeros(
                form.control._formValues.sombreamentos_coleta
              );

              const {
                numero_modulos,
                numero_linhas,
                orientacao,
                inclinacao,
                estrutura,
              } = distribuicao;

              const qtdModulos = +numero_modulos;

              const perdaMedia = perdasMedias.find(
                (perda: any) =>
                  perda.cod_orientacao_solar == orientacao &&
                  perda.cod_inclinacao_telhado == inclinacao
              )?.valor_perda;

              const perda = (100 - +perdaMedia) / 100;
              if (
                numero_modulos &&
                numero_linhas &&
                (session?.sigla?.toLowerCase() != "elb" ? estrutura : true)
              ) {
                distribuicao = {
                  ...distribuicao,
                  label_orientacao: orientacoes?.find(
                    (orientacao) =>
                      orientacao.id_orientacao == distribuicao.orientacao
                  )?.nome_orientacao,
                  label_inclinacao: inclinacoes.find(
                    (inclinacao) =>
                      inclinacao.id_inclinacao == distribuicao.inclinacao
                  )?.valor_inclinacao,
                  label_estrutura: estruturas.find(
                    (estrutura) =>
                      estrutura.id_estrutura == distribuicao.estrutura
                  )?.nome_estrutura,
                  perda_media: ((100 - +perdaMedia) / 100).toFixed(2),
                };

                const estimativaGeracaoPorModulo =
                  (+potencia_modulo *
                    (performance_ratio_parametro.value / 100) *
                    media_irradiacao_mensal *
                    (1 - +sombreamentos_coleta / 100) *
                    (100 - +perdaMedia)) /
                  100 /
                  1000;

                const estimativaGeracao =
                  estimativaGeracaoPorModulo * qtdModulos;

                distribuicao["perdaMedia"] = perdaMedia;
                distribuicao["estimativaGeracao"] = estimativaGeracao;
                distribuicao["estimativaGeracaoPorModulo"] =
                  estimativaGeracaoPorModulo;
              }

              return (
                <InputGroup
                  key={`${keyOrientacoes}-${index}`}
                  className="border border-stroke rounded p-2"
                >
                  <div className="relative">
                    <Input
                      name={`numero_modulos_${index}`}
                      label={
                        !distribuicao.numero_modulos
                          ? "Nº de Módulos *"
                          : "Nº de Módulos"
                      }
                      defaultValue={distribuicao.numero_modulos}
                      mascara="numerico"
                      inputClassName={
                        !distribuicao.numero_modulos
                          ? "border-l-4 border-l-meta-1"
                          : ""
                      }
                      onChange={(e) =>
                        setDistribuicaoDosModulos((prev: any) => {
                          const newDistribuicao = [...prev];
                          newDistribuicao.splice(index, 1, {
                            ...newDistribuicao[index],
                            numero_modulos: e.target.value,
                          });
                          return newDistribuicao;
                        })
                      }
                    />
                  </div>
                  <Input
                    name="numero_linhas"
                    label="Nº de Linhas"
                    defaultValue={distribuicao.numero_linhas}
                    mascara="numerico"
                    onChange={(e) =>
                      setDistribuicaoDosModulos((prev: any) => {
                        const newDistribuicao = [...prev];
                        newDistribuicao.splice(index, 1, {
                          ...newDistribuicao[index],
                          numero_linhas: e.target.value,
                        });
                        return newDistribuicao;
                      })
                    }
                  />
                  {session?.sigla?.toLowerCase() != "elb" && (
                    <InputSelectComponent
                      name={`estrutura_${index}`}
                      label="Estrutura"
                      menuPlacement="top"
                      options={estruturas
                        .filter(
                          (estrutura: any) =>
                            estrutura.cod_tipo_instalacao == categoriaEscolhida
                        )
                        .map((estrutura: any) => ({
                          label: `${estrutura.nome_estrutura}`,
                          value: `${estrutura.id_estrutura}`,
                        }))}
                      required
                      error="Selecione uma Estrutura"
                      defaultValue={distribuicao.estrutura}
                      className={
                        !distribuicao.estrutura
                          ? "border-l-4 border-l-meta-1 w-full"
                          : "w-full"
                      }
                      onChange={(e: any) =>
                        setDistribuicaoDosModulos((prev: any) => {
                          const newDistribuicao = [...prev];
                          newDistribuicao.splice(index, 1, {
                            ...newDistribuicao[index],
                            estrutura: e.value,
                            label_estrutura: e.label,
                          });
                          return newDistribuicao;
                        })
                      }
                    />
                  )}
                  <InputSelectComponent
                    name="orientacao"
                    label="Orientação"
                    options={orientacoes
                      .filter(
                        (orientacao) =>
                          defaultValues?.orientacoes_proposta_parametro ==
                            "all" ||
                          defaultValues?.orientacoes_proposta_parametro
                            ?.split(",")
                            .includes(orientacao.id_orientacao)
                      )
                      .map((e: any) => ({
                        label: e.nome_orientacao,
                        value: e.id_orientacao,
                      }))}
                    defaultValue={distribuicao.orientacao}
                    onChange={(e: any) =>
                      setDistribuicaoDosModulos((prev: any) => {
                        const newDistribuicao = [...prev];
                        newDistribuicao.splice(index, 1, {
                          ...newDistribuicao[index],
                          orientacao: e.value,
                          label_orientacao: e.label,
                        });
                        return newDistribuicao;
                      })
                    }
                    disabled={
                      usuario.edita_orientacao_inclinacao_modulos_usuario == "0"
                    }
                  />
                  <InputSelectComponent
                    name="inclinacao"
                    label="Inclinação"
                    options={inclinacoes.map((e: any) => ({
                      label: e.valor_inclinacao + "°",
                      value: e.id_inclinacao,
                    }))}
                    defaultValue={distribuicao.inclinacao}
                    onChange={(e: any) =>
                      setDistribuicaoDosModulos((prev: any) => {
                        const newDistribuicao = [...prev];
                        newDistribuicao.splice(index, 1, {
                          ...newDistribuicao[index],
                          inclinacao: e.value,
                          label_inclinacao: e.label,
                        });
                        return newDistribuicao;
                      })
                    }
                    disabled={
                      usuario.edita_orientacao_inclinacao_modulos_usuario == "0"
                    }
                  />
                  <Input
                    name="perda_media"
                    label="Perda Média"
                    value={
                      distribuicao?.perdaMedia
                        ? FormatFields.formatarNumero(
                            ((100 - +distribuicao?.perdaMedia) / 100).toFixed(2)
                          )
                        : ""
                    }
                    disabled
                  />
                  <Input
                    name="estimativa_por_modulo"
                    // label="Geração p/ Módulo"
                    label={
                      <span className="w-fit flex flex-row gap-1">
                        Geração p/ Módulo{" "}
                        <div className="px-1">
                          <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">
                                        Geração por Módulo
                                      </div>
                                      <div class="italic text-meta-1">
                                        Potência do módulo * performance ratio * média da irradiação mensal * sombreamentos * perda média = Geração por Módulo
                                      </div>
                                      <div class="italic">
                                        ${new Intl.NumberFormat("pt-BR", {
                                          maximumSignificantDigits: 3,
                                        }).format(
                                          +potencia_modulo / 1000
                                        )} kW * ${
                                          performance_ratio_parametro.value
                                        }% * ${FormatFields.formatarNumero(
                                          media_irradiacao_mensal
                                        )} kWh/m² por mês * ${FormatFields.formatarNumero(
                                          100 - +sombreamentos_coleta
                                        )}% * ${FormatFields.formatarNumero(
                                          100 - +perdaMedia
                                        )}%
                                         = ${FormatFields.formatarNumero(
                                           (+potencia_modulo *
                                             (performance_ratio_parametro.value /
                                               100) *
                                             media_irradiacao_mensal *
                                             (1 - +sombreamentos_coleta / 100) *
                                             (100 - +perdaMedia)) /
                                             100 /
                                             1000
                                         )} kWh
                                      </div>
                                    </div>
                                  </div>`,
                              });
                            }}
                          >
                            <Info />
                          </Button>
                        </div>
                      </span>
                    }
                    value={
                      distribuicao?.estimativaGeracaoPorModulo
                        ? FormatFields.formatarNumero(
                            distribuicao?.estimativaGeracaoPorModulo?.toFixed(2)
                          ) + " kWh"
                        : ""
                    }
                    disabled
                  />
                  <Input
                    name="estimativa_distribuicao"
                    label="Estimativa de Geração"
                    value={
                      distribuicao?.estimativaGeracao
                        ? FormatFields.formatarNumero(
                            distribuicao?.estimativaGeracao?.toFixed(2)
                          ) + " kWh"
                        : ""
                    }
                    disabled
                  />
                </InputGroup>
              );
            })}
          </div>

          <InputGroup>
            <Input
              name="totalModulos"
              label="módulos digitados"
              width={"xl:w-fit"}
              formulario={form}
              disabled
            />
            <Input
              name="consumoTotal"
              label="Consumo Total (kWh)"
              formulario={form}
              disabled
            />
            <Input
              name="estimativa_geracao_formatado"
              label="Estimativa de Geração Total (kWh)"
              formulario={form}
              disabled
            />
            <Input
              name="abatimento"
              label="Abatimento (%)"
              formulario={form}
              disabled
            />
          </InputGroup>

          <div className="w-full flex flex-row items-center justify-center mb-4">
            <div className="w-fit flex flex-col gap-2">
              <Input
                name="potenciaKwp"
                label="kWp"
                formulario={form}
                disabled
              />
              {ultrapassouPotenciaMaxSistema && (
                <div className="bg-meta-7 w-full text-center p-3 text-white rounded">
                  {ultrapassouPotenciaMaxSistema}
                </div>
              )}
            </div>
          </div>
          {camposPersonalizados}
        </Container>
      </div>
    </>
  );
};

export default DistribuicaoModulos;