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

type ItemContato = {
  nome?: string;
  total?: string | number;
  id_cliente: string;
  nome_cliente: string;
  nome_usuario: string;
  data_cadastro_cliente: string;
  avatar_usuario?: string;
};

const ContatoPeriodo: 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<ItemContato[]> => {
    const resp = await contatoPeriodo(
      usuarios,
      perfil,
      periodoSelecionado,
      lojas,
      tipoNegocio,
      classificacaoNegocio
    );
    return resp?.body?.dados_grafico || [];
  }, [usuarios, perfil, periodoSelecionado, lojas, tipoNegocio, classificacaoNegocio]);

  const columns = useMemo(
    () => [
      {
        header: "ID",
        widthClass: "w-1/5",
        render: (i: ItemContato) => i.id_cliente ?? "-",
      },
      {
        header: "Nome",
        widthClass: "w-1/3",
        render: (i: ItemContato) => i.nome_cliente ?? "-",
      },
      {
        header: "Vendedor",
        widthClass: "w-1/3",
        render: (i: ItemContato) => (
          <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 Criação do Contato",
        widthClass: "w-1/3",
        render: (i: ItemContato) => dateBR(i.data_cadastro_cliente) ?? "-",
      },
    ],
    []
  );
  const getTotalValue = React.useCallback((items: ItemContato[]) => {
    return items.reduce((acc, i) => acc + Number(i.total || 0), 0);
  }, []);
  return (
    <MetricCard<ItemContato>
      title="Quadro Contatos Cadastrados"
      layoutId="contatos-card"
      fetchData={fetchData}
      deps={[usuarios, perfil, tipoNegocio, classificacaoNegocio, periodoSelecionado, lojas]}
      enabled={!!localToken}
      columns={columns}
      getRowId={(_, idx) => idx}
      showValueOnCard={false}
      getTotalValue={getTotalValue}
    />
  );
};

export default ContatoPeriodo;