import Input from "@/components/Forms/Input";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { cn } from "@/lib/utils";
import {
  listarChecklistPorCodCampo,
  listarOpcoesBanco,
} from "@/requests/CRUD/CamposPersonalizados/listarCamposPersonalizados";
import { useAuth } from "@/src/contexts/authContext";
import { useKanbanContext } from "@/src/contexts/kanbanContext";
import { useEffect, useMemo, useState } from "react";
import { toast } from "react-toastify";

// ─── Types ────────────────────────────────────────────────────────────────────

interface CampoPersonalizadoProps {
  dadosCampo: any;
  idEtapa: any;
  idFluxo: any;
  dataCard?: any;
  localCampo?: any;
  itensCompra?: any;
  customName?: any;
  formulario?: any;
  blockEditCard?: any;
  customIndex?: any;
  setImagemFile?: File | null | any;
  idColeta?: any;
  optionsBanco?: any;
  pendenciaID?: any;
  hideLabel?: boolean;
  /** Quando true, ignora valores já gravados na coleta e inicia vazio. */
  ignorarValoresGravados?: boolean;
}

// ─── Component ────────────────────────────────────────────────────────────────

const CampoPersonalizadoComponente = ({
  dadosCampo,
  idEtapa,
  idFluxo,
  dataCard,
  localCampo,
  itensCompra,
  customName,
  formulario,
  blockEditCard,
  customIndex,
  setImagemFile,
  idColeta,
  optionsBanco,
  pendenciaID,
  hideLabel = false,
  ignorarValoresGravados = false,
}: CampoPersonalizadoProps) => {
  const { lists } = useKanbanContext();
  const { perfil } = useAuth();

  const [checklists, setChecklists] = useState<any[]>([]);
  const [imagemBase64, setImagemBase64] = useState<string>("");
  const [canRender, setCanRender] = useState(false);
  const [opt, setOpt] = useState<any[]>([]);

  // ─── Computed: field name ──────────────────────────────────────────────────

  const nomeCampoFormatado = useMemo(() => {
    return (
      dadosCampo.nome_campo_personalizado
        .normalize("NFD")
        .replace(/[\u0300-\u036f]/g, "")
        .replace(/\s+/g, "_") + "_cp"
    );
  }, [dadosCampo.nome_campo_personalizado]);

  const name = useMemo(() => {
    if (dadosCampo.tipo_campo_personalizado === "1") {
      return "img_" + nomeCampoFormatado;
    }

    if (customIndex !== undefined) {
      return `${dadosCampo.id_campo_personalizado}^${nomeCampoFormatado}~${String(customIndex)}`;
    }

    if (localCampo !== "1") {
      return `${dadosCampo.id_campo_personalizado}^${nomeCampoFormatado}`;
    }

    return nomeCampoFormatado;
  }, [dadosCampo, localCampo, customIndex, nomeCampoFormatado]);

  // ─── Computed: permissions ─────────────────────────────────────────────────

  const canEdit = useMemo(() => {
    const fluxos = dadosCampo.fluxos ?? [];

    const match = (valor: any, alvo: any) =>
      valor === "*" || valor === "" || valor === alvo;

    const matchLista = (valor: any, alvo: any) =>
      valor === "*" || valor === "" || valor?.split(",")?.includes(alvo);

    return (
      fluxos.length === 0 ||
      fluxos.some(
        (f: any) =>
          match(f.fluxo_etapas_campo_personalizado, idFluxo) &&
          matchLista(f.editar_etapas_campo_personalizado, idEtapa)
      )
    );
  }, [dadosCampo.fluxos, idFluxo, idEtapa]);

  const profileCanEdit = useMemo(() => {
    const valor = dadosCampo.perfisEditar_campo_personalizado;

    const matchLista = (v: any, alvo: any) =>
      v === "*" || v === "" || v?.split(",")?.includes(alvo);

    return (
      matchLista(valor, perfil?.id_perfil) || perfil?.cargo_perfil === "-1"
    );
  }, [dadosCampo.perfisEditar_campo_personalizado, perfil]);

  // const camposPersonalizadosLock = useMemo(() => {
  //   const allCamposLock = lists.find(
  //     (r) => r.id === idEtapa
  //   )?.camposPersonalizadosLock;
  //   return (
  //     allCamposLock?.length > 0 &&
  //     localCampo === "4" &&
  //     allCamposLock?.includes(dadosCampo.id_campo_personalizado)
  //   );
  // }, [lists, idEtapa, localCampo, dadosCampo.id_campo_personalizado]);

  // const requiredField =
  //   dadosCampo.obrigatorio_campo_personalizado === "1" || camposPersonalizadosLock;
  const disabled = !canEdit || !profileCanEdit || blockEditCard;
  const fieldLabel = hideLabel
    ? undefined
    : dadosCampo.nome_campo_personalizado;

  const fieldWidth = useMemo(() => {
    if (!hideLabel) return undefined;

    const tipo = String(dadosCampo.tipo_campo_personalizado);
    if (["11", "5"].includes(tipo)) return "w-full max-w-2xl";
    if (tipo === "1") return "w-full max-w-md";
    if (tipo === "6") return "w-full max-w-2xl";
    return "w-full max-w-xl";
  }, [hideLabel, dadosCampo.tipo_campo_personalizado]);

  const defaultValueFromDB = useMemo(() => {
    if (ignorarValoresGravados) {
      return "";
    }

    const matchesColeta =
      dadosCampo.codNegocio_gravacao_personalizado === idColeta;

    const matchesPendencia =
      localCampo === "5"
        ? String(dadosCampo.pendencia_gravacao_personalizado) ===
          String(pendenciaID)
        : true; // for non-pendência locals, skip pendência check

    const matchesCampo =
      dadosCampo.codCampo_gravacao_personalizado ===
      dadosCampo.id_campo_personalizado;

    if (matchesColeta && matchesPendencia && matchesCampo) {
      return dadosCampo.dados_gravacao_personalizado;
    }
    return "";
  }, [dadosCampo, idColeta, localCampo, pendenciaID, ignorarValoresGravados]);
  useEffect(() => {
    if (
      ["2", "4", "5", "6", "10", "11"].includes(localCampo) &&
      dadosCampo?.nome_tabela_campo_personalizado
    ) {
      const data = {
        db_name: dadosCampo.nome_tabela_campo_personalizado,
        id_coleta: idColeta,
        status: dadosCampo?.status_tabela_campo_personalizado,
        distribuidorOrigem: dadosCampo?.origem_tabela_campo_personalizado,
        tipo_item: dadosCampo?.tipo_item_kit_campo_personalizado,
      };

      listarOpcoesBanco(data).then((res: any) => {
        if (res?.error) return toast.error(res.msg);

        const { data: linhas, labelColumn, valueColumn } = res ?? {};
        setOpt(
          (linhas ?? []).map((linha: any) => ({
            label: labelColumn ? linha[labelColumn] : Object.values(linha)[0],
            value: valueColumn ? linha[valueColumn] : Object.values(linha)[0],
          }))
        );
      });
    }
  }, [dadosCampo]);

  let optionsForChoose = dadosCampo?.descricao_multiselecao_personalizado?.map(
    (multi: any) => ({
      label: multi.descricao_multiselecao_personalizado,
      value: multi.id_multiselecao_personalizado,
    })
  );

  const formValues = formulario.control._formValues;
  const handleChange = (value: any) => {
    formulario.setValue(name, value);
  };
  const camposPersonalizadosLock = () => {
    const allCamposLock = lists.find(
      (r) => r.id === idEtapa
    )?.camposPersonalizadosLock;
    return allCamposLock?.length > 0 && localCampo === "4"
      ? allCamposLock?.includes(dadosCampo.id_campo_personalizado)
      : false;
  };

  useEffect(() => {
    if (dadosCampo.tipo_campo_personalizado === "5") {
      listarChecklistPorCodCampo({
        idCampo: dadosCampo.id_campo_personalizado,
        id_coleta: idColeta,
      }).then((res: any) => {
        setChecklists(res);

        const chkName = `checkboxes.${nomeCampoFormatado}`;
        const jaPreenchido = (formulario.getValues(chkName) || []).length > 0;

        if (!jaPreenchido) {
          const valoresSalvos = res
            .filter(
              (check: any) => !!check.marcado_gravacao_checklist_personalizado
            )
            .map((check: any) => ({
              idCampo: dadosCampo.id_campo_personalizado,
              idCheckbox: check.id_checklist_personalizado,
              valorCheck: check.marcado_gravacao_checklist_personalizado,
              option:
                check.opcao_escolhida_gravacao_checklist_personalizado || "",
              justificativa:
                check.justificativa_gravacao_checklist_personalizado || "",
            }));

          if (valoresSalvos.length > 0) {
            formulario.setValue(chkName, valoresSalvos);
          }
        }
      });
    }
  }, [dadosCampo]);

  const requiredField =
    dadosCampo.obrigatorio_campo_personalizado == "1" ||
    camposPersonalizadosLock();

  useEffect(() => {
    if (!formulario || !name) return;

    const registryKey = "camposPersonalizadosObrigatorios";
    const currentRegistry: Record<string, boolean> =
      formulario.getValues(registryKey) || {};

    if (requiredField) {
      if (!currentRegistry[name]) {
        formulario.setValue(registryKey, {
          ...currentRegistry,
          [name]: true,
        });
      }
    } else {
      if (currentRegistry[name]) {
        const updated = { ...currentRegistry };
        delete updated[name];
        formulario.setValue(registryKey, updated);
      }
    }

    return () => {
      const registry: Record<string, boolean> =
        formulario.getValues(registryKey) || {};
      if (registry[name]) {
        const updated = { ...registry };
        delete updated[name];
        formulario.setValue(registryKey, updated);
      }
    };
  }, [requiredField, name]);

  const handleChangeChkbx = (
    value: string,
    auto: number,
    id: number,
    index: number,
    option?: string,
    justificativa?: string
  ) => {
    const chkName = `checkboxes.${nomeCampoFormatado}`;
    let currentValues = [...(formulario.getValues(chkName) || [])];

    const match = (item: any) =>
      item.idCampo === dadosCampo.id_campo_personalizado &&
      item.idCheckbox === id;

    const existingIndex = currentValues.findIndex(match);
    const exists = existingIndex !== -1;

    // Toggle off if same value and no option
    if (
      !option &&
      exists &&
      currentValues[existingIndex].valorCheck === value
    ) {
      currentValues.splice(existingIndex, 1);
    } else {
      const newItem = {
        idCampo: dadosCampo.id_campo_personalizado,
        idCheckbox: id,
        valorCheck: value,
        option: option || "",
        justificativa: justificativa || "",
      };
      if (exists) {
        currentValues[existingIndex] = newItem;
      } else {
        currentValues.push(newItem);
      }
    }

    formulario.setValue(chkName, currentValues, {
      shouldDirty: true,
      shouldTouch: true,
      shouldValidate: true,
    });
  };

  // ─── Render helpers ────────────────────────────────────────────────────────

  const getCheckboxItemValues = (checkId: number) =>
    formulario
      .getValues(`checkboxes.${nomeCampoFormatado}`)
      ?.find(
        (item: any) =>
          item.idCampo === dadosCampo.id_campo_personalizado &&
          item.idCheckbox === checkId
      );

  const isCheckboxChecked = (checkId: number, descricao: string) =>
    formulario
      .getValues(`checkboxes.${nomeCampoFormatado}`)
      ?.some(
        (item: any) =>
          item.idCampo === dadosCampo.id_campo_personalizado &&
          item.idCheckbox === checkId &&
          item.valorCheck === descricao
      ) ?? false;

  const isSubOptionSelected = (checkId: number, subOption: string) =>
    formulario
      .getValues(`checkboxes.${nomeCampoFormatado}`)
      ?.some(
        (item: any) =>
          item.idCampo === dadosCampo.id_campo_personalizado &&
          item.idCheckbox === checkId &&
          item.option === subOption
      ) ?? false;

  const shouldShowJustificativa = (check: any) => {
    const secondSubOption =
      check.subOpcoes_checklist_personalizado?.split(",")?.[1];
    return formulario
      .getValues(`checkboxes.${nomeCampoFormatado}`)
      ?.some(
        (item: any) =>
          item.option !== "" &&
          item.idCampo === dadosCampo.id_campo_personalizado &&
          item.idCheckbox === check.id_checklist_personalizado &&
          item.option === secondSubOption
      );
  };

  // ─── Field renderers ───────────────────────────────────────────────────────

  const renderField = () => {
    // Unique key to force remount when pendência changes
    const fieldKey = `${name}-${pendenciaID ?? ""}`;

    switch (dadosCampo.tipo_campo_personalizado) {
      // File
      case "1":
        return (
          <Input
            key={fieldKey}
            type="file"
            formulario={formulario}
            label={fieldLabel}
            name={name}
            width={fieldWidth}
            required={requiredField}
            disabled={disabled}
            onInputProp={(event: any) => {
              const inputElement = event.target as HTMLInputElement;
              if (!inputElement.files?.length) return 1;

              const file = inputElement.files[0];
              const reader = new FileReader();
              reader.onloadend = () => {
                const base64String = reader.result as string;
                formulario.setValue(name as never, base64String as never);
                setImagemFile([file, name]);
                setImagemBase64(base64String);
              };
              reader.readAsDataURL(file);
              return 1;
            }}
            defaultValue={imagemBase64 || formulario.control._formValues[name]}
          />
        );

      // Date
      case "2":
        return (
          <Input
            key={fieldKey}
            mascara="data"
            formulario={formulario}
            label={fieldLabel}
            name={name}
            width={fieldWidth}
            disabled={disabled}
            required={requiredField}
            defaultValue={defaultValueFromDB}
          />
        );

      // Time
      case "3":
        return (
          <Input
            key={fieldKey}
            mascara="hora"
            formulario={formulario}
            label={fieldLabel}
            name={name}
            width={fieldWidth}
            required={requiredField}
            disabled={disabled}
          />
        );

      // Checkbox + subopções + justificativa
      case "5":
        return (
          <div className={cn("w-full", fieldWidth)}>
            <div className="grid gap-3 rounded-lg border border-stroke bg-slate-50/80 p-4 dark:border-strokedark dark:bg-meta-4/20">
              {checklists.map((check: any, i: number) => {
                const subOpcoes: string[] =
                  check.subOpcoes_checklist_personalizado
                    ?.split(",")
                    .filter(Boolean) ?? [];
                const currentItem = getCheckboxItemValues(
                  check.id_checklist_personalizado
                );

                return (
                  <div
                    key={check.id_checklist_personalizado}
                    className="flex flex-col gap-2"
                  >
                    {/* Main checkbox */}
                    <div className="flex items-center gap-2">
                      <input
                        type="checkbox"
                        value={check.descricao_checklist_personalizado}
                        name={name}
                        disabled={disabled}
                        required={requiredField}
                        checked={isCheckboxChecked(
                          check.id_checklist_personalizado,
                          check.descricao_checklist_personalizado
                        )}
                        onChange={() =>
                          handleChangeChkbx(
                            check.descricao_checklist_personalizado,
                            0,
                            check.id_checklist_personalizado,
                            i
                          )
                        }
                        className="w-5 h-5 text-green-600 bg-gray-200 border-gray-300 rounded focus:ring-green-500"
                      />
                      <label className="text-black dark:text-white text-sm font-medium whitespace-nowrap">
                        {check.descricao_checklist_personalizado}
                      </label>
                    </div>

                    {/* Sub-options (radio) */}
                    {subOpcoes.length > 0 && (
                      <div className="flex gap-4">
                        {subOpcoes.map((subOption, index) => (
                          <label
                            key={index}
                            className="flex ml-5 text-black items-center gap-1"
                          >
                            <input
                              type="radio"
                              required={requiredField}
                              name={`radio-group-${check.id_checklist_personalizado}`}
                              value={subOption}
                              checked={isSubOptionSelected(
                                check.id_checklist_personalizado,
                                subOption
                              )}
                              onChange={(e) =>
                                handleChangeChkbx(
                                  check.descricao_checklist_personalizado,
                                  1,
                                  check.id_checklist_personalizado,
                                  i,
                                  e.target.value
                                )
                              }
                            />
                            {subOption}
                          </label>
                        ))}
                      </div>
                    )}

                    {/* Justificativa (shows when 2nd sub-option selected) */}
                    {shouldShowJustificativa(check) && (
                      <div className="mt-2">
                        <Input
                          label="Justificativa"
                          rows={2}
                          formulario={formulario}
                          type="textarea"
                          name={`${dadosCampo.id_campo_personalizado}^justificativaChkBx-${i}`}
                          required={
                            check.obrigatorio_justificativa_checklist_personalizado ===
                            "1"
                          }
                          defaultValue={currentItem?.justificativa || ""}
                          onBlur={(e: any) =>
                            handleChangeChkbx(
                              check.descricao_checklist_personalizado,
                              0,
                              check.id_checklist_personalizado,
                              i,
                              currentItem?.option,
                              e.target.value
                            )
                          }
                        />
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          </div>
        );

      // Radio
      case "6": {
        const selectedRadioValue = formulario?.watch?.(name);

        return (
          <div className={cn("w-full", fieldWidth)}>
            {!hideLabel && (
              <label className="mb-3 block text-sm font-medium text-black dark:text-white">
                {dadosCampo.nome_campo_personalizado}
                {requiredField && (
                  <span className="ml-1 text-[#ff2b2b] font-semibold">*</span>
                )}
              </label>
            )}
            <div className="grid gap-3 rounded-lg border border-stroke bg-slate-50/80 p-4 dark:border-strokedark dark:bg-meta-4/20">
              {dadosCampo?.descricao_radio_personalizado
                ?.filter(
                  (campo: any) =>
                    campo.codCampo_radio_personalizado ===
                    dadosCampo.id_campo_personalizado
                )
                ?.map((radio: any, i: number) => {
                  const isSelected =
                    selectedRadioValue ===
                      radio.descricao_radio_personalizado ||
                    (!selectedRadioValue &&
                      dadosCampo?.dados_gravacao_personalizado ===
                        radio.descricao_radio_personalizado);

                  return (
                    <div key={i} className="flex items-center gap-2">
                      <input
                        id={`${name}-radio-${i}`}
                        name={name}
                        type="radio"
                        className="h-5 w-5 accent-primary"
                        required={requiredField && i === 0}
                        disabled={disabled}
                        checked={isSelected}
                        onChange={() =>
                          handleChange(radio.descricao_radio_personalizado)
                        }
                      />
                      <label
                        htmlFor={`${name}-radio-${i}`}
                        className="text-sm font-medium text-black dark:text-white"
                      >
                        {radio.descricao_radio_personalizado}
                      </label>
                    </div>
                  );
                })}
            </div>
          </div>
        );
      }

      // Numeric
      case "7":
        return (
          <Input
            key={fieldKey}
            mascara="numerico"
            formulario={formulario}
            label={fieldLabel}
            name={name}
            required={requiredField}
            width={fieldWidth || "w-1/2"}
            disabled={disabled}
            defaultValue={defaultValueFromDB}
          />
        );

      // Currency
      case "8":
        return (
          <Input
            key={fieldKey}
            mascara="numero"
            formulario={formulario}
            prefix="R$"
            label={fieldLabel}
            name={name}
            width={fieldWidth}
            required={requiredField}
            disabled={disabled}
            defaultValue={defaultValueFromDB}
          />
        );

      // Percentage
      case "9":
        return (
          <Input
            key={fieldKey}
            mascara="numero"
            formulario={formulario}
            prefix="%"
            label={fieldLabel}
            name={name}
            width={fieldWidth}
            required={requiredField}
            disabled={disabled}
            defaultValue={defaultValueFromDB}
          />
        );

      // Text
      case "10":
        return (
          <Input
            key={fieldKey}
            formulario={formulario}
            label={fieldLabel}
            name={name}
            width={fieldWidth}
            required={requiredField}
            disabled={disabled}
            defaultValue={defaultValueFromDB}
          />
        );

      // Textarea
      case "11":
        return (
          <Input
            key={fieldKey}
            type="textarea"
            formulario={formulario}
            label={fieldLabel}
            name={name}
            width={fieldWidth}
            required={requiredField}
            disabled={disabled}
            defaultValue={defaultValueFromDB}
          />
        );

      // MultiSelect
      case "12":
        return (
          <InputSelectComponent
            key={fieldKey}
            isMulti
            label={fieldLabel}
            options={
              dadosCampo?.nome_tabela_campo_personalizado
                ? opt
                : optionsForChoose
            }
            formulario={formulario}
            name={name}
            width={fieldWidth}
            required={requiredField}
            disabled={disabled}
            defaultValue={defaultValueFromDB}
          />
        );

      // Select
      case "13":
        return (
          <InputSelectComponent
            key={fieldKey}
            label={fieldLabel}
            options={
              dadosCampo?.nome_tabela_campo_personalizado
                ? opt
                : optionsForChoose
            }
            formulario={formulario}
            name={name}
            width={fieldWidth}
            required={requiredField}
            disabled={disabled}
            defaultValue={defaultValueFromDB}
            // defaultValue={
            //   dadosCampo.codNegocio_gravacao_personalizado === idColeta &&
            //     dadosCampo.codCampo_gravacao_personalizado ===
            //     dadosCampo.id_campo_personalizado
            //     ? dadosCampo.dados_gravacao_personalizado
            //     : ""
            // }
          />
        );

      default:
        return null;
    }
  };

  return <div className="w-full">{renderField()}</div>;
};

export default CampoPersonalizadoComponente;