"use client";
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 { baixarAwsBase64 } from "@/requests/common/Aws/baixarAws";
import { useAuth } from "@/src/contexts/authContext";
import { FormatFields, GetForm } from "@/utils";
import { useEffect, useState } from "react";

const FormEstrutura = ({
  onSubmitFunction,
  defaultValues,
  disabledFields,
  categorias,
  tipos,
  children,
  ...rest
}: any) => {
  const [imagemBase64, setImagemBase64] = useState<string>("");
  const [imagemFile, setImagemFile] = useState<File | null | any>(null);
  const { handleSubmit, ...form } = GetForm();

  const { valuesSession } = useAuth();
  const { session } = valuesSession();

  // Hook para modal de distribuidor
  const {
    showDistribuidorModal,
    isDistribuidorLoading,
    handleOpenDistribuidorModal,
    handleCloseDistribuidorModal,
    handleDistribuidorSubmit,
    distribuidores,
  } = useDistribuidorModal();

  // Hook para modal de fabricante
  const {
    showFabricanteModal,
    isFabricanteLoading,
    handleOpenFabricanteModal,
    handleCloseFabricanteModal,
    handleFabricanteSubmit,
    fabricantes,
  } = useFabricanteModal("7");

  const [imagensBase64, setImagensBase64] = useState<any>([]);

  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]);
  // codDistribuidor_item/codFabricante_item usam skipEffect (evita o select
  // resetar pro defaultValue original a cada rerender, já que "options" é
  // recriado inline). Isso desliga também a resolução inicial no modo edição
  // — sem isso nunca resolvia de fato pra {value,label}, então salvar de novo
  // sempre voltava vazio. Resolve manualmente, uma vez, quando os catálogos
  // carregam.
  useEffect(() => {
    if (!defaultValues?.["codDistribuidor_item"] || !distribuidores.length) {
      return;
    }
    const opcao = distribuidores
      .map((e: any) => ({
        value: e["id_distribuidor"],
        label: e["nome_distribuidor"],
      }))
      .find((o: any) => String(o.value) === String(defaultValues["codDistribuidor_item"]));
    if (opcao) {
      form.setValue("codDistribuidor_item", opcao as never);
    }
  }, [defaultValues, distribuidores]);

  useEffect(() => {
    if (!defaultValues?.["codFabricante_item"] || !fabricantes.length) {
      return;
    }
    const opcao = fabricantes
      .map((e: any) => ({
        value: e["id_fabricante"],
        label: e["nome_fabricante"],
      }))
      .find((o: any) => String(o.value) === String(defaultValues["codFabricante_item"]));
    if (opcao) {
      form.setValue("codFabricante_item", opcao as never);
    }
  }, [defaultValues, fabricantes]);

  const [skuEditado, setSkuEditado] = useState(false);
  const fileInputs = [
    {
      name: "imagens_item",
      label: "Imagens",
      base64State: imagensBase64,
      setBase64: setImagensBase64,
      setFile: setImagemFile,
      isMultiple: true,
    },
  ];
  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)]);
  function onSubmitEstrutura(data: any) {
    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["parametro"] = "estrutura";
    data["parametro_coluna"] = "estruturas";
    data["parametro_anexo"] = "imagem_item";
    data["subpasta_aws"] = "Estrutura/Estrutura";
    data["id_cliente"] = session.id_empresa_usuario;

    return onSubmitFunction(data);
  }

  // const tipoTelhado = [
  //   { value: "ceramico", label: "Cerâmico" },
  //   { value: "metalico", label: "Metálico" },
  //   { value: "fibrocimento", label: "Fibrocimento" },
  //   { value: "laje", label: "Laje" },
  //   { value: "solo", label: "Solo" },
  //   { value: "garagem", label: "Garagem" },
  // ];
  function convertFcca(valor: string) {
    if (valor === "fibrocimento") {
      return 'fcca';
    }
    return valor;
  }
  return (
    <form onSubmit={handleSubmit(onSubmitEstrutura)} {...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
          skipEffect
          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"
          onChange={(e: any) => {
            let {
              tipoEstrutura_item,
              tipoTelhado_item,
              agrupamento_modulos_item,
              codDistribuidor_item,
              codFabricante_item,
            } = form?.control?._formValues;
            tipoEstrutura_item = tipoEstrutura_item?.label;
            tipoTelhado_item = tipoTelhado_item?.label;
            codFabricante_item = codFabricante_item?.label;
            codDistribuidor_item = codDistribuidor_item?.label;
            form.setValue(
              "descricao_item",
              `Estrutura ${tipoEstrutura_item ? `${tipoEstrutura_item} ` : ""}${tipoTelhado_item ? `${tipoTelhado_item} ` : ""
              }${agrupamento_modulos_item ? `para ${agrupamento_modulos_item} módulos ` : ""}${codDistribuidor_item && codFabricante_item
                ? `(${codDistribuidor_item} - ${codFabricante_item})`
                : codDistribuidor_item
                  ? `(${codDistribuidor_item})`
                  : codFabricante_item
                    ? `(${codFabricante_item})`
                    : ""
              }`,
            );
          }}
        />
        <InputSelectComponent
          skipEffect
          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"
          onChange={(e: any) => {
            let {
              tipoEstrutura_item,
              tipoTelhado_item,
              agrupamento_modulos_item,
              codDistribuidor_item,
              codFabricante_item,
            } = form?.control?._formValues;
            tipoEstrutura_item = tipoEstrutura_item?.label;
            tipoTelhado_item = tipoTelhado_item?.label;
            codFabricante_item = codFabricante_item?.label;
            codDistribuidor_item = codDistribuidor_item?.label;
            form.setValue(
              "descricao_item",
              `Estrutura ${tipoEstrutura_item ? `${tipoEstrutura_item} ` : ""}${tipoTelhado_item ? `${tipoTelhado_item} ` : ""
              }${agrupamento_modulos_item ? `para ${agrupamento_modulos_item} módulos ` : ""}${codDistribuidor_item && codFabricante_item
                ? `(${codDistribuidor_item} - ${codFabricante_item})`
                : codDistribuidor_item
                  ? `(${codDistribuidor_item})`
                  : codFabricante_item
                    ? `(${codFabricante_item})`
                    : ""
              }`,
            );
          }}
        />
        <Input
          label="Preço Unitário"
          name="precoUnitario_item"
          formulario={form}
          prefix={"R$"}
          mascara="numero"
          defaultValue={defaultValues && defaultValues["precoUnitario_item"]}
          disabled={disabledFields?.some(
            (field: string) => field == "precoUnitario_item"
          )}
          required
          error="Preencha o preço"
        // onChange={(event: any) => {
        //   event.target.value == "0,00"
        //     ? (event.target.value = "")
        //     : (event.target.value = event.target.value);
        // }}
        />
        <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="Tipo"
          name="tipoEstrutura_item"
          formulario={form}
          options={tipos}
          defaultValue={defaultValues && defaultValues["tipoEstrutura_item"]}
          disabled={disabledFields?.some(
            (field: string) => field == "tipoEstrutura_item"
          )}
          required
          error="Informe o Tipo"
          onChange={(e: any) => {
            let {
              tipoEstrutura_item,
              tipoTelhado_item,
              agrupamento_modulos_item,
              codDistribuidor_item,
              codFabricante_item,
            } = form?.control?._formValues;
            tipoEstrutura_item = tipoEstrutura_item?.label;
            tipoTelhado_item = tipoTelhado_item?.label;
            codFabricante_item = codFabricante_item?.label;
            codDistribuidor_item = codDistribuidor_item?.label;
            form.setValue(
              "descricao_item",
              `Estrutura ${tipoEstrutura_item ? `${tipoEstrutura_item} ` : ""}${tipoTelhado_item ? `${tipoTelhado_item} ` : ""
              }${agrupamento_modulos_item ? `para ${agrupamento_modulos_item} módulos ` : ""}${codDistribuidor_item && codFabricante_item
                ? `(${codDistribuidor_item} - ${codFabricante_item})`
                : codDistribuidor_item
                  ? `(${codDistribuidor_item})`
                  : codFabricante_item
                    ? `(${codFabricante_item})`
                    : ""
              }`,
            );
          }}
        />
        <InputSelectComponent
          label="Tipo Telhado"
          name="tipoTelhado_item"
          options={categorias.map((categoria: any) => ({
            label: categoria.nome_categoria_telhado,
            value: categoria.sigla_categoria_telhado,
          }))}
          formulario={form}
          defaultValue={defaultValues && convertFcca(defaultValues["tipoTelhado_item"])}
          disabled={disabledFields?.some(
            (field: string) => field == "tipoTelhado_item"
          )}
          error="Informe o Tipo de Telhado"
          onChange={(e: any) => {
            let {
              tipoEstrutura_item,
              tipoTelhado_item,
              agrupamento_modulos_item,
              codDistribuidor_item,
              codFabricante_item,
            } = form?.control?._formValues;
            tipoEstrutura_item = tipoEstrutura_item?.label;
            tipoTelhado_item = tipoTelhado_item?.label;
            codFabricante_item = codFabricante_item?.label;
            codDistribuidor_item = codDistribuidor_item?.label;
            form.setValue(
              "descricao_item",
              `Estrutura ${tipoEstrutura_item ? `${tipoEstrutura_item} ` : ""}${tipoTelhado_item ? `${tipoTelhado_item} ` : ""
              }${agrupamento_modulos_item ? `para ${agrupamento_modulos_item} módulos ` : ""}${codDistribuidor_item && codFabricante_item
                ? `(${codDistribuidor_item} - ${codFabricante_item})`
                : codDistribuidor_item
                  ? `(${codDistribuidor_item})`
                  : codFabricante_item
                    ? `(${codFabricante_item})`
                    : ""
              }`,
            );
          }}
        />
        <Input
          label="Agrupamento de Módulos"
          name="agrupamento_modulos_item"
          formulario={form}
          mascara="numerico"
          maxLength={3}
          defaultValue={
            defaultValues && defaultValues["agrupamento_modulos_item"]
          }
          disabled={disabledFields?.some(
            (field: string) => field == "agrupamento_modulos_item"
          )}
          required
          error={"Informe o Agrupamento de Módulos"}
          onChange={(e: any) => {
            let {
              tipoEstrutura_item,
              tipoTelhado_item,
              agrupamento_modulos_item,
              codDistribuidor_item,
              codFabricante_item,
            } = form?.control?._formValues;
            tipoEstrutura_item = tipoEstrutura_item?.label;
            tipoTelhado_item = tipoTelhado_item?.label;
            codFabricante_item = codFabricante_item?.label;
            codDistribuidor_item = codDistribuidor_item?.label;
            agrupamento_modulos_item = e.target.value;
            form.setValue(
              "descricao_item",
              `Estrutura ${tipoEstrutura_item ? `${tipoEstrutura_item} ` : ""}${tipoTelhado_item ? `${tipoTelhado_item} ` : ""
              }${agrupamento_modulos_item ? `para ${agrupamento_modulos_item} módulos ` : ""}${codDistribuidor_item && codFabricante_item
                ? `(${codDistribuidor_item} - ${codFabricante_item})`
                : codDistribuidor_item
                  ? `(${codDistribuidor_item})`
                  : codFabricante_item
                    ? `(${codFabricante_item})`
                    : ""
              }`,
            );
          }}
        />
      </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
            );
          }}
        />
      ))}
      {children}

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

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

export default FormEstrutura;