import ModalComponente from "@/components/Modal/ModalComponente";
import { detalheRankingNivel } from "@/requests/CRM/Metas/listarMetas";
import { useEffect, useMemo, useState } from "react";

// Item 07: detalhe de um registro do Ranking do Nível — mostra a que período
// cada resultado se refere e lista os registros que o compõem (os leads que o
// usuário cadastrou, as propostas que ele gerou etc.).

const STATUS_PROPOSTA: Record<string, string> = {
  "0": "Proposta Gerada",
  "1": "Aprovada",
  "2": "Inativa",
  "3": "Cancelada",
};

const formatarNumero = (valor: any): string =>
  Number(valor || 0).toLocaleString("pt-BR");

const formatarMoeda = (valor: any): string =>
  Number(valor || 0).toLocaleString("pt-BR", {
    style: "currency",
    currency: "BRL",
  });

const exibirId = (valor: any): string =>
  valor === null || valor === undefined || Number(valor) <= 0
    ? "-"
    : String(valor);

const exibirTexto = (valor: any): string =>
  valor === null || valor === undefined || String(valor).trim() === ""
    ? "-"
    : String(valor);

// Aceita "AAAA-MM-DD" e "AAAA-MM-DD HH:MM:SS"
const formatarData = (valor: any): string => {
  if (!valor) return "-";
  const [data] = String(valor).split(" ");
  const [ano, mes, dia] = data.split("-");
  if (!dia) return String(valor);
  return `${dia}/${mes}/${ano}`;
};

type Coluna = { header: string; valor: (r: any) => string };

const COLUNA_PROJETO: Coluna = {
  header: "Nro do Projeto",
  valor: (r) => exibirId(r.nro_projeto),
};

const COLUNA_PROPOSTA: Coluna = {
  header: "Nro da Proposta",
  valor: (r) => exibirId(r.nro_proposta),
};

const COLUNA_DATA_PROPOSTA: Coluna = {
  header: "Data Geração da Proposta",
  valor: (r) => formatarData(r.data_proposta),
};

const COLUNA_VALOR: Coluna = {
  header: "Valor da Proposta",
  valor: (r) => formatarMoeda(r.valor),
};

const COLUNA_STATUS: Coluna = {
  header: "Status da Proposta",
  valor: (r) =>
    r.status_proposta === null || r.status_proposta === undefined
      ? "-"
      : (STATUS_PROPOSTA[String(r.status_proposta)] ??
        String(r.status_proposta)),
};

const COLUNA_VENDA: Coluna = {
  header: "Data Finalização da Venda",
  valor: (r) => formatarData(r.data_venda),
};

const COLUNAS_LEAD: Coluna[] = [
  { header: "ID Lead", valor: (r) => exibirId(r.id_lead) },
  { header: "Nome do Lead", valor: (r) => exibirTexto(r.nome_lead) },
  { header: "Data Cadastro do Lead", valor: (r) => formatarData(r.data_lead) },
];

// Colunas por objetivo da meta (mesmo rótulo devolvido pelo back-end).
const COLUNAS_POR_OBJETIVO: Record<string, Coluna[]> = {
  "Quantidade de Leads": [
    ...COLUNAS_LEAD,
    COLUNA_PROJETO,
    COLUNA_PROPOSTA,
    COLUNA_DATA_PROPOSTA,
  ],
  "Quantidade de Agendamentos": [
    { header: "ID Agendamento", valor: (r) => exibirId(r.id_agendamento) },
    {
      header: "Data do Agendamento",
      valor: (r) => formatarData(r.data_agendamento),
    },
    {
      header: "Data Fim do Agendamento",
      valor: (r) => formatarData(r.data_fim_agendamento),
    },
    COLUNA_PROJETO,
    COLUNA_PROPOSTA,
  ],
  "Taxa de Conversão de Leads": [
    { header: "Tipo de Registro", valor: (r) => exibirTexto(r.tipo_registro) },
    ...COLUNAS_LEAD,
    COLUNA_PROJETO,
    COLUNA_PROPOSTA,
    COLUNA_VALOR,
    COLUNA_VENDA,
  ],
};

const COLUNAS_PROPOSTA: Coluna[] = [
  COLUNA_PROJETO,
  COLUNA_PROPOSTA,
  COLUNA_DATA_PROPOSTA,
  COLUNA_VALOR,
  COLUNA_STATUS,
];

const COLUNAS_VENDA: Coluna[] = [...COLUNAS_PROPOSTA, COLUNA_VENDA];

const colunasDoObjetivo = (objetivo: string): Coluna[] => {
  if (COLUNAS_POR_OBJETIVO[objetivo]) return COLUNAS_POR_OBJETIVO[objetivo];
  if (objetivo.includes("Vendas")) return COLUNAS_VENDA;
  return COLUNAS_PROPOSTA;
};

const DetalheNivel = ({
  meta,
  nivelLabel,
  entidade,
  onClose,
}: {
  meta: any;
  nivelLabel: string;
  entidade: { id: string; nome: string };
  onClose: () => void;
}) => {
  const [dados, setDados] = useState<any>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [abertos, setAbertos] = useState<Record<number, boolean>>({ 0: true });

  useEffect(() => {
    setIsLoading(true);
    detalheRankingNivel({
      id_meta_politica: meta?.id_meta_politica,
      id_entidade: entidade?.id,
    })
      .then((res: any) => setDados(res))
      .catch((error) => {
        console.error("Erro ao carregar detalhe do nível:", error);
        setDados(null);
      })
      .finally(() => setIsLoading(false));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [meta?.id_meta_politica, entidade?.id]);

  const objetivo = String(dados?.objetivo ?? meta?.nome_objetivo_meta ?? "");
  const tipoValor = String(dados?.tipoValor ?? "quantidade");
  const colunas = useMemo(() => colunasDoObjetivo(objetivo), [objetivo]);
  const periodos: any[] = dados?.periodos ?? [];

  const formatarTotal = (valor: any): string =>
    tipoValor === "valor"
      ? formatarMoeda(valor)
      : tipoValor === "taxa"
        ? `${Number(valor || 0).toLocaleString("pt-BR", {
            maximumFractionDigits: 1,
          })}%`
        : formatarNumero(valor);

  // Meta individual: o valor objetivo vale para cada registro do nível.
  const metaEntidade = Number(meta?.valorObjetivo_meta_politica) || 0;

  return (
    <ModalComponente
      hasForm={false}
      hasSaveButton={false}
      defaultW="w-[95vw]"
      header={`Detalhe do ${nivelLabel}: ${entidade?.nome}`}
      opened
      onClose={onClose}
    >
      <div className="p-4">
        <div className="mb-4 rounded-md border border-stroke p-3 text-sm text-body dark:border-strokedark dark:text-bodydark">
          Meta: <b>{meta?.nome_meta_politica}</b> · Objetivo:{" "}
          <b>{objetivo || "-"}</b> · {nivelLabel}:{" "}
          <b>{entidade?.nome}</b> · Meta por {nivelLabel}:{" "}
          <b>{formatarTotal(metaEntidade)}</b> · Realizado no total:{" "}
          <b>{formatarTotal(dados?.total)}</b>
        </div>

        {dados?.truncado && (
          <div className="mb-3 rounded-md border border-[#fdf0c2] bg-[#fdf0c2] px-3 py-2 text-sm text-[#8e4b10]">
            Exibindo apenas os primeiros{" "}
            <b>{formatarNumero(dados?.limite)}</b> registros. Refine a meta para
            ver o restante.
          </div>
        )}

        {isLoading ? (
          <div className="p-6 text-center text-body dark:text-bodydark">
            Carregando...
          </div>
        ) : periodos.length === 0 ? (
          <div className="p-6 text-center text-body dark:text-bodydark">
            Nenhum período encontrado para esta meta.
          </div>
        ) : (
          <div className="flex flex-col gap-3">
            {periodos.map((periodo: any, i: number) => {
              const aberto = Boolean(abertos[i]);
              const linhas: any[] = periodo?.linhas ?? [];
              return (
                <div
                  key={`${periodo.dataInicio}-${i}`}
                  className="rounded-md border border-stroke dark:border-strokedark"
                >
                  <button
                    type="button"
                    onClick={() =>
                      setAbertos((prev) => ({ ...prev, [i]: !prev[i] }))
                    }
                    className="flex w-full flex-wrap items-center justify-between gap-2 px-3 py-2 text-left"
                  >
                    <span className="font-semibold text-black dark:text-white">
                      {i + 1}º Período: {periodo.label}
                    </span>
                    <span className="text-sm text-body dark:text-bodydark">
                      Realizado:{" "}
                      <b className="text-[#266c94]">
                        {formatarTotal(periodo.total)}
                      </b>
                      {" · "}
                      Registros: <b>{formatarNumero(linhas.length)}</b>
                      {" · "}
                      {aberto ? "ocultar" : "ver registros"}
                    </span>
                  </button>

                  {aberto && (
                    <div className="overflow-x-auto border-t border-stroke dark:border-strokedark">
                      {linhas.length === 0 ? (
                        <div className="p-4 text-center text-sm text-body dark:text-bodydark">
                          Nenhum registro neste período.
                        </div>
                      ) : (
                        <table className="w-full text-left text-sm">
                          <thead>
                            <tr className="border-b border-stroke text-body dark:border-strokedark dark:text-bodydark">
                              <th className="p-2">#</th>
                              {colunas.map((coluna) => (
                                <th
                                  key={coluna.header}
                                  className="whitespace-nowrap p-2"
                                >
                                  {coluna.header}
                                </th>
                              ))}
                            </tr>
                          </thead>
                          <tbody>
                            {linhas.map((linha: any, indice: number) => (
                              <tr
                                key={indice}
                                className="border-b border-stroke dark:border-strokedark"
                              >
                                <td className="p-2 text-body dark:text-bodydark">
                                  {indice + 1}
                                </td>
                                {colunas.map((coluna) => (
                                  <td
                                    key={coluna.header}
                                    className="whitespace-nowrap p-2 text-black dark:text-white"
                                  >
                                    {coluna.valor(linha)}
                                  </td>
                                ))}
                              </tr>
                            ))}
                          </tbody>
                        </table>
                      )}
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        )}
      </div>
    </ModalComponente>
  );
};

export default DetalheNivel;