import InputSelectComponent from "@/components/Forms/InputSelect";
import {
  adicionarTabelaAvisos,
  deletarTabelaAvisos,
  listarTabelaAvisos,
} from "@/requests/CRUD/ParametrosComerciais/listarParametros";
import { listarTiposNegocios } from "@/requests/CRUD/TiposNegocios/listarTiposNegocios";
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";

const NoticeTab = ({ form, defaultValues }: any) => {
  const [tipoNegocioSelecionado, setTipoNegocioSelecionado] = useState("");
  const [tiposNegocio, setTiposNegocio] = useState<any[]>([]);

  const [configuracoes, setConfiguracoes] = useState<any>([]);
  const avisos = [
    {
      key: "aviso_monofasico_parametro",
      msg: "Mostrar Aviso MONOFÁSICO com inversor maior ou igual a 10k",
      model:
        "ATENÇÃO!!! A geração desta proposta está como MONOFÁSICO e com inversor maior ou igual a 10k, e a Concessionária poderá reprovar o projeto. Verifique com seu ENGENHEIRO se poderá seguir com esta proposta antes de enviar para o seu CLIENTE.",
    },
    {
      key: "aviso_bifasico_parametro",
      msg: "Mostrar Aviso BIFÁSICO com inversor maior ou igual a 20k",
      model:
        "ATENÇÃO!!! A proposta está como BIFÁSICO e com inversor maior ou igual a 20k, e a Concessionária poderá reprovar o projeto. Verifique com seu ENGENHEIRO se poderá seguir com esta proposta antes de enviar para o seu CLIENTE.",
    },
    {
      key: "aviso_inversoresBi_parametro",
      msg: "Mostrar Aviso de 2 inversores bifásicos",
      model:
        "ATENÇÃO!! A geração desta proposta, refere-se a um projeto bifásico. Para evitar que a concessionária rejeite o projeto, recomendamos utilizar dois inversores monofásicos, garantindo o balanceamento da rede.  Verifique com seu ENGENHEIRO se poderá seguir com esta proposta antes de enviar para o seu CLIENTE.",
    },
    {
      key: "aviso_sem_baterias_parametro",
      msg: "Mostrar Aviso de proposta sem baterias",
      model:
        "ATENÇÃO!! A geração desta proposta OFF-GRID ou Híbrido, está sem baterias adicionadas. Verifique com o seu ENGENHEIRO se poderá seguir com esta proposta antes de enviar para o seu cliente.",
    },
  ];

  useEffect(() => {
    listarTiposNegocios().then((tipos: any) => {
      const options = tipos.map((tipo: any) => ({
        label: tipo.nome_tipo_negocio,
        value: tipo.id_tipo_negocio,
      }));
      setTiposNegocio(options);
      listarTabelaAvisos().then((res: any) => {
        const novasConfigs = res.map((config: any) => ({
          tipoNegocio: config.cod_tipoNegocio_parametro,
          descricaoTipoNegocio: options.find(
            (t: any) => t.value === config.cod_tipoNegocio_parametro
          )?.label,
          avisos: {
            aviso_sem_baterias_parametro: {
              label:
                config.aviso_sem_baterias_parametro === "1" ? "Sim" : "Não",
              value: config.aviso_sem_baterias_parametro,
            },
            aviso_monofasico_parametro: {
              label: config.aviso_monofasico_parametro === "1" ? "Sim" : "Não",
              value: config.aviso_monofasico_parametro,
            },
            aviso_bifasico_parametro: {
              label: config.aviso_bifasico_parametro === "1" ? "Sim" : "Não",
              value: config.aviso_bifasico_parametro,
            },
            aviso_inversoresBi_parametro: {
              label:
                config.aviso_inversoresBi_parametro === "1"
                  ? "Sim, sem bloquear a próxima etapa"
                  : config.aviso_inversoresBi_parametro === "2"
                    ? "Sim, bloqueando a próxima etapa"
                    : "Não",
              value: config.aviso_inversoresBi_parametro,
            },
          },
        }));
        setConfiguracoes(novasConfigs);
        //   tipoNegocio: res.cod_tipoNegocio_parametro,
        //   descricaoTipoNegocio: tiposNegocio.find(
        //     (t) => t.value === res.cod_tipoNegocio_parametro
        //   )?.label,
        //   avisos: {
        //     aviso_sem_baterias_parametro: {
        //       label: res.aviso_sem_baterias_parametro === "1" ? "Sim" : "Não",
        //       value: res.aviso_sem_baterias_parametro,
        //     },
        //     aviso_monofasico_parametro: {
        //       label: res.aviso_monofasico_parametro === "1" ? "Sim" : "Não",
        //       value: res.aviso_monofasico_parametro,
        //     },
        //     aviso_bifasico_parametro: {
        //       label: res.aviso_bifasico_parametro === "1" ? "Sim" : "Não",
        //       value: res.aviso_bifasico_parametro,
        //     },
        //     aviso_inversoresBi_parametro: {
        //       label:
        //         res.aviso_inversoresBi_parametro === "1"
        //           ? "Sim, sem bloquear a próxima etapa"
        //           : res.aviso_inversoresBi_parametro === "2"
        //             ? "Sim, bloqueando a próxima etapa"
        //             : "Não",
        //       value: res.aviso_inversoresBi_parametro,
        //     },
        //   },
        // });
      });
    });
  }, []);

  const warning = (msg: React.ReactNode) => (
    <div className=" mb-5 w-full flex border items-center  bg-[#fff5ea]  gap-2 px-4 p-4 rounded-md border-[#fcdcaa] shadow-sm">
      <div className="rounded-full p-1 shadow-md bg-[#fef9f6]">
        <RiErrorWarningFill size={20} color="#ffb747" />
      </div>
      <p className="text-black ">{msg}</p>
    </div>
  );
  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 novaConfig = {
      tipoNegocio: tipoNegocioSelecionado,
      descricaoTipoNegocio: tiposNegocio.find(
        (t) => t.value === tipoNegocioSelecionado
      )?.label,
      avisos: form.getValues(),
    };
    console.log(form.getValues());
    adicionarTabelaAvisos({
      cod_tipoNegocio_parametro: tipoNegocioSelecionado,
      aviso_sem_baterias_parametro:
        form.getValues().aviso_sem_baterias_parametro.value,
      aviso_monofasico_parametro:
        form.getValues().aviso_monofasico_parametro.value,
      aviso_bifasico_parametro: form.getValues().aviso_bifasico_parametro.value,
      aviso_inversoresBi_parametro:
        form.getValues().aviso_inversoresBi_parametro.value,
    })
      .then(() => {
        toast.success("Configuração adicionada com sucesso!");
        setConfiguracoes((prev: any) => [...prev, novaConfig]);
      })
      .catch(() => {
        toast.error("Erro ao adicionar configuração!");
      });
  };
  return (
    <div className="space-y-6">
      {/* Aviso */}
      <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">
          Todos os avisos exibidos serão registrados no{" "}
          <b>Histórico do Projeto</b>.
        </span>
      </div>

      {/* Configuração dos Avisos */}
      <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 dos Avisos</h3>

          <p className="text-sm text-body-color">
            Defina quais alertas serão exibidos para cada tipo de negócio.
          </p>
        </div>

        <div className="grid grid-cols-1 xl:grid-cols-3 gap-3">
          {avisos.map((aviso, indexAviso) => {
            const baseOptions = [
              {
                label: "Sim",
                value: "1",
              },
              {
                label: "Não",
                value: "0",
              },
            ];

            const options =
              aviso.key === "aviso_inversoresBi_parametro"
                ? [
                    {
                      label: "Sim, sem bloquear a próxima etapa",
                      value: "1",
                    },
                    {
                      label: "Sim, bloqueando a próxima etapa",
                      value: "2",
                    },
                    {
                      label: "Não",
                      value: "0",
                    },
                  ]
                : baseOptions;

            return (
              <div
                key={indexAviso}
                className="
                bg-gray-1
                border
                border-stroke
                rounded-xl
                p-4
                hover:shadow-sm
                transition
              "
              >
                <div className="flex justify-between items-start mb-2">
                  <div>
                    <h4 className="text-sm font-semibold text-dark leading-tight">
                      {aviso.msg}
                    </h4>

                    <p className="text-[11px] text-body-color mt-0.5">
                      Configuração.
                    </p>
                  </div>

                  <Tooltip
                    title={
                      <div className="text-black">
                        <span className="block mb-2 font-medium">
                          Modelo da mensagem:
                        </span>

                        {warning(aviso.model)}
                      </div>
                    }
                    componentsProps={{
                      tooltip: {
                        sx: {
                          bgcolor: "white",
                          color: "black",
                          fontSize: "0.75rem",
                          fontFamily: "Satoshi",
                          borderRadius: "0.5rem",
                          maxWidth: 900,
                          border: 1,
                          borderColor: "#d4d4d8",
                          p: 1,
                        },
                      },
                    }}
                  >
                    <button
                      type="button"
                      className="
                      p-2
                      rounded-lg
                      hover:bg-white
                      transition
                    "
                    >
                      <Info size={16} />
                    </button>
                  </Tooltip>
                </div>

                <InputSelectComponent
                  name={aviso.key}
                  formulario={form}
                  options={options}
                  defaultValue={defaultValues && defaultValues[aviso.key]}
                />
              </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-sm font-semibold text-dark">
                  Tipo de Negócio
                </h4>
                <p className="text-[11px] text-body-color mt-1">
                  Escolha um tipo de negócio para salvar esta configuração.
                </p>
              </div>

              <InputSelectComponent
                name="tipoNegocio"
                formulario={form}
                options={tiposNegocio}
                onChange={(e: any) => setTipoNegocioSelecionado(e.value)}
              />
            </div>
          </div>
        </div>

        {/* Botão embaixo */}
        <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>

      {/* Configurações */}
      <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">
            Configurações associadas 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: any) => (
              <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>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={() =>
                      deletarTabelaAvisos(config.tipoNegocio).then(() => {
                        setConfiguracoes((prev: any) =>
                          prev.filter((_: any, i: any) => i !== index)
                        );
                      })
                    }
                  >
                    Excluir
                  </button>
                </div>

                <div className="grid md:grid-cols-2 gap-3">
                  {avisos.map((aviso, indexAviso) => (
                    <div
                      key={aviso.key ?? indexAviso}
                      className="
                      flex
                      items-start
                      gap-2
                      bg-white
                      border
                      border-stroke
                      rounded-lg
                      px-2
                      py-2
                    "
                    >
                      <div
                        className="
                        w-6
                        h-6
                        rounded-full
                        bg-green-100
                        flex
                        items-center
                        justify-center
                        text-green-600
                        font-bold
                      "
                      >
                        ✓
                      </div>

                      <div>
                        <div className="text-[11px] text-body-color leading-tight">
                          {" "}
                          {aviso.msg}
                        </div>

                        <div className="font-semibold text-sm">
                          {" "}
                          {config.avisos[aviso.key]?.label}
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
};

export default NoticeTab;