"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 { DistribuidorLabel } from "@/components/common/DistribuidorLabel";
import { DistribuidorModal } from "@/components/common/DistribuidorModal";
import { FabricanteLabel } from "@/components/common/FabricanteLabel";
import { FabricanteModal } from "@/components/common/FabricanteModal";
import { useDistribuidorModal } from "@/hooks/useDistribuidorModal";
import { useFabricanteModal } from "@/hooks/useFabricanteModal";
import { listarItenskitsDiversos } from "@/requests/CRUD/ColetaDados/listarItenskitsDiversos";
import { listarTiposItensKit } from "@/requests/CRUD/ColetaDados/listarTiposItensKit";
import { listarItensCompostos } from "@/requests/CRUD/ItemComposto/listarItem";
import { baixarAwsBase64 } from "@/requests/common/Aws/baixarAws";
import { useAuth } from "@/src/contexts/authContext";
import { FormatFields, GetForm } from "@/utils";
import { useEffect, useMemo, useState } from "react";
import ItemComposto from "../ItensCompostos/ItemComposto";
type TipoItem = {
  id_tipo_item: string;
  nome_tipo_item: string;
};
type Item = {
  id_item: string;
  descricao_item: string;
  precoUnitario_item: number;
  tipo_item: string;
  status_item: string;
};
const FormStringBox = ({
  onSubmitFunction,
  defaultValues,
  disabledFields,
  children,
  ...rest
}: any) => {
  const [imagemFile, setImagemFile] = useState<File | null | any>(null);
  const { handleSubmit, ...form } = GetForm();
  const watch = form.watch;
  const setValue = form.setValue;
  const [sugerirEdicao, setSugerirEdicao] = useState(true);
  const [tipoString, setTipoString] = useState<string | null>(
    defaultValues?.tipoString_item == null
      ? null
      : defaultValues.tipoString_item === "0"
        ? "CA"
        : "CC"
  );
  const [imagensBase64, setImagensBase64] = useState<any>([]);
  const [skuEditado, setSkuEditado] = useState(false);
  const { valuesSession } = useAuth();
  const { session } = valuesSession();
  const [itensCompostos, setItensCompostos] = useState<any[]>([]);
  const [tipoItens, setTipoItens] = useState<any[]>([]);
  const [itens, setItens] = useState<any[]>([]);
  const {
    showDistribuidorModal,
    isDistribuidorLoading,
    handleOpenDistribuidorModal,
    handleCloseDistribuidorModal,
    handleDistribuidorSubmit,
    distribuidores,
  } = useDistribuidorModal();

  const {
    showFabricanteModal,
    isFabricanteLoading,
    handleOpenFabricanteModal,
    handleCloseFabricanteModal,
    handleFabricanteSubmit,
    fabricantes,
  } = useFabricanteModal("13");

  useEffect(() => {
    listarItensCompostos().then((a: any) => {
      setItensCompostos(
        a
          .filter(
            (b: any) =>
              b.origem_itens_compostos === "stringbox" &&
              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,
          }))
      );
    });
  }, []);
  function gerarDescricao(
    tipo: string | null,
    fase: any,
    entrada: any,
    saida: any
  ) {
    if (!tipo || !fase || !entrada) return "";

    // Se a fase for "Todos", não incluir na descrição ou usar um texto genérico
    const faseTexto = fase.value === "*" ? "" : fase.label.toUpperCase();

    return `STRING BOX ${tipo} ${faseTexto} DE ${entrada}A ENTRADA`
      .replace(/\s+/g, " ")
      .trim();
  }

  useEffect(() => {
    if (!defaultValues) return;

    const processarArquivos = async (
      campo: string,
      setFiles: React.Dispatch<React.SetStateAction<File[]>>,
      setBase64: any
    ) => {
      const urls = defaultValues[campo]?.split(",");
      if (!urls || urls.length === 0) return;

      try {
        const files: File[] = [];
        const base64Array: string[] = [];

        for (const imageUrl of urls) {
          const result = await baixarAwsBase64(imageUrl);
          const resultObject =
            typeof result === "string" ? JSON.parse(result) : result;

          const base64Content = resultObject.base64;
          const hasPrefix = base64Content.startsWith("data:image");
          const formattedBase64 = hasPrefix
            ? base64Content
            : `data:image/jpeg;base64,${base64Content}`;

          base64Array.push(formattedBase64);

          const byteCharacters = atob(base64Content);
          const byteNumbers = new Array(byteCharacters.length);
          for (let i = 0; i < byteCharacters.length; i++) {
            byteNumbers[i] = byteCharacters.charCodeAt(i);
          }
          const byteArray = new Uint8Array(byteNumbers);
          const blob = new Blob([byteArray], {
            type: "application/octet-stream",
          });

          const fileName = imageUrl.split("/").pop() || "arquivo.png";
          const file = new File([blob], fileName, { type: blob.type });

          files.push(file);
        }

        setFiles(files);
        setBase64(base64Array); // ou ajusta aqui se sempre for array
      } catch (error) {
        console.error(`Erro ao carregar arquivos do campo ${campo}:`, error);
      }
    };

    // imagem_item (múltiplos)
    if (defaultValues["imagem_item"]) {
      processarArquivos("imagem_item", setImagemFile, setImagensBase64);
    }
  }, [defaultValues]);

  const fileInputs = [
    {
      name: "imagens_item",
      label: "Imagens",
      base64State: imagensBase64,
      setBase64: setImagensBase64,
      setFile: setImagemFile,
      isMultiple: true,
    },
  ];

  function onSubmitStringBox(data: any) {
    const suprimento = data["montagemSuprimento_item"];
    if (suprimento === "montada") {
      data["precoUnitario_item"] = totalGeral;
    } else {
      data["precoUnitario_item"] = FormatFields.desformatarNumeros(
        data["precoUnitario_item"]
      );
    }

    if (!imagemFile || (Array.isArray(imagemFile) && imagemFile.length === 0)) {
      data["imagem_item_deletar"] = true;
    }
    data["anexo"] = imagemFile;
    data["itensCompostos"] = itensCompostos;
    data["parametro"] = "stringbox";
    data["parametro_coluna"] = "stringbox";
    data["parametro_anexo"] = "imagem_item";
    data["subpasta_aws"] = "Stringbox/AnexoStringbox";
    data["id_cliente"] = session.id_empresa_usuario;

    return onSubmitFunction(data);
  }

  const adicionarItemComposto = () => {
    setItensCompostos((prev) => [...prev, {}]);
  };

  const totalGeral = useMemo(() => {
    return itensCompostos.reduce(
      (acc, item) => acc + Number(item.precoTotalItem || 0),
      0
    );
  }, [itensCompostos]);

  const [suprimento, setSuprimento] = useState<any>(
    defaultValues ? defaultValues["montagemSuprimento_item"] : null
  );
  const [valorComprada, setValorComprada] = useState<any>(
    defaultValues ? defaultValues["precoUnitario_item"] : null
  );
  useEffect(() => {
    if (suprimento !== "comprada") {
      form.setValue("precoUnitario_item", totalGeral);
    }
  }, [totalGeral, suprimento]);

  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);

  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 (!sugerirEdicao) return;

    const tipo = tipoString;
    const fase = watch("fases_item" as any);
    const entrada = watch("correnteEntrada_item" as any);
    const saida = watch("correnteSaida_item" as any);

    const descricaoGerada = gerarDescricao(tipo, fase, entrada, saida);

    if (descricaoGerada) {
      setValue("descricao_item", descricaoGerada);
    }
  }, [
    watch("fases_item" as any),
    watch("correnteEntrada_item" as any),
    watch("correnteSaida_item" as any),
    tipoString,
    sugerirEdicao,
  ]);

  useEffect(() => {
    const codItem = watch("codItem_item" as any);

    if (!skuEditado && codItem && !defaultValues["sku_item"]) {
      form.setValue("sku_item", codItem);
    }
  }, [watch("codItem_item" as any)]);
  return (
    <form onSubmit={handleSubmit(onSubmitStringBox)} {...rest}>
      <InputGroup>
        <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={
            <DistribuidorLabel
              text="Distribuidor/Fornecedor"
              onAddClick={handleOpenDistribuidorModal}
            />
          }
          name="codDistribuidor_item"
          formulario={form}
          options={distribuidores.map((e: any) => ({
            value: e["id_distribuidor"],
            label: e["nome_distribuidor"],
          }))}
          defaultValue={defaultValues && defaultValues["codDistribuidor_item"]}
          disabled={disabledFields?.some(
            (field: string) => field == "codDistribuidor_item"
          )}
          required
          error="Informe o Distribuidor/Fornecedor"
        />
        <InputSelectComponent
          label={
            <FabricanteLabel
              text="Fabricante"
              onAddClick={handleOpenFabricanteModal}
            />
          }
          name="codFabricante_item"
          formulario={form}
          options={fabricantes.map((e: any) => ({
            value: e["id_fabricante"],
            label: e["nome_fabricante"],
          }))}
          defaultValue={defaultValues && defaultValues["codFabricante_item"]}
          disabled={disabledFields?.some(
            (field: string) => field == "codFabricante_item"
          )}
          required
          error="Informe o Fabricante"
        />
        <InputSelectComponent
          label="Mostrar Automáticamente nos Componentes?"
          name="mostrarAut_item"
          width="w-1/3"
          options={[
            { value: "1", label: "Sim" },
            { value: "0", label: "Não" },
          ].map((item) => ({
            value: item.value,
            label: item.label,
          }))}
          formulario={form}
          defaultValue={defaultValues && defaultValues["mostrarAut_item"]}
          disabled={disabledFields?.some(
            (field: string) => field == "mostrarAut_item"
          )}
          required
          error={"Preencha a opção"}
        />
        <Input
          label="Garantia"
          name="garantia_item"
          formulario={form}
          mascara="numerico"
          prefix="meses"
          maxLength={3}
          defaultValue={defaultValues && defaultValues["garantia_item"]}
          disabled={disabledFields?.some(
            (field: string) => field == "garantia_item"
          )}
        />
      </InputGroup>

      <InputGroup>
        <InputSelectComponent
          label="Suprimento"
          name="montagemSuprimento_item"
          width="w-full"
          options={[
            { value: "montada", label: "Montada pelo Integrador" },
            { value: "comprada", label: "Comprada" },
          ]}
          formulario={form}
          onChange={(e: any) => {
            setSuprimento(e.value);
            if (e.value == "comprada") {
              form.setValue("possui_itens_item", 0);
            }
            form.setValue("precoUnitario_item", "");
          }}
          defaultValue={
            defaultValues && defaultValues["montagemSuprimento_item"]
          }
          disabled={disabledFields?.some(
            (field: string) => field == "montagemSuprimento_item"
          )}
          required
          error={"Preencha o tipo de suprimento"}
        />
        {suprimento == "comprada" && (
          <Input
            label="Valor da StringBox"
            name="precoUnitario_item"
            formulario={form}
            prefix={"R$"}
            onChange={(e: any) => {
              setValorComprada(
                e.target.value.replace(",", ".").replace(/[^0-9.]/g, "")
              );
            }}
            mascara="numero"
            defaultValue={defaultValues && defaultValues["precoUnitario_item"]}
            disabled={disabledFields?.some(
              (field: string) => field == "precoUnitario_item"
            )}
            required
            error={"Preencha o valor"}
          />
        )}
        <InputSelectComponent
          label="Tipo de StringBox"
          options={[
            { label: "CA-Corrente Alternada", value: "0" },
            { label: "CC-Corrente Contínua", value: "1" },
          ]}
          name="tipoString_item"
          formulario={form}
          onChange={(e: any) => {
            const tipoString = e.value === "0" ? "CA" : "CC";
            setTipoString(tipoString);
          }}
          defaultValue={defaultValues && defaultValues["tipoString_item"]}
        />
        <InputSelectComponent
          label="Fase"
          options={[
            { label: "Todas", value: "*" },
            { label: "Monofásico", value: "1" },
            { label: "Bifásico", value: "2" },
            { label: "Trifásico", value: "3" },
          ]}
          name="fases_item"
          formulario={form}
          defaultValue={defaultValues && defaultValues["fases_item"]}
        />
        {tipoString && (
          <>
            <Input
              label={`Corrente de entrada ${tipoString}`}
              formulario={form}
              name="correnteEntrada_item"
              prefix="A"
              mascara="numerico"
              defaultValue={
                defaultValues && defaultValues["correnteEntrada_item"]
              }
              disabled={disabledFields?.some(
                (field: string) => field == "correnteEntrada_item"
              )}
            />
            <Input
              label={`Corrente de saída ${tipoString}`}
              formulario={form}
              name="correnteSaida_item"
              mascara="numerico"
              defaultValue={
                defaultValues && defaultValues["correnteSaida_item"]
              }
              disabled={disabledFields?.some(
                (field: string) => field == "correnteSaida_item"
              )}
            />
          </>
        )}
      </InputGroup>
      <InputGroup>
        <Input
          type="checkbox"
          checked={sugerirEdicao}
          label="Sugerir descrição"
          onChange={(e) => {
            setSugerirEdicao(!sugerirEdicao);
          }}
        />
      </InputGroup>
      <InputGroup>
        <Input
          label="Descrição"
          name="descricao_item"
          formulario={form}
          type="textarea"
          defaultValue={defaultValues && defaultValues["descricao_item"]}
          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>
      {fileInputs.map((input) => (
        <Input
          key={input.name}
          label={input.label}
          name={input.name}
          type={"multiple-file"}
          accept="image/*"
          dynamic={!!input.isMultiple}
          defaultValue={input.base64State}
          onInputProp={(event: any) => {
            const inputElement = event.target as HTMLInputElement;
            if (inputElement.files && inputElement.files.length > 0) {
              const files = Array.from(inputElement.files);

              const base64Promises = files.map((file) => {
                return new Promise<string>((resolve, reject) => {
                  const reader = new FileReader();
                  reader.onloadend = () => resolve(reader.result as string);
                  reader.onerror = reject;
                  reader.readAsDataURL(file);
                });
              });

              Promise.all(base64Promises).then((base64Array) => {
                input.setFile((prev: any) => [
                  ...(input.isMultiple ? prev || [] : []),
                  ...files,
                ]);

                input.setBase64((prev: any) => {
                  const novas = [
                    ...(input.isMultiple ? prev || [] : []),
                    ...base64Array,
                  ];
                  const unicas = Array.from(new Set(novas));
                  form.setValue(input.name as never, unicas as never);
                  return unicas;
                });
              });
            }
            return 1;
          }}
          onRemoveFile={(idBase64: any) => {
            input.setBase64((prev: any) =>
              (input.isMultiple ? prev : [prev]).filter(
                (b: any) => b !== idBase64
              )
            );
            form.setValue(
              input.name as never,
              (input.isMultiple
                ? input.base64State.filter((b: any) => b !== idBase64)
                : "") as never
            );
          }}
        />
      ))}
      {suprimento === "montada" && (
        <>
          <InputGroup className="mt-3">
            <Button type="button" onClick={adicionarItemComposto}>
              Adicionar Item
            </Button>
          </InputGroup>
          <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={false}
                  itens={itens}
                  formatarParaReal={formatarParaReal}
                  onChange={(dados: any) => {
                    const novoArray = [...itensCompostos];
                    novoArray[index] = dados;
                    setItensCompostos(novoArray);
                  }}
                />

                <Button
                  type="button"
                  className="absolute top-2 right-2"
                  variant="destructive"
                  onClick={() => removerItemComposto(index)}
                >
                  Remover
                </Button>
              </div>
            ))}
          </div>
        </>
      )}
      <div className="text-right text-lg space-y-3 font-semibold">
        Total:{" "}
        {formatarParaReal(
          suprimento === "montada" ? totalGeral : +valorComprada
        )}
      </div>
      {children}

      <DistribuidorModal
        isOpen={showDistribuidorModal}
        onClose={handleCloseDistribuidorModal}
        onSubmit={handleDistribuidorSubmit}
        isLoading={isDistribuidorLoading}
      />

      <FabricanteModal
        isOpen={showFabricanteModal}
        onClose={handleCloseFabricanteModal}
        onSubmit={handleFabricanteSubmit}
        isLoading={isFabricanteLoading}
      />
    </form>
  );
};

export default FormStringBox;