"use client";
import { InversorModal } from "@/components/common/InversorModal";
import { OptionalLabel } from "@/components/common/OptionalLabel";
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 { Button } from "@/components/ui/button";
import { useInversorModal } from "@/hooks/useInversorModal";
import { listarItenskitsDiversos } from "@/requests/CRUD/ColetaDados/listarItenskitsDiversos";
import { listarTiposItensKit } from "@/requests/CRUD/ColetaDados/listarTiposItensKit";
import { listarItensCompostos } from "@/requests/CRUD/ItemComposto/listarItem";
import { useAuth } from "@/src/contexts/authContext";
import { FormatFields, GetForm } from "@/utils";
import { formatLabelTipoEdificacao } from "@/utils/formatTipoEdificacao";
import { GripHorizontal, InfoIcon, Plus, Trash2 } from "lucide-react";
import { useEffect, useMemo, useState } from "react";
import { toast } from "react-toastify";
import ItemComposto from "./ItemComposto";
type TipoItem = {
  id_tipo_item: string;
  nome_tipo_item: string;
};
interface PotencyRange {
  id: string;
  from: string | number;
  to: string | number;
  precoUnitario: string | number;
  desc?: string;
}

type Item = {
  id_item: string;
  descricao_item: string;
  precoUnitario_item: number;
  tipo_item: string;
  status_item: string;
};
const toNumber = (v?: string | number) => {
  if (v === null || v === undefined) return 0;
  if (typeof v === "number") return v;

  const normalized = v
    .trim()
    .replace(/\s/g, "")
    .replace(/\.(?=\d{3})/g, "") // remove ponto só se for milhar
    .replace(",", ".");

  const n = Number(normalized);
  return isNaN(n) ? 0 : n;
};

const extrairValorSelect = (valor: any) => {
  if (valor && typeof valor === "object" && "value" in valor) {
    return valor.value;
  }
  return valor;
};

const serializarInversores = (valor: any) => {
  if (!valor) return undefined;
  if (Array.isArray(valor)) {
    return valor
      .map((item) => extrairValorSelect(item))
      .filter(Boolean)
      .join(",");
  }
  return String(valor);
};

const serializarTiposEdificacao = (valor: any) => {
  if (!valor) return "*";
  if (Array.isArray(valor)) {
    const valores = valor
      .map((item) => extrairValorSelect(item))
      .filter((v) => v !== undefined && v !== null && v !== "");
    if (valores.length === 0 || valores.includes("*")) return "*";
    return valores.join(",");
  }
  const unico = extrairValorSelect(valor);
  return unico ? String(unico) : "*";
};

const FormItemComposto = ({
  onSubmitFunction,
  defaultValues,
  distribuidores,
  visualMode,
  lojas,
  dadosFiltrados,
  tiposEdificacao,
  disabledFields,
  children,
  origin,
  ...rest
}: any) => {
  const { handleSubmit, ...form } = GetForm();
  const [itensCompostos, setItensCompostos] = useState<any[]>([]);
  const [tipoItens, setTipoItens] = useState<any[]>([]);
  const [itens, setItens] = useState<any[]>([]);
  const adicionarItemComposto = () => {
    setItensCompostos((prev) => [...prev, {}]);
  };
  const [valorTotalManual, setValorTotalManual] = useState<number>(0);

  const [containsItem, setContainsItem] = useState(
    Boolean(Number(defaultValues?.possui_itens_item)) ?? true
  );
  const distribuidoresList = distribuidores;
  const parsePtBRNumber = (value: string) => {
    if (!value) return 0;

    return Number(
      value
        .replace(/\./g, "") // remove milhares
        .replace(",", ".") // decimal
    );
  };
  const { valuesSession } = useAuth();
  const { session } = valuesSession();
  const totalGeral = useMemo(() => {
    if (!containsItem) {
      if (
        origin === "edit" &&
        defaultValues?.precoUnitario_item !== undefined
      ) {
        return Number(defaultValues.precoUnitario_item || 0);
      }

      return Number(valorTotalManual || 0);
    }

    return itensCompostos.reduce(
      (acc, item) => acc + Number(item.precoTotalItem || 0),
      0
    );
  }, [containsItem, valorTotalManual, itensCompostos]);

  const {
    showInversorModal,
    isInversorLoading,
    handleOpenInversorModal,
    handleCloseInversorModal,
    handleInversorSubmit,
    inversores,
  } = useInversorModal();
  function validatePotenciesRanges(ranges: any) {
    const errors: any = [];

    const normalized = ranges.map((r: any, index: any) => ({
      index,
      from: toNumber(r.from),
      to: toNumber(r.to),
    }));

    normalized.sort((a: any, b: any) => a.from - b.from);

    normalized.forEach((current: any, i: any) => {
      if (current.from >= current.to) {
        errors.push({
          index: current.index,
          message: "Potência inicial deve ser menor que a final",
        });
      }

      if (i > 0) {
        const prev = normalized[i - 1];

        if (current.from <= prev.to) {
          errors.push({
            index: current.index,
            message: `Potência inicial deve ser MAIOR que ${prev.to}`,
          });
        }
      }
    });

    return errors;
  }

  const [potenciesRange, setPotenciesRange] = useState<PotencyRange[]>([
    { id: crypto.randomUUID(), from: "", to: "", precoUnitario: "", desc: "" },
  ]);
  const [dragIndex, setDragIndex] = useState<number | null>(null);
  const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
  const [itensMesmoCod, setItensMesmoCod] = useState();
  const formatPtBR = (value?: number | string) => {
    if (value === null || value === undefined || value === "") return "";

    const num = typeof value === "string" ? Number(value) : value;

    if (isNaN(num)) return "";

    return num.toLocaleString("pt-BR", {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2,
    });
  };
  const getFaixaAtivaItemComposto = (
    itemComposto: any,
    potenciaSistema = defaultValues?.potenciaSistema
  ) => {
    if (Array.isArray(itemComposto?.faixas) && itemComposto.faixas.length > 0) {
      return (
        itemComposto.faixas.find((faixa: any) => {
          const potenciaDe = Number(faixa?.potenciaDe_item ?? 0);
          const potenciaAte = Number(faixa?.potenciaAte_item ?? 0);

          return (
            potenciaDe <= Number(potenciaSistema ?? 0) &&
            potenciaAte >= Number(potenciaSistema ?? 0)
          );
        }) || itemComposto.faixas[0]
      );
    }

    return itemComposto;
  };
  useEffect(() => {
    if (defaultValues?.origem && !containsItem) {
      setValorTotalManual(defaultValues?.precoUnitario_item);
    }

    if (origin === "edit") {
      if (!containsItem) {
        setValorTotalManual(defaultValues?.precoUnitario_item);
      }

      const faixasOriginais =
        defaultValues?.faixas?.length > 0
          ? defaultValues.faixas
          : dadosFiltrados.filter(
              (d: any) => d.codItem_item === defaultValues.codItem_item
            );

      if (faixasOriginais.length > 0) {
        setPotenciesRange(
          faixasOriginais.map((s: any) => ({
            id: s.id_item_kit_faixa ?? s.id_item ?? crypto.randomUUID(),
            from: s.potenciaDe_item,
            to: s.potenciaAte_item,
            precoUnitario: formatPtBR(s?.precoUnitario_item),
            desc: s.desc_faixa ?? s.desc ?? "",
          }))
        );
      }
    }
  }, [origin, defaultValues, containsItem]);

  const handleAddPotencyRange = () => {
    setPotenciesRange((prev) => {
      const last = prev[prev.length - 1];

      const lastTo = last?.to
        ? parseFloat(String(last.to).replace(",", "."))
        : null;

      return [
        ...prev,
        {
          id: crypto.randomUUID(),
          from: lastTo !== null ? (lastTo + 0.01).toFixed(2) : "",
          to: "",
          precoUnitario: "",
          desc: "",
        },
      ];
    });
  };

  const handleRemovePotencyRange = (id: string) => {
    setPotenciesRange((prev) => prev.filter((item) => item.id !== id));
  };

  useEffect(() => {
    if (Array.isArray(defaultValues)) {
      const defaultValuesObj = defaultValues.reduce(
        (acc, item) => {
          acc[item.id_item] = item;
          return acc;
        },
        {} as Record<string, any>
      );
    } else {
    }
  }, []);

  useEffect(() => {
    if (!defaultValues?.origem) {
      listarItensCompostos().then((a: any) => {
        setItensCompostos(
          a
            .filter(
              (b: any) =>
                b.origem_itens_compostos === "item_composto" &&
                b.cod_item_itens_compostos === defaultValues?.id_item
            )
            .map((item: any) => ({
              itemEscolhido: item.itemEscolhido_itens_compostos,
              quantidade: item.quantidade_itens_compostos,
              tipoEscolhido: item.tipo_itens_compostos,
              precoTotalItem: item.precoTotalItem_itens_compostos,
              tipoCabo: item.tipoCabo_itens_compostos,
            }))
        );
      });
    }
  }, []);
  useEffect(() => {
    if (!containsItem) {
      // setItensCompostos([]);
    } else {
      setValorTotalManual(0);
    }
  }, [containsItem]);

  const removerItemComposto = (index: number) => {
    setItensCompostos((prev) => prev.filter((_, i) => i !== index));
  };
  const formatarParaReal = (valor: number) =>
    new Intl.NumberFormat("pt-BR", {
      style: "currency",
      currency: "BRL",
    }).format(valor);
  const [rangeErrors, setRangeErrors] = useState([]);
  useEffect(() => {
    const errors = validatePotenciesRanges(potenciesRange);
    setRangeErrors(errors);
  }, [potenciesRange]);

  const handleDragStart = (e: React.DragEvent, index: number) => {
    setDragIndex(index);
    try {
      e.dataTransfer.effectAllowed = "move";
      e.dataTransfer.setData("text/plain", String(index));
    } catch (err) {
      // ignore
    }
  };

  const handleDragOver = (e: React.DragEvent, index: number) => {
    e.preventDefault();
    setDragOverIndex(index);
  };

  const handleDrop = (e: React.DragEvent, index: number) => {
    e.preventDefault();
    const fromIndex =
      dragIndex !== null
        ? dragIndex
        : Number(e.dataTransfer.getData("text/plain"));
    const toIndex = index;
    if (fromIndex === toIndex) {
      setDragIndex(null);
      setDragOverIndex(null);
      return;
    }

    setPotenciesRange((prev) => {
      const next = [...prev];
      const [moved] = next.splice(fromIndex, 1);
      next.splice(toIndex, 0, moved);
      return next;
    });

    setDragIndex(null);
    setDragOverIndex(null);
  };

  const handleDragEnd = () => {
    setDragIndex(null);
    setDragOverIndex(null);
  };
  const [descricaoEditadaManualmente, setDescricaoEditadaManualmente] =
    useState(false);
  const [potenciaPorInversor, setPotenciaPorInversor] = useState(
    defaultValues?.potenciaPorInversor_item === "1" ||
      defaultValues?.potenciaPorInversor_item === 1
  );
  const [mostrarAut, setMostrarAut] = useState(
    defaultValues?.mostrarAut_item === "1" ||
      defaultValues?.mostrarAut_item === 1
  );

  useEffect(() => {
    if (
      defaultValues?.potenciaPorInversor_item === "1" ||
      defaultValues?.potenciaPorInversor_item === 1
    ) {
      setPotenciaPorInversor(true);
      form.setValue("codInversor_item", [{ value: "*", label: "Todos" }]);
    }
  }, [defaultValues?.potenciaPorInversor_item]);

  useEffect(() => {
    const isChecked =
      defaultValues?.mostrarAut_item === "1" ||
      defaultValues?.mostrarAut_item === 1;
    setMostrarAut(isChecked);
    form.setValue("mostrarAut_item", isChecked ? 1 : 0);
  }, [defaultValues?.mostrarAut_item]);

  useEffect(() => {
    if (!potenciaPorInversor || visualMode) return;
    form.setValue("codInversor_item", [{ value: "*", label: "Todos" }]);
  }, [potenciaPorInversor, visualMode]);

  function onSubmitItemComposto(data: any) {
    if (rangeErrors.length > 0) {
      toast.error(
        (rangeErrors[0] as any)?.message || "Verifique as faixas de potência."
      );
      return;
    }

    data["precoUnitario_item"] = FormatFields.desformatarNumeros(totalGeral);
    data["potenciesRange"] = potenciesRange;
    data["possui_faixa"] = potenciesRange.length > 0 ? 1 : 0;
    data["possui_itens_item"] = containsItem ? 1 : 0;

    const distribuidorValorSubmit = extrairValorSelect(
      data["codDistribuidor_item"]
    );

    const inversorValorSubmit = data["codInversor_item"];
    const hasInversorSelecionado = Array.isArray(inversorValorSubmit)
      ? inversorValorSubmit.length > 0
      : Boolean(inversorValorSubmit);

    if (
      distribuidorValorSubmit !== "*" &&
      !potenciaPorInversor &&
      !hasInversorSelecionado
    ) {
      if (typeof form.setError === "function") {
        form.setError("codInversor_item" as never, {
          type: "manual",
          message: "É necessário selecionar pelo menos um",
        });
      }
      return;
    }

    data.potenciaPorInversor_item = potenciaPorInversor ? 1 : 0;
    data.mostrarAut_item = mostrarAut ? 1 : 0;

    if (potenciaPorInversor || distribuidorValorSubmit === "*") {
      data.codInversor_item = "*";
    } else if (data["codInversor_item"]) {
      data.codInversor_item = serializarInversores(data["codInversor_item"]);
    }

    data["tipoEdificacao_item"] =
      serializarTiposEdificacao(data["tipoEdificacao_item"]) ??
      defaultValues?.["tipoEdificacao_item"] ??
      "*";

    data["itensCompostos"] = itensCompostos;
    data["parametro"] = "itens_compostos";
    data["parametro_coluna"] = "itens_compostos";
    data["parametro_anexo"] = "imagem_item";
    data["subpasta_aws"] = "ItemComposto/AnexoItemComposto";
    data["id_cliente"] = session.id_empresa_usuario;

    const dados = { ...data, itensCompostos };

    return onSubmitFunction(dados);
  }

  useEffect(() => {
    const fetchData = async () => {
      const tipos = await listarTiposItensKit();
      setTipoItens(
        tipos.filter(
          (b: TipoItem) => !["7", "8", "9", "13"].includes(b.id_tipo_item)
        )
      );

      const itensData = await listarItenskitsDiversos();
      setItens(itensData.filter((b: Item) => b.status_item === "1"));
    };

    fetchData();
  }, []);

  useEffect(() => {
    if (defaultValues?.itens) {
      const novosItens = defaultValues.itens.map((item: any) => ({
        itemEscolhido: item.itemEscolhido_itens_compostos,
        quantidade: item.quantidade_itens_compostos,
        tipoEscolhido: item.tipo_itens_compostos,
        precoTotalItem: item.precoTotalItem_itens_compostos,
        tipoCabo: item.tipoCabo_itens_compostos,
      }));

      setItensCompostos(novosItens);
    }
  }, [defaultValues]);
  const [skuEditado, setSkuEditado] = useState(false);
  useEffect(() => {
    const codItem = form.watch("codItem_item" as any);

    if (!skuEditado && codItem && !defaultValues["sku_item"]) {
      form.setValue("sku_item", codItem);
    }
  }, [form.watch("codItem_item" as any)]);

  const isNovoItem = origin !== "edit" && !defaultValues?.id_item;
  const distribuidorSelecionado = form.watch(
    "codDistribuidor_item" as any
  ) as any;
  const distribuidorSelecionadoValue =
    typeof distribuidorSelecionado === "object"
      ? distribuidorSelecionado?.value
      : distribuidorSelecionado;
  const isDistribuidorTodos = distribuidorSelecionadoValue === "*";
  const inversorSelecionado = form.watch("codInversor_item" as any) as any;

  useEffect(() => {
    if (visualMode || !isDistribuidorTodos) return;
    form.setValue("codInversor_item", [{ value: "*", label: "Todos" }]);
  }, [isDistribuidorTodos, visualMode]);

  const usaPotenciaInversor = potenciaPorInversor;
  const unidadePotencia = potenciaPorInversor ? "kW" : "kWp";
  const descricaoAtual = form.watch("descricao_item" as any) as any;
  const faseSelecionada = form.watch("fases_item" as any) as any;
  const faseSelecionadaValue =
    typeof faseSelecionada === "object"
      ? faseSelecionada?.value
      : faseSelecionada;
  const getFaseFiltroInversor = (fase: any) => {
    const faseValue = String(fase ?? "");

    if (faseValue === "2") {
      return "1";
    }

    return faseValue;
  };
  const faseFiltroInversor = getFaseFiltroInversor(faseSelecionadaValue);

  // useEffect(() => {
  //   if (visualMode) return;
  //   if (!isNovoItem) return;
  //   if (descricaoEditadaManualmente) return;

  //   let descricaoSugerida = "";
  //   //  if (!descricaoAtual || descricaoAtual.trim() === "") {
  //   if (containsItem) {
  //     descricaoSugerida = "ITEM COMPOSTO DE "
  //   } else {

  //     const primeiroRange = potenciesRange[0];
  //     const from = primeiroRange?.from;
  //     const to = primeiroRange?.to;

  //     const distribuidorLabel = distribuidorSelecionado?.label;
  //     const inversorLabel = inversorSelecionado?.label;

  //     const potenciaTexto = `${from} ATE ${to}Kwp`;

  //     descricaoSugerida = `TABELA DE PREÇO - `;
  //     if (distribuidorLabel) {
  //       descricaoSugerida = `${descricaoSugerida} Distribuidor: ${distribuidorLabel}`;

  //     }
  //     if (inversorLabel) {
  //       descricaoSugerida = `${descricaoSugerida} - Inversor: ${inversorLabel}`;

  //     }
  //     if (from || to) {
  //       descricaoSugerida = `${descricaoSugerida} - Potência Sistema: ${potenciaTexto}`;
  //     }

  //   }

  //   if (
  //     !descricaoAtual ||
  //     descricaoAtual.trim() === "" ||
  //     descricaoAtual.startsWith("TABELA DE PREÇO - ") ||
  //     descricaoAtual.startsWith("ITEM COMPOSTO DE ")
  //   ) {
  //     form.setValue("descricao_item", descricaoSugerida);
  //   }
  // }, [
  //   visualMode,
  //   isNovoItem,
  //   descricaoEditadaManualmente,
  //   containsItem,
  //   potenciesRange,
  //   distribuidorSelecionado,
  //   inversorSelecionado,
  //   descricaoAtual,
  //   // form,
  // ]);
  useEffect(() => {
    if (visualMode) return;
    if (!isNovoItem) return;
    if (descricaoEditadaManualmente) return;

    let descricaoSugerida = "";

    if (containsItem) {
      descricaoSugerida = "ITEM COMPOSTO DE ";
    } else {
      const primeiroRange = potenciesRange[0];
      const from = primeiroRange?.from;
      const to = primeiroRange?.to;

      const distribuidorLabel = distribuidorSelecionado?.label;
      const inversorLabel = inversorSelecionado?.label;
      const potenciaTexto = `${from} ATE ${to}${unidadePotencia}`;

      descricaoSugerida = `TABELA DE PREÇO -`;

      if (distribuidorLabel) {
        descricaoSugerida += ` Distribuidor: ${distribuidorLabel}`;
      }

      if (inversorLabel && !potenciaPorInversor) {
        if (inversorLabel && !potenciaPorInversor) {
          descricaoSugerida += ` - Inversor: ${inversorLabel}`;
        }

        if (from || to) {
          descricaoSugerida += potenciaPorInversor
            ? ` - Potência Inversor: ${potenciaTexto}`
            : ` - Potência Sistema: ${potenciaTexto}`;
          descricaoSugerida += potenciaPorInversor
            ? ` - Potência Inversor: ${potenciaTexto}`
            : ` - Potência Sistema: ${potenciaTexto}`;
        }
      }
    }
    form.setValue("descricao_item", descricaoSugerida);
  }, [
    visualMode,
    isNovoItem,
    descricaoEditadaManualmente,
    containsItem,
    potenciesRange,
    distribuidorSelecionado,
    inversorSelecionado,
    potenciaPorInversor,
    unidadePotencia,
    potenciaPorInversor,
    unidadePotencia,
  ]);

  return (
    <>
      <form
        key={form.key}
        onSubmit={handleSubmit(onSubmitItemComposto)}
        {...rest}
      >
        {visualMode && (
          <>
            {defaultValues?.origem === "itens_compostos" && (
              <>
                <h1 className="text-center text-lg w-full  text-black font-semibold">
                  {defaultValues["id_item"] +
                    " - " +
                    defaultValues["descricao_item"]}
                </h1>
                <h1 className="text-center text-lg w-full  text-black font-semibold">
                  {
                    [
                      { value: "1", label: "Monofásico" },
                      { value: "3", label: "Trifásico" },
                    ].find((item) => item.value === defaultValues["fases_item"])
                      ?.label
                  }
                </h1>
                {defaultValues["potenciaDe_item"] &&
                  defaultValues["potenciaAte_item"] && (
                    <h1 className="text-center mb-5 w-full text-sm text-black font-semibold">
                      De {defaultValues["potenciaDe_item"]}
                      {defaultValues["potenciaPorInversor_item"] === "1" ||
                      defaultValues["potenciaPorInversor_item"] === 1
                        ? "kW"
                        : "kWp"}{" "}
                      - Até {defaultValues["potenciaAte_item"]}
                      {defaultValues["potenciaPorInversor_item"] === "1" ||
                      defaultValues["potenciaPorInversor_item"] === 1
                        ? "kW"
                        : "kWp"}
                    </h1>
                  )}

                {Array.isArray(defaultValues?.faixas) &&
                  defaultValues.faixas.length > 0 && (
                    <div className="mb-5 p-4 bg-gray-50 rounded-lg">
                      <h2 className="text-center text-md text-black font-semibold mb-3">
                        Faixas Disponíveis
                      </h2>
                      <div className="flex flex-col gap-2">
                        {defaultValues.faixas
                          .filter((f: any) => f !== null && f !== undefined)
                          .map((faixa: any, idx: number) => {
                            const faixaAtiva = getFaixaAtivaItemComposto(
                              defaultValues,
                              defaultValues?.potenciaSistema
                            );
                            const isSelected =
                              faixaAtiva?.potenciaDe_item ===
                                faixa?.potenciaDe_item &&
                              faixaAtiva?.potenciaAte_item ===
                                faixa?.potenciaAte_item;

                            return (
                              <div
                                key={idx}
                                className={`p-3 rounded border-2 transition-all ${
                                  isSelected
                                    ? "bg-green-100 border-green-500"
                                    : "bg-white border-gray-200"
                                }`}
                              >
                                <div className="flex justify-between items-center">
                                  <span className="text-sm text-black font-medium">
                                    {faixa.desc_faixa} - {faixa.potenciaDe_item}
                                    kWp até {faixa.potenciaAte_item}kWp
                                  </span>
                                  {isSelected && (
                                    <span className="text-xs font-bold text-green-600 bg-green-200 px-2 py-1 rounded">
                                      Selecionada
                                    </span>
                                  )}
                                </div>
                                {faixa.precoUnitario_item && (
                                  <div className="text-xs text-gray-600 mt-1">
                                    Valor: R${" "}
                                    {Number(
                                      faixa.precoUnitario_item
                                    ).toLocaleString("pt-BR", {
                                      minimumFractionDigits: 2,
                                      maximumFractionDigits: 2,
                                    })}
                                  </div>
                                )}
                              </div>
                            );
                          })}
                      </div>
                    </div>
                  )}

                <h1 className="text-center text-md text-black font-semibold">
                  {itensCompostos.length > 0
                    ? "Item composto por:"
                    : "Sem itens"}
                </h1>
              </>
            )}
            {defaultValues?.origem === "stringbox" && (
              <h1 className="text-center text-lg text-black font-semibold">
                A StringBox do Inversor {defaultValues?.potenciaInversor}k é
                composta por:
              </h1>
            )}
          </>
        )}
        {!visualMode && (
          <InputGroup align="center">
            <div className="flex flex-wrap items-center gap-6 w-full">
              {/* Checkbox 1: Possui itens? */}
              <div className="flex items-center gap-2">
                <Input
                  type="checkbox"
                  label="Possui itens?"
                  name="possui_itens_item"
                  formulario={form}
                  checked={containsItem}
                  onChange={() => setContainsItem(!containsItem)}
                />
                <Button
                  type="button"
                  variant="ghost"
                  className="h-8 w-8 p-0 text-primary hover:bg-primary/10"
                  onClick={(e: any) => {
                    e.stopPropagation();
                    handleSweetAlert({
                      icon: "info",
                      showDenyButton: false,
                      confirmButtonText: "Ok",
                      html: `
                        <div class="text-left flex flex-col gap-3">
                          <p><strong>ATENÇÃO!</strong></p>
                          <p><strong>1)</strong> Quando possui itens, o <strong>Preço item</strong> do item composto será o <strong>Total</strong> mostrado na composição do item.</p>
                          <p><strong>2)</strong> Quando não possui itens, o <strong>Preço item</strong> do item composto será o valor total da faixa informada, pois cada faixa deverá ter o seu valor informado.</p>
                          <p><strong>3)</strong> O campo <strong>Inversor</strong> é filtrado por <strong>Distribuidor/Fornecedor</strong> e pela <strong>Fase</strong> selecionada. Se a fase for <strong>Bifásico</strong>, os resultados exibidos serão os <strong>Monofásicos</strong>, pois não existem inversores bifásicos cadastrados.</p>
                        </div>
                      `,
                    });
                  }}
                >
                  <InfoIcon size={16} />
                </Button>
              </div>

              {/* Checkbox 2: Faixas por Potência do Inversor */}
              <div className="flex items-center gap-2">
                <Input
                  type="checkbox"
                  label="Faixas por Potência do Inversor"
                  name="potenciaPorInversor_item"
                  formulario={form}
                  checked={potenciaPorInversor}
                  onChange={() => {
                    const next = !potenciaPorInversor;
                    setPotenciaPorInversor(next);
                    form.setValue("potenciaPorInversor_item", next ? 1 : 0);
                    if (next) {
                      form.setValue("codInversor_item", [
                        { value: "*", label: "Todos" },
                      ]);
                    }
                  }}
                  disabled={disabledFields?.some(
                    (field: string) => field === "potenciaPorInversor_item"
                  )}
                />
                <Button
                  type="button"
                  variant="ghost"
                  className="h-8 w-8 p-0 text-primary hover:bg-primary/10"
                  onClick={(e: any) => {
                    e.stopPropagation();
                    handleSweetAlert({
                      icon: "info",
                      showDenyButton: false,
                      confirmButtonText: "Ok",
                      title: "Atenção!!!",
                      html: `
                        <div class="text-left flex flex-col gap-3">
                          <p><strong>1)</strong> Quando habilitado, itens compostos marcados para exibição automática utilizarão a potência dos inversores da proposta.</p>
                          <p><strong>2)</strong> Quando desabilitado, utilizarão a potência total do sistema.</p>
                        </div>
                      `,
                    });
                  }}
                >
                  <InfoIcon size={16} />
                </Button>
              </div>

              {/* Checkbox 3: Mostrar Automaticamente nos Componentes? */}
              <div className="flex items-center gap-2">
                <Input
                  type="checkbox"
                  label="Mostrar Automaticamente nos Componentes?"
                  name="mostrarAut_item"
                  formulario={form}
                  checked={mostrarAut}
                  onChange={() => {
                    const next = !mostrarAut;
                    setMostrarAut(next);
                    form.setValue("mostrarAut_item", next ? 1 : 0);
                  }}
                  disabled={disabledFields?.some(
                    (field: string) => field == "mostrarAut_item"
                  )}
                />
                <Button
                  type="button"
                  variant="ghost"
                  className="h-8 w-8 p-0 text-primary hover:bg-primary/10"
                  onClick={(e: any) => {
                    e.stopPropagation();
                    handleSweetAlert({
                      icon: "info",
                      showDenyButton: false,
                      confirmButtonText: "Ok",
                      title: "Atençaõ!!",
                      html: `
                        <div class="text-left flex flex-col gap-3">
                          <p>Quando cadastrado o item composto com esta opção marcada ou seja, com SIM, na geração das propostas será puxado automaticamente os itens compostos que atendam as condições da proposta gerada, em relação aos itens compostos cadastrados.</p>
                        </div>
                      `,
                    });
                  }}
                >
                  <InfoIcon size={16} />
                </Button>
              </div>
            </div>
          </InputGroup>
        )}

        {!visualMode && (
          <>
            <InputGroup align="center">
              <Input
                label="Código Interno"
                name="codItem_item"
                formulario={form}
                mascara="numerico"
                error={"Preencha o Código"}
                required
                defaultValue={defaultValues && defaultValues["codItem_item"]}
                disabled={disabledFields?.some(
                  (field: string) => field == "codItem_item"
                )}
              />
              <Input
                label="SKU"
                name="sku_item"
                formulario={form}
                defaultValue={defaultValues && defaultValues["sku_item"]}
                onChange={() => setSkuEditado(true)}
                disabled={disabledFields?.some(
                  (field: string) => field == "sku_item"
                )}
              />
              <InputSelectComponent
                label="Fase"
                name="fases_item"
                options={[
                  { value: "*", label: "Todos" },
                  ...[
                    { value: "1", label: "Monofásico" },
                    { value: "2", label: "Bifásico" },
                    { value: "3", label: "Trifásico" },
                  ],
                ]}
                formulario={form}
                error={"Preencha a Fase"}
                required
                defaultValue={defaultValues && defaultValues["fases_item"]}
                disabled={disabledFields?.some(
                  (field: string) => field == "fases_item"
                )}
              />
            </InputGroup>

            <InputGroup>
              <InputSelectComponent
                label="Loja"
                name="loja_item"
                options={[
                  { value: "*", label: "Todas" },
                  ...lojas.map((loja: any) => ({
                    label: loja.nome_loja,
                    value: loja.id_loja,
                  })),
                ]}
                formulario={form}
                error={"Preencha a Loja"}
                required
                defaultValue={defaultValues && defaultValues["loja_item"]}
                disabled={disabledFields?.some(
                  (field: string) => field == "loja_item"
                )}
              />
              <InputSelectComponent
                name="tipoEdificacao_item"
                label="Tipo de Edificação"
                isMulti
                options={[
                  { label: "Todos", value: "*" },
                  ...tiposEdificacao.map((tipo: any) => ({
                    label: formatLabelTipoEdificacao(tipo),
                    value: `${tipo.id_tipo_edificacao}`,
                  })),
                ]}
                formulario={form}
                required
                error="Informe o tipo de edificação"
                defaultValue={defaultValues?.tipoEdificacao_item ?? "*"}
              />

              <InputSelectComponent
                label={"Distribuidor/Fornecedor"}
                name="codDistribuidor_item"
                formulario={form}
                options={[
                  { label: "Todos", value: "*" },
                  ...distribuidoresList.map((e: any) => ({
                    value: e["id_distribuidor"],
                    label: e["nome_distribuidor"],
                  })),
                ]}
                defaultValue={
                  defaultValues && defaultValues["codDistribuidor_item"]
                }
                disabled={disabledFields?.some(
                  (field: string) => field == "codDistribuidor_item"
                )}
                onChange={(e: any) => {
                  if (e?.value == "*") {
                    form.setValue("codInversor_item" as never, [
                      { value: "*", label: "Todos" },
                    ]);
                    if (typeof form.clearErrors === "function") {
                      form.clearErrors("codInversor_item" as never);
                    }
                  }
                }}
                required
                error="Informe o Distribuidor/Fornecedor"
              />
              <InputSelectComponent
                isMulti
                label={
                  <OptionalLabel
                    text="Inversor (por ID)"
                    onAddClick={handleOpenInversorModal}
                    onInfoClick={() => {
                      handleSweetAlert({
                        icon: "info",
                        showDenyButton: false,
                        confirmButtonText: "Ok",
                        html: `
                      <div class="text-left flex flex-col gap-3">
                        <p><strong>ATENÇÃO!</strong></p>
                        <p>O campo <strong>Inversor</strong> é filtrado por <strong>Distribuidor/Fornecedor</strong> e pela <strong>Fase</strong> selecionada.</p>
                        <p>Se a fase for <strong>Bifásico</strong>, os resultados exibidos serão os <strong>Monofásicos</strong>, pois não existem inversores bifásicos cadastrados.</p>
                      </div>
                    `,
                      });
                    }}
                  />
                }
                name="codInversor_item"
                formulario={form}
                options={[
                  { value: "*", label: "Todos" },
                  ...inversores
                    ?.filter((inv: any) => {
                      const codDistribuidorValue = distribuidorSelecionadoValue;
                      if (codDistribuidorValue == "*") return true;
                      const distribMatches =
                        codDistribuidorValue == inv.codDistribuidor_item;

                      const faseMatches =
                        faseFiltroInversor === "*" ||
                        inv.fases_item === "*" ||
                        String(inv.fases_item) === String(faseFiltroInversor);

                      return distribMatches && faseMatches;
                    })
                    .map((e: any) => ({
                      value: e["id_item"],
                      label: e["descricao_item"],
                    })),
                ]}
                defaultValue={
                  isDistribuidorTodos || usaPotenciaInversor
                    ? [{ value: "*", label: "Todos" }]
                    : defaultValues && defaultValues["codInversor_item"]
                }
                disabled={
                  isDistribuidorTodos ||
                  usaPotenciaInversor ||
                  disabledFields?.some(
                    (field: string) => field == "codInversor_item"
                  )
                }
                required={
                  distribuidorSelecionadoValue !== "*" &&
                  !usaPotenciaInversor &&
                  !isDistribuidorTodos
                }
                error="Informe o inversor ou marque faixas por potência do inversor"
              />
            </InputGroup>
            <InputGroup>
              <Input
                label="Descrição"
                name="descricao_item"
                formulario={form}
                type="textarea"
                defaultValue={defaultValues && defaultValues["descricao_item"]}
                onChange={(e: any) => {
                  setDescricaoEditadaManualmente(true);
                  if (typeof form.register === "function") {
                    // Garantir que o formulário continue recebendo o valor
                    form.setValue("descricao_item", e.target.value);
                  }
                }}
                disabled={disabledFields?.some(
                  (field: string) => field == "descricao_item"
                )}
                required
                error={"Preencha a Descrição"}
              />
              <Input
                label="Ficha Técnica"
                name="ficha_item"
                type="textarea"
                formulario={form}
                defaultValue={defaultValues && defaultValues["ficha_item"]}
                disabled={disabledFields?.some(
                  (field: string) => field == "ficha_item"
                )}
              />
            </InputGroup>
            <InputGroup align="center">
              <div className="border rounded-lg gap-6 p-4 flex flex-col w-full">
                {potenciesRange.map((potency, i) => {
                  const errorForThisRow: any = rangeErrors?.find(
                    (err: any) => err?.index === i
                  );
                  return (
                    <div
                      key={potency.id}
                      className="gap-4 items-end justify-between"
                      draggable
                      onDragStart={(e) => handleDragStart(e, i)}
                      onDragOver={(e) => handleDragOver(e, i)}
                      onDrop={(e) => handleDrop(e, i)}
                      onDragEnd={handleDragEnd}
                      style={{
                        opacity: dragIndex === i ? 0.5 : 1,
                        border:
                          dragOverIndex === i
                            ? "2px dashed #9ca3af"
                            : undefined,
                        padding: 4,
                        borderRadius: 6,
                        background:
                          dragOverIndex === i
                            ? "rgba(156,163,175,0.06)"
                            : undefined,
                      }}
                    >
                      <div
                        className="flex items-center mr-2"
                        style={{
                          cursor: dragIndex === i ? "grabbing" : "grab",
                        }}
                        aria-hidden
                      >
                        {i != 0 && <GripHorizontal size={18} />}
                      </div>
                      {errorForThisRow && (
                        <span className="text-sm text-center text-red-600 font-medium">
                          {errorForThisRow?.message}
                        </span>
                      )}
                      <div
                        className={`w-full items-center ${errorForThisRow ? "border p-2 rounded-md border-red-400" : ""} flex gap-4 items-end justify-between`}
                      >
                        {!containsItem && (
                          <Input
                            label={i === 0 ? "Desc" : ""}
                            name={`potenciesRange.${i}.desc`}
                            formulario={form}
                            value={potency.desc || ""}
                            onChange={(e) => {
                              const value = e.target.value;
                              setPotenciesRange((prev) =>
                                prev.map((item, index) =>
                                  index === i ? { ...item, desc: value } : item
                                )
                              );
                            }}
                          />
                        )}
                        <Input
                          label={i === 0 ? "Potência de" : ""}
                          name={`potenciesRange.${i}.from`}
                          formulario={form}
                          mascara="numero"
                          prefix={unidadePotencia}
                          value={potency.from}
                          onChange={(e) => {
                            const value = e.target.value;
                            setPotenciesRange((prev) =>
                              prev.map((item, index) =>
                                index === i ? { ...item, from: value } : item
                              )
                            );
                          }}
                        />

                        {/* </div>
                      <div className="w-full relative"> */}
                        <Input
                          label={i === 0 ? "Potência até" : ""}
                          name={`potenciesRange.${i}.to`}
                          formulario={form}
                          mascara="numero"
                          prefix={unidadePotencia}
                          value={potency.to}
                          onChange={(e) => {
                            const value = e.target.value;

                            setPotenciesRange((prev) =>
                              prev.map((item, index) =>
                                index === i ? { ...item, to: value } : item
                              )
                            );
                          }}
                        />

                        {/* </div> */}
                        {!containsItem && (
                          <Input
                            label={i === 0 ? "Valor Total" : ""}
                            name={`potenciesRange.${i}.precoUnitario`}
                            formulario={form}
                            mascara="numero"
                            prefix={"R$"}
                            value={potency.precoUnitario}
                            onChange={(e) => {
                              const raw = e.target.value;

                              const numero = parsePtBRNumber(raw);

                              setValorTotalManual(numero);

                              setPotenciesRange((prev) =>
                                prev.map((item, index) =>
                                  index === i
                                    ? { ...item, precoUnitario: raw }
                                    : item
                                )
                              );
                            }}
                          />
                        )}

                        {potenciesRange.length > 1 && (
                          <button
                            type="button"
                            onClick={() => handleRemovePotencyRange(potency.id)}
                            className="text-red-500 hover:text-red-700"
                          >
                            <Trash2 size={16} />
                          </button>
                        )}
                      </div>
                    </div>
                  );
                })}
                {/* {origin !== "edit" && ( */}
                <div className="justify-center flex">
                  <button
                    type="button"
                    onClick={handleAddPotencyRange}
                    className="flex items-center gap-2 text-green-600"
                  >
                    <Plus /> Adicionar faixa de potência
                  </button>
                </div>
                {/* )} */}
              </div>
            </InputGroup>
            {containsItem && (
              <InputGroup>
                <Button type="button" onClick={adicionarItemComposto}>
                  Adicionar Item
                </Button>
              </InputGroup>
            )}
          </>
        )}
        {containsItem && (
          <div className="space-y-4 py-5 overflow-scroll max-h-[40rem]">
            {itensCompostos.map((data, index) => (
              <div key={index} className="relative border p-4 pt-6 rounded-lg">
                <p className="absolute left-2 -top-3 bg-white font-medium px-4">
                  Item {index + 1}
                </p>
                <ItemComposto
                  tipoItens={tipoItens}
                  data={data}
                  visualMode={visualMode}
                  itens={itens}
                  formatarParaReal={formatarParaReal}
                  onChange={(dados: any) => {
                    const novoArray = [...itensCompostos];
                    novoArray[index] = dados;
                    setItensCompostos(novoArray);
                  }}
                />
                {!visualMode && (
                  <Button
                    type="button"
                    className="absolute top-2 right-2"
                    variant="destructive"
                    onClick={() => removerItemComposto(index)}
                  >
                    Remover
                  </Button>
                )}
              </div>
            ))}
          </div>
        )}
        {containsItem && (
          <div className="text-right text-lg space-y-3 font-semibold">
            Total: {formatarParaReal(totalGeral)}
          </div>
        )}
        {children}
      </form>
      <InversorModal
        isOpen={showInversorModal}
        onClose={handleCloseInversorModal}
        onSubmit={handleInversorSubmit}
        isLoading={isInversorLoading}
      />
    </>
  );
};

export default FormItemComposto;