fn_registry/cpp/functions/viz/kpi_card.cpp

#include "kpi_card.h"
#include "sparkline.h"
#include "core/tokens.h"
#include "core/icons_tabler.h"
#include <imgui.h>
#include <cstdio>

void kpi_card(const char* label, float value, float delta_percent,
              const float* history, int history_count,
              const char* format,
              const char* icon) {
    using namespace fn_tokens;

    // Card container — surface bg, border, rounded, padding.
    // Mirrors Mantine <Paper withBorder shadow="xs" radius="md" p="md" /> usado
    // en @fn_library/kpi_card.tsx, adaptado a ImGui dark theme via tokens.
    ImGui::PushStyleColor(ImGuiCol_ChildBg, colors::surface);
    ImGui::PushStyleColor(ImGuiCol_Border, colors::border);
    ImGui::PushStyleVar(ImGuiStyleVar_ChildRounding, radius::md);
    ImGui::PushStyleVar(ImGuiStyleVar_ChildBorderSize, 1.0f);
    ImGui::PushStyleVar(ImGuiStyleVar_WindowPadding, ImVec2(spacing::sm, spacing::sm));

    // Unique child id por label para que multiples cards en la misma ventana
    // no colisionen.
    char child_id[96];
    std::snprintf(child_id, sizeof(child_id), "##kpi_%s", label);

    float width = ImGui::GetContentRegionAvail().x;
    if (width < 1.0f) width = 1.0f;

    // Altura fija (no AutoResizeY) para que:
    //   (a) todas las cards de un grid queden alineadas visualmente,
    //   (b) no haya recalculo de layout por card en cada resize.
    constexpr float card_height = 86.0f;
    ImGui::BeginChild(child_id, ImVec2(width, card_height),
                      ImGuiChildFlags_Borders,
                      ImGuiWindowFlags_NoScrollbar | ImGuiWindowFlags_NoScrollWithMouse);

    const bool has_history = history != nullptr && history_count > 0;
    const bool has_delta   = delta_percent != 0.0f;

    // Layout de dos columnas: izquierda info (label, value, delta), derecha sparkline.
    // El sparkline se sitia verticalmente centrado a la derecha de la card.
    constexpr float spark_w = 100.0f;
    constexpr float spark_h = 36.0f;

    const float inner_w = ImGui::GetContentRegionAvail().x;
    const float info_w  = has_history ? (inner_w - spark_w - spacing::sm) : inner_w;

    ImGui::BeginGroup();
    ImGui::PushItemWidth(info_w);

    // Top row: optional icon + label, ambos en text_muted.
    ImGui::PushStyleColor(ImGuiCol_Text, colors::text_muted);
    if (icon && *icon) {
        ImGui::TextUnformatted(icon);
        ImGui::SameLine(0, spacing::xs);
    }
    ImGui::TextUnformatted(label);
    ImGui::PopStyleColor();

    // Value — escala compacta 1.4x, proporcional a una card de 86px.
    ImGui::SetWindowFontScale(1.4f);
    char value_buf[64];
    std::snprintf(value_buf, sizeof(value_buf), format, value);
    ImGui::TextUnformatted(value_buf);
    ImGui::SetWindowFontScale(1.0f);

    // Delta / trend — SIEMPRE se reserva la linea aunque no haya tendencia.
    if (has_delta) {
        const bool positive = delta_percent >= 0.0f;
        const ImVec4 delta_color = positive ? colors::success : colors::error;
        char delta_buf[48];
        if (positive) {
            std::snprintf(delta_buf, sizeof(delta_buf), TI_TRENDING_UP " +%.1f%%", delta_percent);
        } else {
            std::snprintf(delta_buf, sizeof(delta_buf), TI_TRENDING_DOWN " %.1f%%", delta_percent);
        }
        ImGui::PushStyleColor(ImGuiCol_Text, delta_color);
        ImGui::TextUnformatted(delta_buf);
        ImGui::PopStyleColor();
    } else {
        // Placeholder para preservar altura.
        ImGui::PushStyleColor(ImGuiCol_Text, colors::text_dim);
        ImGui::TextUnformatted(TI_MINUS);
        ImGui::PopStyleColor();
    }

    ImGui::PopItemWidth();
    ImGui::EndGroup();

    // Sparkline a la derecha, centrado verticalmente respecto a la card.
    if (has_history) {
        const ImVec4 spark_color = has_delta
            ? (delta_percent >= 0.0f ? colors::success : colors::error)
            : colors::primary;

        ImGui::SameLine();

        // Centrar verticalmente: la card mide card_height, el sparkline spark_h.
        // Restamos el padding interno (spacing::sm) ya consumido al inicio.
        const float card_inner_h = card_height - 2.0f * spacing::sm;
        float y_offset = (card_inner_h - spark_h) * 0.5f;
        if (y_offset < 0.0f) y_offset = 0.0f;
        // Anclamos el sparkline al borde derecho.
        const float spark_x = inner_w - spark_w;
        ImGui::SetCursorPos(ImVec2(spacing::sm + spark_x,
                                    spacing::sm + y_offset));
        sparkline(label, history, history_count, spark_color, spark_w, spark_h);
    }

    ImGui::EndChild();

    ImGui::PopStyleVar(3);
    ImGui::PopStyleColor(2);
}