import { MetricCard } from "@/components/Dashboard/MetricCard";
import InputAvatar from "@/components/Forms/InputAvatar";
import { PropostasPeriodo } from "@/requests/CRM/Dashboard/listarDashboard";
import { useAuth } from "@/src/contexts/authContext";
import { DataProps } from "@/types/dashboard";
import { currencyBR, dateBR } from "@/utils/format";
import React, { useMemo, useState } from "react";

type ItemProposta = {
  id_coleta: string;
  status_coleta: string;
  id_proposta: string;
  id_cliente: string;
  nome_cliente: string;
  nome_usuario: string;
  data_hora_reprovacao: string;
  avatar_usuario: string;
  data_proposta: string;
  data_hora_aprovacao: string;
  valorTotal_proposta: string;
  status_proposta: string;
};
function PercentSobrePropostas({
  propostasGeradas,
  propostasFechadas,
}: {
  propostasGeradas: any[];
  propostasFechadas: any[];
}) {
  const totalGeradas = propostasGeradas.length;
  const totalFechadas = propostasFechadas.length;

  const totalValorGeradas = propostasGeradas.reduce(
    (acc, p) => acc + Number(p.valorTotal_proposta || 0),
    0,
  );
  const totalValorFechadas = propostasFechadas.reduce(
    (acc, p) => acc + Number(p.valorTotal_proposta || 0),
    0,
  );

  const pValor = totalValorGeradas
    ? (totalValorFechadas / totalValorGeradas) * 100
    : 0;
  const pQtde = totalGeradas ? (totalFechadas / totalGeradas) * 100 : 0;

  const vValor = pValor.toFixed(2);
  const vQtde = pQtde.toFixed(2);

  return (
    <div className="md:text-right flex justify-between w-full space-y-2">
      <div>
        <p className="text-slate-600 dark:text-slate-300 font-semibold">
          {vValor}% do valor sobre propostas geradas
        </p>
        <p className="text-2xl md:text-3xl font-semibold mt-1">{vValor}%</p>
      </div>
      <div>
        <p className="text-slate-600 dark:text-slate-300 font-semibold">
          {vQtde}% da qtde sobre propostas geradas
        </p>
        <p className="text-2xl md:text-3xl font-semibold mt-1">{vQtde}%</p>
      </div>
    </div>
  );
}

const GraficoPropostasPeriodo: React.FC<DataProps> = ({
  data,
  lojas,
  usuarios,
  tipoNegocio,
  classificacaoNegocio,
  status,
  periodoSelecionado,
}: any) => {
  const { valuesSession, localToken } = useAuth();
  const { session } = valuesSession();
  const perfil = session.perfil_usuario;

  const [todasPropostas, setTodasPropostas] = useState<ItemProposta[]>([]);

  const fetchData = React.useCallback(async (): Promise<ItemProposta[]> => {
    const resp = await PropostasPeriodo(
      usuarios,
      perfil,
      periodoSelecionado,
      lojas,
      status,
      tipoNegocio,
      classificacaoNegocio,
    );
    const dados = resp?.body?.dados_grafico || [];

    const dataFiltered = dados.filter((a: any) => {
      if (["0", "1", "3"].includes(String(status))) {
        return a.status_proposta === String(status);
      }
      return true;
    });

    setTodasPropostas(dados);

    return dataFiltered;
  }, [usuarios, perfil, status, tipoNegocio, classificacaoNegocio, periodoSelecionado, lojas]);
  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/5",
        render: (i: ItemProposta) => i.id_coleta ?? "-",
      },
      {
        header: "Status Negócio",
        widthClass: "w-1/3",
        render: (i: ItemProposta) => statusColeta(Number(i.status_coleta)) ?? "-",
      },
      {
        header: "Proposta",
        widthClass: "w-1/3",
        render: (i: ItemProposta) => i.id_proposta ?? "-",
      },

      {
        header: "Cliente",
        widthClass: "w-1/3",
        render: (i: ItemProposta) => i.id_cliente ?? "-",
      },
      {
        header: "Nome Cliente",
        widthClass: "w-1/3",
        render: (i: ItemProposta) => i.nome_cliente ?? "-",
      },

      {
        header: "Vendedor",
        widthClass: "w-1/3",
        render: (i: ItemProposta) => (
          <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>
        ),
      },
      ...(status === 1
        ? [
          {
            header: "Data da Geração da Proposta",
            widthClass: "w-1/3",
            render: (i: ItemProposta) => dateBR(i.data_proposta) ?? "-",
          },
          {
            header: "Data da Aprovação da Proposta",
            widthClass: "w-1/3",
            render: (i: ItemProposta) =>
              dateBR(i.data_hora_aprovacao) ?? "-",
          },
        ]
        : status === 3
          ? [
            {
              header: "Data da Geração da Proposta",
              widthClass: "w-1/3",
              render: (i: ItemProposta) => dateBR(i.data_proposta) ?? "-",
            },
            {
              header: "Data da Aprovação da Proposta",
              widthClass: "w-1/3",
              render: (i: ItemProposta) =>
                dateBR(i.data_hora_aprovacao) ?? "-",
            },
            {
              header: "Data do Cancelamento da Proposta",
              widthClass: "w-1/3",
              render: (i: ItemProposta) =>
                dateBR(i.data_hora_reprovacao) ?? "-",
            },
          ]
          : [
            {
              header: "Data da Geração da Proposta",
              widthClass: "w-1/3",
              render: (i: ItemProposta) => dateBR(i.data_proposta) ?? "-",
            },
          ]),
      {
        header: "Valor",
        widthClass: "w-1/3",
        render: (i: any) => currencyBR(Number(i.valorTotal_proposta)),
      },
    ],
    [status],
  );

  const getTotalValue = React.useCallback((items: ItemProposta[]) => {
    return items.reduce(
      (acc, i) => acc + Number(i.valorTotal_proposta || 0),
      0,
    );
  }, []);

  return (
    <MetricCard<ItemProposta>
      title={`Quadro ${status === "*" ? 'Todas as Propostas' : `Propostas ${status === 1 ? "Aprovadas" : status === 3 ? "Canceladas" : "Geradas"}`} `}
      layoutId={`proposta-${status}-card`}
      fetchData={fetchData}
      deps={[usuarios, perfil, tipoNegocio, classificacaoNegocio, periodoSelecionado, lojas]}
      enabled={!!localToken}
      columns={columns}
      getRowId={(_, idx) => idx}
      showValueOnCard={true}
      getTotalValue={getTotalValue}
      footer={
        status === 1
          ? ({ totalValue = 0, items, totalCount }) => (
            <div className="flex gap-6">
              <PercentSobrePropostas
                propostasGeradas={todasPropostas}
                propostasFechadas={items}
              />
            </div>
          )
          : undefined
      }
    />
  );
};

export default GraficoPropostasPeriodo;