"use client";

import ModalComponente from "@/components/Modal/ModalComponente";
import { Button } from "@/components/ui/button";
import { cadastrarMeta } from "@/requests/CRM/Metas/cadastrarMetas";
import { deletarMetas } from "@/requests/CRM/Metas/deletarMetas";
import { editarMeta } from "@/requests/CRM/Metas/editarMetas";
import {
  listarMetas,
  listarObjetivosMetas,
} from "@/requests/CRM/Metas/listarMetas";
import { useAuth } from "@/src/contexts/authContext";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { GetForm } from "@/utils";
import { useEffect, useState } from "react";
import { FieldValues } from "react-hook-form";
import { FaEdit, FaPlus, FaTrash } from "react-icons/fa";
import { toast } from "react-toastify";
import Swal from "sweetalert2";
import * as yup from "yup";
import FormCadastroMetas from "./FormCadastroMetas";
import FormEditarMeta from "./FormEditarMeta";

const PoliticaMetas = ({ disabledFields, children, ...rest }: any) => {
  const [yupSchema, setYupSchema] = useState<
    yup.ObjectSchema<{}, yup.AnyObject, {}, "">
  >(yup.object().shape({}));

  const { isMobile } = useScreenContext();
  const [metas, setMetas] = useState<any[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [openModalEdit, setOpenModalEdit] = useState(false);
  const [objetivoMeta, setObjetivosMeta] = useState<any[]>([]);
  const [openModalCadMetas, setOpenModalCadMetas] = useState(false);
  const { handleSubmit, ...form } = GetForm(yupSchema, setYupSchema);
  const [relistarMetas, setRelistarMetas] = useState<any>(0);
  const [selectedMeta, setSelectedMeta] = useState<any>([]);
  const [defaultValues, setDefaultValue] = useState<any[]>([]);
  const { valuesSession, usuario, perfil } = useAuth();
  const { session } = valuesSession();

  async function onSubmitFunction(data: FieldValues) {
    const existingMetas = await listarMetas();
    const metaExists = existingMetas.some(
      (meta: any) => meta.nome_meta_politica === data.nome_meta_politica,
    );

    // return;
    if (metaExists) {
      toast.error("Meta já cadastrada!");
      return;
    }

    const limiteCritico = parseInt(data.limiteCritico_meta_politica, 10);
    const limiteAceitavel = parseInt(data.limiteAceitavel_meta_politica, 10);

    // Validação dos campos

    if (limiteCritico > 99 || limiteAceitavel > 99) {
      toast.error(
        "O valor máximo dos campos Limite Crítico e Limite Aceitável é 99%, corrija os valores.",
      );
      return;
    }

    if (limiteAceitavel <= limiteCritico) {
      toast.error(
        "O valor do limite aceitável deve ser maior que o limite moderado.",
      );
      return;
    }

    data["id_usuario"] = session.id_usuario;

    // Cadastra a meta
    setIsLoading(true);
    cadastrarMeta(data).finally(() => {
      setIsLoading(false);
      setOpenModalCadMetas(false);
      setRelistarMetas(relistarMetas + 1);
    });
  }

  const editMeta = async (data: any) => {
    data["id_meta_politica"] = selectedMeta;
    data["id_usuario"] = session.id_usuario;

    const limiteCritico = parseInt(data.limiteCritico_meta_politica, 10);
    const limiteAceitavel = parseInt(data.limiteAceitavel_meta_politica, 10);

    // Validação dos campos

    if (limiteCritico > 99 || limiteAceitavel > 99) {
      toast.error(
        "O valor máximo dos campos Limite Crítico e Limite Aceitável é 99%, corrija os valores.",
      );
      return;
    }

    if (limiteAceitavel <= limiteCritico) {
      toast.error(
        "O valor do limite aceitável deve ser maior que o limite moderado.",
      );
      return;
    }

    data["id_usuario"] = session.id_usuario;

    editarMeta(data).then(() => {
      setRelistarMetas(relistarMetas + 1);

      setOpenModalEdit(!openModalEdit);
    });
  };
  useEffect(() => {
    listarMetas().then((res) => {
      setMetas(res);
    });
  }, [relistarMetas]);

  useEffect(() => {
    if (selectedMeta) {
      const metaEncontrada = metas.find(
        (meta) => meta.id_meta_politica === selectedMeta,
      );
      setDefaultValue(metaEncontrada);
    }
  }, [selectedMeta, metas]);

  const periodo = [
    { label: "Semanal", value: "1" },
    { label: "Quinzenal", value: "2" },
    { label: "Mensal", value: "3" },
    { label: "Trimestral", value: "4" },
    { label: "Semestral", value: "5" },
    { label: "Anual", value: "6" },
  ];

  useEffect(() => {
    listarObjetivosMetas().then((res) => {
      setObjetivosMeta(res);
    });
  }, []);

  const getPeriodoLabel = (value: any) => {
    const item = periodo.find((periodo) => periodo.value == value);
    return item ? item.label : "";
  };

  const handleDeleteMetas = async (meta: any) => {
    Swal.fire({
      title: "Excluir " + meta.nome_meta_politica,
      text: "Deseja excluir a meta selecionada?",
      icon: "warning",
      showCancelButton: true,
      confirmButtonText: "Sim",
      confirmButtonColor: "#d33",
      cancelButtonText: "Cancelar",
      cancelButtonColor: "#3085d6",
    }).then((result: any) => {
      if (result.isConfirmed) {
        meta["id_usuario"] = session.id_usuario;
        deletarMetas(meta).then(() => {
          setRelistarMetas(relistarMetas + 1);
        });
      }
    });
  };

  return (
    <>
      <div className="text-[35px] text-center text-black font-bold mb-6">
        <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={() => setOpenModalCadMetas(true)}
          >
            Cadastrar nova Meta
            <FaPlus className="ml-2" size={16} />
          </div>
        </div>
      </div>

      <div>
        <span className="text-sm font-semibold ml-4 text-black-2 mb-3">
          Metas Cadastradas
        </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`}
      >
        {metas.map((meta: any, i: number) => (
          <div
            key={i}
            className="border border-gray-300 shadow-lg p-4 rounded-lg transition-all duration-300 h-[100%]"
          >
            <div className="flex items-start p-2">
              <div className="flex-1">
                {/* Título e status do distribuidor */}
                <div className="flex items-center justify-between mb-2 mr-4">
                  <div className="grid">
                    <h2 className="text-lg font-semibold">
                      {meta.nome_meta_politica}
                    </h2>
                  </div>
                </div>

                <div className="grid grid-cols-1 gap-2">
                  <div>
                    <span className="text-sm font-semibold text-gray-500">
                      Periodo: {getPeriodoLabel(meta.periodo_meta_politica)}
                    </span>
                  </div>
                </div>

                <div className="grid grid-cols-1 gap-2">
                  <div>
                    <span className="text-sm font-semibold text-gray-500">
                      Objetivo: {meta.nome_objetivo_meta}
                    </span>
                  </div>
                </div>
              </div>

              <div className="flex flex-col items-end ml-auto">
                <Button
                  variant="outline"
                  size="icon"
                  onClick={() => {
                    setOpenModalEdit(true);
                    setSelectedMeta(meta.id_meta_politica);
                  }}
                >
                  <FaEdit className="h-4 w-4 transition-transform duration-300" />
                </Button>
              </div>
              <div className="flex flex-col items-end ml-3">
                <Button
                  variant="outline"
                  size="icon"
                  onClick={() => handleDeleteMetas(meta)}
                >
                  <FaTrash className="h-4 w-4 transition-transform duration-300" />
                </Button>
              </div>
            </div>
          </div>
        ))}
      </div>

      <ModalComponente
        defaultW="w-[800px]"
        header="Cadastro de Metas"
        onClose={() => setOpenModalCadMetas(!openModalCadMetas)}
        hasSaveButton={false}
        hasForm={false}
        opened={openModalCadMetas}
      >
        <FormCadastroMetas onSubmitFunction={onSubmitFunction}>
          <div className="w-full flex flex-row justify-center p-4">
            <Button className="text-sm w-29">Salvar</Button>
          </div>
        </FormCadastroMetas>
      </ModalComponente>

      <ModalComponente
        hasForm={false}
        defaultW="w-[800px]"
        header={"Editar Politica de Metas"}
        opened={openModalEdit}
        onClose={() => setOpenModalEdit(false)}
        hasSaveButton={false}
      >
        <div className="p-2">
          <FormEditarMeta
            onEditFunction={editMeta}
            defaultValues={defaultValues}
          >
            <div className="w-full flex flex-col items-center justify-center">
              <Button className="max-sm:w-full">Salvar</Button>
            </div>
          </FormEditarMeta>
        </div>
      </ModalComponente>
    </>
  );
};

export default PoliticaMetas;