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

type ItemNegocio = {
  id_coleta: string;
  id_proposta: string;
  id_cliente: string;
  nome_cliente: string;
  nome_usuario: string;
  avatar_usuario: string;

  valorTotal_proposta: string;
  dataCancelamento_coleta: string;
};

const NegociosPerdidos: React.FC<DataProps> = ({
  data,
  lojas,
  usuarios,
  tipoNegocio,
  classificacaoNegocio,

  periodoSelecionado,
}) => {
  const { valuesSession, localToken } = useAuth();
  const { session } = valuesSession();
  const perfil = session.perfil_usuario;

  const fetchData = React.useCallback(async (): Promise<ItemNegocio[]> => {
    const resp = await negociosPerdidosPeriodos(
      usuarios,
      perfil,
      periodoSelecionado,
      lojas,
      tipoNegocio,
      classificacaoNegocio
    );
    return resp?.body?.dados_grafico || [];
  }, [usuarios, perfil, 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: ItemNegocio) => i.id_coleta ?? "-",
      },
      {
        header: "Status Negócio",
        widthClass: "w-1/3",
        render: (i: any) => "Cancelado",
      },
      {
        header: "Proposta",
        widthClass: "w-1/3",
        render: (i: ItemNegocio) => i.id_proposta ?? "-",
      },

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

      {
        header: "Vendedor",
        widthClass: "w-1/3",
        render: (i: ItemNegocio) => (
          <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: "Valor",
        widthClass: "w-1/3",
        render: (i: any) => currencyBR(Number(i.valorTotal_proposta)),
      },
      {
        header: "Data de Cancelamento da Venda",
        widthClass: "w-1/3",
        render: (i: ItemNegocio) => dateBR(i.dataCancelamento_coleta) ?? "-",
      },
      {
        header: "Data de Criação do Negócio",
        widthClass: "w-1/3",
        render: (i: any) => dateBR(i.datetime_coleta) ?? "-",
      },
    ],
    []
  );

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

  return (
    <MetricCard<ItemNegocio>
      title={`Quadro Negócios Perdidos`}
      layoutId={`negocios-perdidos-card`}
      fetchData={fetchData}
      deps={[usuarios, perfil, tipoNegocio, classificacaoNegocio, periodoSelecionado, lojas]}
      enabled={!!localToken}
      columns={columns}
      getRowId={(_, idx) => idx}
      showValueOnCard={true}
      getTotalValue={getTotalValue}
    />
  );
};
export default NegociosPerdidos;