import InputSelectComponent from "@/components/Forms/InputSelect";
import {
  adicionarTabelaItensObrigatorios,
  deletarTabelaItensObrigatorios,
  listarTabelaItensObrigatorios,
} from "@/requests/CRUD/ParametrosComerciais/listarParametros";
import { listarTiposItensKit } from "@/requests/CRUD/ColetaDados/listarTiposItensKit";
import { listarTiposNegocios } from "@/requests/CRUD/TiposNegocios/listarTiposNegocios";
import { useEffect, useState } from "react";
import { RiErrorWarningFill } from "react-icons/ri";
import { toast } from "react-toastify";

const ObrigatoriedadeItensTab = ({ form }: any) => {
  const [tipoNegocioSelecionado, setTipoNegocioSelecionado] = useState("");
  const [tiposNegocio, setTiposNegocio] = useState<any[]>([]);
  const [tiposItens, setTiposItens] = useState<any[]>([]);
  const [itensSelecionados, setItensSelecionados] = useState<any[]>([]);
  const [configuracoes, setConfiguracoes] = useState<any[]>([]);

  const carregarConfiguracoes = (tipos: any[], itens: any[]) => {
    listarTabelaItensObrigatorios()
      .then((res: any) => {
        const lista = Array.isArray(res) ? res : [];
        setConfiguracoes(
          lista.map((config: any) => {
            const ids = String(config.itens_obrigatorios_parametro || "")
              .split(",")
              .map((id: string) => id.trim())
              .filter(Boolean);
            return {
              tipoNegocio: config.cod_tipoNegocio_parametro,
              descricaoTipoNegocio:
                tipos.find(
                  (t: any) => t.value === config.cod_tipoNegocio_parametro
                )?.label || config.cod_tipoNegocio_parametro,
              itens: ids.map((id: string) => ({
                value: id,
                label:
                  itens.find((item: any) => item.value === id)?.label ||
                  `Tipo ${id}`,
              })),
            };
          })
        );
      })
      .catch(() => {
        setConfiguracoes([]);
      });
  };

  useEffect(() => {
    Promise.all([listarTiposNegocios(), listarTiposItensKit()]).then(
      ([tipos, itensKit]: any[]) => {
        const optionsTipos = (tipos || []).map((tipo: any) => ({
          label: tipo.nome_tipo_negocio,
          value: String(tipo.id_tipo_negocio),
        }));
        const optionsItens = (itensKit || [])
          .filter((item: any) => item?.id_tipo_item)
          .map((item: any) => ({
            label: item.nome_tipo_item,
            value: String(item.id_tipo_item),
          }))
          .sort((a: any, b: any) => a.label.localeCompare(b.label));

        setTiposNegocio(optionsTipos);
        setTiposItens(optionsItens);
        carregarConfiguracoes(optionsTipos, optionsItens);
      }
    );
  }, []);

  const handleAdicionar = () => {
    if (!tipoNegocioSelecionado) {
      return toast.error(
        "Selecione um tipo de negócio para adicionar a configuração!"
      );
    }
    if (
      configuracoes.some((c: any) => c.tipoNegocio === tipoNegocioSelecionado)
    ) {
      return toast.error(
        "Já existe uma configuração para este tipo de negócio!"
      );
    }

    const itens =
      itensSelecionados?.map((item: any) => ({
        value: String(item.value),
        label: item.label,
      })) || [];

    const novaConfig = {
      tipoNegocio: tipoNegocioSelecionado,
      descricaoTipoNegocio: tiposNegocio.find(
        (t) => t.value === tipoNegocioSelecionado
      )?.label,
      itens,
    };

    adicionarTabelaItensObrigatorios({
      cod_tipoNegocio_parametro: tipoNegocioSelecionado,
      itens_obrigatorios_parametro: itens.map((item: any) => item.value).join(","),
    })
      .then(() => {
        toast.success("Configuração adicionada com sucesso!");
        setConfiguracoes((prev: any) => [...prev, novaConfig]);
        setItensSelecionados([]);
        form?.setValue?.("itens_obrigatorios_config", []);
        form?.setValue?.("tipoNegocio_itens_obrigatorios", "");
        setTipoNegocioSelecionado("");
      })
      .catch((err: any) => {
        toast.error(
          err?.message || "Erro ao adicionar configuração de obrigatoriedade!"
        );
      });
  };

  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-dark">
          Defina quais tipos de itens serão obrigatórios na aba{" "}
          <b>Componentes</b> da geração de proposta, por tipo de negócio. Deixe
          sem itens (ex.: Ampliação) para não exigir obrigatoriedade.
        </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 de Obrigatoriedade dos Itens
          </h3>
          <p className="text-sm text-body-color">
            Selecione o tipo de negócio e os itens que precisam compor a
            proposta.
          </p>
        </div>

        <div className="grid grid-cols-1 xl:grid-cols-2 gap-3">
          <div className="bg-primary/5 border border-primary/20 rounded-xl p-3">
            <h4 className="text-sm font-semibold text-dark mb-2">
              Tipo de Negócio
            </h4>
            <InputSelectComponent
              name="tipoNegocio_itens_obrigatorios"
              formulario={form}
              options={tiposNegocio}
              onChange={(e: any) => setTipoNegocioSelecionado(e?.value || "")}
            />
          </div>

          <div className="bg-gray-1 border border-stroke rounded-xl p-3">
            <h4 className="text-sm font-semibold text-dark mb-2">
              Itens Obrigatórios
            </h4>
            <InputSelectComponent
              name="itens_obrigatorios_config"
              formulario={form}
              options={tiposItens}
              isMulti
              onChange={(e: any) => setItensSelecionados(e || [])}
            />
            <p className="text-[11px] text-body-color mt-2">
          Sem itens obrigatórios para liberar propostas sem bloqueio (ex.:
          Ampliação).
            </p>
          </div>
        </div>

        <div className="mt-4">
          <button
            type="button"
            onClick={handleAdicionar}
            className="w-full h-[40px] px-4 rounded-lg bg-primary text-white font-medium shadow-sm hover:shadow-md transition"
          >
            + Adicionar 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-color">
            Itens obrigatórios associados aos tipos de negócio.
          </p>
        </div>

        {configuracoes.length === 0 ? (
          <div className="py-10 text-center text-body-color">
            Nenhuma configuração cadastrada.
          </div>
        ) : (
          <div className="grid xl:grid-cols-3 lg:grid-cols-2 gap-4">
            {configuracoes.map((config: any, index: number) => (
              <div
                key={config.tipoNegocio}
                className="border border-stroke rounded-xl p-4 bg-gray-1"
              >
                <div className="flex justify-between items-center mb-4">
                  <div>
                    <span className="text-sm text-body-color">
                      Tipo de Negócio:
                    </span>
                    <h4 className="font-semibold text-lg">
                      {config.descricaoTipoNegocio}
                    </h4>
                  </div>
                  <button
                    type="button"
                    className="text-danger hover:bg-danger/10 px-3 py-1 rounded-lg"
                    onClick={() =>
                      deletarTabelaItensObrigatorios(config.tipoNegocio).then(
                        () => {
                          setConfiguracoes((prev: any) =>
                            prev.filter((_: any, i: number) => i !== index)
                          );
                          toast.success("Configuração removida!");
                        }
                      )
                    }
                  >
                    Excluir
                  </button>
                </div>

                {config.itens.length === 0 ? (
                  <div className="text-sm text-body-color bg-white border border-dashed border-stroke rounded-lg px-3 py-2">
                    Sem itens obrigatórios
                  </div>
                ) : (
                  <div className="flex flex-wrap gap-2">
                    {config.itens.map((item: any) => (
                      <span
                        key={item.value}
                        className="text-xs bg-primary/10 text-primary px-2 py-1 rounded-full border border-primary/20"
                      >
                        {item.label}
                      </span>
                    ))}
                  </div>
                )}
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
};

export default ObrigatoriedadeItensTab;