"use client";
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 Input from "@/components/Forms/Input";
import InputGroup from "@/components/Forms/InputGroup";
import InputSelectComponent from "@/components/Forms/InputSelect";
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";
import Swal from "sweetalert2";
import * as yup from "yup";

const FormModulo = ({
  onSubmitFunction,
  defaultValues,
  disabledFields,
  // distribuidores,
  // fabricantes,
  children,
  ...rest
}: any) => {
  const [imagemBase64, setImagemBase64] = useState<string>("");
  const [imagemFile, setImagemFile] = useState<File | null | any>(null);

  const [fichaBase64, setFichaBase64] = useState("");
  const [fichaFile, setFichaFile] = useState<File | null | any>(null);

  const [manualBase64, setManualBase64] = useState("");
  const [manualFile, setManualFile] = useState<File | null | any>(null);

  const { handleSubmit, ...form } = GetForm();
  const { ...formSup } = GetForm();

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

  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 {
    showDistribuidorModal,
    isDistribuidorLoading,
    handleOpenDistribuidorModal,
    handleCloseDistribuidorModal,
    handleDistribuidorSubmit,
    distribuidores,
  } = useDistribuidorModal();

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

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

    // caminhoFicha_item (pode ser múltiplo agora também)
    if (defaultValues["caminhoFicha_item"]) {
      processarArquivos("caminhoFicha_item", setFichaFile, setFichaBase64);
    }

    // caminhoManual_item (idem)
    if (defaultValues["caminhoManual_item"]) {
      processarArquivos("caminhoManual_item", setManualFile, setManualBase64);
    }
  }, [defaultValues]);

  const fileInputs = [
    {
      name: "caminhoFicha_item",
      label: "Ficha Técnica",
      base64State: fichaBase64,
      setBase64: setFichaBase64 as any,
      setFile: setFichaFile,
      isMultiple: true,
    },
    {
      name: "imagens_item",
      label: "Imagens",
      base64State: imagensBase64,
      setBase64: setImagensBase64,
      setFile: setImagemFile,
      isMultiple: true,
    },
    {
      name: "caminhoManual_item",
      label: "Manual",
      base64State: manualBase64,
      setBase64: setManualBase64,
      setFile: setManualFile,
      isMultiple: true,
    },
  ];

  function onSubmitModulo(data: any) {
    data["precoUnitario_item"] = FormatFields.desformatarNumeros(
      data["precoUnitario_item"]
    );
    if (!manualFile || (Array.isArray(manualFile) && manualFile.length === 0)) {
      data["caminhoManual_item_deletar"] = true;
    }
    if (!fichaFile || (Array.isArray(fichaFile) && fichaFile.length === 0)) {
      data["caminhoFicha_item_deletar"] = true;
    }
    if (!imagemFile || (Array.isArray(imagemFile) && imagemFile.length === 0)) {
      data["imagem_item_deletar"] = true;
    }
    data["anexo"] = imagemFile;
    data["ficha"] = fichaFile;
    data["manual"] = manualFile;

    data["parametro"] = "modulo";
    data["parametro_coluna"] = "modulos";
    data["parametro_anexo"] = "imagem_item";
    data["subpasta_aws"] = "Modulo/AnexoModulo";
    data["id_cliente"] = session.id_empresa_usuario;
    const potenciaVindo = parseFloat(
      form.getValues("potencia_item" as any) as any
    );
    if (potenciaVindo < 100) {
      Swal.fire({
        title: `Confirmar a ${defaultValues ? "edição" : "gravação"}?`,
        icon: "warning",
        html: `
    <p>A potência informada é menor que 100Wp!</p>
    <label style="display:flex;justify-content:center; align-items:center; gap:5px; margin-top:10px;">
      <input type="checkbox" id="confirmCheckbox">
      Estou ciente e desejo continuar.
    </label>
  `,
        confirmButtonText: "Sim",
        confirmButtonColor: "#4CAF50",
        showDenyButton: true,
        denyButtonText: "Cancelar",
        didOpen: () => {
          const confirmBtn = Swal.getConfirmButton() as any;
          const checkbox = Swal.getPopup()!.querySelector(
            "#confirmCheckbox"
          ) as any;

          // deixa o botão desabilitado até marcar
          confirmBtn.disabled = true;

          checkbox.addEventListener("change", (e: any) => {
            confirmBtn.disabled = !e.target.checked;
          });
        },
      }).then((result) => {
        if (result.isConfirmed) {
          return onSubmitFunction(data);
        }
      });
    } else {
      return onSubmitFunction(data);
    }
  }

  return (
    <form onSubmit={handleSubmit(onSubmitModulo)} {...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"
          onChange={(e: any) => {
            const descricao_item = form.control._formValues?.descricao_item;
            let {
              codFabricante_item,
              potencia_item,
              modelo_item,
              codDistribuidor_item,
            } = form?.control?._formValues;
            codFabricante_item = codFabricante_item?.label;
            codDistribuidor_item = codDistribuidor_item?.label;
            form.setValue(
              "descricao_item",
              `${codFabricante_item ? `${codFabricante_item} ` : ""}${potencia_item ? `${potencia_item}W ` : ""}${modelo_item ? `${modelo_item} ` : ""}${codDistribuidor_item ? `- (${codDistribuidor_item})` : ""}`
            );
          }}
        />
        <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"
          onChange={(e: any) => {
            const descricao_item = form.control._formValues?.descricao_item;
            let {
              codFabricante_item,
              potencia_item,
              modelo_item,
              codDistribuidor_item,
            } = form?.control?._formValues;
            codFabricante_item = codFabricante_item?.label;
            codDistribuidor_item = codDistribuidor_item?.label;
            form.setValue(
              "descricao_item",
              `${codFabricante_item ? `${codFabricante_item} ` : ""}${potencia_item ? `${potencia_item}W ` : ""}${modelo_item ? `${modelo_item} ` : ""}${codDistribuidor_item ? `- (${codDistribuidor_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);
          // }}
        />
      </InputGroup>
      <InputGroup>
        <Input
          label="Potencia(Wp)"
          name="potencia_item"
          formulario={form}
          mascara="numero"
          maxLength={7}
          defaultValue={defaultValues && defaultValues["potencia_item"]}
          disabled={disabledFields?.some(
            (field: string) => field == "potencia_item"
          )}
          required
          onChange={(event: any) => {
            event.target.value == "0"
              ? (event.target.value = "")
              : (event.target.value = event.target.value);

            const descricao_item = form.control._formValues?.descricao_item;
            let {
              codFabricante_item,
              potencia_item,
              modelo_item,
              codDistribuidor_item,
            } = form?.control?._formValues;
            codFabricante_item = codFabricante_item?.label;
            codDistribuidor_item = codDistribuidor_item?.label;
            potencia_item = event.target.value;
            form.setValue(
              "descricao_item",
              `${codFabricante_item ? `${codFabricante_item} ` : ""}${potencia_item ? `${potencia_item}W ` : ""}${modelo_item ? `${modelo_item} ` : ""}${codDistribuidor_item ? `- (${codDistribuidor_item})` : ""}`
            );
          }}
        />
        <Input
          label="Modelo do Módulo"
          name="modelo_item"
          formulario={form}
          defaultValue={defaultValues && defaultValues["modelo_item"]}
          disabled={disabledFields?.some(
            (field: string) => field == "modelo_item"
          )}
          onChange={(e: any) => {
            const descricao_item = form.control._formValues?.descricao_item;
            let {
              codFabricante_item,
              potencia_item,
              modelo_item,
              codDistribuidor_item,
            } = form?.control?._formValues;
            codFabricante_item = codFabricante_item?.label;
            codDistribuidor_item = codDistribuidor_item?.label;
            modelo_item = e.target.value;
            form.setValue(
              "descricao_item",
              `${codFabricante_item ? `${codFabricante_item} ` : ""}${potencia_item ? `${potencia_item}W ` : ""}${modelo_item ? `${modelo_item} ` : ""}${codDistribuidor_item ? `- (${codDistribuidor_item})` : ""}`
            );
          }}
        />
        <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"
          )}
        />
        <div className="rounded-md gap-2 pt-3 flex p-2 border border-black relative w-full">
          <span className="absolute text-sm text-black bg-white px-2 -top-3 left-4">
            Eficiência do Módulo
          </span>
          <Input
            name="anos_eficiencia_item"
            label="Período (anos)"
            formulario={form}
            mascara="numerico"
            maxLength={2}
            error="Informe o período"
            defaultValue={
              defaultValues && defaultValues["anos_eficiencia_item"]
            }
            schema={yup
              .number()
              .required("Informe o número de anos")
              .transform((val) => +FormatFields.desformatarNumeros(val || 0))
              .min(1, "Mínimo 1 ano")}
          />
          <Input
            name="eficiencia_25anos_item"
            label="Eficiência após período (%)"
            formulario={form}
            mascara="numerico"
            maxLength={3}
            error="Informe a eficiência após período"
            defaultValue={
              defaultValues && defaultValues["eficiencia_25anos_item"]
            }
            disabled={disabledFields?.some(
              (field: string) => field == "eficiencia_25anos_item"
            )}
            schema={yup
              .number()
              .required("Informe a Eficiência")
              .transform((val) => +FormatFields.desformatarNumeros(val || 0))
              // .min(0, "Valor Mínimo: 30")
              .max(100, "Valor Máximo: 100")}
          />
        </div>
      </InputGroup>
      <InputGroup>
        <Input
          label="Altura"
          name="altura_item"
          formulario={form}
          mascara="numero"
          prefix="metros"
          maxLength={6}
          defaultValue={defaultValues && defaultValues["altura_item"]}
          disabled={disabledFields?.some(
            (field: string) => field == "altura_item"
          )}
          onChange={(e) => {
            if (e.target.value && form.control._formValues?.largura_item) {
              form.setValue(
                "area_item",
                FormatFields.formatarNumero(
                  +FormatFields.desformatarNumeros(e.target.value) *
                    +FormatFields.desformatarNumeros(
                      form.control._formValues?.largura_item
                    )
                )
              );
            }
          }}
        />
        <Input
          label="Largura"
          name="largura_item"
          formulario={form}
          mascara="numero"
          prefix="metros"
          maxLength={6}
          defaultValue={defaultValues && defaultValues["largura_item"]}
          disabled={disabledFields?.some(
            (field: string) => field == "largura_item"
          )}
          onChange={(e) => {
            if (e.target.value && form.control._formValues?.altura_item) {
              form.setValue(
                "area_item",
                FormatFields.formatarNumero(
                  +FormatFields.desformatarNumeros(e.target.value) *
                    +FormatFields.desformatarNumeros(
                      form.control._formValues?.altura_item
                    )
                )
              );
            }
          }}
        />
        <Input
          label="Área"
          name="area_item"
          formulario={form}
          mascara="numero"
          defaultValue={defaultValues && defaultValues["area_item"]}
          prefix="m²"
          disabled
        />
        <Input
          label="Peso"
          name="peso_item"
          formulario={form}
          mascara="numerico"
          prefix="Kg"
          maxLength={4}
          defaultValue={defaultValues && defaultValues["peso_item"]}
          disabled={disabledFields?.some(
            (field: string) => field == "peso_item"
          )}
          schema={yup
            .number()
            .required("Informe o Peso")
            .transform((val) => +FormatFields.desformatarNumeros(val || 0))
            // .min(0, "Valor Mínimo: 30")
            .max(1000, "Valor Máximo: 1000")}
        />
        <InputSelectComponent
          name="suportaOffGrid_item"
          label="Suporta Off Grid?"
          formulario={form}
          options={[
            { label: "Não", value: "0" },
            { label: "Sim", value: "1" },
          ].map((e) => ({
            label: e.label,
            value: e.value,
          }))}
          defaultValue={defaultValues && defaultValues["suportaOffGrid_item"]}
        />
      </InputGroup>
      <InputGroup>
        <Input
          label="Descrição"
          name="descricao_item"
          formulario={form}
          required
          type="textarea"
          defaultValue={defaultValues && defaultValues["descricao_item"]}
          disabled={disabledFields?.some(
            (field: string) => field == "descricao_item"
          )}
        />
        <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">
        {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
              );
            }}
          />
        ))}
      </InputGroup>

      {children}

      {/* Modal para cadastro de distribuidores */}
      <DistribuidorModal
        isOpen={showDistribuidorModal}
        isLoading={isDistribuidorLoading}
        onClose={handleCloseDistribuidorModal}
        onSubmit={handleDistribuidorSubmit}
      />

      {/* Modal para cadastro de fabricantes */}
      <FabricanteModal
        isOpen={showFabricanteModal}
        isLoading={isFabricanteLoading}
        onClose={handleCloseFabricanteModal}
        onSubmit={handleFabricanteSubmit}
      />
    </form>
  );
};

export default FormModulo;