import React, { useMemo } from "react";

import InputAvatar from "@/components/Forms/InputAvatar";
import { currencyBR, dateBR } from "@/utils/format";
import { listarNegociosGerados } from "@/requests/CRUD/Propostas/listarPropostas";
import { useAuth } from "@/src/contexts/authContext";
import { MetricCard } from "@/components/Dashboard/MetricCard";

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

export default function NegociosGerados({
  usuarios,
  lojas,
  periodoSelecionado,
  tipoNegocio,
  classificacaoNegocio,
}: {
  usuarios: any;
  lojas?: string;
  periodoSelecionado: any;
  tipoNegocio: any;
  classificacaoNegocio?: any;
}) {
  const { localToken } = useAuth();
  function statusColeta(status: any) {
    if (Number(status) === 100) {
      return "Cancelado";
    }
    return "Em aberto";
  }
  const fetchData = React.useCallback(async (): Promise<Proposta[]> => {
    const response = await listarNegociosGerados(
      periodoSelecionado,
      usuarios,
      lojas,
      tipoNegocio,
      1,
      classificacaoNegocio
    );
    return response || [];
  }, [periodoSelecionado, tipoNegocio, usuarios, lojas, classificacaoNegocio]);

  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: "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 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.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 Em Aberto"
      layoutId="negocios-gerados-card"
      fetchData={fetchData}
      deps={[periodoSelecionado, tipoNegocio, usuarios, lojas, classificacaoNegocio]}
      enabled={!!localToken}
      columns={columns}
      getRowId={(i) => i.id}
      getTotalValue={getTotalValue}
      showValueOnCard={false} // aqui você não mostra valor no card, só no modal
      formatValue={currencyBR}
    />
  );
}