import React, { useMemo } from "react";

import InputAvatar from "@/components/Forms/InputAvatar";
import { currencyBR, dateBR } from "@/utils/format";
import { listarTicketMedio } from "@/requests/CRUD/Propostas/listarPropostas";
import { listarTodasPropostas } from "@/requests/CRUD/Propostas/listarTodasPropostas";
import { useAuth } from "@/src/contexts/authContext";
import { MetricCard } from "@/components/Dashboard/MetricCard";
import { DataProps } from "@/types/dashboard";
import { listarNegocios } from "@/requests/CRUD/ColetaDados/cadastroColetaDados";

type Proposta = {
  id: string;
  id_coleta: string;
  nome_cliente: string;
  valorTotal_proposta: string | number;
  nome_usuario: string;
  avatar_usuario?: string;
  data_proposta?: string;
};

function PercentSobrePropostas({
  countFechados,
  classificacaoNegocio,
}: {
  countFechados: number;
  classificacaoNegocio?: any;
}) {
  const [percent, setPercent] = React.useState<number | null>(null);
  const [percentQtde, setPercentQtde] = React.useState<number | null>(null);
  React.useEffect(() => {
    let active = true;
    Promise.all([listarNegocios(), listarTodasPropostas(classificacaoNegocio)])
      .then(([negocios, propostas]) => {
        const totalNegociosGerados = negocios.filter(
          (n: any) => n.status_coleta !== "100"
        ).length;

        // Agrupa propostas por negócio (id_coleta ou id_negocio)
        const propostasPorNegocio = propostas.reduce((acc: any, p: any) => {
          const id = p.coleta_proposta || p.id_negocio || p.id_coleta;
          if (!id) return acc;
          if (!acc[id]) acc[id] = [];
          acc[id].push(p);
          return acc;
        }, {});

        // Para cada negócio, pega SOMENTE a proposta aprovada (status_proposta = 1)
        const propostasAprovadas = Object.values(propostasPorNegocio)
          .map((lista: any) =>
            lista.find((p: any) => p.status_proposta === "1")
          )
          .filter(Boolean);

        // Soma total de valores das aprovadas
        const totalValorFechadas = propostasAprovadas.reduce(
          (acc: number, p: any) => acc + parseFloat(p.valorTotal_proposta || 0),
          0
        );

        // Soma total de valores das propostas GERADAS (pode ser todas as que existem)
        const totalValorGeradas = Object.values(propostasPorNegocio)
          .map((lista: any) =>
            // soma o total de todas as propostas do negócio
            lista.reduce(
              (acc: number, p: any) =>
                acc + parseFloat(p.valorTotal_proposta || 0),
              0
            )
          )
          .reduce((acc: number, soma: number) => acc + soma, 0);
        const pValor = totalValorGeradas
          ? (totalValorFechadas / totalValorGeradas) * 100
          : 0;

        const pQtde = totalNegociosGerados
          ? (countFechados / totalNegociosGerados) * 100
          : 0;
        if (active) {
          setPercent(pValor);
          setPercentQtde(pQtde);
        }
      })
      .catch((e) => console.error(e));
    return () => {
      active = false;
    };
  }, [countFechados, classificacaoNegocio]);
  if (percent === null || percentQtde === null) return null;
  const v = percent.toFixed(2);
  const vQtde = percentQtde.toFixed(2);

  return (
    <div className="md:text-right">
      <div>
        <p className="text-slate-600 dark:text-slate-300 font-semibold">
          {v}% do valor sobre negocios gerados
        </p>
        <p className="text-2xl md:text-3xl font-semibold mt-1">{v}%</p>
      </div>
      <div>
        <p className="text-slate-600 dark:text-slate-300 font-semibold">
          {vQtde}% da qtde sobre negocios gerados
        </p>
        <p className="text-2xl md:text-3xl font-semibold mt-1">{vQtde}%</p>
      </div>
    </div>
  );
}
export default function NegociosFechados({
  usuarios,
  lojas,
  periodoSelecionado,
  tipoNegocio,
  classificacaoNegocio,
}: DataProps) {
  const { localToken } = useAuth();

  const fetchData = React.useCallback(async (): Promise<Proposta[]> => {
    const response = await listarTicketMedio(
      periodoSelecionado,
      usuarios,
      lojas,
      tipoNegocio,
      classificacaoNegocio
    );
    return response || [];
  }, [periodoSelecionado, usuarios, tipoNegocio, lojas, classificacaoNegocio]);
  function statusColeta(status: any) {
    if (status === 100) {
      return "Cancelado"
    }
    if (status >= 0 && status <= 12) {
      return "Em andamento"
    }

    return "Concluído"

  }
  const columns = useMemo(
    () => [
      {
        header: "Negócio",
        widthClass: "w-1/4",
        render: (i: any) => (
          <span className="font-semibold">{i.id_coleta}</span>
        ),
      },
      {
        header: "Status Negócio",
        widthClass: "w-1/3",
        render: (i: any) => statusColeta(Number(i.status_coleta)) ?? "-",
      },
      {
        header: "Cliente",
        widthClass: "w-1/3",
        render: (i: any) => i.nome_cliente,
      },
      {
        header: "Valor",
        widthClass: "w-1/3",
        render: (i: any) => currencyBR(Number(i.valorTotal_proposta)),
      },
      {
        header: "Vendedor",
        widthClass: "w-1/3",
        render: (i: any) => (
          <div className="flex items-center gap-2 text-slate-700 dark:text-slate-300">
            <InputAvatar
              nome_responsavel={i.nome_usuario}
              height={"7"}
              width={"7"}
              hover={false}
              imageValue={i.avatar_usuario}
            />
            {i.nome_usuario}
          </div>
        ),
      },
      {
        header: "Data de Criação do Negócio",
        widthClass: "w-1/4",
        render: (i: any) => dateBR(i.datetime_coleta) ?? "-",
      },
      {
        header: "Data de Finalização da Venda",
        widthClass: "w-1/4",
        render: (i: any) => dateBR(i.dataFinalizacaoVenda_coleta ?? i.data_proposta),
      },

    ],
    []
  );

  const getTotalValue = React.useCallback((items: Proposta[]) => {
    return items.reduce(
      (acc, item) => acc + parseFloat(String(item.valorTotal_proposta || 0)),
      0
    );
  }, []);

  return (
    <MetricCard<Proposta>
      title="Quadro Negócios Fechados"
      layoutId="negocios-fechados-card"
      fetchData={fetchData}
      deps={[periodoSelecionado, tipoNegocio, usuarios, lojas, classificacaoNegocio]}
      enabled={!!localToken}
      columns={columns}
      getRowId={(i) => i.id}
      getTotalValue={getTotalValue}
      showValueOnCard={true}
      formatValue={currencyBR}
      footer={({ totalValue = 0, totalCount, items }) => (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <p className="text-slate-600 dark:text-slate-300 font-semibold">
              Ticket médio
            </p>
            <p className="text-2xl md:text-3xl font-semibold mt-1">
              {currencyBR(totalCount ? totalValue / totalCount : 0)}
            </p>
          </div>
          <PercentSobrePropostas
            countFechados={totalCount}
            classificacaoNegocio={classificacaoNegocio}
          />
        </div>
      )}
    />
  );
}