import { useState } from "react";
import { listarAtendimento } from "@/requests/CRM/Dashboard/listarDashboard";
import GraficoDinamico from "../GraficoGeraDinamico";
import { useAuth } from "@/src/contexts/authContext";

function keyPeriodo(dataISO: string, periodo: string) {
  if (!dataISO) return "";
  // data_atendimento vem como "YYYY-MM-DD HH:mm:ss"
  const y = dataISO.slice(0, 4);
  const m = dataISO.slice(5, 7);
  const d = dataISO.slice(8, 10);

  switch ((periodo || "").toLowerCase()) {
    case "dia":
      return `${y}-${m}-${d}`; // YYYY-MM-DD
    case "ano":
      return `${y}`; // YYYY
    case "mes":
    case "todos":
    default:
      return `${y}-${m}`; // YYYY-MM
  }
}
const GraficoAtendimentoAction = ({
  data,
  usuarios,
  lojas,
  periodoSelecionado,
  label,
  tipoNegocio,
  classificacaoNegocio,
}: any) => {
  const { valuesSession } = useAuth();
  const { session } = valuesSession();
  const perfil = session.perfil_usuario;
  return (
    <GraficoDinamico
      nomeGrafico={label}
      buscar={async ({ usuario, periodoSelecionado, lojas, tipoNegocio, classificacaoNegocio }) => {
        const res = await listarAtendimento(
          usuarios,
          perfil,
          periodoSelecionado,
          lojas,
          tipoNegocio,
          classificacaoNegocio
        );

        const lista: any[] = (res?.body?.dados_grafico || res || []) as any[];

        const mapa: Record<
          string,
          { total: number; porTipo: Record<string, number> }
        > = {};

        for (const item of lista) {
          const periodoKey = keyPeriodo(
            item?.abertura_cham || "",
            periodoSelecionado
          );
          if (!periodoKey) continue;
          let tipo =
            item?.nome_tipo_reclamacao ||
            `Tipo ${item?.nome_tipo_reclamacao || "-"}`;
          if (!item?.nome_tipo_reclamacao) {
            tipo = "Sem tipo";
          }

          if (!mapa[periodoKey]) mapa[periodoKey] = { total: 0, porTipo: {} };
          mapa[periodoKey].total += 1;
          mapa[periodoKey].porTipo[tipo] =
            (mapa[periodoKey].porTipo[tipo] || 0) + 1;
        }

        // Ordena as chaves de período cronologicamente
        const periodosOrdenados = Object.keys(mapa).sort();

        // Monta dados para o gráfico:
        // label = "periodo", série única "total"
        const dadosAgregados = periodosOrdenados.map((p) => ({
          periodo: p,
          total: mapa[p].total,
          _detalhes: mapa[p].porTipo, // usado no tooltip custom do Pizza
        }));

        return dadosAgregados;
      }}
      usuarios={usuarios}
      lojas={lojas}
      periodoSelecionado={periodoSelecionado}
      chaveLabel="periodo"
      tipoNegocio={tipoNegocio}
      classificacaoNegocio={classificacaoNegocio}
      chavesSeries={[{ nome: "Total", campo: "total" }]}
      tiposGrafico={["Barra", "Pizza"]}
      tooltipCustom={(item: any, label: string) => {
        // Tooltip do Pizza: detalha por nome do atendimento no período
        const detalhes = item?._detalhes || {};
        const linhas = Object.entries(detalhes)
          .sort((a: any, b: any) => Number(b[1]) - Number(a[1]))
          .map(([tipo, qtd]) => `<div>${tipo}: <strong>${qtd}</strong></div>`)
          .join("");

        return `
        <div style="padding:8px">
          <div><strong>Período:</strong> ${label}</div>
          <div><strong>Total:</strong> ${item?.total ?? 0}</div>
          <hr style="margin:6px 0;border:none;border-top:1px solid #eee;" />
          <div style="font-weight:600;margin-bottom:4px;">Detalhes por atendimento</div>
          ${linhas || "<div>Sem registros</div>"}
        </div>
      `;
      }}
    />
  );
};

export default GraficoAtendimentoAction;