import LoaderSun from "@/components/common/Loader/LoaderSun";
import InputGroup from "@/components/Forms/InputGroup";
import InputSelectComponent from "@/components/Forms/InputSelect";
import ModalComponente from "@/components/Modal/ModalComponente";
import { Button } from "@/components/ui/button";
import {
  buscaVersaoDoc,
  listarDistribuidores,
} from "@/requests/CRUD/Distribuidores/listarDistribuidores";
import { listarDistribuidoresNativos } from "@/requests/CRUD/Distribuidores/listarDistribuidoresNativos";
import { salvarDistribuidor } from "@/requests/CRUD/Distribuidores/salvarDistribuidores";
import { importarCsvDistribuidor } from "@/requests/CRUD/Distribuidores/sincronizacaoDistribuidor";
import { useAuth } from "@/src/contexts/authContext";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { GetForm } from "@/utils";
import { LoaderCircle } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import { FaDownload, FaFileImport, FaPlus } from "react-icons/fa";
import Swal from "sweetalert2";
import * as yup from "yup";
import DistribuidoresCfg from "./DistribuidoresCfg";
import DistribuidoresNativosCfg from "./DistribuidoresNativosCfg";
import FormCadastroDistribuidores from "./FormCadastroDistribuidores";

const DistribuidoresConfigComponent = () => {
  const { valuesSession } = useAuth();
  const { session } = valuesSession();

  const { isMobile } = useScreenContext();
  const [isLoaded, setIsLoaded] = useState(false);
  const [
    filtroTipoDistribuidorFornecedor,
    setFiltroTipoDistribuidorFornecedor,
  ] = useState(0);
  const [
    filtroStatusDistribuidorFornecedor,
    setFiltroStatusDistribuidorFornecedor,
  ] = useState(0);
  const [
    filtroOrigemDistribuidorFornecedor,
    setFiltroOrigemDistribuidorFornecedor,
  ] = useState(0);
  const [distribuidoresNativos, setDistribuidoresNativos] = useState<any[]>([]);
  const [distribuidoresNativosFiltrados, setDistribuidoresNativosFiltrados] =
    useState<any[]>([]);
  const [distribuidores, setDistribuidores] = useState<any[]>([]);
  const [distribuidoresFiltrados, setDistribuidoresFiltrados] = useState<any[]>(
    []
  );
  const [loading, setLoading] = useState(false);
  const [relistarDistribuidores, setRelistarDistribuidores] = useState<any>(0);
  const [openModalDistribuidor, setOpenModalDistribuidor] = useState(false);
  const [yupSchema, setYupSchema] = useState<
    yup.ObjectSchema<{}, yup.AnyObject, {}, "">
  >(yup.object().shape({}));
  const { handleSubmit, ...form } = GetForm(yupSchema, setYupSchema);
  const [isLoading, setIsLoading] = useState(false);
  const [versaoDocImport, setVersaoDocImport] = useState<any>(null);
  useEffect(() => {
    const fetchDistribuidoresNativos = async () => {
      try {
        const distribuidoresNativosRes = await listarDistribuidoresNativos();
        setDistribuidoresNativos(distribuidoresNativosRes);
      } catch (error) {
        console.error("Error fetching data:", error);
      } finally {
        setIsLoaded(true);
      }
    };

    fetchDistribuidoresNativos();
    buscaVersaoDoc().then((res) => {
      setVersaoDocImport(res?.versao_cfg_importacao_distribuidores);
    });
    const fetchDistribuidores = async () => {
      try {
        const distribuidoresRes = await listarDistribuidores();
        setDistribuidores(
          distribuidoresRes.filter(
            (distribuidores: any) => distribuidores.isNativo_distribuidor == "0"
          )
        );
      } catch (error) {
        console.error("Error fetching data:", error);
      } finally {
        setIsLoaded(true);
      }
    };

    fetchDistribuidores();
  }, [relistarDistribuidores]);

  useEffect(() => {
    setDistribuidoresFiltrados(
      distribuidores
        .filter((d) => {
          if (filtroStatusDistribuidorFornecedor == 1) {
            return d.status_distribuidor == 1;
          }

          if (filtroStatusDistribuidorFornecedor == 2) {
            return d.status_distribuidor == 0;
          }

          return true;
        })
        .filter((d) => {
          if (filtroTipoDistribuidorFornecedor == 1) {
            return d.isFornecedor_distribuidor == 0;
          }

          if (filtroTipoDistribuidorFornecedor == 2) {
            return d.isFornecedor_distribuidor == 1;
          }

          return true;
        })
        .filter((d) => {
          if (filtroOrigemDistribuidorFornecedor == 1) {
            return false;
          }

          return true;
        })
    );
    setDistribuidoresNativosFiltrados(
      distribuidoresNativos
        .filter((d) => {
          if (filtroStatusDistribuidorFornecedor == 1) {
            return d.status_credencial == 1;
          }

          if (filtroStatusDistribuidorFornecedor == 2) {
            return d.status_credencial == 0;
          }

          return true;
        })
        .filter((d) => {
          if (filtroTipoDistribuidorFornecedor == 1) {
            return d.isFornecedor_distribuidor == 0;
          }

          if (filtroTipoDistribuidorFornecedor == 2) {
            return d.isFornecedor_distribuidor == 1;
          }

          return true;
        })
        .filter((d) => {
          if (filtroOrigemDistribuidorFornecedor == 2) {
            return false;
          }

          return true;
        })
    );
  }, [
    distribuidores,
    distribuidoresNativos,
    filtroTipoDistribuidorFornecedor,
    filtroStatusDistribuidorFornecedor,
    filtroOrigemDistribuidorFornecedor,
  ]);

  const onSubmitFunction = (data: any) => {
    setIsLoading(true);
    salvarDistribuidor(data).finally(() => {
      setIsLoading(false);
      setOpenModalDistribuidor(false);
      setRelistarDistribuidores(relistarDistribuidores + 1);
    });
    return;
  };
  const [usuarioAtualizador, setUsuarioAtualizador] = useState("");

  const fileInputRef = useRef(null) as any;
  const handleImportCsv = async (event: any) => {
    const file = event.target.files[0];
    if (!file) return;

    const formData = new FormData();
    formData.append("arquivo_csv", file);
    formData.append("codUsuario", session.id_usuario);
    formData.append("versaoDoc", versaoDocImport);
    setLoading(true);
    try {
      const importS = await importarCsvDistribuidor(formData);
      setLoading(false);
      if (importS) {
        Swal.fire("Sucesso", "Importação concluída", "success");
      }
      setUsuarioAtualizador(session.nome_usuario);
    } catch (e) {
      setLoading(false);
      console.error("Erro: ", e);
      Swal.fire("Erro", "Importação não realizada: " + e, "error");
    }
  };
  const handleDownloadCsvModel = () => {
    const a = document.createElement("a");
    a.href = "/arquivos/MODELO-LAYOUT-ARQUIVO-Geral.xlsx";
    a.download = "MODELO-LAYOUT-ARQUIVO-Geral.xlsx";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  };
  return isLoaded ? (
    <>
      <div>
        <div className="text-lg text-center text-black font-bold mb-6">
          <h1>Distribuidores/Fornecedores</h1>

          <div
            className={`"w-full text-lg text-gray-800 mt-6 dark:text-white text-center flex flex-col items-center gap-3" ${
              isMobile ? "" : ""
            }`}
          >
            <div
              className="cursor-pointer 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 w-[400px]"
              onClick={() => setOpenModalDistribuidor(true)}
            >
              Cadastrar novo Distribuidor/Fornecedor
              <FaPlus className="ml-2" size={16} />
            </div>
          </div>
        </div>

        <div className="pb-[3vh]">
          <InputGroup>
            <InputSelectComponent
              name="filtroTipoDistribuidorFornecedor"
              label="Tipo"
              width="xl:w-1/2"
              formulario={form}
              options={[
                { value: "0", label: "Todos" },
                { value: "1", label: "Distribuidores" },
                { value: "2", label: "Fornecedores" },
              ]}
              defaultValue={0}
              onChange={(value: any) =>
                setFiltroTipoDistribuidorFornecedor(value.value)
              }
            />
            <InputSelectComponent
              name="filtroStatusDistribuidorFornecedor"
              label="Status"
              width="xl:w-1/2"
              formulario={form}
              options={[
                { value: "0", label: "Todos" },
                { value: "1", label: "Ativos" },
                { value: "2", label: "Inativos" },
              ]}
              defaultValue={0}
              onChange={(value: any) =>
                setFiltroStatusDistribuidorFornecedor(value.value)
              }
            />
            <InputSelectComponent
              name="filtroOrigemDistribuidorFornecedor"
              label="Origem"
              width="xl:w-1/2"
              formulario={form}
              options={[
                { value: "0", label: "Todos" },
                { value: "1", label: "Nativos" },
                { value: "2", label: "Cadastrados" },
              ]}
              defaultValue={0}
              onChange={(value: any) =>
                setFiltroOrigemDistribuidorFornecedor(value.value)
              }
            />
          </InputGroup>
        </div>

        <div className="">
          <div>
            <span className="text-sm font-semibold ml-4 text-white p-1 bg-success  rounded-lg mb-3">
              Distribuidores Nativos (Linksun)
            </span>
          </div>

          <div
            className={`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-4 mt-4 dark:text-white`}
          >
            {distribuidoresNativosFiltrados.map((distribuidor, index) => (
              <DistribuidoresNativosCfg
                key={index}
                distribuidor={distribuidor}
                setRelistarDistribuidores={setRelistarDistribuidores}
                relistarDistribuidores={relistarDistribuidores}
              />
            ))}
          </div>
        </div>

        <div className="">
          <div>
            <span className="text-sm font-semibold ml-4 px-4 text-white bg-primary p-2 rounded-md mb-3">
              Distribuidores Cadastrados pelo Integrador
            </span>
          </div>
          <div className="mx-5 mb-4 mt-1 pt-3 border-t border-gray-100 flex gap-2 flex-wrap">
            <button
              onClick={handleDownloadCsvModel}
              type="button"
              disabled={loading}
              className="flex items-center gap-1.5 text-xs font-medium px-3 py-1.5 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 hover:border-gray-300 transition-all"
            >
              <FaDownload size={11} />
              Baixar modelo da Planilha (v{versaoDocImport})
            </button>

            <input
              type="file"
              accept=".csv, .xlsx"
              ref={fileInputRef}
              onChange={handleImportCsv}
              style={{ display: "none" }}
            />

            <button
              type="button"
              disabled={loading}
              onClick={() => fileInputRef!.current.click()}
              className="flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 rounded-lg border border-blue-200 text-blue-600 hover:bg-blue-50 hover:border-blue-300 transition-all"
            >
              {loading ? (
                <>
                  <LoaderCircle
                    size={13}
                    className="size-3 animate-spin "
                    viewBox="0 0 24 24"
                  />{" "}
                  Importando
                </>
              ) : (
                <>
                  <FaFileImport size={11} />
                  Importar a Planilha (v{versaoDocImport})
                </>
              )}
            </button>
          </div>
          <div
            className={`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-4 mt-4 dark:text-white`}
          >
            {distribuidoresFiltrados.map((distribuidor, index) => (
              <DistribuidoresCfg
                key={index}
                distribuidor={distribuidor}
                setRelistarDistribuidores={setRelistarDistribuidores}
                relistarDistribuidores={relistarDistribuidores}
              />
            ))}
          </div>
        </div>

        <ModalComponente
          defaultW="w-[900px]"
          header="Cadastro Distribuidores/Fornecedor"
          onClose={() => setOpenModalDistribuidor(!openModalDistribuidor)}
          hasSaveButton={false}
          hasForm={false}
          opened={openModalDistribuidor}
        >
          <FormCadastroDistribuidores
            onSubmitFunction={onSubmitFunction}
            distribuidores={distribuidores}
          >
            <div className="w-full flex flex-row justify-center p-4">
              <Button className="text-sm w-29">Salvar</Button>
            </div>
          </FormCadastroDistribuidores>
        </ModalComponente>
      </div>
    </>
  ) : (
    <div className="w-full h-[500px] flex flex-col justify-center items-center">
      <LoaderSun />
    </div>
  );
};

export default DistribuidoresConfigComponent;