// import { listarPropostas } from "@/requests/CRUD/Propostas/listarPropostas";
import Container from "@/components/Forms/Container";
import LoaderSun from "@/components/common/Loader/LoaderSun";
import { Button } from "@/components/ui/button";
import ItemKitHelte from "@/pages/CXESCRM005/ItemKitHelte";
import ResumoProposta from "@/pages/CXESCRM005/ResumoProposta";
import ResultadoPrecificacao from "@/pages/CXESSIM002/ResultadoPrecificacao";
import { obterKitPorBudget_id } from "@/requests/CRM/APIHelte/obterKitPorBudget_id";
import { listarComponentesKitByKitId } from "@/requests/CRUD/ColetaDados/cadastroColetaDados";
import {
  buscaDadosAmpliacao,
  buscaDadosClienteAmpliacao,
} from "@/requests/CRUD/ColetaDados/editarColeta";
import { listarDistribuidores } from "@/requests/CRUD/Distribuidores/listarDistribuidores";
import { listarDistribuidoresNativos } from "@/requests/CRUD/Distribuidores/listarDistribuidoresNativos";
import { listarFabricantes } from "@/requests/CRUD/Fabricante/listarFabricantes";
import { listarParametros } from "@/requests/CRUD/ParametrosComerciais/listarParametros";
import { RSIB } from "@/requests/CRUD/Propostas/cadastrarProposta";
import { listarQtdVisitas } from "@/requests/CRUD/Propostas/listarPropostasLink";
import { obterDistribuicaoModulos } from "@/requests/CRUD/Propostas/obterDistribuicaoModulos";
import { listarTiposTelhados } from "@/requests/CRUD/TiposTelhados/listarTiposTelhados";
import { baixarAwsContent } from "@/requests/common/Aws/baixarAws";
import { listarOrientacoesSolares } from "@/requests/common/OrientacoesSolares/listarInclinacoesTelhado";
import { listarTiposInstalacao } from "@/requests/common/TiposInstalacao/listarTiposInstalacao";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { useAuth } from "@/src/contexts/authContext";
import {
  formatarValor,
  FormatFields,
  getDateBrasil,
  getDateTimeBrasil,
} from "@/utils";
import { calcMonthly, calcTotalConsumo } from "@/utils/calcules";
import { Typography } from "@material-tailwind/react";
import { ApexOptions } from "apexcharts";
import katex from "katex";
import { InfoIcon } from "lucide-react";
import { useEffect, useState } from "react";
import { toast } from "react-toastify";
import Swal from "sweetalert2";
import ResumoPropostaCorretiva from "./PropostaCorretiva/ResumoPropostaCorretiva";
const PropostaView = ({
  proposta,
  dadosCard,
  tarifasEnergia,
  parametros,
  formasPagamento,
}: any) => {
  const [kitProposta, setKitProposta] = useState<any>([]);
  const [distribudor, setDistribudor] = useState<any>([]);
  const [apiKit, setApiKit] = useState(false);
  const [resultadoPrecificacao, setResultadoPrecificacao] = useState<any>();
  const [visitasProposta, setVisitasProposta] = useState<any>([]);
  const [areaModulos, setAreaModulos] = useState<any>();
  const [validadeProposta, setValidadeProposta] = useState<any>();
  const [tipoInstalacao, setTipoInstalacao] = useState<any>([]);
  const [dadosDeJsonProposta, setDadosDeJsonProposta] = useState<any>();
  const { perfil, usuario } = useAuth();
  const [lastProposalInfo, setLastProposalInfo] = useState<any>([]);
  const [dadosAmpliacao, setDadosAmpliacao] = useState<any>([]);

  const [apexOptionsGraficoGeracao, setApexOptionsGraficoGeracao] =
    useState<ApexOptions>({});
  const [apexSeriesGraficoGeracao, setApexSeriesGraficoGeracao] = useState<
    { name: string; data: number[] }[]
  >([]);
  const [apexOptionsGraficoRsi, setApexOptionsGraficoRsi] =
    useState<ApexOptions>({});
  const [apexSeriesGraficoRsi, setApexSeriesGraficoRsi] = useState<
    { name: string; data: number[] }[]
  >([]);
  const [tabela_rsi_data, setTabela_rsi_data] = useState<any[]>([]);

  const [isLoadedResumo, setIsLoadedResumo] = useState(false);
  const [consumoAmpliacao, setConsumoAmpliacao] = useState<any>();
  const [orientacoesSolares, setOrientacoesSolares] = useState<any[]>([]);
  const { formatarNumero, formatarNumeroPreciso, desformatarNumeros } =
    FormatFields;
  const { isMobile } = useScreenContext();

  const tiposLigacoes = [
    { value: "1", label: "Monofásico" },
    { value: "2", label: "Bifásico" },
    { value: "3", label: "Trifásico" },
  ];

  const classes = "p-4 border-b dark:border-boxdark border-blue-gray-50";
  const gerarGrafico = async (res: any) => {
    // const dataForm = form.control._formValues;
    // res = JSON.parse(res);

    const dadosProposta = res?.dadosProposta;

    const ucs = res?.dadosProposta?.ucs || [];

    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)
    );
    const outrosCustos_Cosip = ucs.reduce((acc: number, uc: any) => {
      return (acc += +uc.cosip_uc_coleta + +uc.outros_custos_uc_coleta);
    }, 0);

    const dados = {
      id_concessionaria: dadosProposta?.id_concessionaria_proposta,
      grupo: proposta.grupo_proposta,
      subgrupo: proposta.subgrupo_proposta,
      precoTotal_tarifa: proposta.precoDigitadoTarifa_proposta,
      fiob_tarifa: dadosProposta?.fiob_tarifa,
      perfil_consumo: dadosCard.perfil_consumo_coleta,
      valor_investimento: +proposta.valorTotal_proposta,
      geracao_anual: +proposta?.estimativa_proposta * 12,
      classificacao: dadosCard.classificacao_coleta,
      simultaneidade: dadosCard.simultaneidade_coleta,
      seguro_rsi_coleta: proposta.seguroRsi_proposta,
      cosip: outrosCustos_Cosip,
    };

    return RSIB(dados)
      .then((res: any) => {
        // setRsiProposta(res);
        const { payback, tabela_rsi } = res;
        const { years, fluxosCaixa } = tabela_rsi.reduce(
          (
            acc: { years: number[]; fluxosCaixa: number[] },
            yearData: any,
            index: number
          ) => {
            return {
              years: [
                ...acc.years,
                +getDateTimeBrasil({
                  day: undefined,
                  month: undefined,
                  year: "numeric",
                  hour: undefined, // Define a hora como undefined para excluí-la
                  minute: undefined, // Define os minutos como undefined para excluí-los
                  second: undefined, // Define os segundos como undefined para excluí-los
                }) + index,
              ],
              fluxosCaixa: [...acc.fluxosCaixa, yearData.fluxo_caixa],
            };
          },
          { years: [], fluxosCaixa: [] }
        );

        // form.setValue("payback" as never, payback as never);
        // form.setValue(
        //   "tabela_rsi" as never,
        //   tabela_rsi.map((rsi: any, index: number) => ({
        //     ...rsi,
        //     ano:
        //       +getDateTimeBrasil({
        //         day: undefined,
        //         month: undefined,
        //         year: "numeric",
        //         hour: undefined, // Define a hora como undefined para excluí-la
        //         minute: undefined, // Define os minutos como undefined para excluí-los
        //         second: undefined, // Define os segundos como undefined para excluí-los
        //       }) + index,
        //   })) as never
        // );

        setTabela_rsi_data(
          tabela_rsi.map((rsi: any, index: number) => ({
            ...rsi,
            ano:
              +getDateTimeBrasil({
                day: undefined,
                month: undefined,
                year: "numeric",
                hour: undefined, // Define a hora como undefined para excluí-la
                minute: undefined, // Define os minutos como undefined para excluí-los
                second: undefined, // Define os segundos como undefined para excluí-los
              }) + index,
          }))
        );

        const irradiacao_mensal = dadosProposta?.irradiacao_mensal;
        const distribuicaoDosModulos = dadosProposta?.distribuicaoDosModulos;
        // const eficiencia_sombreamento =
        //   1 - +dadosProposta.sombreamentos_coleta / 100;
        const sombreamentos_coleta = +FormatFields.desformatarNumeros(
          dadosProposta?.sombreamentos_coleta
        );

        const { estimativaGeracao, totalModulos, perda } = (
          distribuicaoDosModulos ?? []
        ).reduce(
          (acc: any, curr: any, currIndex: number) => {
            const {
              numero_modulos,
              numero_linhas,
              orientacao,
              inclinacao,
              estrutura,
            } = curr;

            let { estimativaGeracao, totalModulos, perda } = acc;

            const qtdModulos = +numero_modulos;
            totalModulos += qtdModulos;

            const perdaMedia = dadosProposta?.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)
            ) {
              estimativaGeracao +=
                (+dadosProposta?.potencia_modulo *
                  qtdModulos *
                  (dadosProposta?.performance_ratio_parametro.value / 100) *
                  dadosProposta?.media_irradiacao_mensal *
                  (1 - +sombreamentos_coleta / 100) *
                  (100 - +perdaMedia)) /
                100 /
                1000;

              return {
                totalModulos,
                estimativaGeracao,
                perda,
              };
            }
            return {
              estimativaGeracao: 0,
              totalModulos,
              perda,
            };
          },
          {
            estimativaGeracao: 0,
            totalModulos: 0,
            perda: 0,
          }
        );

        const media_perda = perda / distribuicaoDosModulos.length;

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

        const mesesSigla = [
          "JAN",
          "FEV",
          "MAR",
          "ABR",
          "MAI",
          "JUN",
          "JUL",
          "AGO",
          "SET",
          "OUT",
          "NOV",
          "DEZ",
        ];

        setApexOptionsGraficoGeracao({
          chart: {
            id: "GraficoGeracao",
            type: "bar",
            height: 350,
            animations: { enabled: false },
          },
          stroke: {
            width: 1,
            colors: ["#fff"],
          },
          dataLabels: {
            enabled: false,
          },
          xaxis: {
            categories: mesesSigla,
            labels: {
              style: {
                fontSize: isMobile ? "9px" : "20px",
              },
            },
          },
          fill: {
            opacity: 1,
          },
          colors: ["#80c7fd", "#008FFB", "#80f1cb", "#00E396"],
          yaxis: {
            labels: {
              formatter: (val: any) => {
                return val + "kWh";
              },
              style: {
                fontSize: isMobile ? "10px" : "20px",
              },
            },
          },
          legend: {
            position: "top",
            horizontalAlign: "center",
          },
        });

        setApexSeriesGraficoGeracao([
          {
            name: "Energia Consumida",
            data: media_consumos_ucs_mensal,
          },
          {
            name: "Energia Gerada",
            data: estimativa_geracao_mensal,
          },
        ]);

        setApexOptionsGraficoRsi({
          chart: {
            id: "LineGraph1",
            type: "bar",
            height: 380,
            animations: { enabled: false },
          },
          plotOptions: {
            bar: {
              colors: {
                ranges: [
                  {
                    from: -Infinity,
                    to: 0,
                    color: "#F15B46",
                  },
                  {
                    from: 0,
                    to: 9999999,
                    color: "#32b312",
                  },
                ],
              },
              columnWidth: "90%",
            },
          },
          dataLabels: {
            enabled: false,
            formatter: function (y: number) {
              return (
                "R$ " +
                y.toLocaleString("pt-BR", {
                  minimumFractionDigits: 2,
                  maximumFractionDigits: 2,
                })
              );
            },
            style: {
              colors: ["#000"],
              fontSize: isMobile ? "10px" : "20px",
            },
            offsetY: 0.7,
          },
          yaxis: {
            labels: {
              formatter: function (y: number) {
                return (
                  "R$ " +
                  y.toLocaleString("pt-BR", {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2,
                  })
                );
              },
              style: {
                fontSize: isMobile ? "10px" : "20px",
              },
              // align: 'left',
              minWidth: 120,
              maxWidth: 200,
              // align: 'center',
            },
          },

          xaxis: {
            categories: years,
            labels: {
              rotate: -45,
              style: {
                fontSize: isMobile ? "10px" : "20px",
              },
            },
          },
        });
        setApexSeriesGraficoRsi([
          {
            name: "Retorno",
            data: fluxosCaixa,
          },
        ]);
      })
      .catch((error) => {
        // toast.error("Erro ao Calcular o RSI: " + error);
        console.error(error);
      });
  };
  const [estimativa_geracao_cliente, setEstimativa_geracao_cliente] =
    useState<any>();

  useEffect(() => {
    // Buscar orientações solares do banco
    listarOrientacoesSolares().then((res) => {
      setOrientacoesSolares(res);
    });

    if (dadosCard.tipoNegocio_coleta === "3") {
      buscaDadosAmpliacao({ id_coleta: dadosCard.id_coleta_cliente }).then(
        (res) => {
          setDadosAmpliacao(res);
        }
      );
      if (dadosCard.cod_coleta !== null) {
        buscaDadosClienteAmpliacao({
          cod_coleta: dadosCard.cod_coleta,
        }).then(async (res) => {
          const distribuicao = await obterDistribuicaoModulos(res.id_proposta);
          setLastProposalInfo({ ...res, ampliacao: distribuicao });
        });
      }
    }

    const carregarDados = async () => {
      try {
        const resultadoPrecificacao = await baixarAwsContent(
          proposta.caminho_resultadoPrecificacao_proposta
        );
        setResultadoPrecificacao(JSON.parse(resultadoPrecificacao));

        const res = await baixarAwsContent(proposta.caminhoJson_proposta);
        const jsonProposta = JSON.parse(res);
        setDadosDeJsonProposta(jsonProposta);
        const ucs = jsonProposta?.dadosProposta?.ucs || [];
        const somaConsumos = ucs
          .filter((u: any) => u?.isAmpliacao_uc_coleta === "1")
          .map((uc: any) =>
            uc.tipoValor === "Mensal"
              ? calcMonthly(uc.valor)
              : Number(uc.valor) || 0
          )
          .reduce((acc: number, cur: number) => acc + cur, 0);
        setConsumoAmpliacao(somaConsumos - Number(calcTotalConsumo(ucs) ?? 0));

        setEstimativa_geracao_cliente(
          jsonProposta?.dadosProposta?.estimativa_geracao_cliente
        );
        if (dadosCard.tipoNegocio_coleta !== "3") {
          await gerarGrafico(jsonProposta);
        }
      } catch (error) {
        console.error("Erro ao carregar dados:", error);
        toast.error("Erro ao carregar dados da proposta.");
      } finally {
        setIsLoadedResumo(true); // garante que sempre libera o loader
      }
    };

    carregarDados();
  }, [proposta, dadosCard]);

  function validadePro() {
    const dataProposta = new Date(proposta.data_proposta + "T00:00:00"); // Garante a interpretação correta da data

    if (!parametros?.tempo_validade_proposta_parametro) {
      return dataProposta.toLocaleDateString("pt-BR");
    }

    dataProposta.setDate(
      dataProposta.getDate() +
        Number(parametros.tempo_validade_proposta_parametro)
    );

    return dataProposta.toLocaleDateString("pt-BR");
  }
  async function fetchDistribuidor(codDistribuidor: any) {
    if (!codDistribuidor) {
      return null;
    }
    if (proposta.tipoKit_proposta === "1") {
      const distribuidores = await listarDistribuidores();
      const distribuidorApi = distribuidores.find(
        (dist: any) => dist.id_distribuidor === codDistribuidor
      );

      setDistribudor(distribuidorApi?.nome_distribuidor || null);
    } else {
      const nativo = await listarDistribuidoresNativos();
      const distribuidorNativo = nativo.find(
        (dist: any) => dist.id_distribuidor === codDistribuidor
      );

      if (distribuidorNativo) {
        setDistribudor(distribuidorNativo.nome_distribuidor);
        return;
      }
    }
  }
  const valor_max_desconto_usuario =
    resultadoPrecificacao?.preco_venda *
    (1 - Number(usuario?.max_desconto_usuario) / 100);
  const valor_max_acrescimo_usuario =
    resultadoPrecificacao?.preco_venda *
    (1 + Number(usuario?.max_acrescimo_usuario) / 100);

  const [fabricantes, setFabricantes] = useState<any>([]);
  useEffect(() => {
    if (proposta && proposta.kit_proposta) {
      setValidadeProposta(validadePro());
      listarFabricantes().then(setFabricantes);
      fetchDistribuidor(proposta?.codDistribuidor_kit);
      if (proposta.id_proposta) {
        listarQtdVisitas(proposta.id_proposta).then((res) => {
          setVisitasProposta(res);
        });
      }
      listarTiposInstalacao().then((res) => {
        setTipoInstalacao(res);
      });

      if (proposta.api_kit_proposta == "1") {
        obterKitPorBudget_id(proposta.kit_proposta).then((res) => {
          setKitProposta(res);
          setApiKit(true);
        });
        setAreaModulos(proposta.area_modulos_ocupada_proposta);
      } else {
        setAreaModules();
      }
    }
  }, [proposta]);
  const [parametrosBd, setParametrosBd] = useState<any>([]);
  const [tipoTelhado, setTipoTelhado] = useState();

  useEffect(() => {
    listarParametros().then(setParametrosBd);
  }, []);

  useEffect(() => {
    listarTiposTelhados().then((res) => {
      let idTelhado = proposta?.telhado_proposta;

      if (dadosCard?.tipoNegocio_coleta === "3") {
        const telhadoEncontrado = res.find((r: any) => r.id_telhado == idTelhado);
        if (!telhadoEncontrado) {
          idTelhado = dadosAmpliacao?.tipoTelhado_ampliacao || lastProposalInfo?.telhado_proposta;
        }
      }

      const categoriaTelhado = res.find(
        (res2: any) => res2.id_telhado == idTelhado
      )?.nome_categoria_telhado;
      setTipoTelhado(categoriaTelhado);
    });
  }, [proposta, dadosAmpliacao, lastProposalInfo, dadosCard]);
  const [calcAreaModulo, setCalcAreaModulo] = useState<any>();
  const setAreaModules = () => {
    listarComponentesKitByKitId(proposta.kit_proposta).then((res: any) => {
      setKitProposta(res);

      if (proposta.area_modulos_ocupada_proposta != null) {
        setAreaModulos(parseFloat(proposta.area_modulos_ocupada_proposta));
        setCalcAreaModulo(
          parseFloat(proposta.area_modulos_ocupada_proposta) /
            Number(
              res.componentesKit.find((res2: any) => res2.tipo_item == 9)?.qtd
            )
        );
        return;
      }
      const modulos = res.componentesKit.find(
        (res2: any) => res2.tipo_item == 9
      );
      const altModulo = modulos?.altura_item;
      const largModulo = modulos?.largura_item;
      const qtdModulos = modulos?.qtd;
      let calc = altModulo * +largModulo * qtdModulos;
      setCalcAreaModulo(altModulo * +largModulo);
      setAreaModulos(calc);
      if (calc == 0) {
        listarTiposTelhados().then((res) => {
          if (proposta.telhado_proposta == null) {
            return "Sem telhado cadastrado na proposta";
          }
          const categoriaTelhado = res.find(
            (res2: any) => res2.id_telhado == proposta.telhado_proposta
          )?.categoria_telhado;
          const indice_tipo_instalacao = tipoInstalacao.find(
            (e: any) =>
              (e.id_tipo =
                categoriaTelhado == 5 ? 3 : categoriaTelhado == 4 ? 2 : 1)
          )?.indice_tipo;
          calc = indice_tipo_instalacao * qtdModulos;
          setCalcAreaModulo(indice_tipo_instalacao);
          setAreaModulos(calc);
        });
      }
    });
  };
  // const [validadePropostaState, setValidadePropostaState] = useState<any>();
  // useEffect(() => {
  //   const validade_proposta = new Date(proposta.data_proposta);

  //   setValidadePropostaState(validade_proposta.setDate(
  //     validade_proposta.getDate() +
  //       +parametrosBd.tempo_validade_proposta_parametro
  //   ));

  // }, [parametrosBd]);
  const classDiv = "flex gap-3 border-b border-gray-2 dark:border-gray ";
  const spanClass = "font-medium text-graydark dark:text-gray-2";

  // Função auxiliar para obter o nome da orientação
  const getOrientacaoNome = (codOrientacao: string) => {
    const orientacao = orientacoesSolares.find(
      (o: any) => o.id_orientacao === codOrientacao
    );
    return orientacao?.nome_orientacao || codOrientacao;
  };

  return isLoadedResumo ? (
    apiKit ? (
      <Container>
        <div className="w-full text-center">
          <h2 className="text-xl font-bold  dark:text-white mb-2 max-sm:text-xl">
            Dados Da Proposta
          </h2>
          <div className="h-1 w-20 bg-primary mx-auto rounded-full"></div>
        </div>
        {/* <div className="text-center font-bold text-xl">Dados Da Proposta</div> */}

        <div className="flex flex-row flex-wrap gap-5 justify-between mb-5">
          <div>
            <div>
              <span className="font-medium">Negócio: </span>
              {dadosCard.id_coleta_cliente}
            </div>
            <div>
              <span className="font-medium">Tipo de Kit: </span>
              {proposta.kitManual ? "Kit Próprio" : "Kit Distribuidor"}
            </div>
            <div>
              <span className="font-medium">Distribuidor: </span>
              {distribudor}
            </div>
            <div>
              <span className="font-medium">Valor da Proposta: </span>
              {formatarValor(+proposta.valorTotal_proposta)}
            </div>
            <div>
              <span className="font-medium">Tipo Telhado: </span>
              {tipoTelhado}
            </div>
            <div>
              <span className="font-medium">Válido até: </span>
              {validadeProposta}
            </div>
            <div>
              <span className="font-medium">Fator de Simultaneidade: </span>
              {proposta.valor_simultaneidade_proposta}%
            </div>
            <div>
              <span className="font-medium">Payback: </span>
              {proposta.payback_proposta}
            </div>
            <div>
              <span className="font-medium text-success">
                Visualizações Link:{" "}
              </span>
              {proposta?.quantidade_aberto_proposta_link ||
                "Ainda não há visitas"}
            </div>
          </div>

          <div>
            <div>
              <div className="font-medium text-lg">Geração</div>
              <div>
                <span className="font-medium">Consumo Mensal: </span>
                {proposta.consumoTotal_proposta} kWh
              </div>
              <div>
                <span className="font-medium">Geração Mensal: </span>
                {proposta?.estimativa_proposta} kWh
              </div>
              <div>
                <span className="font-medium">Abatimento: </span>
                {proposta?.abatimento_proposta} %
              </div>
              <div>
                <span className="font-medium">Geração anual: </span>
                {(proposta?.estimativa_proposta * 12).toFixed(2)} kWh
                <Button
                  className="bg-transparent text-primary p-0"
                  type="button"
                  onClick={(e: any) => {
                    e.stopPropagation();
                    const estimativaMensal = Number(
                      proposta?.estimativa_proposta || 0
                    );
                    const resultado = (estimativaMensal * 12).toFixed(2);

                    const formula = `
                    \\text{Geração Estimada Anual (kWh)} \\\\
                    \\overset{\\text{Mensal}}{${estimativaMensal}} \\times \\overset{\\text{Meses}}{12} = ${resultado}
                  `;

                    const formulaHtml = `<div style="display: flex; flex-direction: column; margin-bottom: 20px;">
                      ${katex.renderToString(formula, { throwOnError: false })}
                    </div>`;

                    Swal.fire({
                      icon: "info",
                      showConfirmButton: false,
                      // title: "Cálculo da Geração Estimada Anual",
                      html: `
                      <div style="display: flex; flex-direction: column; align-items: center; font-size: 1.2rem; padding: 10px;">
                        ${formulaHtml}
                      </div>
                    `,
                    });
                  }}
                >
                  <InfoIcon size={24} />
                </Button>
              </div>
              <div>
                <span className="font-medium">
                  Área Total Estimada p/ os Módulos:{" "}
                </span>
                {kitProposta.componentesKit.find(
                  (res2: any) => res2.tipo_item == 9
                )?.area_item + "m²"}
              </div>
              <div>
                <span className="font-medium">Valor por kWp: </span>
              </div>
            </div>
          </div>
        </div>

        <div className="w-full overflow-auto">
          <table className="mt-4 w-full min-w-max table-auto text-left">
            <thead>
              <tr>
                {["Componente", "Descrição", "Quantidade"].map(
                  (head, index) => (
                    <th
                      key={index}
                      className="cursor-pointer border-y  border-stroke bg-stroke/50 p-4 dark:hover:bg-form-strokedark hover:bg-stroke"
                    >
                      <Typography
                        variant="small"
                        color="blue-gray"
                        className="flex items-center justify-between gap-2 font-normal  leading-none opacity-90"
                      >
                        {head}
                      </Typography>
                    </th>
                  )
                )}
              </tr>
            </thead>
            <tbody>
              {kitProposta.products &&
                kitProposta.products.map((componente: any, index: number) => {
                  return <ItemKitHelte key={index} componente={componente} />;
                })}
              {usuario.visualiza_custo_kit_usuario != "0" && (
                <tr>
                  <td colSpan={1} className={classes + " text-right"}>
                    <Typography
                      variant="small"
                      color="blue-gray"
                      className="font-normal"
                    >
                      {formatarValor(+proposta.valorTotal_proposta)}
                    </Typography>
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </Container>
    ) : kitProposta["componentesKit"] ? (
      <>
        {dadosDeJsonProposta ? (
          ["2", "4"].includes(dadosCard?.tipoNegocio_coleta) ? (
            <>
              <ResumoPropostaCorretiva
                {...{
                  id_coleta: dadosCard.id_coleta_cliente,

                  proposta: proposta,
                  nome_usuario: usuario?.nome_usuario,
                  data_geracao_proposta: getDateBrasil(proposta.data_proposta),
                  validade_proposta: validadeProposta,
                  qtd_visualizacoes_proposta:
                    proposta?.quantidade_aberto_proposta_link,
                  valorTotal_proposta: +proposta.valorTotal_proposta,
                  valor_desconto: +proposta.descontoTotal_proposta,
                  valor_total_sem_desconto:
                    +proposta.descontoTotal_proposta +
                    +proposta.valorTotal_proposta,
                  valor_acrescimo: +proposta.acrescimoTotal_proposta,
                  valor_total_sem_acrescimo:
                    +proposta.valorTotal_proposta -
                    +proposta.acrescimoTotal_proposta,
                  obs_negocio: dadosCard.obs_coleta,
                  especificacoes:
                    dadosDeJsonProposta?.dadosProposta?.especificacoes,
                  informacoes_adicionais_proposta:
                    dadosDeJsonProposta?.dadosProposta
                      ?.informacoes_adicionais_proposta,
                  totalModulos:
                    dadosDeJsonProposta?.dadosProposta?.totalModulos,
                  forma_pagamento_proposta: formasPagamento?.find(
                    (forma: any) =>
                      forma?.id_forma == proposta?.codForma_pagamento_proposta,
                  )?.nome_forma,
                  obs_propost: proposta?.obs_proposta,
                }}
              />
            </>
          ) : (
            <>
              <ResumoProposta
                {...{
                  isLoadedResumo,
                  proposta,
                  estimativa_geracao_cliente: estimativa_geracao_cliente,
                  consumoAmpliacao_cliente: consumoAmpliacao,
                  id_coleta: dadosCard.id_coleta_cliente,
                  tipoNegocio_coleta: dadosCard.tipoNegocio_coleta,
                  origem: "view",
                  lastProposalInfo,
                  tipo_kit:
                    proposta.tipoKit_proposta === "1"
                      ? "Kit Próprio"
                      : "Kit Distribuidor",
                  nome_distribuidor: distribudor,
                  dadosAmpliacao,
                  cod_coleta: dadosCard.cod_coleta,
                  tipo_ampliacao: dadosDeJsonProposta?.dadosProposta?.tipo_ampliacao || dadosDeJsonProposta?.tipo_ampliacao,

                  nome_telhado: tipoTelhado,
                  validade_proposta: validadeProposta,
                  data_geracao_proposta: getDateBrasil(proposta.data_proposta),
                  nome_usuario: usuario?.nome_usuario,
                  valor_simultaneidade_proposta:
                    proposta.valor_simultaneidade_proposta,
                  qtd_visualizacoes_proposta:
                    proposta?.quantidade_aberto_proposta_link,
                  obs_proposta: proposta.obs_proposta,
                  valorTotal_proposta: +proposta.valorTotal_proposta,
                  preco_tarifa: proposta.precoDigitadoTarifa_proposta,
                  valor_desconto: +proposta.descontoTotal_proposta,
                  valor_total_sem_desconto:
                    +proposta.descontoTotal_proposta +
                    +proposta.valorTotal_proposta,
                  valor_acrescimo: +proposta.acrescimoTotal_proposta,
                  valor_total_sem_acrescimo:
                    +proposta.valorTotal_proposta -
                    +proposta.acrescimoTotal_proposta,
                  payback: proposta.payback_proposta,
                  potencia_sistema: Number(proposta.potenciaSistema_proposta),
                  nome_concessisonaria:
                    dadosDeJsonProposta?.dadosProposta?.concessionaria_proposta,
                  nome_tipoLigacao_proposta: tiposLigacoes.find(
                    (ligacao) => ligacao.value == proposta.tipoLigacao_proposta
                  )?.label,
                  grupo_proposta: proposta.grupo_proposta,
                  subgrupo_proposta: proposta.subgrupo_proposta,
                  ucs: dadosDeJsonProposta?.dadosProposta?.ucs || [],
                  consumoTotal: (
                    dadosDeJsonProposta?.dadosProposta?.ucs || []
                  )?.reduce(
                    (acc: number, uc: any) =>
                      (acc +=
                        +uc.valor == +uc.valor
                          ? +uc.valor
                          : uc.valor.reduce(
                              (acc: number, curr: string) => acc + +curr,
                              0
                            ) /
                            uc.valor.filter(
                              (val: number | string) => val !== ""
                            ).length),
                    0
                  ),
                  estimativa_geracao: +proposta?.estimativa_proposta,
                  abatimento: proposta?.abatimento_proposta,
                  qtd_modulos: kitProposta["componentesKit"].find(
                    (e: any) => e.codModulo_kit == e.id_item
                  )?.qtd,
                  fiob_tarifa: dadosDeJsonProposta?.dadosProposta?.fiob_tarifa,
                  potencia_modulo: proposta?.potencia_modulo_proposta,
                  modulo: kitProposta["componentesKit"].find(
                    (e: any) => e.codModulo_kit == e.id_item
                  ),
                  fabricantes,
                  area_ocupada:
                    calcAreaModulo *
                    kitProposta["componentesKit"].find(
                      (e: any) => e.codModulo_kit == e.id_item
                    )?.qtd,
                  apexOptionsGraficoGeracao,
                  apexSeriesGraficoGeracao,
                  apexOptionsGraficoRsi,
                  apexSeriesGraficoRsi,
                  area_modulo: calcAreaModulo,
                  inversores_proposta: kitProposta["componentesKit"].filter(
                    (e: any) => e.tipo_item == "8"
                  ),
                  tabela_rsi: tabela_rsi_data,
                  obs_negocio: dadosCard.obs_coleta,
                  distribuicaoDosModulos:
                    dadosDeJsonProposta?.dadosProposta?.distribuicaoDosModulos,
                  // % de Aumento de Consumo e Consumo Médio Real gravados na
                  // proposta (podem variar de uma proposta para outra).
                  percentual_aumento_consumo:
                    proposta.percentual_aumento_consumo_proposta,
                  consumo_medio_real: proposta.consumo_medio_real_proposta,
                  // Sombreamento e Performance Ratio gravados no JSON da
                  // proposta; Seguro gravado na própria proposta.
                  sombreamentos_coleta:
                    dadosDeJsonProposta?.dadosProposta?.sombreamentos_coleta,
                  performance_ratio_parametro:
                    dadosDeJsonProposta?.dadosProposta
                      ?.performance_ratio_parametro,
                  seguro_percentual: proposta.seguroRsi_proposta,
                }}
              />
              <div
                className={`w-full flex flex-col justify-center items-center border-b-black-2 border-b-[1px] relative p-2`}
              >
                <div className="flex flex-row gap-4 justify-center items-center">
                  <div className="text-center w-[233px]">
                    <label
                      htmlFor="valorFinalProposta"
                      className="mb-2.5 block text-black dark:text-white whitespace-nowrap text-md"
                    >
                      % Proposta{" "}
                      {usuario?.visualiza_max_desconto_proposta_usuario ==
                        "1" &&
                      usuario?.visualiza_max_acrescimo_proposta_usuario == "1"
                        ? `(${usuario?.max_desconto_usuario && FormatFields.formatarNumero((1 - Number(usuario?.max_desconto_usuario) / 100) * 100)} até ${usuario?.max_desconto_usuario && FormatFields.formatarNumero((1 + Number(usuario?.max_acrescimo_usuario) / 100) * 100)})`
                        : usuario?.visualiza_max_desconto_proposta_usuario ==
                            "1"
                          ? `(de ${usuario?.max_desconto_usuario && FormatFields.formatarNumero((1 - Number(usuario?.max_desconto_usuario) / 100) * 100)})`
                          : usuario?.visualiza_max_acrescimo_proposta_usuario ==
                              "1"
                            ? `(até ${usuario?.max_acrescimo_usuario && FormatFields.formatarNumero((1 + Number(usuario?.max_acrescimo_usuario) / 100) * 100)})`
                            : ""}
                      <span className="text-[#ff2b2b] font-semibold text-lg"></span>
                    </label>
                    <div className="w-full flex items-center gap-1 relative flex-rowfalse align-middle">
                      <div className="w-full rounded border-[1.5px] border-stroke bg-transparent py-2 px-2 font-medium outline-none transition focus:border-primary active:border-primary disabled:cursor-default dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary undefined text-center">
                        {resultadoPrecificacao &&
                          FormatFields.formatarNumero(
                            (proposta.valorTotal_proposta * 100) /
                              resultadoPrecificacao?.preco_venda
                          )}
                      </div>
                    </div>
                  </div>
                  <div className="text-center w-[233px]">
                    <label
                      htmlFor="valorFinalProposta"
                      className="mb-2.5 block text-black dark:text-white whitespace-nowrap text-md"
                    >
                      Valor Proposta
                      <span className="text-[#ff2b2b] font-semibold text-lg"></span>
                    </label>
                    <div className="w-full flex items-center gap-1 relative flex-rowfalse align-middle">
                      <div className="w-full rounded border-[1.5px] border-stroke bg-transparent py-2 px-2 font-medium outline-none transition focus:border-primary active:border-primary disabled:cursor-default dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary undefined text-center">
                        {formatarValor(proposta.valorTotal_proposta)}
                      </div>
                    </div>
                  </div>
                </div>
                {resultadoPrecificacao && (
                  <>
                    <div className="p-2 font-bold text-2xl text-center">
                      Precificação
                    </div>
                    <div className="flex flex-col gap-2">
                      <div className="flex flex-row gap-3">
                        {usuario.visualiza_custo_kit_usuario == "1" && (
                          <div className="p-2 font-bold">
                            <div className="flex flex-col">
                              <div>Custo do Kit</div>
                            </div>
                            <div>
                              {resultadoPrecificacao?.valor_kit &&
                                formatarValor(resultadoPrecificacao.valor_kit)}
                            </div>
                          </div>
                        )}
                        <div className="p-2 font-bold">
                          <div>Preço Final</div>
                          <div>
                            {resultadoPrecificacao?.preco_venda &&
                              formatarValor(resultadoPrecificacao?.preco_venda)}
                          </div>
                        </div>
                      </div>
                      <div className="flex flex-row gap-3">
                        {usuario?.visualiza_max_desconto_proposta_usuario ==
                          "1" && (
                          <div className="p-2 font-bold">
                            <div>Desconto Máximo</div>
                            <div>
                              {formatarValor(valor_max_desconto_usuario)}
                            </div>
                          </div>
                        )}
                        {usuario?.visualiza_max_acrescimo_proposta_usuario ==
                          "1" && (
                          <div className="p-2 font-bold">
                            <div>Acréscimo Máximo</div>
                            <div>
                              {formatarValor(valor_max_acrescimo_usuario)}
                            </div>
                          </div>
                        )}
                      </div>
                    </div>
                    <ResultadoPrecificacao
                      resultadoPrecificacao={resultadoPrecificacao}
                    />
                  </>
                )}
              </div>
            </>
          )
        ) : (
          <Container className="shadow-none">
            {/* <div className="text-center font-bold text-xl">Dados Da Proposta</div> */}
            <div className="w-full text-center">
              <h2 className="text-xl font-bold  dark:text-white mb-2 max-sm:text-xl">
                Dados Da Proposta
              </h2>
              <div className="h-1 w-20 bg-primary mx-auto rounded-full"></div>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className=" p-4 rounded-lg">
                <h3 className="font-semibold text-lg text-gray-700 dark:text-gray-300 mb-3">
                  Informações Gerais
                </h3>
                <div className="space-y-3">
                  <div className={classDiv}>
                    <span className={spanClass}>Negócio: </span>
                    {dadosCard.id_coleta_cliente}
                  </div>
                  <div className={classDiv}>
                    <span className={spanClass}>
                      Data Geração:
                      {new Date(proposta.data_proposta).toLocaleDateString(
                        "pt-BR"
                      )}
                      {""} - Gerado por: {proposta.nome_usuario_gerador}
                    </span>
                  </div>
                  {proposta.status_proposta == 1 && (
                    <div className={classDiv}>
                      <span className={spanClass}>
                        Data Aprovação:{" "}
                        {new Date(
                          proposta.data_hora_aprovacao
                        ).toLocaleDateString("pt-BR")}
                        {""} - Aprovado por: {proposta.nome_usuario_aprovacao}
                      </span>
                    </div>
                  )}

                  {proposta.status_proposta == 3 && (
                    <div className={classDiv}>
                      <span className={spanClass}>
                        Data Cancelamento:{" "}
                        {new Date(
                          proposta.data_hora_reprovacao
                        ).toLocaleDateString("pt-BR")}
                        {""} - Cancelado por: {proposta.nome_usuario_reprovacao}
                      </span>
                    </div>
                  )}

                  <div className={classDiv}>
                    <span className={spanClass}>Tipo de Kit: </span>
                    {proposta.tipoKit_proposta === "1"
                      ? "Kit Próprio"
                      : "Kit Distribuidor"}
                  </div>
                  <div className={classDiv}>
                    <span className={spanClass}>Distribuidor: </span>
                    {distribudor}
                  </div>
                  <div className={classDiv}>
                    <span className={spanClass}>Valor da Proposta: </span>
                    {formatarValor(+proposta.valorTotal_proposta)}
                  </div>
                  <div className={classDiv}>
                    <span className={spanClass}>Tipo Telhado: </span>
                    {tipoTelhado}
                  </div>
                  <div className={classDiv}>
                    <span className={spanClass}>Válido até: </span>
                    {validadeProposta}
                  </div>
                  <div className={classDiv}>
                    <span className={spanClass}>
                      Valor Tarifa de Aplicação:{" "}
                    </span>
                    {proposta.precoTarifa_proposta}
                  </div>
                  <div className={classDiv}>
                    <span className={spanClass}>Fator de Simultaneidade: </span>
                    {proposta.valor_simultaneidade_proposta}%
                  </div>

                  <div className={classDiv}>
                    <span className={spanClass}>Payback: </span>
                    {proposta.payback_proposta}
                  </div>
                  <div className={classDiv}>
                    <span className="font-semibold text-md text-primary">
                      Visualizações Link:{" "}
                    </span>
                    {proposta?.quantidade_aberto_proposta_link ||
                      "Ainda não há Visualizações"}{" "}
                  </div>
                </div>
              </div>

              <div>
                <div className="space-y-3">
                  <h4 className="font-semibold text-lg mt-2  text-primary dark:text-primary light mb-3">
                    Geração
                  </h4>
                  {/* <div className="font-medium text-lg">Geração</div> */}
                  <div className={classDiv}>
                    <span className={spanClass}>Consumo Mensal: </span>
                    {proposta.consumoTotal_proposta} kWh
                  </div>
                  <div className={classDiv}>
                    <span className={spanClass}>Geração Mensal: </span>
                    {proposta?.estimativa_proposta} kWh
                  </div>
                  <div className={classDiv}>
                    <span className={spanClass}>Abatimento: </span>
                    {proposta?.abatimento_proposta} %
                  </div>
                  <div className="items-center flex  gap-3 border-b border-gray-2 dark:border-gray">
                    <span className={spanClass}>Geração anual: </span>
                    {(proposta?.estimativa_proposta * 12).toFixed(2)} kWh
                    <Button
                      className="bg-transparent text-primary p-0"
                      type="button"
                      onClick={(e: any) => {
                        e.stopPropagation();
                        const estimativaMensal = Number(
                          proposta?.estimativa_proposta || 0
                        );
                        const resultado = (estimativaMensal * 12).toFixed(2);

                        const formula = `
                                                \\text{Geração Estimada Anual (kWh)} \\\\
                                                \\overset{\\text{Mensal}}{${estimativaMensal}} \\times \\overset{\\text{Meses}}{12} = ${resultado}
                                              `;

                        const formulaHtml = `<div style="display: flex; flex-direction: column; margin-bottom: 20px;">
                                                ${katex.renderToString(formula, { throwOnError: false })}
                                              </div>`;

                        Swal.fire({
                          icon: "info",
                          showConfirmButton: false,
                          // title: "Cálculo da Geração Estimada Anual",
                          html: `
                                                  <div style="display: flex; flex-direction: column; align-items: center; font-size: 1.2rem; padding: 10px;">
                                                    ${formulaHtml}
                                                  </div>
                                                `,
                        });
                      }}
                    >
                      <InfoIcon size={24} />
                    </Button>
                  </div>
                  <div className={classDiv}>
                    <span className={spanClass}>
                      Área Total Estimada p/ os Módulos:{" "}
                    </span>
                    {areaModulos.toFixed(2) + "m²"}
                  </div>
                  <div className="items-center flex  gap-3 border-b border-gray-2 dark:border-gray">
                    <span className={spanClass}>Valor por kWp: </span>
                    {formatarValor(
                      +kitProposta["extras"]?.[0]?.valor /
                        (+kitProposta["extras"]?.[0]?.consumo * 1000)
                    )}
                    <Button
                      className="bg-transparent text-primary p-0"
                      type="button"
                      onClick={(e: any) => {
                        e.stopPropagation();

                        const valorFinal = +kitProposta["extras"]?.[0]?.valor;
                        const potencia = +kitProposta["extras"]?.[0]?.consumo;

                        const resultados = kitProposta.componentesKit
                          .filter((a: any) => a.tipo_item === "9")
                          .map((item: any) => {
                            const qtd = Number(item.qtd_item);
                            const potencia = Number(item.potencia_item);
                            const resultado = qtd * potencia;

                            return resultado;
                          });

                        const formulas = `
                      \\text{Cálculo do valor por kWp} \\\\
                      \\frac{
                        \\overset{\\text{Valor Final}}{${valorFinal}}
                      }{
                        \\overset{\\text{Potência (kWp)}}{${resultados[0] / 1000}} \\times 1000
                      } = ${(valorFinal / resultados[0]).toFixed(2)}
                    `;

                        const formulasHtml = `<div style="display: flex; flex-direction: column; margin-bottom: 20px;">${katex.renderToString(
                          formulas,
                          { throwOnError: false }
                        )}</div>`;

                        Swal.fire({
                          icon: "info",
                          showConfirmButton: false,
                          // title: "Cálculo  do Custo por kWp",
                          html: `
                      <div style="display: flex; flex-direction: column; align-items: center; font-size: 1.2rem; padding: 10px;">
                        ${formulasHtml}
                      </div>
                    `,
                        });
                      }}
                    >
                      <InfoIcon size={24} />
                    </Button>
                  </div>
                </div>
              </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 flex-wrap gap-5 mt-3">
              <div>
                {/* <div className="font-medium text-lg">Módulos</div> */}
                <h4 className="font-semibold text-lg  text-primary dark:text-primarylight mb-3">
                  Módulos
                </h4>
                <div className="flex flex-col gap-2">
                  <div className={classDiv}>
                    <span className={spanClass}>ID do Módulo: </span>
                    {kitProposta["componentesKit"].find(
                      (e: any) => e.codModulo_kit == e.id_item
                    )?.id_item ?? "Não Informado"}
                  </div>
                  <div className={classDiv}>
                    <span className={spanClass}>Descrição do Módulo: </span>
                    {kitProposta["componentesKit"].find(
                      (e: any) => e.codModulo_kit == e.id_item
                    )?.descricao_item ?? "Não Informado"}
                  </div>
                  <div className={classDiv}>
                    <span className={spanClass}>Quantidade de Módulos: </span>
                    {
                      kitProposta["componentesKit"].find(
                        (e: any) => e.codModulo_kit == e.id_item
                      )?.qtd
                    }
                  </div>
                  <div className={classDiv}>
                    <span className={spanClass}>Potência dos Módulos: </span>
                    {proposta?.potencia_modulo_proposta &&
                      FormatFields.formatarNumero(
                        proposta?.potencia_modulo_proposta
                      ) + " w"}
                  </div>
                  <div className={classDiv}>
                    <span className={spanClass}>Garantia do Módulo: </span>
                    {kitProposta["componentesKit"].find(
                      (e: any) => e.codModulo_kit == e.id_item
                    )?.garantia_item
                      ? (kitProposta["componentesKit"].find(
                          (e: any) => e.codModulo_kit == e.id_item
                        )?.garantia_item / 12) + " anos"
                      : "Não Informado"}
                  </div>
                  <div className={classDiv}>
                    <span className={spanClass}>Período e Eficiência: </span>
                    {kitProposta["componentesKit"].find(
                      (e: any) => e.codModulo_kit == e.id_item
                    )?.anos_eficiencia_item &&
                    kitProposta["componentesKit"].find(
                      (e: any) => e.codModulo_kit == e.id_item
                    )?.eficiencia_25anos_item
                      ? kitProposta["componentesKit"].find(
                          (e: any) => e.codModulo_kit == e.id_item
                        )?.anos_eficiencia_item +
                        " anos - " +
                        kitProposta["componentesKit"].find(
                          (e: any) => e.codModulo_kit == e.id_item
                        )?.eficiencia_25anos_item +
                        "%"
                      : "Não Informado"}
                  </div>
                  {/* <div className={classDiv}>
              <span className={spanClass}>Potência do Sistema: </span>
              {FormatFields.formatarNumero(proposta.potenciaSistema_proposta) +
                " kWp"}
            </div> */}
                  <div className={classDiv}>
                    <span className={spanClass}>Área do Módulo: </span>
                    {calcAreaModulo + " m²"}
                  </div>

                  <div className={classDiv}>
                    <span className={spanClass}>Valor do Fio B: </span>
                    {tarifasEnergia[0]?.fiob_tarifa
                      ? "R$" + tarifasEnergia[0].fiob_tarifa
                      : "Não Informado"}
                  </div>
                  {/* <div className={classDiv}>
              <span className={spanClass}>Descrição: </span>
              {
                kitProposta["componentesKit"].find(
                  (e: any) => e.codModulo_kit == e.id_item
                )?.descricao
              }{" "}
              kWp
            </div> */}
                  <div className={classDiv}>
                    <span className={spanClass}>Fabricante do Módulo: </span>
                    {
                      fabricantes.find(
                        (a: any) =>
                          a.id_fabricante ===
                          kitProposta["componentesKit"].find(
                            (e: any) => e.codModulo_kit == e.id_item
                          )?.codFabricante_item
                      )?.nome_fabricante
                    }{" "}
                  </div>
                  <div className={classDiv}>
                    <span className={spanClass}>Modelo do Módulo: </span>
                    {
                      kitProposta["componentesKit"].find(
                        (e: any) => e.codModulo_kit == e.id_item
                      )?.modelo_item
                    }{" "}
                  </div>
                  {/* {dadosDeJsonProposta?.dadosProposta?.distribuicaoDosModulos && ( */}
                  <div className={classDiv}>
                    <span className={spanClass}>Orientação: </span>
                    {dadosDeJsonProposta.dadosProposta?.distribuicaoDosModulos
                      .map((dist: any) => getOrientacaoNome(dist.orientacao))
                      .join(", ")}
                  </div>
                  {/* )} */}
                </div>
              </div>
              <div>
                {/* <div className="font-medium text-lg">Inversor(es)</div> */}
                <h4 className="font-semibold text-lg  text-primary dark:text-primarylight mb-3">
                  Inversor(es)
                </h4>
                <div className="max-h-[30vh] overflow-auto">
                  {kitProposta["componentesKit"]
                    ?.filter((a: any) => a.tipo_item === "8")
                    .map((inversor_proposta: any, index_inversor: number) => {
                      const tipoDeLigação =
                        inversor_proposta.fases_item == "1"
                          ? "Monofásico"
                          : inversor_proposta.fases_item == "2"
                            ? "Bifásico"
                            : "Trifásico";

                      return (
                        <div
                          key={index_inversor}
                          className="dark:bg-graydark p-3 rounded"
                        >
                          <div className="flex gap-3 border-b border-gray-2 dark:border-gray pb-2">
                            <span className="font-medium text-graydark dark:text-gray-2">
                              ID do Inversor:
                            </span>
                            <span className=" dark:text-stroke">
                              {inversor_proposta.id_item ?? "Não Informado"}
                            </span>
                          </div>

                          <div className="flex gap-3 border-b border-gray-2 dark:border-gray pb-2">
                            <span className="font-medium text-graydark dark:text-gray-2">
                              Nome:
                            </span>
                            <span className=" dark:text-stroke">
                              {inversor_proposta.descricao_item}
                            </span>
                          </div>

                          <div className="flex gap-3 border-b border-gray-2 dark:border-gray pb-2">
                            <span className="font-medium text-graydark dark:text-gray-2">
                              Quantidade:
                            </span>
                            <span className=" dark:text-stroke">
                              {inversor_proposta.qtd_item}
                            </span>
                          </div>

                          <div className="flex gap-3 border-b border-gray-2 dark:border-gray pb-2">
                            <span className="font-medium text-graydark dark:text-gray-2">
                              Potência:
                            </span>
                            <span className=" dark:text-stroke">
                              {inversor_proposta.potencia_item} kW
                            </span>
                          </div>

                          <div className="flex gap-3 border-b border-gray-2 dark:border-gray pb-2">
                            <span className="font-medium text-graydark dark:text-gray-2">
                              Garantia do Inversor:
                            </span>
                            <span className=" dark:text-stroke">
                              {inversor_proposta.garantia_item
                                ? `${inversor_proposta.garantia_item / 12} anos`
                                : "Não Informado"}
                            </span>
                          </div>

                          <div className="flex gap-3">
                            <span className="font-medium text-graydark dark:text-gray-2">
                              Tipo de Ligação:
                            </span>
                            <span className=" dark:text-stroke">
                              {tipoDeLigação}
                            </span>
                          </div>
                        </div>
                      );
                    })}

                  {/* <div className="flex flex-col gap-2">
            <div className={classDiv}>
              <span className={spanClass}>Descrição: </span>
              {
                kitProposta["componentesKit"].find(
                  (e: any) => e.codInversor1_kit == e.id_item
                )?.descricao
              }{" "}
              {
                kitProposta["componentesKit"].find(
                  (e: any) => e.codInversor2_kit == e.id_item
                )?.descricao
              }
            </div>
            <div className={classDiv}>
              <span
                className={spanClass}
              >
                Quantidade de inversor(es):{" "}
              </span>
              {(+kitProposta["componentesKit"].find(
                (e: any) => e.codInversor1_kit == e.id_item
              )?.qtd || 0) +
                (+kitProposta["componentesKit"].find(
                  (e: any) => e.codInversor2_kit == e.id_item
                )?.qtd || 0)}
            </div>
            <div className={classDiv}>
              <span className={spanClass}>Potência do(s) Inversor(es): </span>
              {FormatFields.formatarNumero(
                proposta.potencia_inversores_proposta
              ) + " kW"}
            </div>
            <div className={classDiv}>
              <span className={spanClass}>Fabricante: </span>
              {
                fabricantes.find(
                  (a: any) =>
                    a.id_fabricante ===
                    kitProposta["componentesKit"].find(
                      (e: any) => e.codInversor1_kit == e.id_item
                    )?.codFabricante_item
                )?.nome_fabricante
              }{" "}
            </div>
            <div className={classDiv}>
              <span className={spanClass}>Modelo: </span>
              {(() => {
                const item = kitProposta["componentesKit"].find(
                  (e: any) => e.codInversor1_kit == e.id_item
                );
                return item?.modelo_item && item.modelo_item !== ""
                  ? item.modelo_item
                  : "Sem descrição de modelo";
              })()}
            </div>
          </div> */}
                </div>
              </div>
            </div>
            <div
              className={`w-full flex flex-col justify-center items-center border-b-black-2 border-b-[1px] relative p-2`}
            >
              <div className="flex flex-row gap-4 justify-center items-center">
                <div className="text-center w-[233px]">
                  <label
                    htmlFor="valorFinalProposta"
                    className="mb-2.5 block text-black dark:text-white whitespace-nowrap text-md"
                  >
                    % Proposta{" "}
                    {usuario?.visualiza_max_desconto_proposta_usuario == "1" &&
                    usuario?.visualiza_max_acrescimo_proposta_usuario == "1"
                      ? `(${usuario?.max_desconto_usuario && FormatFields.formatarNumero((1 - Number(usuario?.max_desconto_usuario) / 100) * 100)} até ${usuario?.max_desconto_usuario && FormatFields.formatarNumero((1 + Number(usuario?.max_acrescimo_usuario) / 100) * 100)})`
                      : usuario?.visualiza_max_desconto_proposta_usuario == "1"
                        ? `(de ${usuario?.max_desconto_usuario && FormatFields.formatarNumero((1 - Number(usuario?.max_desconto_usuario) / 100) * 100)})`
                        : usuario?.visualiza_max_acrescimo_proposta_usuario ==
                            "1"
                          ? `(até ${usuario?.max_acrescimo_usuario && FormatFields.formatarNumero((1 + Number(usuario?.max_acrescimo_usuario) / 100) * 100)})`
                          : ""}
                    <span className="text-[#ff2b2b] font-semibold text-lg"></span>
                  </label>
                  <div className="w-full flex items-center gap-1 relative flex-rowfalse align-middle">
                    <div className="w-full rounded border-[1.5px] border-stroke bg-transparent py-2 px-2 font-medium outline-none transition focus:border-primary active:border-primary disabled:cursor-default dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary undefined text-center">
                      {resultadoPrecificacao &&
                        FormatFields.formatarNumero(
                          (proposta.valorTotal_proposta * 100) /
                            resultadoPrecificacao?.preco_venda
                        )}
                    </div>
                  </div>
                </div>
                <div className="text-center w-[233px]">
                  <label
                    htmlFor="valorFinalProposta"
                    className="mb-2.5 block text-black dark:text-white whitespace-nowrap text-md"
                  >
                    Valor Proposta
                    <span className="text-[#ff2b2b] font-semibold text-lg"></span>
                  </label>
                  <div className="w-full flex items-center gap-1 relative flex-rowfalse align-middle">
                    <div className="w-full rounded border-[1.5px] border-stroke bg-transparent py-2 px-2 font-medium outline-none transition focus:border-primary active:border-primary disabled:cursor-default dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary undefined text-center">
                      {formatarValor(proposta.valorTotal_proposta)}
                    </div>
                  </div>
                </div>
              </div>
              {resultadoPrecificacao && (
                <>
                  <div className="p-2 font-bold text-2xl text-center">
                    Precificação
                  </div>
                  <div className="flex flex-col gap-2">
                    <div className="flex flex-row gap-3">
                      {usuario.visualiza_custo_kit_usuario == "1" && (
                        <div className="p-2 font-bold">
                          <div className="flex flex-col">
                            <div>Custo do Kit</div>
                          </div>
                          <div>
                            {resultadoPrecificacao?.valor_kit &&
                              formatarValor(resultadoPrecificacao.valor_kit)}
                          </div>
                        </div>
                      )}
                      <div className="p-2 font-bold">
                        <div>Preço Final</div>
                        <div>
                          {resultadoPrecificacao?.preco_venda &&
                            formatarValor(resultadoPrecificacao?.preco_venda)}
                        </div>
                      </div>
                    </div>
                    <div className="flex flex-row gap-3">
                      {usuario?.visualiza_max_desconto_proposta_usuario ==
                        "1" && (
                        <div className="p-2 font-bold">
                          <div>Desconto Máximo</div>
                          <div>{formatarValor(valor_max_desconto_usuario)}</div>
                        </div>
                      )}
                      {usuario?.visualiza_max_acrescimo_proposta_usuario ==
                        "1" && (
                        <div className="p-2 font-bold">
                          <div>Acréscimo Máximo</div>
                          <div>
                            {formatarValor(valor_max_acrescimo_usuario)}
                          </div>
                        </div>
                      )}
                    </div>
                  </div>
                  <ResultadoPrecificacao
                    resultadoPrecificacao={resultadoPrecificacao}
                  />
                </>
              )}
            </div>
          </Container>
        )}
      </>
    ) : (
      <div className="flex items-center justify-center mt-20">
        <LoaderSun size={22} />
      </div>
    )
  ) : (
    <div className="flex items-center justify-center mt-20">
      <LoaderSun size={22} />
    </div>
  );
};

export default PropostaView;