import Button from "@/components/Forms/Button";
import ModalComponente from "@/components/Modal/ModalComponente";
import { listarItensKitsPorTipo } from "@/requests/CRUD/ColetaDados/listarItenskitsDiversos";
import { useAuth } from "@/src/contexts/authContext";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { formatarValor } from "@/utils";
import { Typography } from "@material-tailwind/react";
import "katex/dist/katex.min.css";
import { Plus } from "lucide-react";
import { useEffect, useState } from "react";
import ItemComponenteProposta from "./ItemComponenteProposta";
import NewItemComponenteAmpliacao from "./NewItemComponenteAmpliacao";
type TipoItem = {
  id_tipo_item: string;
  nome_tipo_item: string;
};

type Item = {
  id_item: string;
  descricao_item: string;
  precoUnitario_item: number;
  tipo_item: string;
  status_item: string;
};

type Option = {
  value: string;
  label: string;
};
const tiposInversores = [
  { value: "micro_inversor", label: "Microinversor" },
  { value: "inversor_parede", label: "Inversor de Parede" },
];

const tiposStrings = [
  { value: "microinversor", label: "Microinversor" },
  { value: "inversor_on_grid", label: "INVERSOR STRING ON-GRID" },
  { value: "inversor_off_grid", label: "INVERSOR STRING OFF-GRID" },
  { value: "inversor_hibrido", label: "INVERSOR STRING HÍBRIDO" },
];

const InversoresAmpliacao = ({
  form,
  blockNextStep,
  stepInicializado,
  parametros,
  setStepInicializado,
  itensComp,
  itensCompostos,
  dadosCard,
  camposPersonalizados,
}: any) => {
  const [componentesKit, setComponentesKit] = useState<any[]>([]);
  const [inversores, setInversores] = useState<any[]>([]);
  const { usuario } = useAuth();
  const [isLoading, setIsLoading] = useState(false);
  const { isMobile } = useScreenContext();
  const [isOpenNewItem, setIsOpenNewItem] = useState(false);

  const classes =
    "p-4 max-sm:p-2 border-b dark:border-boxdark border-blue-gray-50";
  const canEditKit = true;

  useEffect(() => {
    const fetchData = async () => {
      const itensData = await listarItensKitsPorTipo("8");
      setInversores(itensData.filter((b: any) => b.status_item === "1"));
    };

    fetchData();
  }, []);

  const criarItemComposto = (item: any, inversorId: any) => {
    return {
      ...item,
      item_composto: "1",
      automatico: true,
      origem_inversor_item: String(inversorId),
      qtd_item: String(item.qtd_item || "1"),
      origensAutomaticas: [
        {
          id_inversor: String(inversorId),
          qtd: Number(item.qtd_item) || 1,
        },
      ],
    };
  };

  const carregarStringboxesDoInversor = async (inversor: any) => {
    const stringboxesData = await listarItensKitsPorTipo("13");
    return (stringboxesData || [])
      .filter(
        (sb: any) =>
          String(sb.codInversor_item) === "*" ||
          String(sb.codInversor_item) === String(inversor?.id_item)
      )
      .map((sb: any) => ({
        ...sb,
        automatico: true,
        origem_inversor_item: String(inversor?.id_item || ""),
        qtd_item: String(sb.qtd_item || inversor?.strings_item || "1"),
        origensAutomaticas: [
          {
            id_inversor: String(inversor?.id_item || ""),
            qtd: Number(sb.qtd_item || inversor?.strings_item || 1),
          },
        ],
      }));
  };

  const carregarBateriasDoInversor = async (inversor: any) => {
    const bateriasData = await listarItensKitsPorTipo("16");
    return (bateriasData || [])
      .filter(
        (bateria: any) =>
          String(bateria.id_item) === String(inversor?.idBateriaLitio_item) ||
          String(bateria.id_item) === String(inversor?.idBateriaChumbo_item)
      )
      .map((bateria: any) => {
        const qtdBase =
          String(bateria.id_item) === String(inversor?.idBateriaChumbo_item)
            ? inversor?.qtdBateriasChumboAcido_item || "1"
            : inversor?.qtdBateriasLitio_item || "1";

        return {
          ...bateria,
          nome_tipo_item: "Bateria",
          item_composto: "1",
          automatico: true,
          origem_inversor_item: String(inversor?.id_item || ""),
          qtd_item: String(qtdBase),
          origensAutomaticas: [
            {
              id_inversor: String(inversor?.id_item || ""),
              qtd: Number(qtdBase) || 1,
            },
          ],
        };
      });
  };

  async function submitEditItemKit(data: {
    id_item: number;
    [x: string]: any;
  }) {
    setIsLoading(true);
    if (data.qtd_item == 0) {
      return submitDeleteItemKit(data);
    }

    try {
      // Update the edited componente
      setComponentesKit((prev) => {
        return prev.map((componente) =>
          componente.id_item == data.id_item
            ? { ...componente, ...data }
            : componente
        );
      });

      // If editing an inverter, recalculate dependent automatic items
      if (data.tipo_item == "8") {
        // recalc qtdStrings based on current componentesKit state
        const qtdStrings = componentesKit
          .filter((componente) => componente.tipo_item == "8")
          ?.reduce((acc: number, curr: any) => {
            acc = acc + +curr.strings_item * +curr.qtd_item;
            return acc;
          }, 0);

        // update connector counts (tipo_item == "3")
        setComponentesKit((prev) => {
          return prev.map((componente) => {
            if (componente.tipo_item == "3") {
              return { ...componente, qtd_item: String(qtdStrings) };
            }
            return componente;
          });
        });

        // regenerate composed, stringboxes and batteries for this inverter
        const itensCompostosDoInversor = (itensCompostos || [])
          .filter(
            (item: any) =>
              Boolean(item) &&
              (String(item.codInversor_item) === "*" ||
                String(item.codInversor_item) === String(data.id_item))
          )
          .map((item: any) => criarItemComposto(item, data.id_item));

        const stringboxesDoInversor = await carregarStringboxesDoInversor(data);
        const bateriasDoInversor = await carregarBateriasDoInversor(data);

        setComponentesKit((prev) => {
          // remove previous automatic items tied to this inverter
          const filtrado = prev.filter((componente) => {
            if (
              String(componente.origem_inversor_item) === String(data.id_item)
            )
              return false;
            if (
              componente.origensAutomaticas &&
              Array.isArray(componente.origensAutomaticas)
            ) {
              return !componente.origensAutomaticas.some(
                (o: any) => String(o.id_inversor) === String(data.id_item)
              );
            }
            return true;
          });

          return [
            ...filtrado,
            ...itensCompostosDoInversor,
            ...stringboxesDoInversor,
            ...bateriasDoInversor,
          ];
        });
      }

      //   setKeyComponentes(keyComponentes + 1);
      return "Editado!";
    } finally {
      setIsLoading(false);
      setIsOpenNewItem(false);
    }
  }
  async function submitAddItemKit(componente: any) {
    setIsLoading(true);
    if (
      componentesKit?.some(
        (componenteKit) => componenteKit.id_item == componente.id_item
      )
    ) {
      return submitEditItemKit({
        ...componente,
        id_item: componente.id_item,
        qtd_item: componente?.qtd_item,
      });
    }
    try {
      if (componente.tipo_item == "8") {
        const itensCompostosDoInversor = (itensCompostos || [])
          .filter(
            (item: any) =>
              Boolean(item) &&
              (String(item.codInversor_item) === "*" ||
                String(item.codInversor_item) === String(componente.id_item))
          )
          .map((item: any) => criarItemComposto(item, componente.id_item));

        const stringboxesDoInversor =
          await carregarStringboxesDoInversor(componente);
        const bateriasDoInversor = await carregarBateriasDoInversor(componente);

        setComponentesKit((prev) => {
          return [
            ...prev,
            componente,
            ...itensCompostosDoInversor,
            ...stringboxesDoInversor,
            ...bateriasDoInversor,
          ];
        });
      } else {
        setComponentesKit((prev) => {
          return [...prev, componente];
        });
      }

      return "Adicionado!";
    } finally {
      setIsLoading(false);
      setIsOpenNewItem(false);
    }
  }
  async function submitDeleteItemKit(data: { id_item: number }) {
    setIsLoading(true);
    return new Promise((resolve, reject) => {
      setComponentesKit((prev) => {
        const newComponentesKit = [...prev].filter((componente) => {
          // remove explicit deleted item
          if (String(componente.id_item) === String(data.id_item)) return false;
          // remove items automatically created for this inverter
          if (String(componente.origem_inversor_item) === String(data.id_item))
            return false;
          if (
            componente.origensAutomaticas &&
            Array.isArray(componente.origensAutomaticas)
          ) {
            if (
              componente.origensAutomaticas.some(
                (o: any) => String(o.id_inversor) === String(data.id_item)
              )
            )
              return false;
          }
          return true;
        });

        const idsExistentes = new Set(
          newComponentesKit
            .filter((comp: any) => comp.item_composto === "1")
            .map((comp: any) => comp.id_item)
        );
        const removidos = form.getValues("componentesCompostosRemovidos") || [];
        const jaRemovido = removidos.includes(data.id_item);
        const itemDeletado = prev.find((i) => i.id_item === data.id_item);

        if (itemDeletado?.item_composto === "1" && !jaRemovido) {
          form.setValue("componentesCompostosRemovidos", [
            ...removidos,
            data.id_item,
          ]);
        }

        return [...newComponentesKit];
      });
      //   setKeyComponentes(keyComponentes + 1);
      resolve("Deletado!");
    }).finally(() => {
      setIsLoading(false);
      setIsOpenNewItem(false);
    });
  }

  // Cabeçalho e linhas precisam da mesma lista de colunas; as de valor seguem
  // exatamente a mesma condição usada em ItemComponenteProposta.
  const colunasTabela = [
    "Componente",
    "ID Item",
    "Descrição",
    "Quantidade",
    ...(usuario.visualiza_custo_kit_usuario == "1"
      ? ["Valor Unitário", "Total"]
      : []),
  ];

  return (
    <>
      <div className="flex flex-row justify-between gap-2">
        <div className="flex max-sm:grid justify-items-center flex-row gap-2">
          <div className="flex flex-col justify-center">
            {canEditKit && (
              <Button
                className=""
                type="button"
                onClick={() => setIsOpenNewItem(true)}
              >
                <Plus size={15} />
              </Button>
            )}
            {isOpenNewItem && (
              <ModalComponente
                hasForm={false}
                header="Novo Item"
                // defaultW="w-fit"
                className="max-h-[70vh]"
                opened={isOpenNewItem}
                onClose={() => setIsOpenNewItem(false)}
                hasSaveButton={false}
              >
                <NewItemComponenteAmpliacao
                  submitAddItemKit={submitAddItemKit}
                  defaultFilters={{
                    codFabricante_item:
                      form.control._formValues?.marca_inversor?.value,
                    fases_item: form.control._formValues?.tipoLigacao_proposta,
                    tipoInversor_item:
                      form.control._formValues?.tipo_inversor?.value,
                    tipoStringInversor_item:
                      form.control._formValues?.tipo_string_inversor?.value,
                    tensoes_item: form.control._formValues?.tensoes
                      ?.map((tensao: any) => tensao.value)
                      ?.join(","),
                  }}
                />
              </ModalComponente>
            )}
          </div>
        </div>
      </div>
      <div className="w-full overflow-x-auto">
        <table className="mt-4 w-full min-w-max table-auto text-left">
          {componentesKit.length > 0 ? (
            <thead>
              <tr>
                {colunasTabela.map((head, index) => {
                  return (
                    <th
                      key={index}
                      className="cursor-pointer border-y  border-stroke bg-stroke/50 p-4 max-sm:p-2 dark:hover:bg-form-strokedark hover:bg-stroke"
                      colSpan={
                        isMobile
                          ? head == "Componente"
                            ? 2
                            : 1
                          : index == colunasTabela.length - 1
                            ? 2
                            : 1
                      }
                    >
                      <div className="flex items-center justify-between gap-2 font-normal  leading-none opacity-90">
                        {head}
                      </div>
                    </th>
                  );
                })}
              </tr>
            </thead>
          ) : (
            <thead>
              <tr>
                <th colSpan={2}>
                  <span className="py-4 justify-end flex">
                    Não há componentes para o kit!
                  </span>
                </th>
              </tr>
            </thead>
          )}
          <tbody>
            {componentesKit &&
              componentesKit.map((componente: any, index: number) => {
                return (
                  <ItemComponenteProposta
                    key={index}
                    //   itemCompostos={itemCompostosBd}
                    itensComp={itensComp}
                    componente={componente}
                    canEditKit={canEditKit}
                    submitEditItemKit={submitEditItemKit}
                    submitDeleteItemKit={submitDeleteItemKit}
                    componentesKit={componentesKit}
                  />
                );
              })}
            {usuario.visualiza_custo_kit_usuario == "1" && (
              <tr>
                {/* Mantém a mesma contagem de colunas do cabeçalho/linhas */}
                <td colSpan={isMobile ? 5 : 4} className={classes}></td>
                <td colSpan={2} className={classes}>
                  <div className="flex flex-col w-full">
                    <hr />
                    <div>Custo Total do Kit</div>
                    <Typography
                      variant="small"
                      color="blue-gray"
                      className="font-normal"
                    >
                      {formatarValor(
                        componentesKit?.reduce((acc, curr) => {
                          // const preco = curr.item_composto
                          //   ? +curr.precoUnitario_item
                          //   : +curr.precoUnitario_item * +curr.qtd_item;
                          const preco =
                            +curr.precoUnitario_item * (+curr.qtd_item || 1);
                          return acc + preco;
                        }, 0) ?? 0
                      )}
                    </Typography>
                  </div>
                </td>
                {!isMobile && <td className={classes}></td>}
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </>
    //   {camposPersonalizados}
  );
};

export default InversoresAmpliacao;