import InputSelectComponent from "@/components/Forms/InputSelect";
import {
  deletarParametroDeslocamento,
  listarParametrosDeslocamento,
  salvarParametroDeslocamento,
} from "@/requests/CRUD/ParametrosComerciais/listarParametros";
import { listarTiposNegocios } from "@/requests/CRUD/TiposNegocios/listarTiposNegocios";
import { FormatFields, GetForm } from "@/utils";
import { MSG_INFO_KM_MINIMO_DESLOCAMENTO } from "@/utils/deslocamento";
import { Tooltip } from "@mui/material";
import { Info } from "lucide-react";
import { useEffect, useState } from "react";
import { RiErrorWarningFill } from "react-icons/ri";
import { toast } from "react-toastify";

/**
 * Parametrização de DESLOCAMENTO por TIPO DE NEGÓCIO.
 *
 * 1) "Exigir Deslocamento na Proposta?" (Sim/Não)
 * 2) "Distância Aproximada da Loja >= a:" XX "Kms"
 *    (só é solicitado quando o campo 1 for igual a SIM)
 *
 * Os Kms também podem ser editados diretamente em "Configurações Cadastradas".
 */

const OPCOES_SIM_NAO = [
  { label: "Sim", value: "1" },
  { label: "Não", value: "0" },
];

/**
 * Reproduz a máscara `numero` do componente Input (digitação em centavos),
 * para manter o mesmo comportamento dos demais campos numéricos do sistema.
 */
const aplicarMascaraNumero = (valor: string) => {
  if (valor === "" || valor === null || valor === undefined) return "";
  if (valor.length === 1) {
    return "0,0" + (FormatFields.formatarNumerico(valor) || "0");
  }
  return FormatFields.formatarNumero(valor);
};

interface IConfigDeslocamento {
  tipoNegocio: string;
  descricaoTipoNegocio?: string;
  exigirDeslocamento: boolean;
  kmMinimo: any;
}

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

  const [tiposNegocio, setTiposNegocio] = useState<any[]>([]);
  const [configuracoes, setConfiguracoes] = useState<IConfigDeslocamento[]>([]);
  const [tipoNegocioSelecionado, setTipoNegocioSelecionado] = useState("");
  const [exigirDeslocamento, setExigirDeslocamento] = useState("0");
  const [kmMinimo, setKmMinimo] = useState("");
  const [isLoading, setIsLoading] = useState(false);

  // Edição inline dos Kms nas configurações cadastradas.
  const [kmEmEdicao, setKmEmEdicao] = useState<Record<string, string>>({});
  const [salvandoInline, setSalvandoInline] = useState("");

  const montarConfiguracoes = (
    registros: any[],
    opcoes: any[],
  ): IConfigDeslocamento[] =>
    registros.map((registro: any) => ({
      tipoNegocio: String(registro.cod_tipoNegocio_parametro),
      descricaoTipoNegocio: opcoes.find(
        (tipo: any) =>
          String(tipo.value) === String(registro.cod_tipoNegocio_parametro),
      )?.label,
      exigirDeslocamento: String(registro.exigirDeslocamento_parametro) === "1",
      kmMinimo: registro.kmMinimoDeslocamento_parametro,
    }));

  useEffect(() => {
    listarTiposNegocios().then((tipos: any) => {
      const opcoes = (tipos || []).map((tipo: any) => ({
        label: tipo.nome_tipo_negocio,
        value: String(tipo.id_tipo_negocio),
      }));
      setTiposNegocio(opcoes);

      listarParametrosDeslocamento().then((registros: any) => {
        setConfiguracoes(montarConfiguracoes(registros || [], opcoes));
      });
    });
  }, []);

  /** Insere ou substitui a configuração de um tipo de negócio na lista. */
  const aplicarConfiguracao = (nova: IConfigDeslocamento) =>
    setConfiguracoes((prev) => {
      const existe = prev.some(
        (config) => config.tipoNegocio === nova.tipoNegocio,
      );
      return existe
        ? prev.map((config) =>
            config.tipoNegocio === nova.tipoNegocio ? nova : config,
          )
        : [...prev, nova];
    });

  const handleSalvar = () => {
    if (!tipoNegocioSelecionado) {
      return toast.error(
        "Selecione um tipo de negócio para salvar a configuração!",
      );
    }

    const km = Number(FormatFields.desformatarNumeros(kmMinimo)) || 0;

    if (exigirDeslocamento === "1" && km <= 0) {
      return toast.error(
        'Informe o valor do campo "Distância Aproximada da Loja >= a:" em Kms!',
      );
    }

    setIsLoading(true);

    salvarParametroDeslocamento({
      cod_tipoNegocio_parametro: tipoNegocioSelecionado,
      exigirDeslocamento_parametro: exigirDeslocamento,
      kmMinimoDeslocamento_parametro: exigirDeslocamento === "1" ? km : null,
    })
      .then(() => {
        toast.success("Configuração de deslocamento salva com sucesso!");
        aplicarConfiguracao({
          tipoNegocio: tipoNegocioSelecionado,
          descricaoTipoNegocio: tiposNegocio.find(
            (tipo) => tipo.value === tipoNegocioSelecionado,
          )?.label,
          exigirDeslocamento: exigirDeslocamento === "1",
          kmMinimo: exigirDeslocamento === "1" ? km : null,
        });
      })
      .catch(() =>
        toast.error("Erro ao salvar a configuração de deslocamento!"),
      )
      .finally(() => setIsLoading(false));
  };

  /** Salva apenas os Kms alterados no card da configuração cadastrada. */
  const handleSalvarKmInline = (config: IConfigDeslocamento) => {
    const km =
      Number(
        FormatFields.desformatarNumeros(kmEmEdicao[config.tipoNegocio] ?? ""),
      ) || 0;

    if (km <= 0) {
      return toast.error("Informe uma distância em Kms maior que zero!");
    }

    setSalvandoInline(config.tipoNegocio);

    salvarParametroDeslocamento({
      cod_tipoNegocio_parametro: config.tipoNegocio,
      exigirDeslocamento_parametro: "1",
      kmMinimoDeslocamento_parametro: km,
    })
      .then(() => {
        toast.success("Kms atualizados com sucesso!");
        aplicarConfiguracao({
          ...config,
          exigirDeslocamento: true,
          kmMinimo: km,
        });
        setKmEmEdicao((prev) => {
          const novo = { ...prev };
          delete novo[config.tipoNegocio];
          return novo;
        });
        // Mantém o formulário do topo em sincronia quando é o mesmo tipo.
        if (config.tipoNegocio === tipoNegocioSelecionado) {
          setExigirDeslocamento("1");
          setKmMinimo(FormatFields.formatarNumero(km));
        }
      })
      .catch(() => toast.error("Erro ao atualizar os Kms!"))
      .finally(() => setSalvandoInline(""));
  };

  const handleExcluir = (tipoNegocio: string) => {
    deletarParametroDeslocamento({ cod_tipoNegocio_parametro: tipoNegocio })
      .then(() => {
        toast.success("Configuração removida!");
        setConfiguracoes((prev) =>
          prev.filter((config) => config.tipoNegocio !== tipoNegocio),
        );
      })
      .catch(() => toast.error("Erro ao remover a configuração!"));
  };

  const inputKmClassName =
    "w-full rounded border-[1.5px] border-stroke bg-transparent py-1 px-2 text-sm font-medium outline-none transition focus:border-primary dark:border-form-strokedark dark:bg-form-input";

  return (
    <div className="space-y-6">
      <div className="flex items-center gap-3 bg-amber-50 border border-amber-200 rounded-xl px-4 py-3">
        <RiErrorWarningFill size={22} className="text-amber-500 shrink-0" />
        <span className="text-sm text-black">
          Quando a <b>Distância Aproximada da Loja</b> do projeto (aba{" "}
          <b>Endereço da Instalação</b>) for maior ou igual à distância
          configurada aqui, a proposta passa a exigir a cobrança do custo extra{" "}
          <b>DESLOCAMENTO</b>.
        </span>
      </div>

      <div className="bg-white border border-stroke rounded-xl p-4 shadow-sm">
        <div className="mb-4">
          <h3 className="text-base font-semibold">
            Configuração do Deslocamento
          </h3>
          <p className="text-sm text-body">
            Defina a exigência de deslocamento para cada tipo de negócio.
          </p>
        </div>

        <div className="grid grid-cols-1 xl:grid-cols-3 gap-3">
          {/* 1) Exigir Deslocamento na Proposta? */}
          <div className="bg-gray border border-stroke rounded-xl p-3">
            <h4 className="text-[13px] font-semibold text-black leading-tight min-h-[2.5rem] mb-2">
              Exigir Deslocamento
              <br />
              na Proposta?
            </h4>
            <InputSelectComponent
              name="exigirDeslocamento_parametro"
              formulario={form}
              options={OPCOES_SIM_NAO}
              // ATENÇÃO: precisa ser um valor primitivo estável. Um objeto
              // literal aqui gera nova referência a cada render e o efeito de
              // defaultValue do InputSelect reescreve o campo, revertendo a
              // escolha do usuário para "Não".
              defaultValue={exigirDeslocamento}
              onChange={(e: any) =>
                setExigirDeslocamento(String(e?.value ?? "0"))
              }
            />
          </div>

          {/* 2) Distância mínima — só quando o campo 1 for SIM */}
          {exigirDeslocamento === "1" && (
            <div className="bg-gray border border-stroke rounded-xl p-3">
              <div className="flex justify-between items-start mb-2">
                <h4 className="text-[13px] font-semibold text-black leading-tight min-h-[2.5rem]">
                  Distância Aproximada
                  <br />
                  da Loja &gt;= a:
                </h4>
                <Tooltip
                  title={
                    <div className="text-black">
                      {MSG_INFO_KM_MINIMO_DESLOCAMENTO}
                    </div>
                  }
                  componentsProps={{
                    tooltip: {
                      sx: {
                        bgcolor: "white",
                        color: "black",
                        fontSize: "0.75rem",
                        fontFamily: "Satoshi",
                        borderRadius: "0.5rem",
                        maxWidth: 500,
                        border: 1,
                        borderColor: "#d4d4d8",
                        p: 1,
                      },
                    },
                  }}
                >
                  <button type="button" className="p-1.5 rounded-lg">
                    <Info size={14} />
                  </button>
                </Tooltip>
              </div>
              <div className="flex flex-row gap-2 items-center">
                <input
                  type="text"
                  inputMode="decimal"
                  className={inputKmClassName}
                  value={kmMinimo}
                  onChange={(e) =>
                    setKmMinimo(aplicarMascaraNumero(e.target.value))
                  }
                />
                <span className="text-sm whitespace-nowrap">Kms</span>
              </div>
            </div>
          )}

          <div className="bg-primary/5 border border-primary/20 rounded-xl p-3">
            <div className="flex flex-col gap-2">
              <div>
                <h4 className="text-[13px] font-semibold text-black leading-tight min-h-[2.5rem]">
                  Tipo de
                  <br />
                  Negócio
                </h4>
                <p className="text-[11px] text-body mt-1 leading-tight">
                  Escolha um tipo de negócio para salvar esta configuração.
                </p>
              </div>
              <InputSelectComponent
                name="tipoNegocioDeslocamento"
                formulario={form}
                options={tiposNegocio}
                onChange={(e: any) => {
                  const tipoNegocio = String(e?.value ?? "");
                  setTipoNegocioSelecionado(tipoNegocio);

                  // Carrega a configuração já cadastrada, se houver.
                  const existente = configuracoes.find(
                    (config) => config.tipoNegocio === tipoNegocio,
                  );
                  setExigirDeslocamento(
                    existente?.exigirDeslocamento ? "1" : "0",
                  );
                  setKmMinimo(
                    existente?.kmMinimo
                      ? FormatFields.formatarNumero(existente.kmMinimo)
                      : "",
                  );
                }}
              />
            </div>
          </div>
        </div>

        <div className="mt-4">
          <button
            type="button"
            disabled={isLoading}
            onClick={handleSalvar}
            className="w-full h-[40px] px-4 rounded-lg bg-primary text-white font-medium shadow-sm hover:shadow-md transition disabled:opacity-60"
          >
            {isLoading ? "Salvando..." : "+ Salvar Configuração"}
          </button>
        </div>
      </div>

      <div className="bg-white border border-stroke rounded-xl p-4">
        <div className="mb-4">
          <h3 className="text-lg font-semibold">Configurações Cadastradas</h3>
          <p className="text-sm text-body">
            Configurações associadas aos tipos de negócio. Os Kms podem ser
            alterados aqui mesmo.
          </p>
        </div>

        {configuracoes.length === 0 ? (
          <div className="py-10 text-center text-body">
            Nenhuma configuração cadastrada.
          </div>
        ) : (
          <div className="grid xl:grid-cols-3 lg:grid-cols-2 gap-4">
            {configuracoes.map((config) => {
              const kmAtual = config.kmMinimo
                ? FormatFields.formatarNumero(config.kmMinimo)
                : "";
              const kmDigitado = kmEmEdicao[config.tipoNegocio] ?? kmAtual;
              const alterado = kmDigitado !== kmAtual;

              return (
                <div
                  key={config.tipoNegocio}
                  className="border border-stroke rounded-xl p-4 bg-gray"
                >
                  <div className="flex justify-between items-center mb-4">
                    <div>
                      <span>Tipo de Negócio: </span>
                      <h4 className="font-semibold text-lg">
                        {config.descricaoTipoNegocio || config.tipoNegocio}
                      </h4>
                    </div>
                    <button
                      type="button"
                      className="text-danger hover:bg-danger/10 px-3 py-1 rounded-lg"
                      onClick={() => handleExcluir(config.tipoNegocio)}
                    >
                      Excluir
                    </button>
                  </div>

                  <div className="flex flex-col gap-2">
                    <div className="flex items-center gap-2 bg-white border border-stroke rounded-lg px-2 py-1.5">
                      <div className="text-[11px] text-body leading-tight flex-1 min-h-[2rem]">
                        Exigir Deslocamento
                        <br />
                        na Proposta?
                      </div>
                      <div className="font-semibold text-sm">
                        {config.exigirDeslocamento ? "Sim" : "Não"}
                      </div>
                    </div>

                    {config.exigirDeslocamento && (
                      <div className="flex flex-col gap-1.5 bg-white border border-stroke rounded-lg px-2 py-1.5">
                        <div className="flex items-center gap-1">
                          <div className="text-[11px] text-body leading-tight flex-1 min-h-[2rem]">
                            Distância Aproximada
                            <br />
                            da Loja &gt;= a:
                          </div>
                          <Tooltip
                            title={
                              <div className="text-black">
                                {MSG_INFO_KM_MINIMO_DESLOCAMENTO}
                              </div>
                            }
                            componentsProps={{
                              tooltip: {
                                sx: {
                                  bgcolor: "white",
                                  color: "black",
                                  fontSize: "0.75rem",
                                  fontFamily: "Satoshi",
                                  borderRadius: "0.5rem",
                                  maxWidth: 500,
                                  border: 1,
                                  borderColor: "#d4d4d8",
                                  p: 1,
                                },
                              },
                            }}
                          >
                            <button type="button" className="p-1 rounded">
                              <Info size={14} />
                            </button>
                          </Tooltip>
                        </div>
                        <div className="flex flex-row gap-2 items-center">
                          <input
                            type="text"
                            inputMode="decimal"
                            className={inputKmClassName}
                            value={kmDigitado}
                            onChange={(e) =>
                              setKmEmEdicao((prev) => ({
                                ...prev,
                                [config.tipoNegocio]: aplicarMascaraNumero(
                                  e.target.value,
                                ),
                              }))
                            }
                          />
                          <span className="text-sm whitespace-nowrap">Kms</span>
                          <button
                            type="button"
                            disabled={
                              !alterado || salvandoInline === config.tipoNegocio
                            }
                            onClick={() => handleSalvarKmInline(config)}
                            className="px-3 py-1.5 rounded-lg bg-primary text-white text-xs font-medium whitespace-nowrap disabled:opacity-40"
                          >
                            {salvandoInline === config.tipoNegocio
                              ? "..."
                              : "Salvar"}
                          </button>
                        </div>
                      </div>
                    )}
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
};

export default DeslocamentoTab;