import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import { listarChecklistEngenharia } from "@/requests/CRUD/Checlist/listarChecklist";
import { Check, Plus, X } from "lucide-react";
import { useEffect, useState } from "react";

const CfgPendenciaEngenharia = ({ form, defaultValues }: any) => {
  const [checklistValidacaoEngenharia, setSchecklistValidacaoEngenharia] =
    useState<any[]>(
      (
        form.control._formValues?.checklistValidacaoEngenharia ||
        defaultValues?.checklistValidacaoEngenharia ||
        []
      ).filter((e: any) => e.status_item_checklist_engenharia == "1")
    );
  const [nomeItemValidacao, setNomeItemValidacao] = useState("");
  const [checkListKey, setCheckListKey] = useState(0);
  const [inputKey, setInputKey] = useState(0);
  useEffect(() => {
    const values =
      form.getValues("checklistValidacaoEngenharia") ||
      defaultValues?.checklistValidacaoEngenharia ||
      [];

    setSchecklistValidacaoEngenharia(
      values.filter((e: any) => e.status_item_checklist_engenharia == "1")
    );
  }, [defaultValues]);

  useEffect(() => {
    const fetchChecklist = async () => {
      if (!defaultValues?.id_loja) return;

      try {
        const data = await listarChecklistEngenharia(defaultValues.id_loja);
        const itenAtivos = (data || []).filter(
          (e: any) => e.status_item_checklist_engenharia == "1"
        );
        setSchecklistValidacaoEngenharia(itenAtivos);
        form.setValue("checklistValidacaoEngenharia", itenAtivos);
        setCheckListKey((prev) => prev + 1);
      } catch (error) {
        console.error("Erro ao listar checklist de engenharia:", error);
      }
    };

    fetchChecklist();
  }, [defaultValues?.id_loja]);
  useEffect(() => {
    form.setValue("checklistValidacaoEngenharia", checklistValidacaoEngenharia);
  }, [checklistValidacaoEngenharia]);

  return (
    <div className="flex flex-col gap-9">
      {["1", "2"].map((a: any, i: number) => (
        <fieldset
          key={i}
          className="flex flex-col border-black/25 border rounded p-2 px-3 w-full overflow-auto"
        >
          <legend className="font-bold text-black">
            Check-List Padrão para Verificação da Engenharia {a}
          </legend>
          <div key={checkListKey} className="flex gap-4 flex-row flex-wrap">
            {checklistValidacaoEngenharia
              .filter(
                (b: any) => b.tipoEngenharia_item_checklist_engenharia == a
              )
              .map((itemValidacao, indexItem) =>
                itemValidacao.status_item_checklist_engenharia == "1" ? (
                  <div
                    key={indexItem}
                    className="flex items-center gap-4 bg-muted px-3 py-2 rounded-lg border"
                  >
                    <div className="flex items-center ">
                      <button
                        type="button"
                        className={`h-7 w-7 flex items-center justify-center rounded-full bg-destructive text-white hover:opacity-80`}
                        onClick={() => {
                          setSchecklistValidacaoEngenharia((prev) => {
                            return prev
                              .map((item) => {
                                if (
                                  item === itemValidacao // ou usa ID se tiver
                                ) {
                                  if (item.id_item_checklist_engenharia) {
                                    return {
                                      ...item,
                                      status_item_checklist_engenharia:
                                        item.status_item_checklist_engenharia == "1" ? "0" : "1",
                                    };
                                  }
                                  return null; // remove item novo
                                }
                                return item;
                              })
                              .filter(Boolean);
                          });
                          setCheckListKey((prev) => prev + 1);
                        }}
                      // disabled={
                      //   itemValidacao.status_item_checklist_engenharia == "0"
                      // }
                      >
                        {itemValidacao.status_item_checklist_engenharia ==
                          "1" ? (
                          <X size={16} />
                        ) : (
                          <Check size={16} />
                        )}
                      </button>
                    </div>
                    <div
                      className={`text-sm text-black`}
                    >
                      {itemValidacao.nome_item_checklist_engenharia}
                    </div>
                  </div>
                ) : (
                  <></>
                )
              )}
          </div>
          <div className="flex flex-row flex-wrap gap-3 justify-center items-center pt-3">
            <Input
              key={inputKey}
              name="input"
              placeholder="Descrição da Verificação"
              width={"w-fit"}
              onChange={(e) => setNomeItemValidacao(e.target.value)}
              maxLength={40}
            />
            <Button
              type="button"
              onClick={() => {
                if (nomeItemValidacao) {
                  if (
                    checklistValidacaoEngenharia.some(
                      (item) =>
                        item.nome_item_checklist_engenharia
                          .trim()
                          .toLowerCase() ==
                        nomeItemValidacao.trim().toLowerCase()
                    )
                  ) {
                    // return toast.error("Item já presente");
                    return setSchecklistValidacaoEngenharia((prev) => {
                      const itemChecklist = prev.find(
                        (item) =>
                          item.nome_item_checklist_engenharia
                            .trim()
                            .toLowerCase() ==
                          nomeItemValidacao.trim().toLowerCase()
                      );
                      const newChecklist = [
                        ...prev.filter(
                          (item) =>
                            item.nome_item_checklist_engenharia
                              .trim()
                              .toLowerCase() !=
                            nomeItemValidacao.trim().toLowerCase()
                        ),
                      ];
                      return [
                        ...newChecklist,
                        {
                          ...itemChecklist,
                          nome_item_checklist_engenharia: nomeItemValidacao,
                          status_item_checklist_engenharia: 1,
                          tipoEngenharia_item_checklist_engenharia: a,
                        },
                      ];
                    });
                  }
                  setSchecklistValidacaoEngenharia((prev) => [
                    ...prev,
                    {
                      nome_item_checklist_engenharia: nomeItemValidacao,
                      status_item_checklist_engenharia: 1,
                      tipoEngenharia_item_checklist_engenharia: a,
                      cod_loja_item_checklist_engenharia:
                        defaultValues?.id_loja,
                    },
                  ]);
                  setNomeItemValidacao("");
                  setInputKey((prev) => prev + 1);
                  setCheckListKey((prev) => prev + 1);
                }
              }}
              className={`rounded-full bg-primary p-2 hover:bg-primary/80 active:bg-primary`}
            >
              <Plus />
            </Button>
          </div>
        </fieldset>
      ))}
    </div>
  );
};

export default CfgPendenciaEngenharia;