import Input from "@/components/Forms/Input";
import InputGroup from "@/components/Forms/InputGroup";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { useEffect, useMemo, useState } from "react";

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 ItemComposto = ({
  onChange,
  formatarParaReal,
  tipoItens,
  data,
  visualMode,
  itens,
}: {
  onChange?: (val: any) => void;
  formatarParaReal: (val: any) => string;
  tipoItens: any;
  itens: any;
  visualMode: boolean;
  data: any;
}) => {
  const [formData, setFormData] = useState({
    tipoEscolhido: data?.tipoEscolhido ?? null,
    itemEscolhido: data?.itemEscolhido ?? null,
    quantidade: data?.quantidade ?? "0",
    tipoCabo: data?.tipoCabo ?? null,
  });

  const [precoTotalItem, setPrecoTotalItem] = useState(0);
  const [precoUnitItem, setPrecoUnitItem] = useState(0);
  const [isReady, setIsReady] = useState(false);

  const tipoOptions = useMemo(
    () =>
      tipoItens.map((t: TipoItem) => ({
        value: t.id_tipo_item,
        label: t.nome_tipo_item,
      })),
    [tipoItens]
  );

  const itemOptions = useMemo(() => {
    if (!formData.tipoEscolhido) return [];

    return itens
      .filter((i: any) => {
        const tipoCorreto = i.tipo_item === formData.tipoEscolhido;
        const subtipoCorreto =
          formData.tipoEscolhido === "2"
            ? i.tipoCabo_item === formData.tipoCabo
            : true;

        return tipoCorreto && subtipoCorreto;
      })
      .map((i: any) => ({
        value: i.id_item,
        label: i.descricao_item,
      }));
  }, [itens, formData.tipoEscolhido, formData.tipoCabo]);

  // Verificar se os dados necessários estão carregados
  useEffect(() => {
    // Se é um novo item (sem data preenchido), pode renderizar imediatamente
    if (!data?.tipoEscolhido && !data?.itemEscolhido) {
      setIsReady(true);
      return;
    }

    // Se é edição, aguardar as options estarem carregadas
    const tipoExists = tipoOptions.some(
      (opt: Option) => opt.value === data?.tipoEscolhido
    );
    const itemExists = data?.itemEscolhido
      ? itens.some((i: any) => i.id_item === data?.itemEscolhido)
      : true;

    if (tipoExists && itemExists) {
      setIsReady(true);
    }
  }, [tipoOptions, itens, data]);

  useEffect(() => {
    const selectedItem = itens.find(
      (i: any) => i.id_item === formData.itemEscolhido
    );
    if (selectedItem) {
      const precoTotal =
        Number(selectedItem.precoUnitario_item) * Number(formData.quantidade);
      setPrecoUnitItem(selectedItem.precoUnitario_item);
      setPrecoTotalItem(precoTotal);
    }
  }, [formData.itemEscolhido, formData.quantidade, itens]);

  useEffect(() => {
    const { itemEscolhido, quantidade, tipoEscolhido, tipoCabo } = formData;
    if (onChange) {
      onChange({
        itemEscolhido,
        quantidade,
        tipoEscolhido,
        tipoCabo,
        precoTotalItem,
      });
    }
  }, [formData, precoTotalItem]);

  if (!isReady) {
    return <div className="text-center p-4">Carregando...</div>;
  }

  return (
    <InputGroup
      align="center"
      className="w-9/12 justify-self-center items-center"
    >
      <InputSelectComponent
        label="Tipo"
        options={tipoOptions}
        width={"w-1/4"}
        defaultValue={data?.tipoEscolhido}
        disabled={visualMode}
        onChange={(e: any) =>
          setFormData((prev: any) => ({ ...prev, tipoEscolhido: e.value }))
        }
      />

      {formData.tipoEscolhido === "2" && (
        <InputSelectComponent
          name="tipoCabo_item"
          label="Tipo de Cabo"
          options={[
            { label: "Cabo Solar", value: "0" },
            { label: "Cabo Elétrico", value: "1" },
          ]}
          required
          width={"w-1/4"}
          error="Informe o Tipo do Cabo"
          defaultValue={data?.tipoCabo}
          disabled={visualMode}
          onChange={(e: any) =>
            setFormData((prev: any) => ({ ...prev, tipoCabo: e.value }))
          }
        />
      )}

      <InputSelectComponent
        label="Item"
        options={itemOptions}
        width={"w-1/4"}
        disabled={visualMode}
        defaultValue={data?.itemEscolhido}
        onChange={(e: any) =>
          setFormData((prev: any) => ({ ...prev, itemEscolhido: e.value }))
        }
      />

      <Input
        label="Quantidade"
        defaultValue={data?.quantidade}
        value={formData.quantidade}
        width={"w-1/6"}
        disabled={visualMode}
        onChange={(e) =>
          setFormData((prev) => ({ ...prev, quantidade: e.target.value }))
        }
      />
      <div>
        <p className="font-semibold pb-1">Valor Un.</p>
        <p>{formatarParaReal(precoUnitItem)}</p>
      </div>
      <div>
        <p className="font-semibold pb-1">Valor Total</p>
        <p>{formatarParaReal(precoTotalItem ?? 0)}</p>
      </div>
    </InputGroup>
  );
};

export default ItemComposto;