import Button from "@/components/Forms/Button";
import Container from "@/components/Forms/Container";
import ModalComponente from "@/components/Modal/ModalComponente";
import { obterNegocios } from "@/requests/CRUD/Negocios/obterNegocios";
import { obterPendenciaCompraDeMaterial } from "@/requests/CRUD/PendenciaCompraMaterial/obterPendenciaCompraMaterial";
import { Coleta } from "@/types/coleta";
import { useEffect, useMemo, useState } from "react";
// import { ListaComponentesKit } from "./dadosComprados";
import ListaComponentesKit from "./dadosAComprar";
import { listarDistribuidores } from "@/requests/CRUD/Distribuidores/listarDistribuidores";
import { listarDistribuidoresNativos } from "@/requests/CRUD/Distribuidores/listarDistribuidoresNativos";
import { listarComponentesKitByKitId } from "@/requests/CRUD/ColetaDados/cadastroColetaDados";
import { listarCustosExtras } from "@/requests/CRUD/Politica/listarCustosExtras";
import { listarPropostas } from "@/requests/CRUD/Propostas/listarPropostas";
import { baixarAwsContent } from "@/requests/common/Aws/baixarAws";
import { toast } from "react-toastify";
import { useAuth } from "@/src/contexts/authContext";
import { FileText } from "lucide-react";

const ComprasMateriais = () => {
  const [precificacao, setPrecificacao] = useState<any>([]);
  const [loading, setLoading] = useState(false);
  const [negocios, setNegocios] = useState<Coleta[]>([]);
  const [openModalVisualizaItens, setOpenModalVisualizaItens] = useState(false);
  const [distribuidores, setDistribuidores] = useState<any[]>([]);
  const [custosExtras, setCustosExtras] = useState<any[]>([]);
  const [dadosKit, setDadosKit] = useState<any[]>([]);
  const [camposPersonalizados, setCamposPersonalizados] = useState<any[]>([]);
  const [itensCompra, setItensCompra] = useState<any[]>([]);
  const [propostaAprovada, setPropostaAprovada] = useState<any>();
  const [
    openModalVisualizaItensComprados,
    setOpenModalVisualizaItensComprados,
  ] = useState(false);
  const { perfil } = useAuth();

  // Selecionados (ids)
  const [selecionados, setSelecionados] = useState<string[]>([]);

  // Resumo por projeto selecionado
  // id -> { projeto, kit, valor }
  const [resumoProjetos, setResumoProjetos] = useState<
    Record<string, { projeto: string; kit: string; valor: number }>
  >({});
  const [loadingResumo, setLoadingResumo] = useState<Record<string, boolean>>(
    {}
  );

  const formatBRL = (v: number) =>
    (v ?? 0).toLocaleString("pt-BR", { style: "currency", currency: "BRL" });

  const handleToggleSelecao = async (negocio: Coleta) => {
    const id = String(negocio.id_coleta);
    const isSelected = selecionados.includes(id);

    if (isSelected) {
      // remove
      setSelecionados((prev) => prev.filter((x) => x !== id));
      setResumoProjetos((prev) => {
        const clone = { ...prev };
        delete clone[id];
        return clone;
      });
      return;
    }

    // adiciona e carrega resumo do projeto (kit e valor)
    setSelecionados((prev) => [...prev, id]);
    setLoadingResumo((prev) => ({ ...prev, [id]: true }));
    try {
      const propostas = await listarPropostas(negocio.id_coleta);
      const aprov = propostas.find((p: any) => p.status_proposta === "1");

      // Nome do kit (ajuste conforme seu backend)
      const kitNome =
        aprov?.nome_kit ||
        aprov?.kit_nome ||
        `Kit #${aprov?.kit_proposta ?? ""}`;

      // Busca precificação para obter valor total do kit (ajuste as chaves conforme o JSON)
      let valorKit = 0;
      if (aprov?.caminho_resultadoPrecificacao_proposta) {
        try {
          const prec = await baixarAwsContent(
            aprov.caminho_resultadoPrecificacao_proposta
          );
          // tente diferentes chaves comuns:
          valorKit = Number(
            prec?.totalGeral ??
              prec?.total_geral ??
              prec?.total ??
              prec?.resumo?.total ??
              prec?.valor_total ??
              prec?.preco_total ??
              0
          );
        } catch (e) {
          console.warn("Não foi possível obter o total do kit:", e);
        }
      }

      setResumoProjetos((prev) => ({
        ...prev,
        [id]: {
          projeto: `${negocio.id_coleta} - ${negocio.nome_cliente}`,
          kit: kitNome,
          valor: Number.isFinite(valorKit) ? valorKit : 0,
        },
      }));
    } catch (e) {
      console.error(e);
      toast.error("Não foi possível carregar o resumo do projeto.");
    } finally {
      setLoadingResumo((prev) => ({ ...prev, [id]: false }));
    }
  };

  const fetchData = async (dadosNegocio: Coleta) => {
    setLoading(true);
    const propostas = await listarPropostas(dadosNegocio.id_coleta);
    const propostaAprovada = propostas.find(
      (p: any) => p.status_proposta === "1"
    );
    setPropostaAprovada(propostaAprovada);

    try {
      const [dist, distNativos, kit, custos, precificacaoData] =
        await Promise.all([
          listarDistribuidores(),
          listarDistribuidoresNativos(),
          listarComponentesKitByKitId(propostaAprovada.kit_proposta),
          listarCustosExtras({
            tipo_negocio: dadosNegocio.tipoNegocio_coleta,
            id_loja: dadosNegocio.loja_coleta,
          }),
          baixarAwsContent(
            propostaAprovada.caminho_resultadoPrecificacao_proposta
          ),
        ]);

      setDistribuidores([
        ...distNativos,
        ...dist.filter((d: any) => d.isFornecedor_distribuidor === 0),
      ]);
      setDadosKit(kit);
      setCustosExtras(custos);
      setPrecificacao(precificacaoData);
      setLoading(false);
      setOpenModalVisualizaItens(true);
    } catch (error) {
      console.error("Erro ao carregar dados:", error);
      toast.error("Erro ao carregar dados necessários.");
      setLoading(false);
    }
  };

  useEffect(() => {
    const carregar = async () => {
      const negocio = await obterNegocios();
      const pendencias = await obterPendenciaCompraDeMaterial();

      const idsComPendencia = pendencias.map((p: any) =>
        String(p.cod_coleta_pendencia_compra_material)
      );

      const filtrados: Coleta[] = negocio
        .filter((n: Coleta) => {
          const sequencia = n.sequenciaPendencias_coleta
            ? n.sequenciaPendencias_coleta.split(",").map(Number)
            : [];

          const indexDoNove = sequencia.indexOf(9);
          const depoisDoNove =
            indexDoNove !== -1 ? sequencia[indexDoNove + 1] : null;
          if (!depoisDoNove) return;

          return (
            idsComPendencia.includes(String(n.id_coleta)) &&
            Number(n.indexAtual_coleta) >= 9 &&
            Number(n.indexAtual_coleta) <= depoisDoNove &&
            Number(n.todasPendencias_concluidas_coleta) !== 1
          );
        })
        .map((n: Coleta) => ({
          ...n,
          pendencias: pendencias.find(
            (p: any) =>
              String(p.id_pendencia_compra_material) ===
              String(n.pendencia_compra_material_coleta)
          ),
        }));

      setNegocios(filtrados.filter((f) => f.pendencias));
    };

    carregar();
  }, []);

  // Agrupar materiais por nome de kit e somar quantidades
  const materiaisAgrupados = useMemo(() => {
    const map = new Map<
      string,
      { nome: string; qtd: number; valorUnit: number }
    >();
    Object.values(resumoProjetos).forEach((r) => {
      const key = r.kit || "Kit";
      const atual = map.get(key) || {
        nome: key,
        qtd: 0,
        valorUnit: r.valor ?? 0,
      };
      atual.qtd += 1;
      // se valores diferentes surgirem para o mesmo kit entre projetos, mantemos o último
      atual.valorUnit = r.valor ?? atual.valorUnit ?? 0;
      map.set(key, atual);
    });
    return Array.from(map.values());
  }, [resumoProjetos]);

  const totalPedido = useMemo(
    () =>
      materiaisAgrupados.reduce(
        (sum, item) => sum + (item.qtd || 0) * (item.valorUnit || 0),
        0
      ),
    [materiaisAgrupados]
  );

  return (
    <Container className="bg-inherit shadow-none">
      <div className="flex gap-6">
        {/* Lista de projetos */}
        <div className="w-2/3 p-5 bg-white text-black rounded-xl shadow-md space-y-3">
          <h1>Selecione os projetos para continuar</h1>

          {negocios.map((n) => {
            const id = String(n.id_coleta);
            const selecionado = selecionados.includes(id);

            return (
              <div
                key={id}
                onClick={() => handleToggleSelecao(n)}
                className={`justify-between cursor-pointer p-4 flex rounded-lg transition-colors border ${
                  selecionado ? "border-meta-5 border-[3px]" : "border-stroke"
                }`}
              >
                <div className="flex items-start gap-3">
                  {/* Checkbox */}
                  <label
                    className="inline-flex items-center cursor-pointer select-none"
                    onClick={(e) => e.stopPropagation()}
                  >
                    <input
                      type="checkbox"
                      className="sr-only peer"
                      checked={selecionado}
                      onChange={() => handleToggleSelecao(n)}
                      aria-label={`Selecionar projeto ${id}`}
                    />
                    <span className="w-5 h-5 rounded-md border border-gray-300 bg-white flex items-center justify-center transition-all peer-checked:bg-meta-5 peer-checked:border-meta-5 peer-focus-visible:ring-2 peer-focus-visible:ring-meta-5 peer-focus-visible:ring-offset-2">
                      <svg
                        className="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity"
                        viewBox="0 0 20 20"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="3"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      >
                        <path d="M4 10l4 4 8-8" />
                      </svg>
                    </span>
                  </label>

                  <div className="text-black font-semibold">
                    {n.id_coleta} - {n.nome_cliente}
                  </div>
                </div>

                <div className="flex flex-col items-center gap-2">
                  <span className="text-sm text-gray-600">
                    {n.pendencias!.data_pendencia_compra_material}
                  </span>
                  <Button
                    type="button"
                    className="bg-warning text-black"
                    loading={loading}
                    onClick={(e: any) => {
                      e.stopPropagation();
                      fetchData(n);
                    }}
                  >
                    <FileText size={17} />
                  </Button>
                </div>
              </div>
            );
          })}
        </div>

        {/* Resumo do Pedido (lado direito) */}
        <div className="w-1/3">
          <div className="bg-white text-black rounded-xl shadow-md border border-gray-100 p-5 sticky top-6">
            {/* Projetos */}
            <div className="mt-4">
              <div className="flex items-center justify-between">
                <span className="font-medium text-gray-800">
                  Projetos ({selecionados.length})
                </span>
              </div>
              <ul className="mt-2 space-y-1 max-h-32 overflow-auto pr-1">
                {selecionados.length === 0 && (
                  <li className="text-sm text-gray-400">
                    Nenhum projeto selecionado
                  </li>
                )}
                {selecionados.map((id) => (
                  <li key={id} className="text-sm text-gray-700 truncate">
                    {resumoProjetos[id]?.projeto || `Projeto ${id}`}
                    {loadingResumo[id] && (
                      <span className="ml-2 text-xs text-gray-400">
                        carregando…
                      </span>
                    )}
                  </li>
                ))}
              </ul>
            </div>

            {/* Materiais */}
            <div className="mt-5 border-t pt-4">
              <div className="flex items-center justify-between">
                <span className="font-medium text-gray-800">
                  Materiais ({materiaisAgrupados.length})
                </span>
              </div>

              <div className="mt-2 space-y-2">
                {materiaisAgrupados.length === 0 && (
                  <div className="text-sm text-gray-400">
                    Selecione projetos para ver materiais
                  </div>
                )}

                {materiaisAgrupados.map((m, idx) => (
                  <div key={idx} className="flex items-center justify-between">
                    <div className="text-sm text-gray-700">{m.nome}</div>
                    <div className="text-right">
                      <div className="text-sm text-gray-900">
                        {formatBRL((m.qtd || 0) * (m.valorUnit || 0))}
                      </div>
                      <div className="text-xs text-gray-500">
                        Qtd: {m.qtd} × {formatBRL(m.valorUnit || 0)}
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Total */}
            <div className="mt-5 border-t pt-4">
              <div className="flex items-center justify-between">
                <span className="font-medium text-gray-800">Valor Total</span>
                <span className="text-xl font-bold text-gray-900">
                  {formatBRL(totalPedido)}
                </span>
              </div>
            </div>

            {/* Ação */}
            <div className="mt-4">
              <Button
                type="button"
                className={`w-full ${
                  selecionados.length === 0
                    ? "bg-gray-200 text-gray-600"
                    : "bg-indigo-500 text-white"
                }`}
                disabled={selecionados.length === 0}
                onClick={() => {
                  if (selecionados.length === 0) return;
                  // implemente a criação do pedido aqui
                  toast.info("Criar Pedido de Compra — implemente sua ação");
                }}
              >
                Criar Pedido de Compra
              </Button>
              <p className="mt-2 text-xs text-gray-400">
                Selecione projetos, materiais e fornecedor
              </p>
            </div>
          </div>
        </div>
      </div>

      {/* Modal de itens previstos */}
      <ModalComponente
        hasSaveButton={false}
        onClose={() => setOpenModalVisualizaItens(false)}
        size={"lg"}
        className="bg-white"
        header="Visualização da Entrega de Kits"
        opened={openModalVisualizaItens}
        hasForm={false}
      >
        <ListaComponentesKit
          id_kit={propostaAprovada?.kit_proposta}
          dadosKit={dadosKit}
          perfil={perfil}
          proposta={propostaAprovada}
          precificacao={precificacao}
          custosExtras={[]}
        />
      </ModalComponente>
    </Container>
  );
};

export default ComprasMateriais;