import type { TarjetaKpi } from "@/lib/crm/tipos";
import { valorKpi } from "@/components/admin/formato";
import { claseVariacion, subirEsMejor } from "@/components/admin/graficas/paleta";

/**
 * Ficha de KPI. Rótulo, cifra y variación contra el periodo anterior.
 *
 * La dirección de mejora se resuelve por KPI, no por signo: en horas hasta la
 * primera respuesta bajar es mejor. Si `variacion` es null no se pinta flecha
 * —no hay base de comparación y no se inventa una.
 */
export function TarjetaKpiVista({ kpi, dias }: { kpi: TarjetaKpi; dias: number }) {
  const mejorArriba = subirEsMejor(kpi.clave, kpi.formato);
  const v = kpi.variacion;

  return (
    <div className="panel flex min-w-0 flex-col justify-between gap-3 px-4 py-3.5">
      <p className="font-mono text-[0.625rem] uppercase leading-snug tracking-[0.12em] text-faint">
        {kpi.etiqueta}
      </p>

      <p className="font-mono text-2xl font-semibold leading-none text-bright sm:text-[1.75rem]">
        {valorKpi(kpi.valor, kpi.formato)}
      </p>

      <div className="flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-1">
        {v == null ? (
          <span className="font-mono text-[0.625rem] uppercase tracking-[0.1em] text-faint">
            Sin base de comparación
          </span>
        ) : (
          <>
            <span
              className={`font-mono text-xs font-semibold ${claseVariacion(v, mejorArriba)}`}
            >
              <span aria-hidden="true">{v > 0 ? "▲" : v < 0 ? "▼" : "■"}</span>{" "}
              {v > 0 ? "+" : ""}
              {v.toFixed(1)} pp
            </span>
            <span className="font-mono text-[0.5625rem] uppercase tracking-[0.1em] text-faint">
              vs. {dias} días previos
            </span>
            <span className="sr-only">
              {v > 0 ? "sube" : v < 0 ? "baja" : "sin cambio"} {Math.abs(v).toFixed(1)} puntos
              porcentuales contra los {dias} días previos, lo que{" "}
              {v === 0 ? "no cambia el indicador" : (v > 0) === mejorArriba ? "es una mejora" : "es un retroceso"}.
            </span>
          </>
        )}
      </div>

      {kpi.nota ? (
        <p className="text-[0.6875rem] leading-snug text-muted">{kpi.nota}</p>
      ) : null}
    </div>
  );
}

export function FilaKpis({ kpis, dias }: { kpis: TarjetaKpi[]; dias: number }) {
  if (kpis.length === 0) {
    return (
      <div className="panel px-4 py-6">
        <p className="text-sm text-muted">
          Todavía no hay indicadores para este periodo. Amplía el rango a 90 días o espera
          los primeros envíos del sitio.
        </p>
      </div>
    );
  }

  return (
    <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-4">
      {kpis.map((k) => (
        <TarjetaKpiVista key={k.clave} kpi={k} dias={dias} />
      ))}
    </div>
  );
}