import { useEffect, useRef, useState } from "react";
import InputGroup from "@/components/Forms/InputGroup";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { listarUsuariosMarketing } from "@/requests/CRUD/Usuario/listarUsuarios";

const INFO_USUARIO_MARKETING =
  'ATENÇÃO! Caso for utilizar o módulo de Distribuição de Leads do LINKSUN, é necessário informar aqui com qual usuário será criado os leads, pois assim, saberá quais negócios vieram do Marketing, para isso crie um PERFIL DE USUÁRIOS com o nome "Marketing" e relacione os usuários do Marketing a este Perfil, pois aqui serão listados apenas usuários deste perfil e com a situação "Ativos".';

const MarketingTab = ({ form, defaultValues }: any) => {
  const [usuarios, setUsuarios] = useState<
    { label: string; value: string | number }[]
  >([]);
  const [carregado, setCarregado] = useState(false);
  const valorInicializadoRef = useRef<string | null>(null);

  useEffect(() => {
    const carregarUsuarios = async () => {
      try {
        const response = await listarUsuariosMarketing({
          usuario_salvo: defaultValues?.usuarioResponsavelLead_parametro || "",
        });

        setUsuarios(
          (response || []).map((usuario: any) => ({
            label: usuario.nome_usuario,
            value: usuario.id_usuario,
          })),
        );
      } catch (error) {
        console.error(error);
        setUsuarios([]);
      } finally {
        setCarregado(true);
      }
    };

    carregarUsuarios();
  }, [defaultValues?.usuarioResponsavelLead_parametro]);

  useEffect(() => {
    const valorSalvo = defaultValues?.usuarioResponsavelLead_parametro;
    if (!valorSalvo || usuarios.length === 0) return;

    if (valorInicializadoRef.current === String(valorSalvo)) return;

    const opcaoSelecionada = usuarios.find(
      (u) => String(u.value) === String(valorSalvo),
    );

    if (opcaoSelecionada) {
      form.setValue(
        "usuarioResponsavelLead_parametro" as never,
        opcaoSelecionada as never,
      );
      valorInicializadoRef.current = String(valorSalvo);
    }
  }, [defaultValues?.usuarioResponsavelLead_parametro, usuarios, form]);

  return (
    <InputGroup className="px-4 flex flex-col gap-2">
      <InputSelectComponent
        formulario={form}
        name="usuarioResponsavelLead_parametro"
        label="Usuário Responsável - Lead Marketing"
        infoMessage={INFO_USUARIO_MARKETING}
        options={usuarios}
        defaultValue={defaultValues?.usuarioResponsavelLead_parametro}
        skipEffect
        placeholder={
          carregado && usuarios.length === 0
            ? "Nenhum usuário ativo com perfil Marketing"
            : "Selecione uma opção"
        }
        disabled={carregado && usuarios.length === 0}
      />
      {carregado && usuarios.length === 0 && (
        <p className="text-sm text-amber-700 bg-amber-50 border border-amber-200 rounded-md px-3 py-2">
          Nenhum usuário encontrado. Crie um <strong>Perfil de Usuário</strong>{" "}
          com o nome <strong>Marketing</strong>, cadastre ou edite os usuários
          do Marketing vinculando-os a esse perfil e mantenha a situação como{" "}
          <strong>Ativo</strong>.
        </p>
      )}
    </InputGroup>
  );
};

export default MarketingTab;