import ModalComponente from "@/components/Modal/ModalComponente";
import LoaderSun from "@/components/common/Loader/LoaderSun";
import { obterClienteLinksun } from "@/requests/CRUD/ClienteLinksun/obterCliente";
import { cadastrarLojas } from "@/requests/CRUD/Lojas/cadastrarLojas";
import { editarLoja } from "@/requests/CRUD/Lojas/editarLoja";
import { listarLojas } from "@/requests/CRUD/Lojas/listarLojas";
import { baixarAwsBase64 } from "@/requests/common/Aws/baixarAws";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { useAuth } from "@/src/contexts/authContext";
import { useImagemContext } from "@/src/contexts/imageContext";
import { Power, PowerOff } from "lucide-react";
import { useEffect, useMemo, useState } from "react";
import { FieldValues } from "react-hook-form";
import { CiImageOff } from "react-icons/ci";
import { FaPlus } from "react-icons/fa";
import { toast } from "react-toastify";
import Swal from "sweetalert2";
import FormLojas from "./formLojas";

const isLojaAtiva = (status: any) =>
  status == "1" || status === 1 || status === true;

const LojasView = ({ setInStoreOptions }: any) => {
  const [lojas, setLojas] = useState<any>([]); // [{}
  const [openCreateLoja, setOpenCreateLoja] = useState(false);
  const [integradorData, setIntegradorData] = useState<any>(false);
  const { valuesSession, perfil } = useAuth();
  const { session } = valuesSession();
  const [openModalEdit, setOpenModalEdit] = useState(false);
  const [selectedLoja, setSelectedLoja] = useState<any>([]);
  const { imagens, setImagens } = useImagemContext();
  const [loadingImages, setLoadingImages] = useState(true);
  const { isMobile } = useScreenContext();

  const carregarLojas = () =>
    listarLojas(session.id_usuario, true).then((res) => {
      setLojas(res);
    });

  useEffect(() => {
    obterClienteLinksun(session.sigla).then((res) => {
      setIntegradorData(res);
    });
    carregarLojas();
  }, []);

  const submitLojas = async (data: FieldValues) => {
    const formData = new FormData();
    Object.keys(data).forEach((key) => {
      formData.append(key, data[key]);
    });

    return (
      cadastrarLojas(data)
        // .finally(() => setIsLoading(false))
        .then(() => {
          carregarLojas();
          setOpenCreateLoja(!openCreateLoja);
        })
    );
  };

  const alterarStatusLoja = async (e: React.MouseEvent, item: any) => {
    e.stopPropagation();
    const ativo = isLojaAtiva(item.status_loja);
    const novoStatus = ativo ? "0" : "1";
    const acao = ativo ? "Inativar" : "Ativar";

    const result = await Swal.fire({
      icon: "question",
      title: `${acao} loja`,
      html: `Tem certeza que deseja <b>${acao.toLowerCase()}</b> a loja <b>${item.nome_loja}</b>?`,
      showCancelButton: true,
      confirmButtonText: `Sim, ${acao.toLowerCase()}`,
      cancelButtonText: "Cancelar",
      confirmButtonColor: ativo ? "#d33" : "#16a34a",
    });

    if (!result.isConfirmed) return;

    await editarLoja({ id_loja: item.id_loja, status_loja: novoStatus });
    toast.success(`Loja ${ativo ? "inativada" : "ativada"} com sucesso!`);
    setLojas((prev: any[]) =>
      prev.map((loja) =>
        loja.id_loja === item.id_loja
          ? { ...loja, status_loja: novoStatus }
          : loja
      )
    );
  };

  const fetchImageBase64 = async (url: string | null) => {
    if (!url || url === "null") return null;

    try {
      const result = await baixarAwsBase64(url);
      const resultObject =
        typeof result === "string" ? JSON.parse(result) : result;
      return resultObject.base64;
    } catch (err) {
      console.error(`Erro ao baixar imagem: ${url}`, err);
      return null;
    }
  };

  useEffect(() => {
    if (!lojas.length) return;

    const fetchImagesForStores = async () => {
      setLoadingImages(true);

      const imagensTemp: Record<string, string> = {};
      const imagensContext = { ...imagens };

      await Promise.all(
        lojas.map(async (item: any) => {
          if (!item.foto_loja || item.foto_loja === "null") return;

          if (imagensContext[item.id_loja]) {
            imagensTemp[item.id_loja] = imagensContext[item.id_loja];
            return;
          }

          const base64Content = await fetchImageBase64(item.foto_loja);
          if (base64Content) {
            imagensTemp[item.id_loja] = base64Content;
          }
        })
      );

      if (Object.keys(imagensTemp).length > 0) {
        setImagens((prev: any) => ({ ...prev, ...imagensTemp }));
      }

      setLoadingImages(false);
    };

    fetchImagesForStores();
  }, [lojas]);

  const imagensMemorizadas = useMemo(() => imagens, [imagens]);

  const lojasUsadas = lojas.length;
  const lojasPermitidas =
    Number(integradorData.lojasPermitidas_cliente_linksun) || 1;

  const percentual =
    lojasPermitidas > 0 ? (lojasUsadas / lojasPermitidas) * 100 : 1;
  return integradorData ? (
    <>
      <div
        className={` "w-full max-sm:text-xs text-lg text-gray-800 dark:text-white text-center flex flex-col items-center gap-3"${isMobile ? "" : ""}`}
      >
        {perfil.visualiza_btn_nova_perfil == "1" && (
          <>
            <div className="flex flex-col justify-center items-center w-full">
              <div className="w-[50%] bg-stroke rounded-full border-2 border-black shadow-lg p-1">
                <div
                  className={`h-6 rounded-full text-white text-center transition-width duration-1000 p-1 ${
                    percentual > 80
                      ? "bg-meta-1"
                      : percentual > 50
                        ? "bg-warning"
                        : "bg-primary"
                  }`}
                  style={{
                    width: `${percentual}%`,
                  }}
                >
                  <span className="flex justify-center max-sm:text-xs items-center text-sm">
                    {percentual.toFixed(2)} %
                  </span>
                </div>
              </div>
              Atualmente você está utilizando {lojas.length} de{" "}
              {integradorData.lojasPermitidas_cliente_linksun ?? 1} lojas
              contratadas.
            </div>

            {lojas.length < integradorData.lojasPermitidas_cliente_linksun && (
              <div
                className="cursor-pointer max-sm:mt-4 max-sm:text-xs bg-primary text-white text-base px-4 py-2 rounded-md flex items-center justify-center hover:bg-primary-600 transition-all duration-200 shadow-lg"
                onClick={() => {
                  setOpenCreateLoja(true);
                }}
              >
                Adicionar Loja <FaPlus className="ml-2" size={16} />
              </div>
            )}
          </>
        )}
      </div>
      {loadingImages ? (
        <div className="w-full h-[500px] flex flex-col justify-center items-center">
          <LoaderSun />
        </div>
      ) : (
        <div
          className={`grid gap-4 mb-4 mt-4 dark:text-white ${isMobile ? "grid-cols-1 w-full max-w-full" : "grid-cols-3"}`}
        >
          {lojas.map((item: any) => {
            const ativo = isLojaAtiva(item.status_loja);
            return (
              <div
                key={item.id_loja}
                className={`w-full rounded-lg border p-4 cursor-pointer shadow-lg hover:shadow-xl transition-all duration-200 dark:bg-gray-800 dark:border-gray-700 ${
                  ativo ? "" : "opacity-70 border-dashed"
                }`}
                onClick={() => {
                  setInStoreOptions([true, item]);
                  setOpenModalEdit(true);
                  setSelectedLoja(item);
                }}
              >
                <div className="flex flex-row items-center">
                  <div className="w-25 h-25 overflow-hidden rounded-full bg-gray-200">
                    {imagensMemorizadas[item.id_loja] ? (
                      <img
                        src={`data:image/jpeg;base64,${imagens[item.id_loja]}`}
                        alt="loja"
                        className="w-full h-full object-cover"
                      />
                    ) : (
                      <div className="w-full h-full flex items-center justify-center text-gray-500">
                        <CiImageOff size={36} />
                      </div>
                    )}
                  </div>
                  <div className="ml-4 flex-1">
                    <div className="flex items-center justify-between gap-2 mb-1">
                      <span
                        className={`text-xs font-semibold px-2 py-0.5 rounded ${
                          ativo
                            ? "bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300"
                            : "bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300"
                        }`}
                      >
                        {ativo ? "Ativo" : "Inativo"}
                      </span>
                      <h2 className="text-lg max-sm:text-sm font-semibold text-right">
                        ID {item.id_loja}
                      </h2>
                    </div>
                    <h2 className="text-lg max-sm:text-sm font-semibold">
                      {item.nome_loja}
                    </h2>
                    <p className="text-sm max-sm:text-xs text-gray-600">
                      {item.cidade_loja}, {item.estado_loja}
                    </p>
                    <p className="text-sm max-sm:text-xs text-gray-600">
                      {item.telefone_loja}
                    </p>
                    <p className="text-sm max-sm:text-xs text-gray-600">
                      {item.cnpj_loja}
                    </p>
                    <p className="text-sm max-sm:text-xs text-gray-600">
                      {item.endereco_loja}
                    </p>
                    <button
                      type="button"
                      title={ativo ? "Inativar loja" : "Ativar loja"}
                      className={`mt-2 text-xs flex items-center gap-1 px-2 py-1 rounded transition-colors ${
                        ativo
                          ? "bg-red-50 text-red-700 hover:bg-red-100 dark:bg-red-900/30 dark:text-red-300"
                          : "bg-green-50 text-green-700 hover:bg-green-100 dark:bg-green-900/30 dark:text-green-300"
                      }`}
                      onClick={(e) => alterarStatusLoja(e, item)}
                    >
                      {ativo ? <PowerOff size={14} /> : <Power size={14} />}
                      {ativo ? "Inativar" : "Ativar"}
                    </button>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      )}

      <ModalComponente
        hasForm={false}
        header={"Adicionar Loja"}
        classNameBody="p-0 py-0"
        opened={openCreateLoja}
        onClose={() => setOpenCreateLoja(false)}
        hasSaveButton={false}
      >
        <div className="px-8 py-2">
          <FormLojas onSubmitFunction={submitLojas} tipoFormulario="Cadastro" />
        </div>
      </ModalComponente>
    </>
  ) : (
    <div className="w-full h-[500px] flex flex-col justify-center items-center">
      <LoaderSun />
    </div>
  );
};

export default LojasView;