import React, { useMemo } from "react";

import { useAuth } from "@/src/contexts/authContext";
import { listarAtendimento } from "@/requests/CRM/Dashboard/listarDashboard";
import { MetricCard } from "@/components/Dashboard/MetricCard";
import InputAvatar from "@/components/Forms/InputAvatar";
import { dateBR } from "@/utils/format";

type ItemAtendimento = {
  nome?: string;
  total?: string | number;
};

export default function Atendimento({
  usuarios,
  lojas,
  periodoSelecionado,
  tipoNegocio,
  classificacaoNegocio,
}: {
  usuarios: any;
  lojas?: string;
  periodoSelecionado: any;
  tipoNegocio: any;
  classificacaoNegocio?: any;
}) {
  const { localToken, valuesSession } = useAuth();
  const { session } = valuesSession();
  const perfil = session.perfil_usuario;

  const fetchData = React.useCallback(async (): Promise<ItemAtendimento[]> => {
    const resp = await listarAtendimento(
      usuarios,
      perfil,
      periodoSelecionado,
      lojas,
      tipoNegocio,
      classificacaoNegocio
    );
    return resp?.body?.dados_grafico || [];
  }, [usuarios, perfil, tipoNegocio, classificacaoNegocio, periodoSelecionado, lojas]);

  const columns = useMemo(
    () => [
      {
        header: "ID",
        widthClass: "w-1/5",
        render: (i: any) => i.id_atendimento ?? "-",
      },
      {
        header: "Tipo",
        widthClass: "w-1/3",
        render: (i: any) => i.nome_tipo_atendimento ?? "-",
      },
      {
        header: "Observações",
        widthClass: "w-1/3",
        render: (i: any) => i.observacoes_atendimento ?? "-",
      },

      {
        header: "Loja",
        widthClass: "w-1/3",
        render: (i: any) => i.nome_loja ?? "-",
      },

      {
        header: "Responsável",
        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 Cadastrado do Atendimento",
        widthClass: "w-1/3",
        render: (i: any) => dateBR(i.data_atendimento) ?? "-",
      },
    ],
    []
  );

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

  return (
    <MetricCard<ItemAtendimento>
      title="Quadro Atendimentos"
      layoutId="atendimentos-card"
      fetchData={fetchData}
      deps={[usuarios, perfil, tipoNegocio, classificacaoNegocio, periodoSelecionado, lojas]}
      enabled={!!localToken}
      columns={columns}
      getRowId={(_, idx) => idx}
      showValueOnCard={false}
      getTotalValue={getTotalValue}
    />
  );
}