import FileRenderer from "@/components/FileRenderer";
import Button from "@/components/Forms/Button";
import ModalComponente from "@/components/Modal/ModalComponente";
import { handleSweetAlert } from "@/components/Modal/SweetAlertConfirm";
import { editarAnexo } from "@/requests/CRM/kanban";
import { Edit, Tag, Trash } from "lucide-react";
import { MouseEvent, useRef, useState } from "react";
import Swal from "sweetalert2";

const AnexosCard = ({
  anexo,
  anexos,
  atualizarAnexos,
  id_usuario,
  setAnexos,
  onClick,
  perfil,
  isFluxoPerdas: isFluxoPerdasProp,
}: any) => {
  const [isLoading, setIsLoading] = useState(false);
  const [isLoadingTag, setIsLoadingTag] = useState(false);
  const isTagged = String(anexo.arquivo_tag_card) === "1";

  const onToggleArquivoTag = (e: MouseEvent<HTMLButtonElement, MouseEvent>) => {
    e.stopPropagation();
    const novoValorTag = isTagged ? "0" : "1";

    setIsLoadingTag(true);
    console.log("e", e);
    // Se está marcando como tag, desmarcar todos os outros da mesma categoria
    if (novoValorTag === "1") {
      const outrosAnexosDamesmaCategoria = anexos.filter(
        (item: any) =>
          item.categoria_arquivo_card === anexo.categoria_arquivo_card &&
          item.id_arquivo_card !== anexo.id_arquivo_card &&
          String(item.arquivo_tag_card) === "1"
      );

      // Fazer chamadas API para desmarcar os outros
      const promessasDesmarcar = outrosAnexosDamesmaCategoria.map(
        (item: any) => {
          editarAnexo({
            id_arquivo_card: item.id_arquivo_card,
            id_coleta_card: item.coleta_id_arquivo_card,
            codUsuarioAtualizacao_arquivo_card: id_usuario,
            arquivo_tag_card: "0",
          });
        }
      );

      Promise.all(promessasDesmarcar)
        .then(() => {
          console.log("Desmarcando anexo ID:", anexo);

          // Depois marcar o anexo atual como tag
          return editarAnexo({
            id_arquivo_card: anexo.id_arquivo_card,
            id_coleta_card: anexo.coleta_id_arquivo_card,
            codUsuarioAtualizacao_arquivo_card: id_usuario,
            arquivo_tag_card: novoValorTag,
          });
        })
        .then(() => {
          setAnexos((prevAnexos: any[]) =>
            prevAnexos.map((item) => {
              // Desmarcar outros anexos da mesma categoria
              if (
                item.categoria_arquivo_card === anexo.categoria_arquivo_card &&
                item.id_arquivo_card !== anexo.id_arquivo_card
              ) {
                return { ...item, arquivo_tag_card: "0" };
              }
              // Marcar o anexo atual
              if (item.id_arquivo_card === anexo.id_arquivo_card) {
                return { ...item, arquivo_tag_card: novoValorTag };
              }
              return item;
            })
          );
        })
        .finally(() => setIsLoadingTag(false));
    } else {
      // Se está desmarcando, apenas fazer a chamada normal
      editarAnexo({
        id_arquivo_card: anexo.id_arquivo_card,
        id_coleta_card: anexo.coleta_id_arquivo_card,
        codUsuarioAtualizacao_arquivo_card: id_usuario,
        arquivo_tag_card: novoValorTag,
      })
        .then(() => {
          setAnexos((prevAnexos: any[]) =>
            prevAnexos.map((item) =>
              item.id_arquivo_card === anexo.id_arquivo_card
                ? { ...item, arquivo_tag_card: novoValorTag }
                : item
            )
          );
        })
        .finally(() => setIsLoadingTag(false));
    }
  };
  const podeEditarAnexo =
    isFluxoPerdasProp || perfil?.permite_excluir_anexo_perfil == "1";
  const [isLoadingEdit, setIsLoadingEdit] = useState(false);
  const [isModalEditOpen, setIsModalEditOpen] = useState(false);
  const [novoNome, setNovoNome] = useState("");
  const inputRef = useRef<HTMLInputElement>(null);

  const editarNomeAnexo = (e: MouseEvent<HTMLButtonElement, MouseEvent>) => {
    e.stopPropagation();
    const nomeAtual = anexo.nome_arquivo_card;
    const nomeBase = nomeAtual.substring(0, nomeAtual.lastIndexOf("."));
    setNovoNome(nomeBase);
    setIsModalEditOpen(true);

    // Foca no input após um pequeno delay
    setTimeout(() => {
      if (inputRef.current) {
        inputRef.current.focus();
        inputRef.current.select();
      }
    }, 100);
  };

  const confirmarRenomeacao = async () => {
    if (!novoNome.trim()) {
      alert("O nome não pode estar vazio!");
      return;
    }

    const nomeAtual = anexo.nome_arquivo_card;
    const extensao = nomeAtual.substring(nomeAtual.lastIndexOf("."));
    const nomeBase = nomeAtual.substring(0, nomeAtual.lastIndexOf("."));

    if (novoNome === nomeBase) {
      alert("O novo nome é igual ao anterior!");
      return;
    }

    setIsLoadingEdit(true);
    const novoNomeCompleto = novoNome + extensao;

    try {
      await editarAnexo({
        id_arquivo_card: anexo.id_arquivo_card,
        id_coleta_card: anexo.coleta_id_arquivo_card,
        codUsuarioAtualizacao_arquivo_card: id_usuario,
        nome_arquivo_card: novoNomeCompleto,
        codCard_arquivo_card: anexo.codCard_arquivo_card,
      });

      // Atualizar na lista local
      setAnexos((prevAnexos: any[]) =>
        prevAnexos.map((e) =>
          e.id_arquivo_card === anexo.id_arquivo_card
            ? { ...e, nome_arquivo_card: novoNomeCompleto }
            : e
        )
      );

      setIsModalEditOpen(false);
      setNovoNome("");
      atualizarAnexos();
    } catch (error) {
      console.error("Erro ao renomear:", error);
      alert(
        error instanceof Error ? error.message : "Erro ao renomear documento"
      );
    } finally {
      setIsLoadingEdit(false);
    }
  };
  return (
    <div
      className="w-40 h-40 flex flex-col justify-between items-center rounded hover:bg-[rgba(0,0,0,0.05)] p-2 transition-all duration-200 group"
      onClick={isModalEditOpen ? undefined : onClick}
    >
      {/* Área da imagem */}
      <div className="w-full overflow-hidden h-20 flex flex-col items-center justify-center flex-shrink-0">
        <FileRenderer
          src={anexo.preview}
          name={anexo.nome_arquivo_card}
          className={
            "h-full w-30 flex flex-col items-center justify-center bg-animate-pulse bg-white rounded overflow-hidden"
          }
          width={200}
        />
      </div>

      {/* Nome do documento */}
      <div className="text-sm w-full h-12 text-wrap text-center overflow-auto flex-shrink-0">
        <p className="break-all text-xs">{anexo.nome_arquivo_card}</p>
      </div>

      {/* Botões de ação - sempre visíveis */}
      <div className="h-9 w-full flex gap-1 justify-center items-center flex-shrink-0">
        {podeEditarAnexo ? (
          <>
            <Button
              loading={isLoadingTag}
              className={`rounded-sm p-2 text-white ${isTagged ? "bg-primary" : "bg-slate-500"}`}
              type="button"
              title="Marque este anexo para compor a tag da categoria. Quando ativo, esse arquivo pode ser usado na tag criada para o template."
              onClick={(e: any) => {
                console.log(
                  "Clicou para marcar/desmarcar tag no anexo ID:",
                  anexo
                );
                if (anexo.nome_arquivo_card.split(".").pop() != "pdf") {
                  return onToggleArquivoTag(e);
                } else if (anexo.arquivo_tag_card == "1") {
                  return onToggleArquivoTag(e);
                } else {
                  e.stopPropagation();
                  return Swal.fire({
                    icon: "info",
                    title: "Atenção",
                    text: "Arquivos PDF não podem ser marcados como tag.",
                  });
                }
              }}
            >
              <Tag size={16} />
            </Button>
            <Button
              loading={isLoadingEdit}
              className={`bg-warning rounded-sm p-2 text-white hover:brightness-110 transition-all`}
              type="button"
              title="Renomear documento"
              onClick={editarNomeAnexo}
            >
              <Edit size={16} />
            </Button>
            <Button
              loading={isLoading}
              className={`bg-error rounded-sm p-2 text-white hover:brightness-110 transition-all`}
              type="button"
              title="Enviar para lixeira"
              onClick={(e: MouseEvent<HTMLButtonElement, MouseEvent>) => {
                e.stopPropagation();
                handleSweetAlert(
                  {
                    icon: "question",
                    title: "Enviar para a lixeira",
                    html: `Tem certeza que deseja <b>Enviar</b> o documento para a lixeira?`,
                  } as any,
                  () => {
                    setIsLoading(true);
                    editarAnexo({
                      id_arquivo_card: anexo.id_arquivo_card,
                      id_coleta_card: anexo.coleta_id_arquivo_card,
                      codUsuarioAtualizacao_arquivo_card: id_usuario,
                      nome_arquivo_card: anexo.nome_arquivo_card,
                      codCard_arquivo_card: anexo.codCard_arquivo_card,
                      status_arquivo_card: "0",
                    })
                      .then((result) => {
                        if (result.isConfirmed) {
                          setAnexos((prevAnexos: any[]) =>
                            prevAnexos.filter(
                              (e) => e.id_arquivo_card != anexo.id_arquivo_card
                            )
                          );
                        }
                        return result;
                      })
                      .finally(() => {
                        atualizarAnexos().finally(() => setIsLoading(false));
                      });
                  }
                );
              }}
            >
              <Trash size={16} />
            </Button>
          </>
        ) : (
          <span className="text-xs text-gray-500">Sem permissão</span>
        )}
      </div>

      {/* Modal para renomear */}
      {isModalEditOpen && (
        <ModalComponente
          opened={isModalEditOpen}
          onClose={() => {
            setIsModalEditOpen(false);
            setNovoNome("");
          }}
          header="Renomear Documento"
          hasSaveButton={false}
          hasForm={false}
          defaultW="w-[400px]"
        >
          <div
            className="flex flex-col gap-4"
            onClick={(e) => e.stopPropagation()}
          >
            <div>
              <label className="block text-sm font-medium mb-2">
                Novo nome:
              </label>
              <input
                ref={inputRef}
                type="text"
                value={novoNome}
                onChange={(e) => setNovoNome(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === "Enter") {
                    confirmarRenomeacao();
                  }
                  if (e.key === "Escape") {
                    setIsModalEditOpen(false);
                    setNovoNome("");
                  }
                }}
                placeholder="Digite o novo nome"
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
              />
              <p className="text-xs text-gray-500 mt-1">
                Extensão será preservada automaticamente
              </p>
            </div>
            <div className="flex gap-3 justify-end">
              <Button
                type="button"
                onClick={() => {
                  setIsModalEditOpen(false);
                  setNovoNome("");
                }}
                className="bg-gray-400"
              >
                Cancelar
              </Button>
              <Button
                loading={isLoadingEdit}
                type="button"
                onClick={confirmarRenomeacao}
                className="bg-success"
              >
                Renomear
              </Button>
            </div>
          </div>
        </ModalComponente>
      )}
    </div>
  );
};

export default AnexosCard;