"use client";

import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import InputGroup from "@/components/Forms/InputGroup";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { handleSweetAlert } from "@/components/Modal/SweetAlertConfirm";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  exportarTabelaPrecoExcel,
  importarLinhasTabelaPreco,
  listarTabelasPrecos,
} from "@/requests/CRUD/TabelaPreco/tabelaPreco";
import { baixarArquivoBase64, FormatFields, GetForm } from "@/utils";
import {
  ConfigCalculoTabelaPreco,
  LinhaTabelaPreco,
  ehFlagManualAtiva,
  formatarValorTabela,
  montarDescricaoComponenteLinha,
  normalizarLinhaFromApi,
  obterLabelCategoriaTelhado,
  recalcularLinhaTabelaPreco,
  resolverFasesInversoresLinha,
} from "@/utils/tabelaPrecos";
import { FileSpreadsheet, Info, Plus, Trash2, Upload } from "lucide-react";
import { Fragment, useEffect, useMemo, useRef, useState } from "react";
import { toast } from "react-toastify";
import Swal from "sweetalert2";

type ConfigHeaderTabelaPreco = {
  idsEstrutura: string[];
  idModulo: string;
  potenciaModulo: number;
  valorModulo: number;
  geracaoNorte: number;
  geracaoNorteManual?: boolean;
  geracaoLesteOeste: number;
  geracaoLesteOesteManual?: boolean;
  metrosCaboPorModulo: number;
};

const distribuidorCompativel = (
  codDistribuidorItem: any,
  distribuidorSelecionado: any,
  tipoOrigemItem?: any,
  distribuidorNativoSelecionado?: boolean
) => {
  if (
    !distribuidorSelecionado ||
    distribuidorSelecionado === "*" ||
    codDistribuidorItem == null ||
    codDistribuidorItem === "" ||
    String(codDistribuidorItem) === "*"
  ) {
    return true;
  }
  if (String(codDistribuidorItem) !== String(distribuidorSelecionado)) {
    return false;
  }
  // Mesmo id de distribuidor pode existir tanto no cadastro nativo quanto no
  // cadastrado manualmente (ex.: Bold e Belenus ambos com id 1) — desambiguar
  // pelo tipoOrigem_item do item (1 = nativo, 0 = cadastrado).
  const origemEsperada = distribuidorNativoSelecionado ? "1" : "0";
  return String(tipoOrigemItem ?? "0") === origemEsperada;
};

// Nativo e cadastrado usam sequências de id próprias e independentes — o mesmo
// id numérico pode existir nos dois (ex.: Bold nativo id 1 e Belenus cadastrado
// id 1). O valor do select precisa carregar a origem junto pra não ambiguar.
const PREFIXO_DISTRIBUIDOR_NATIVO = "N";
const PREFIXO_DISTRIBUIDOR_CADASTRADO = "C";

const codificarDistribuidorOpcao = (id: any, nativo: boolean) =>
  `${nativo ? PREFIXO_DISTRIBUIDOR_NATIVO : PREFIXO_DISTRIBUIDOR_CADASTRADO}${id}`;

const decodificarDistribuidorOpcao = (codigo: any) => {
  const texto = String(codigo ?? "");
  if (texto.startsWith(PREFIXO_DISTRIBUIDOR_NATIVO)) {
    return { id: texto.slice(1), nativo: true };
  }
  if (texto.startsWith(PREFIXO_DISTRIBUIDOR_CADASTRADO)) {
    return { id: texto.slice(1), nativo: false };
  }
  return { id: texto, nativo: false };
};

const CORES_GRUPO_CABECALHO = [
  "bg-amber-300 text-amber-950 dark:bg-amber-600 dark:text-amber-50 font-bold",
  "bg-sky-300 text-sky-950 dark:bg-sky-600 dark:text-sky-50 font-bold",
  "bg-emerald-300 text-emerald-950 dark:bg-emerald-600 dark:text-emerald-50 font-bold",
  "bg-violet-300 text-violet-950 dark:bg-violet-600 dark:text-violet-50 font-bold",
  "bg-rose-300 text-rose-950 dark:bg-rose-600 dark:text-rose-50 font-bold",
  "bg-lime-300 text-lime-950 dark:bg-lime-600 dark:text-lime-50 font-bold",
];

// Sugestão de geração média = potência do módulo (kWp) × fator — bate com
// os antigos defaults fixos (53/49) pra um módulo de ~620W, mas agora
// escala com o módulo selecionado em vez de ficar fixo.
const FATOR_GERACAO_NORTE = 85;
const FATOR_GERACAO_LESTE_OESTE = 79;
const calcularSugestaoGeracao = (potenciaModuloW: number, fator: number) =>
  Number((((Number(potenciaModuloW) || 0) / 1000) * fator).toFixed(0));
const CAMPO_FORMULA_CLASS = "text-body dark:text-bodydark2";

const AVISO_GERACAO =
  'ATENÇÃO! Esta Geração depende da "Irradiação Solar" do Endereço de Instalação, que pode ser diferente no momento da geração da proposta do valor que foi informado aqui, pois vai se basear em mais fatores.';

const mostrarAvisoGeracao = () =>
  handleSweetAlert({
    icon: "warning",
    title: "Atenção!!",
    showDenyButton: false,
    confirmButtonText: "Ok",
    html: AVISO_GERACAO,
  });

const LabelComAviso = ({ texto }: { texto: string }) => (
  <span className="flex items-center gap-1">
    {texto}
    <button
      type="button"
      className="hover:text-primary cursor-pointer p-0.5 rounded"
      onClick={(e: any) => {
        e.preventDefault();
        e.stopPropagation();
        mostrarAvisoGeracao();
      }}
    >
      <Info size={14} />
    </button>
  </span>
);

const LIMIAR_AVISO_ABAIXO_SUGESTAO = 0.5;

const avisarSeAbaixoDaSugestao = (
  label: string,
  valor: number,
  sugestao: number
) => {
  if (!sugestao || valor >= sugestao * LIMIAR_AVISO_ABAIXO_SUGESTAO) return;
  handleSweetAlert({
    icon: "warning",
    title: "Atenção!",
    showDenyButton: false,
    confirmButtonText: "Ok",
    html: `${label} informado (${FormatFields.formatarNumero(valor)}) está bem abaixo da sugestão calculada (${FormatFields.formatarNumero(sugestao)}). Confira se está correto.`,
  });
};

const linhaVaziaTabelaPreco = (): LinhaTabelaPreco => ({
  qtd_modulos: 0,
  inversores: [{ qtd: 1, descricao: "" }],
  descricao_componente: "",
});

const montarIdsFromRaw = (raw: any): string[] => {
  if (!raw) return [];
  if (Array.isArray(raw)) return raw.map((v) => String(v)).filter(Boolean);
  return String(raw)
    .split(",")
    .map((v) => v.trim())
    .filter(Boolean);
};

const montarConfigHeaderFromDefaults = (
  defaultValues: any,
  parametros?: any
): ConfigHeaderTabelaPreco => {
  const metrosParametro = Number(
    FormatFields.desformatarNumeros(
      String(parametros?.qtd_cabo_por_modulo_parametro ?? "0")
    ) || 0
  );

  const geracaoNorteSalva = Number(defaultValues?.geracaoNorte_tabela_preco);
  const geracaoLesteSalva = Number(
    defaultValues?.geracaoLesteOeste_tabela_preco
  );
  const metrosSalvos = Number(defaultValues?.metrosCaboPorModulo_tabela_preco);
  const potenciaModulo = Number(defaultValues?.potenciaModulo_tabela_preco || 0);

  const geracaoNorteJaSalva =
    Number.isFinite(geracaoNorteSalva) && geracaoNorteSalva > 0;
  const geracaoLesteJaSalva =
    Number.isFinite(geracaoLesteSalva) && geracaoLesteSalva > 0;

  return {
    idsEstrutura: montarIdsFromRaw(defaultValues?.idsEstrutura_tabela_preco),
    idModulo: defaultValues?.idModulo_tabela_preco || "",
    potenciaModulo,
    valorModulo: Number(defaultValues?.valorModulo_tabela_preco || 0),
    geracaoNorte: geracaoNorteJaSalva
      ? geracaoNorteSalva
      : calcularSugestaoGeracao(potenciaModulo, FATOR_GERACAO_NORTE),
    // Tabela já existente com valor salvo mantém esse valor (mesmo que o
    // módulo mude depois) — só recalcula automaticamente quando ainda não
    // havia um valor definido (tabela nova).
    geracaoNorteManual: geracaoNorteJaSalva,
    geracaoLesteOeste: geracaoLesteJaSalva
      ? geracaoLesteSalva
      : calcularSugestaoGeracao(potenciaModulo, FATOR_GERACAO_LESTE_OESTE),
    geracaoLesteOesteManual: geracaoLesteJaSalva,
    metrosCaboPorModulo:
      Number.isFinite(metrosSalvos) && metrosSalvos > 0
        ? metrosSalvos
        : metrosParametro,
  };
};

const montarConfigCalculo = (
  configHeader: ConfigHeaderTabelaPreco,
  estruturasSelecionadas: any[],
  parametros?: any
): ConfigCalculoTabelaPreco => {
  const estruturasPorTelhado: Record<string, any> = {};
  for (const item of estruturasSelecionadas) {
    const sigla = String(item?.tipoTelhado_item || "").toLowerCase();
    if (!sigla) continue;
    estruturasPorTelhado[sigla] = {
      precoUnitario_item: item?.precoUnitario_item,
      agrupamento_modulos_item: item?.agrupamento_modulos_item,
    };
  }

  return {
    potenciaModulo: configHeader.potenciaModulo,
    valorModulo: configHeader.valorModulo,
    geracaoNorte: configHeader.geracaoNorte,
    geracaoLesteOeste: configHeader.geracaoLesteOeste,
    metrosCaboPorModulo: configHeader.metrosCaboPorModulo,
    calculoCabo: parametros?.calculo_cabo_parametro ?? "0",
    estruturasPorTelhado,
  };
};

const FormTabelaPreco = ({
  onSubmitFunction,
  defaultValues,
  distribuidores,
  distribuidoresNativos = [],
  lojas,
  inversores = [],
  modulos = [],
  estruturas = [],
  parametros = {},
  origin,
  children,
  ...rest
}: any) => {
  const { handleSubmit, ...form } = GetForm();
  const distribuidorSelecionadoOpcao = (form as any).watch(
    "codDistribuidor_tabela_preco"
  );
  const distribuidorSelecionadoValor =
    distribuidorSelecionadoOpcao?.value ?? distribuidorSelecionadoOpcao;
  const { id: distribuidorSelecionado, nativo: distribuidorNativoSelecionado } =
    decodificarDistribuidorOpcao(distribuidorSelecionadoValor);
  const [linhas, setLinhas] = useState<LinhaTabelaPreco[]>([
    linhaVaziaTabelaPreco(),
  ]);
  const [linhasInitKey, setLinhasInitKey] = useState(0);
  const [configHeader, setConfigHeader] = useState<ConfigHeaderTabelaPreco>(
    () => montarConfigHeaderFromDefaults(defaultValues, parametros)
  );
  const [isExportandoLinhas, setIsExportandoLinhas] = useState(false);
  const [isImportandoLinhas, setIsImportandoLinhas] = useState(false);
  const fileInputImportarRef = useRef<HTMLInputElement>(null);

  const handleExportarLinhas = () => {
    if (!defaultValues?.id_tabela_preco) return;
    setIsExportandoLinhas(true);
    exportarTabelaPrecoExcel(defaultValues.id_tabela_preco, false)
      .then(baixarArquivoBase64)
      .catch(() => toast.error("Erro ao exportar a tabela"))
      .finally(() => setIsExportandoLinhas(false));
  };

  const handleAbrirImportarLinhas = () => {
    fileInputImportarRef.current?.click();
  };

  // Re-busca essa tabela (já com as linhas recém importadas) e reaplica o
  // mesmo pipeline de normalização que o carregamento inicial usa — evita
  // depender de como a tela de Lista escolhe re-passar `defaultValues` pro
  // modal de edição aberto.
  const recarregarLinhasAposImportar = async () => {
    const idTabela = defaultValues?.id_tabela_preco;
    if (!idTabela) return;
    const todasTabelas = await listarTabelasPrecos();
    const tabelaAtualizada = (todasTabelas || []).find(
      (t: any) => String(t.id_tabela_preco) === String(idTabela)
    );
    if (!tabelaAtualizada?.linhas?.length) return;

    const estruturasAtuais = configHeader.idsEstrutura
      .map((id) =>
        (estruturas || []).find((item: any) => String(item.id_item) === String(id))
      )
      .filter(Boolean);
    const configCalculoAtual = montarConfigCalculo(
      configHeader,
      estruturasAtuais,
      parametros
    );

    setLinhas(
      tabelaAtualizada.linhas.map((linha: any) =>
        aplicarSugestaoDescricao(
          normalizarLinhaFromApi(linha, inversores, configCalculoAtual)
        )
      )
    );
    setLinhasInitKey((key) => key + 1);
  };

  const handleImportarLinhas = async (e: any) => {
    const file = e.target?.files?.[0];
    if (!file) return;

    if (!/\.(xlsx|xls)$/i.test(file.name)) {
      toast.error("Selecione um arquivo .xlsx ou .xls");
      if (fileInputImportarRef.current) fileInputImportarRef.current.value = "";
      return;
    }

    setIsImportandoLinhas(true);
    const formData = new FormData();
    formData.append("arquivo", file);

    try {
      const response = await importarLinhasTabelaPreco(formData);
      if (response?.status === 1) {
        toast.success(
          `Importação concluída — inseridos: ${response.total_inseridos ?? 0}, atualizados: ${response.total_atualizados ?? 0}`
        );
        if (response.erros?.length > 0) {
          Swal.fire({
            icon: "warning",
            title: `${response.erros.length} linha(s) da planilha com erro`,
            html: `<div style="text-align:left">${response.erros
              .map((erro: string) => `<p>• ${erro}</p>`)
              .join("")}</div>`,
          });
        }
        await recarregarLinhasAposImportar();
      } else {
        toast.error(response?.msg || "Erro na importação");
      }
    } catch (err: any) {
      toast.error(err?.message || "Erro na importação");
    } finally {
      setIsImportandoLinhas(false);
      if (fileInputImportarRef.current) fileInputImportarRef.current.value = "";
    }
  };

  const modulosFiltrados = useMemo(
    () =>
      (modulos || []).filter(
        (item: any) =>
          String(item.status_item) === "1" &&
          distribuidorCompativel(
            item.codDistribuidor_item,
            distribuidorSelecionado,
            item.tipoOrigem_item,
            distribuidorNativoSelecionado
          )
      ),
    [modulos, distribuidorSelecionado, distribuidorNativoSelecionado]
  );

  const inversoresFiltrados = useMemo(
    () =>
      (inversores || []).filter(
        (item: any) =>
          String(item.status_item) === "1" &&
          distribuidorCompativel(
            item.codDistribuidor_item,
            distribuidorSelecionado,
            item.tipoOrigem_item,
            distribuidorNativoSelecionado
          )
      ),
    [inversores, distribuidorSelecionado, distribuidorNativoSelecionado]
  );

  const estruturasFiltradas = useMemo(
    () =>
      (estruturas || []).filter(
        (item: any) =>
          String(item.status_item) === "1" &&
          distribuidorCompativel(
            item.codDistribuidor_item,
            distribuidorSelecionado,
            item.tipoOrigem_item,
            distribuidorNativoSelecionado
          )
      ),
    [estruturas, distribuidorSelecionado, distribuidorNativoSelecionado]
  );

  const moduloSelecionado = (modulos || []).find(
    (item: any) => String(item.id_item) === String(configHeader.idModulo)
  );

  const onChangeModulo = (e: any) => {
    const item = (modulos || []).find(
      (m: any) => String(m.id_item) === String(e.value)
    );
    const potenciaModuloNova = Number(item?.potencia_item || 0);
    setConfigHeader((prev) => ({
      ...prev,
      idModulo: e.value,
      potenciaModulo: potenciaModuloNova,
      valorModulo: Number(item?.precoUnitario_item || 0),
      // Só recalcula a sugestão se o usuário ainda não tiver editado esses
      // campos manualmente — não sobrescreve um valor customizado.
      geracaoNorte: prev.geracaoNorteManual
        ? prev.geracaoNorte
        : calcularSugestaoGeracao(potenciaModuloNova, FATOR_GERACAO_NORTE),
      geracaoLesteOeste: prev.geracaoLesteOesteManual
        ? prev.geracaoLesteOeste
        : calcularSugestaoGeracao(potenciaModuloNova, FATOR_GERACAO_LESTE_OESTE),
    }));
  };

  const estruturasSelecionadas = useMemo(
    () =>
      configHeader.idsEstrutura
        .map((id) =>
          (estruturas || []).find(
            (item: any) => String(item.id_item) === String(id)
          )
        )
        .filter(Boolean),
    [configHeader.idsEstrutura, estruturas]
  );

  const lojaSelecionadaOpcao = (form as any).watch("loja_tabela_preco");
  const lojaLabel = lojaSelecionadaOpcao?.label || "TODAS";
  const distribuidorLabel = distribuidorSelecionadoOpcao?.label || "TODOS";
  const estruturaFiltroLabel =
    estruturasSelecionadas.map((item: any) => item.descricao_item).join(", ") ||
    "TODOS";
  const descricaoTabelaAtual =
    (form as any).watch("descricao_tabela_preco") ||
    defaultValues?.descricao_tabela_preco ||
    "";
  const descricaoComponentesTabelaAtual =
    (form as any).watch("descricaoComponentes_tabela_preco") ||
    defaultValues?.descricaoComponentes_tabela_preco ||
    "";

  const aplicarSugestaoDescricao = (
    linha: LinhaTabelaPreco
  ): LinhaTabelaPreco => {
    if (ehFlagManualAtiva(linha.descricaoComponenteManual_linha)) return linha;
    const sugestao = montarDescricaoComponenteLinha(
      {
        id_tabela_preco: defaultValues?.id_tabela_preco || 0,
        descricao_tabela_preco: descricaoTabelaAtual,
        descricaoComponentes_tabela_preco: descricaoComponentesTabelaAtual,
        cod_tabela_preco:
          origin === "edit" ? defaultValues?.cod_tabela_preco : undefined,
      },
      linha,
      {
        loja: lojaLabel,
        distribuidor: distribuidorLabel,
        telhado: estruturaFiltroLabel,
      }
    );
    return {
      ...linha,
      descricao_componente: sugestao,
      descricao_componente_linha: sugestao,
    };
  };

  useEffect(() => {
    const novoConfigHeader = montarConfigHeaderFromDefaults(
      defaultValues,
      parametros
    );
    setConfigHeader(novoConfigHeader);

    if (defaultValues?.linhas?.length) {
      const estruturasIniciais = novoConfigHeader.idsEstrutura
        .map((id) =>
          (estruturas || []).find(
            (item: any) => String(item.id_item) === String(id)
          )
        )
        .filter(Boolean);
      const configCalculoInicial = montarConfigCalculo(
        novoConfigHeader,
        estruturasIniciais,
        parametros
      );
      setLinhas(
        defaultValues.linhas.map((linha: any) =>
          aplicarSugestaoDescricao(
            normalizarLinhaFromApi(linha, inversores, configCalculoInicial)
          )
        )
      );
    }
    setLinhasInitKey((key) => key + 1);
    // Só reinicializa ao abrir/trocar a tabela — não quando catálogos recarregam
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [defaultValues?.id_tabela_preco, defaultValues?.linhas, parametros]);

  const configCalculo = useMemo(
    () => montarConfigCalculo(configHeader, estruturasSelecionadas, parametros),
    [configHeader, estruturasSelecionadas, parametros]
  );

  const categoriasEstruturaDisponiveis = useMemo(() => {
    const vistos: Record<string, boolean> = {};
    const categorias: { sigla: string; label: string }[] = [];
    for (const item of estruturasSelecionadas) {
      const sigla = String((item as any)?.tipoTelhado_item || "").toLowerCase();
      if (sigla && !vistos[sigla]) {
        vistos[sigla] = true;
        categorias.push({ sigla, label: obterLabelCategoriaTelhado(sigla) });
      }
    }
    return categorias;
  }, [estruturasSelecionadas]);

  const estruturaOpcoes = useMemo(() => {
    const vistos: Record<string, boolean> = {};
    const lista: any[] = [];
    for (const item of [...estruturasFiltradas, ...estruturasSelecionadas]) {
      const id = String((item as any)?.id_item ?? "");
      if (id && !vistos[id]) {
        vistos[id] = true;
        lista.push(item);
      }
    }
    return lista.map((item: any) => ({
      value: item.id_item,
      label: `${item.descricao_item} (${obterLabelCategoriaTelhado(item.tipoTelhado_item)})`,
    }));
  }, [estruturasFiltradas, estruturasSelecionadas]);

  const onChangeEstruturaFiltro = (e: any) => {
    const selecionadas = Array.isArray(e) ? e : e ? [e] : [];
    setConfigHeader((prev) => ({
      ...prev,
      idsEstrutura: selecionadas.map((opt: any) => opt.value),
    }));
  };

  useEffect(() => {
    setLinhas((prev) =>
      prev.map((linha) =>
        aplicarSugestaoDescricao(
          recalcularLinhaTabelaPreco(linha, inversores, configCalculo)
        )
      )
    );
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [
    configCalculo,
    inversores,
    lojaLabel,
    distribuidorLabel,
    estruturaFiltroLabel,
    descricaoTabelaAtual,
  ]);

  const atualizarLinha = (index: number, campo: string, valor: any) => {
    setLinhas((prev) => {
      const novas = [...prev];
      const atualizada: any = { ...novas[index], [campo]: valor };

      if (campo === "qtd_modulos") {
        atualizada.qtd_modulos_linha = valor;
      }
      if (campo === "descricao_componente") {
        atualizada.descricao_componente_linha = valor;
        atualizada.descricaoComponenteManual_linha = true;
      }

      let recalculada = recalcularLinhaTabelaPreco(
        atualizada,
        inversores,
        configCalculo
      );
      if (campo !== "descricao_componente") {
        recalculada = aplicarSugestaoDescricao(recalculada);
      }
      novas[index] = recalculada;
      return novas;
    });
  };

  const atualizarCustoEstrutura = (
    index: number,
    sigla: string,
    valor: number
  ) => {
    const atualAntes: any = linhas[index];
    if (atualAntes) {
      const semManual = {
        ...atualAntes,
        custosPorEstrutura_linha: {
          ...(atualAntes.custosPorEstrutura_linha || {}),
          [sigla]: {
            ...(atualAntes.custosPorEstrutura_linha?.[sigla] || {}),
            manual: false,
          },
        },
      };
      const sugestao = recalcularLinhaTabelaPreco(
        semManual,
        inversores,
        configCalculo
      ).custosPorEstrutura_linha?.[sigla]?.custo;
      avisarSeAbaixoDaSugestao(
        `Custo do Kit (${obterLabelCategoriaTelhado(sigla)})`,
        valor,
        Number(sugestao || 0)
      );
    }

    setLinhas((prev) => {
      const novas = [...prev];
      const atual: any = novas[index];
      const custosAtualizados = {
        ...(atual.custosPorEstrutura_linha || {}),
        [sigla]: {
          ...(atual.custosPorEstrutura_linha?.[sigla] || {}),
          custo: valor,
          manual: true,
        },
      };
      novas[index] = recalcularLinhaTabelaPreco(
        { ...atual, custosPorEstrutura_linha: custosAtualizados },
        inversores,
        configCalculo
      );
      return novas;
    });
  };

  const atualizarCapacidadeMaximaInversor = (index: number, valor: number) => {
    const atualAntes: any = linhas[index];
    if (!atualAntes) return;

    const qtdModulos = Number(
      atualAntes.qtd_modulos ?? atualAntes.qtd_modulos_linha ?? 0
    );

    // Nunca infla a Capac. Máx. Inversor pra "caber" a Qtde Mod digitada —
    // isso mascarava um inversor que de fato não suporta a quantidade
    // informada. Só avisa e mantém o valor anterior; quem resolve é o
    // usuário (reduzindo módulos, trocando/aumentando inversor ou
    // aumentando o overload dele).
    if (valor < qtdModulos) {
      handleSweetAlert({
        icon: "error",
        title: "Inversor não suporta a quantidade de módulos",
        showDenyButton: false,
        confirmButtonText: "Ok",
        html: `A Capac. Máx. Inversor (${valor}) informada é menor que a Qtde Mod (${qtdModulos}) desta linha — o inversor não suporta essa quantidade. Escolha uma opção:<br/>1) Reduza a Qtde Mod;<br/>2) Aumente a quantidade de inversores ou troque por um de potência maior;<br/>3) Aumente o Overload do inversor (cadastro de Inversores) pra suportar mais módulos.`,
      });
      setLinhasInitKey((key) => key + 1);
      return;
    }

    const sugestao = recalcularLinhaTabelaPreco(
      { ...atualAntes, capacidadeMaximaInversorManual_linha: false },
      inversores,
      configCalculo
    ).capacidadeMaximaInversor_linha;
    avisarSeAbaixoDaSugestao(
      "Capac. Máx. Inversor",
      valor,
      Number(sugestao || 0)
    );

    setLinhas((prev) => {
      const novas = [...prev];
      const atual: any = novas[index];
      novas[index] = recalcularLinhaTabelaPreco(
        {
          ...atual,
          capacidadeMaximaInversor_linha: valor,
          capacidadeMaximaInversorManual_linha: true,
        },
        inversores,
        configCalculo
      );
      return novas;
    });
  };

  const atualizarMetrosCaboCC = (index: number, valor: number) => {
    const atualAntes: any = linhas[index];
    if (atualAntes) {
      const sugestao = recalcularLinhaTabelaPreco(
        { ...atualAntes, metrosCaboCCManual_linha: false },
        inversores,
        configCalculo
      ).metrosCaboCC_linha;
      avisarSeAbaixoDaSugestao("Metros Cabo CC", valor, Number(sugestao || 0));
    }

    setLinhas((prev) => {
      const novas = [...prev];
      const atual: any = novas[index];
      novas[index] = recalcularLinhaTabelaPreco(
        {
          ...atual,
          metrosCaboCC_linha: valor,
          metrosCaboCCManual_linha: true,
        },
        inversores,
        configCalculo
      );
      return novas;
    });
  };

  const submit = (data: any) => {
    // Capac. Máx. Inversor só é validada contra Qtde Mod no blur do input —
    // se o usuário salvar sem sair do campo (ex.: clicar direto em Salvar),
    // o valor inválido passava batido. Revalida tudo aqui como rede de
    // segurança antes de gravar. Nunca infla a capacidade pra "caber" a
    // qtde de módulos — isso esconderia um inversor que não suporta a
    // quantidade. Só bloqueia o salvamento e avisa; quem resolve é o
    // usuário.
    const linhasInvalidas: number[] = [];
    linhas.forEach((linha, index) => {
      const qtdModulos = Number(
        (linha as any).qtd_modulos ?? (linha as any).qtd_modulos_linha ?? 0
      );
      const capacidadeMaxima = Number(
        (linha as any).capacidadeMaximaInversor_linha ?? 0
      );
      if (capacidadeMaxima < qtdModulos) {
        linhasInvalidas.push(index + 1);
      }
    });

    if (linhasInvalidas.length > 0) {
      handleSweetAlert({
        icon: "error",
        title: "Inversor não suporta a quantidade de módulos",
        showDenyButton: false,
        confirmButtonText: "Ok",
        html: `A Capac. Máx. Inversor é menor que a Qtde Mod na(s) linha(s): ${linhasInvalidas.join(", ")} — o inversor não suporta essa quantidade de módulos. Escolha uma opção pra cada linha:<br/>1) Reduza a Qtde Mod;<br/>2) Aumente a quantidade de inversores ou troque por um de potência maior;<br/>3) Aumente o Overload do inversor (cadastro de Inversores) pra suportar mais módulos.`,
      });
      return;
    }

    if (data.codInversor_tabela_preco) {
      data.codInversor_tabela_preco = Array.isArray(
        data.codInversor_tabela_preco
      )
        ? data.codInversor_tabela_preco.join(",")
        : data.codInversor_tabela_preco;
    }

    const {
      id: distribuidorIdSelecionado,
      nativo: distribuidorNativoFinal,
    } = decodificarDistribuidorOpcao(data.codDistribuidor_tabela_preco);

    const lojaLabel =
      lojas.find(
        (l: any) => String(l.id_loja) === String(data.loja_tabela_preco)
      )?.nome_loja || "TODAS";
    const distribuidorLabel =
      (distribuidorNativoFinal ? distribuidoresNativos : distribuidores).find(
        (d: any) =>
          String(d.id_distribuidor) === String(distribuidorIdSelecionado)
      )?.nome_distribuidor || "TODOS";
    const estruturaFiltroLabel =
      estruturasSelecionadas
        .map((item: any) => item.descricao_item)
        .join(", ") || "TODOS";

    const linhasFormatadas = linhas.map((linha) => {
      const linhaCalculada = recalcularLinhaTabelaPreco(
        linha,
        inversores,
        configCalculo
      );
      const descricaoManual = ehFlagManualAtiva(
        linhaCalculada.descricaoComponenteManual_linha
      );
      const descricaoComponente = descricaoManual
        ? String(
            linhaCalculada.descricao_componente ??
              linhaCalculada.descricao_componente_linha ??
              ""
          )
        : montarDescricaoComponenteLinha(
          {
            id_tabela_preco: defaultValues?.id_tabela_preco || 0,
            descricao_tabela_preco: data.descricao_tabela_preco,
            descricaoComponentes_tabela_preco:
              data.descricaoComponentes_tabela_preco,
            cod_tabela_preco:
              origin === "edit" ? defaultValues?.cod_tabela_preco : undefined,
          },
          linhaCalculada,
          {
            loja: lojaLabel,
            distribuidor: distribuidorLabel,
            telhado: estruturaFiltroLabel,
          }
        );

      return {
        ...linhaCalculada,
        descricao_componente: descricaoComponente,
        descricao_componente_linha: descricaoComponente,
      };
    });

    const payload = {
      ...defaultValues,
      ...data,
      idsEstrutura_tabela_preco: configHeader.idsEstrutura.join(","),
      idModulo_tabela_preco: configHeader.idModulo,
      potenciaModulo_tabela_preco: configHeader.potenciaModulo,
      valorModulo_tabela_preco: configHeader.valorModulo,
      geracaoNorte_tabela_preco: configHeader.geracaoNorte,
      geracaoLesteOeste_tabela_preco: configHeader.geracaoLesteOeste,
      metrosCaboPorModulo_tabela_preco: configHeader.metrosCaboPorModulo,
      codDistribuidor_tabela_preco: distribuidorIdSelecionado || "*",
      distribuidorNativo_tabela_preco: distribuidorNativoFinal ? "1" : "0",
      tipoTelhado_tabela_preco: "*",
      estruturasPorTelhado_tabela_preco: JSON.stringify(
        configCalculo.estruturasPorTelhado || {}
      ),
      linhas: linhasFormatadas,
    };

    if (origin !== "edit") {
      delete payload.cod_tabela_preco;
      delete payload.id_tabela_preco;
      payload.status_tabela_preco = "1";
    } else {
      delete payload.status_tabela_preco;
    }

    return onSubmitFunction(payload);
  };

  return (
    <form
      onSubmit={handleSubmit(submit)}
      key={`${origin || "create"}-${defaultValues?.id_tabela_preco || "new"}-${linhasInitKey}`}
      {...rest}
    >
      <div className="rounded-lg border p-4 space-y-3 bg-gray-50 dark:bg-boxdark-2">
        <div className="font-semibold text-lg">Variações</div>
        <InputGroup>
          {origin === "edit" && (
            <>
              <Input
                label="Código"
                name="cod_tabela_preco"
                formulario={form}
                disabled
                defaultValue={defaultValues?.cod_tabela_preco}
              />
              <Input
                label="ID Item Vinculado"
                name="id_item_kit_tabela_preco"
                formulario={form}
                disabled
                defaultValue={defaultValues?.id_item_kit_tabela_preco}
              />
            </>
          )}
          <Input
            label="Descrição"
            name="descricao_tabela_preco"
            formulario={form}
            defaultValue={defaultValues?.descricao_tabela_preco}
          />
          <div>
            <Input
              label="Descrição para Componentes"
              name="descricaoComponentes_tabela_preco"
              formulario={form}
              defaultValue={defaultValues?.descricaoComponentes_tabela_preco}
            />
            <div className="text-xs text-gray-500 mt-1">
              Como o item aparece nos Componentes da proposta pro integrador —
              não mostra o nome do distribuidor/fornecedor.
            </div>
          </div>
          <InputSelectComponent
            label="Loja"
            name="loja_tabela_preco"
            formulario={form}
            options={[
              { value: "*", label: "Todas" },
              ...lojas.map((loja: any) => ({
                label: loja.nome_loja,
                value: loja.id_loja,
              })),
            ]}
            defaultValue={defaultValues?.loja_tabela_preco || "*"}
          />
          <InputSelectComponent
            label="Distribuidor/Fornecedor"
            name="codDistribuidor_tabela_preco"
            formulario={form}
            key={`distribuidor_${linhasInitKey}`}
            options={[
              ...(distribuidoresNativos || [])
                .filter((d: any) => String(d.status_distribuidor) === "1")
                .map((d: any) => ({
                  value: codificarDistribuidorOpcao(d.id_distribuidor, true),
                  label: `${d.nome_distribuidor} (Nativo)`,
                })),
              ...(distribuidores || [])
                .filter((d: any) => String(d.status_distribuidor) === "1")
                .map((d: any) => ({
                  value: codificarDistribuidorOpcao(d.id_distribuidor, false),
                  label: d.nome_distribuidor,
                })),
            ]}
            defaultValue={
              defaultValues?.codDistribuidor_tabela_preco
                ? codificarDistribuidorOpcao(
                    defaultValues.codDistribuidor_tabela_preco,
                    ehFlagManualAtiva(
                      defaultValues?.distribuidorNativo_tabela_preco
                    )
                  )
                : ""
            }
          />
          <div className="flex-1 min-w-[260px]">
            <InputSelectComponent
              label="Estrutura"
              isMulti
              key={`estruturaFiltro_${linhasInitKey}`}
              options={estruturaOpcoes}
              defaultValue={configHeader.idsEstrutura}
              onChange={onChangeEstruturaFiltro}
            />
          </div>
          <InputSelectComponent
            label="Mostrar Automaticamente nos Componentes"
            name="mostrarAut_tabela_preco"
            formulario={form}
            options={[
              { value: "1", label: "Sim" },
              { value: "0", label: "Não" },
            ]}
            defaultValue={defaultValues?.mostrarAut_tabela_preco ?? "0"}
          />
        </InputGroup> 

        <InputGroup>
          <div className="flex-1 min-w-[260px]">
            <InputSelectComponent
              label="Módulo"
              key={`modulo_${linhasInitKey}_${distribuidorSelecionado}_${distribuidorNativoSelecionado}`}
              options={modulosFiltrados.map((item: any) => ({
                value: item.id_item,
                label: item.descricao_item,
              }))}
              defaultValue={configHeader.idModulo || ""}
              onChange={onChangeModulo}
            />
            <div className="text-xs text-gray-500 mt-1">
              Potência: {formatarValorTabela(moduloSelecionado?.potencia_item)}{" "}
              W · Valor Unitário: R${" "}
              {formatarValorTabela(moduloSelecionado?.precoUnitario_item)}
            </div>
          </div>
          <Input
            label={
              <LabelComAviso texto="Sugestão de Geração Média (kwh) NORTE" />
            }
            mascara="numero"
            key={`geracaoNorte_${linhasInitKey}_${configHeader.idModulo}`}
            defaultValue={FormatFields.formatarNumero(
              configHeader.geracaoNorte || 0
            )}
            onChange={(e: any) =>
              setConfigHeader((prev) => ({
                ...prev,
                geracaoNorte: Number(
                  FormatFields.desformatarNumeros(e.target.value)
                ),
                geracaoNorteManual: true,
              }))
            }
          />
          <Input
            label={
              <LabelComAviso texto="Sugestão de Geração Média (kwh) LESTE/OESTE" />
            }
            mascara="numero"
            key={`geracaoLesteOeste_${linhasInitKey}_${configHeader.idModulo}`}
            defaultValue={FormatFields.formatarNumero(
              configHeader.geracaoLesteOeste || 0
            )}
            onChange={(e: any) =>
              setConfigHeader((prev) => ({
                ...prev,
                geracaoLesteOeste: Number(
                  FormatFields.desformatarNumeros(e.target.value)
                ),
                geracaoLesteOesteManual: true,
              }))
            }
          />
          <Input
            label="Metros de Cabo Solar por Módulo"
            mascara="numero"
            key={`metrosCaboPorModulo_${linhasInitKey}`}
            defaultValue={FormatFields.formatarNumero(
              configHeader.metrosCaboPorModulo || 0
            )}
            onChange={(e: any) =>
              setConfigHeader((prev) => ({
                ...prev,
                metrosCaboPorModulo: Number(
                  FormatFields.desformatarNumeros(e.target.value)
                ),
              }))
            }
          />
        </InputGroup>

        <div>
          <div className="text-xs font-semibold uppercase text-gray-500 mb-2">
            Estrutura de Fixação por Telhado
          </div>
          {estruturasSelecionadas.length === 0 ? (
            <div className="text-sm text-gray-500 italic">
              Selecione ao menos uma Estrutura em &quot;Validações&quot; para ver os dados
              aqui.
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              {estruturasSelecionadas.map((item: any) => (
                <div
                  key={item.id_item}
                  className="rounded-md border bg-white dark:bg-black-2/20 p-3"
                >
                  <div className="font-medium text-sm">
                    {item.descricao_item}
                  </div>
                  <div className="text-xs text-gray-500 mt-2">
                    Tipo Telhado:{" "}
                    {obterLabelCategoriaTelhado(item.tipoTelhado_item) || "-"} ·
                    Agrupamento: {item.agrupamento_modulos_item || 0} · R${" "}
                    {formatarValorTabela(item.precoUnitario_item)}
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>

      <div className="mt-6 space-y-3">
        <div className="flex flex-wrap items-center justify-between gap-2">
          <div className="font-semibold text-lg text-body dark:text-bodydark2">
            Valores dos Kits
          </div>
          {origin === "edit" && (
            <div className="flex gap-2">
              <Button
                type="button"
                className="bg-success gap-2"
                loading={isExportandoLinhas}
                disabled={isExportandoLinhas}
                onClick={handleExportarLinhas}
              >
                <FileSpreadsheet size={16} /> Exportar
              </Button>
              <input
                ref={fileInputImportarRef}
                type="file"
                accept=".xlsx,.xls"
                hidden
                onChange={handleImportarLinhas}
              />
              <Button
                type="button"
                className="gap-2"
                loading={isImportandoLinhas}
                disabled={isImportandoLinhas}
                onClick={handleAbrirImportarLinhas}
              >
                <Upload size={16} /> Importar
              </Button>
            </div>
          )}
        </div>
        <div className="overflow-x-auto rounded-lg border">
          <Table className="min-w-full bg-white dark:bg-boxdark-2 text-sm [&_td]:px-3 [&_td]:py-2 [&_th]:px-3 [&_th]:py-2 [&_th]:h-auto">
            <TableHeader>
              <TableRow className="bg-gray dark:bg-graydark [&>th]:whitespace-nowrap [&>th]:text-xs [&>th]:font-semibold [&>th]:text-center">
                <TableHead
                  rowSpan={2}
                  className="w-10 bg-gray dark:bg-graydark"
                ></TableHead>
                {origin === "edit" && (
                  <TableHead rowSpan={2} className="text-body dark:text-bodydark2 bg-gray dark:bg-graydark">
                    ID Linha
                  </TableHead>
                )}
                {origin === "edit" && (
                  <TableHead rowSpan={2} className="text-body dark:text-bodydark2 bg-gray dark:bg-graydark">
                    Origem
                  </TableHead>
                )}
                <TableHead rowSpan={2} className="text-body dark:text-bodydark2 bg-gray dark:bg-graydark">
                  Qtde Mod
                </TableHead>
                <TableHead rowSpan={2} className="text-body dark:text-bodydark2 bg-gray dark:bg-graydark">
                  Pot. Sistema (kWp)
                </TableHead>
                <TableHead rowSpan={2} className="text-body dark:text-bodydark2 bg-gray dark:bg-graydark">
                  Geração Norte
                </TableHead>
                <TableHead rowSpan={2} className="text-body dark:text-bodydark2 bg-gray dark:bg-graydark">
                  Geração L/O
                </TableHead>
                <TableHead
                  rowSpan={2}
                  className="min-w-[360px] text-left text-body dark:text-bodydark2 bg-gray dark:bg-graydark"
                >
                  Inversor(es)
                </TableHead>
                <TableHead rowSpan={2} className="text-body dark:text-bodydark2 bg-gray dark:bg-graydark">
                  Fase
                </TableHead>
                <TableHead rowSpan={2} className="text-body dark:text-bodydark2 bg-gray dark:bg-graydark">
                  Pot. Nominal Inv. (kW)
                </TableHead>
                <TableHead rowSpan={2} className="text-body dark:text-bodydark2 bg-gray dark:bg-graydark">
                  Pot. Total c/ Overload (kW)
                </TableHead>
                <TableHead rowSpan={2} className="text-body dark:text-bodydark2 bg-gray dark:bg-graydark">
                  Capac. Máx. Inversor
                </TableHead>
                <TableHead
                  rowSpan={2}
                  className="min-w-[220px] text-left text-body dark:text-bodydark2 bg-gray dark:bg-graydark"
                >
                  Descrição p/ Componentes
                </TableHead>
                <TableHead rowSpan={2} className="text-body dark:text-bodydark2 bg-gray dark:bg-graydark">
                  Metros Cabo CC
                </TableHead>
                {categoriasEstruturaDisponiveis.map((cat, i) => (
                  <TableHead
                    key={cat.sigla}
                    colSpan={2}
                    className={`${CORES_GRUPO_CABECALHO[i % CORES_GRUPO_CABECALHO.length]} border-l`}
                  >
                    {cat.label}
                  </TableHead>
                ))}
              </TableRow>
              <TableRow className="bg-white dark:bg-boxdark-2 [&>th]:whitespace-nowrap [&>th]:text-xs [&>th]:font-semibold [&>th]:text-center [&>th]:h-8">
                {categoriasEstruturaDisponiveis.map((cat) => (
                  <Fragment key={cat.sigla}>
                    <TableHead className="bg-white dark:bg-boxdark-2 text-body dark:text-bodydark2 border-l">
                      Qtd Estrut.
                    </TableHead>
                    <TableHead className="bg-white dark:bg-boxdark-2 text-body dark:text-bodydark2">
                      Custo Kit
                    </TableHead>
                  </Fragment>
                ))}
              </TableRow>
            </TableHeader>
            <TableBody>
              {linhas.map((linha, index) => {
                const qtdInversores = (linha.inversores || []).reduce(
                  (acc, inv) =>
                    acc + (Number(inv.qtd ?? inv.quantidade ?? 1) || 0),
                  0
                );

                return (
                  <TableRow
                    key={`linha-${linha.id_linha_tabela_preco || index}-${linhasInitKey}`}
                    className="even:bg-gray-50/60 dark:even:bg-black-2/10 [&>td]:align-middle [&>td]:text-center"
                  >
                    <TableCell>
                      <Button
                        type="button"
                        className="buttonDanger px-2 py-1"
                        title="Excluir linha"
                        onClick={() =>
                          setLinhas((prev) =>
                            prev.filter((_, i) => i !== index)
                          )
                        }
                      >
                        <Trash2 size={14} />
                      </Button>
                    </TableCell>
                    {origin === "edit" && (
                      <TableCell className={CAMPO_FORMULA_CLASS}>
                        {linha.id_linha_tabela_preco ?? "-"}
                      </TableCell>
                    )}
                    {origin === "edit" && (
                      <TableCell className={CAMPO_FORMULA_CLASS}>
                        {linha.id_linha_tabela_preco ? (
                          <span
                            className={`text-xs font-semibold px-2 py-1 rounded-full whitespace-nowrap ${
                              linha.origem_linha_tabela_preco === "importado"
                                ? "bg-sky-100 text-sky-700 dark:bg-sky-900 dark:text-sky-200"
                                : "bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-200"
                            }`}
                          >
                            {linha.origem_linha_tabela_preco === "importado"
                              ? "Importado da Planilha"
                              : "Digitado"}
                          </span>
                        ) : (
                          "-"
                        )}
                      </TableCell>
                    )}
                    <TableCell>
                      <Input
                        mascara="numerico"
                        width="w-20 mx-auto"
                        key={`qtd_modulos_${index}_${linhasInitKey}`}
                        defaultValue={String(linha.qtd_modulos ?? "")}
                        onChange={(e: any) =>
                          atualizarLinha(
                            index,
                            "qtd_modulos",
                            Math.max(
                              0,
                              parseInt(
                                FormatFields.formatarNumerico(e.target.value) ||
                                  "0",
                                10
                              ) || 0
                            )
                          )
                        }
                        onBlur={(e: any) => {
                          const capacidade = Number(
                            linhas[index]?.capacidadeMaximaInversor_linha || 0
                          );
                          const valorDigitado = Math.max(
                            0,
                            parseInt(
                              FormatFields.formatarNumerico(e.target.value) ||
                                "0",
                              10
                            ) || 0
                          );
                          if (capacidade > 0 && valorDigitado > capacidade) {
                            handleSweetAlert({
                              icon: "error",
                              title: "Inversor não suporta a quantidade de módulos",
                              showDenyButton: false,
                              confirmButtonText: "Ok",
                              html: `A Qtde Mod (${valorDigitado}) informada é maior do que a Capac. Máx. Inversor (${capacidade}) desta linha — o inversor não suporta essa quantidade. Escolha uma opção:<br/>1) Reduza a Qtde Mod;<br/>2) Aumente a quantidade de inversores ou troque por um de potência maior;<br/>3) Aumente o Overload do inversor (cadastro de Inversores) pra suportar mais módulos.`,
                            });
                          }
                        }}
                      />
                    </TableCell>
                    <TableCell
                      className={`font-medium whitespace-nowrap ${CAMPO_FORMULA_CLASS}`}
                    >
                      {FormatFields.formatarNumero(linha.potencia_sistema || 0)}
                    </TableCell>
                    <TableCell
                      className={`whitespace-nowrap ${CAMPO_FORMULA_CLASS}`}
                    >
                      {FormatFields.formatarNumero(
                        linha.geracaoNorte_linha || 0
                      )}
                    </TableCell>
                    <TableCell
                      className={`whitespace-nowrap ${CAMPO_FORMULA_CLASS}`}
                    >
                      {FormatFields.formatarNumero(
                        linha.geracaoLesteOeste_linha || 0
                      )}
                    </TableCell>
                    <TableCell className="text-left">
                      <div className="flex flex-col gap-1.5">
                        {(linha.inversores || []).map((inv, invIndex) => (
                          <div
                            key={invIndex}
                            className="grid grid-cols-[64px_1fr_36px] gap-1.5 items-center"
                          >
                            <Input
                              mascara="numerico"
                              key={`inv_qtd_${index}_${invIndex}_${linhasInitKey}`}
                              defaultValue={String(inv.qtd ?? 1)}
                              onChange={(e: any) => {
                                const novosInversores = [
                                  ...(linha.inversores || []),
                                ];
                                novosInversores[invIndex] = {
                                  ...novosInversores[invIndex],
                                  qtd: Math.max(
                                    1,
                                    parseInt(
                                      FormatFields.formatarNumerico(
                                        e.target.value
                                      ) || "1",
                                      10
                                    ) || 1
                                  ),
                                };
                                atualizarLinha(
                                  index,
                                  "inversores",
                                  novosInversores
                                );
                              }}
                            />
                            <InputSelectComponent
                              key={`inv_desc_${index}_${invIndex}_${linhasInitKey}_${distribuidorSelecionado}_${distribuidorNativoSelecionado}`}
                              options={inversoresFiltrados.map((item: any) => ({
                                value: item.descricao_item,
                                label: item.descricao_item,
                              }))}
                              defaultValue={inv.descricao || ""}
                              onChange={(e: any) => {
                                const item = inversores.find(
                                  (invItem: any) =>
                                    invItem.descricao_item === e.label ||
                                    invItem.descricao_item === e.value
                                );
                                const novosInversores = [
                                  ...(linha.inversores || []),
                                ];
                                novosInversores[invIndex] = {
                                  ...novosInversores[invIndex],
                                  descricao: e.label,
                                  id_item: item?.id_item,
                                  potencia_item: item?.potencia_item,
                                  overload_item: item?.overload_item,
                                };
                                atualizarLinha(
                                  index,
                                  "inversores",
                                  novosInversores
                                );
                              }}
                            />
                            {(linha.inversores || []).length > 1 ? (
                              <Button
                                type="button"
                                className="buttonDanger px-2 py-1 h-[38px]"
                                title="Excluir inversor"
                                onClick={() => {
                                  const novosInversores = (
                                    linha.inversores || []
                                  ).filter((_, i) => i !== invIndex);
                                  atualizarLinha(
                                    index,
                                    "inversores",
                                    novosInversores
                                  );
                                }}
                              >
                                <Trash2 size={14} />
                              </Button>
                            ) : (
                              <div />
                            )}
                          </div>
                        ))}
                        <div className="flex items-center justify-between gap-2 pt-0.5">
                          <Button
                            type="button"
                            className="buttonPrimary px-2 py-1 text-xs"
                            onClick={() =>
                              atualizarLinha(index, "inversores", [
                                ...(linha.inversores || []),
                                { qtd: 1, descricao: "" },
                              ])
                            }
                          >
                            + Inversor
                          </Button>
                          <div className="text-xs text-gray-500 whitespace-nowrap">
                            Qtde Inv: {qtdInversores}
                          </div>
                        </div>
                      </div>
                    </TableCell>
                    <TableCell
                      className={`whitespace-nowrap ${CAMPO_FORMULA_CLASS}`}
                    >
                      {resolverFasesInversoresLinha(
                        linha.inversores,
                        inversores
                      ) || "-"}
                    </TableCell>
                    <TableCell
                      className={`whitespace-nowrap ${CAMPO_FORMULA_CLASS}`}
                    >
                      {FormatFields.formatarNumero(
                        linha.potenciaNominalInversores_linha || 0
                      )}
                    </TableCell>
                    <TableCell
                      className={`whitespace-nowrap ${CAMPO_FORMULA_CLASS}`}
                    >
                      {FormatFields.formatarNumero(
                        linha.potencia_total_inversores || 0
                      )}
                    </TableCell>
                    <TableCell>
                      <Input
                        mascara="numerico"
                        width="w-24 mx-auto"
                        key={`capacidadeMaximaInversor_${index}_${linhasInitKey}_${
                          ehFlagManualAtiva(
                            linha.capacidadeMaximaInversorManual_linha
                          )
                            ? "manual"
                            : linha.capacidadeMaximaInversor_linha
                        }`}
                        defaultValue={String(
                          Math.trunc(linha.capacidadeMaximaInversor_linha || 0)
                        )}
                        onBlur={(e: any) =>
                          atualizarCapacidadeMaximaInversor(
                            index,
                            Math.max(
                              0,
                              parseInt(
                                FormatFields.formatarNumerico(e.target.value) ||
                                  "0",
                                10
                              ) || 0
                            )
                          )
                        }
                        onKeyDown={(e: any) => {
                          if (e.key === "Enter") {
                            e.preventDefault();
                            e.target.blur();
                          }
                        }}
                      />
                    </TableCell>
                    <TableCell className="text-left">
                      <Input
                        key={`descricao_componente_${index}_${linhasInitKey}_${
                          ehFlagManualAtiva(
                            linha.descricaoComponenteManual_linha
                          )
                            ? "manual"
                            : linha.descricao_componente || ""
                        }`}
                        defaultValue={linha.descricao_componente || ""}
                        onChange={(e: any) =>
                          atualizarLinha(
                            index,
                            "descricao_componente",
                            e.target.value
                          )
                        }
                      />
                    </TableCell>
                    <TableCell>
                      <Input
                        mascara="numero"
                        width="w-24 mx-auto"
                        key={`metrosCaboCC_${index}_${linhasInitKey}_${
                          ehFlagManualAtiva(linha.metrosCaboCCManual_linha)
                            ? "manual"
                            : linha.metrosCaboCC_linha
                        }`}
                        defaultValue={FormatFields.formatarNumero(
                          linha.metrosCaboCC_linha || 0
                        )}
                        onBlur={(e: any) =>
                          atualizarMetrosCaboCC(
                            index,
                            Number(
                              FormatFields.desformatarNumeros(e.target.value)
                            )
                          )
                        }
                      />
                    </TableCell>
                    {categoriasEstruturaDisponiveis.map((cat) => {
                      const dados = linha.custosPorEstrutura_linha?.[
                        cat.sigla
                      ] || { qtd: 0, custo: 0 };
                      return (
                        <Fragment key={cat.sigla}>
                          <TableCell
                            className={`border-l ${CAMPO_FORMULA_CLASS}`}
                          >
                            {dados.qtd || 0}
                          </TableCell>
                          <TableCell>
                            <Input
                              mascara="numero"
                              prefix="R$"
                              width="w-28 mx-auto"
                              key={`custo_${cat.sigla}_${index}_${linhasInitKey}_${
                                ehFlagManualAtiva(dados.manual)
                                  ? "manual"
                                  : dados.custo
                              }`}
                              defaultValue={FormatFields.formatarNumero(
                                dados.custo || 0
                              )}
                              onBlur={(e: any) =>
                                atualizarCustoEstrutura(
                                  index,
                                  cat.sigla,
                                  Number(
                                    FormatFields.desformatarNumeros(
                                      e.target.value
                                    )
                                  )
                                )
                              }
                            />
                          </TableCell>
                        </Fragment>
                      );
                    })}
                  </TableRow>
                );
              })}
            </TableBody>
          </Table>
        </div>

        <Button
          type="button"
          className="buttonPrimary"
          onClick={() =>
            setLinhas((prev) => {
              const ultimaLinha = prev[prev.length - 1];
              const inversoresIniciais = ultimaLinha?.inversores?.length
                ? ultimaLinha.inversores.map((inv: any) => ({ ...inv }))
                : linhaVaziaTabelaPreco().inversores;
              return [
                ...prev,
                aplicarSugestaoDescricao(
                  recalcularLinhaTabelaPreco(
                    {
                      ...linhaVaziaTabelaPreco(),
                      inversores: inversoresIniciais,
                    },
                    inversores,
                    configCalculo
                  )
                ),
              ];
            })
          }
        >
          <Plus size={16} className="mr-2" /> Adicionar linha
        </Button>
      </div>

      {children}
    </form>
  );
};

export default FormTabelaPreco;