{#
/**
 * @file
 * Reusable KPI card for Native Observability Dashboard.
 *
 * Available variables:
 * - metric_id: The internal metric identifier.
 * - title: Card label.
 * - primary: Primary metric payload.
 * - secondary: Secondary metric payload.
 * - meta: Additional metadata rows.
 * - icon: Optional icon name.
 * - color: Card semantic color (blue, orange, red, green).
 * - description: Optional helper description.
 * - chart_id: Optional unique chart id.
 * - timeseries: Optional chart series data.
 * - breakdown: Optional span breakdown payload (enabled, chart_id, series, ...).
 */
#}

{% set color = color|default('blue') %}
{% set chart_id = chart_id|default('chart-' ~ random()) %}
{% set metric_id = metric_id|default('metric-' ~ random()) %}
{% set has_chart = timeseries is defined and timeseries is not empty %}
{% set has_breakdown = breakdown is defined and breakdown.enabled is defined and breakdown.enabled %}

{% set primary = primary|default({
  value: value|default('0'),
  label: description|default('')
}) %}

{% set secondary = secondary|default({
  value: '',
  label: ''
}) %}

{% set meta = meta|default([]) %}

<article
  class="no-kpi-card no-kpi-card--{{ color }}{% if has_breakdown %} no-kpi-card--has-breakdown{% endif %}"
  data-metric-id="{{ metric_id }}"
>
  <div class="no-kpi-card__header">
    <div class="no-kpi-card__title-wrap">
      <h3 class="no-kpi-card__title">{{ title }}</h3>

      {% if description is defined and description %}
        <div class="no-kpi-card__description">{{ description }}</div>
      {% endif %}
    </div>

    <span class="no-kpi-card__icon no-kpi-card__icon--{{ color }}">
      {% if icon == 'activity' %}
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M3 12h4l2-5 4 10 2-5h6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                stroke-linejoin="round"></path>
        </svg>
      {% elseif icon == 'clock' %}
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"></circle>
          <path d="M12 7v5l3 2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                stroke-linejoin="round"></path>
        </svg>
      {% elseif icon == 'alert' %}
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 3 21 19H3L12 3z" fill="none" stroke="currentColor" stroke-width="2"
                stroke-linejoin="round"></path>
          <path d="M12 9v4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
          <circle cx="12" cy="16.5" r="1" fill="currentColor"></circle>
        </svg>
      {% elseif icon == 'check' %}
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"></circle>
          <path d="M8 12.5l2.5 2.5L16 9.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                stroke-linejoin="round"></path>
        </svg>
      {% endif %}
    </span>
  </div>

  {% if has_breakdown %}

    <div class="no-kpi-card__content">

      <div class="no-kpi-card__body">
        <div class="no-kpi-card__metric no-kpi-card__metric--primary">
          <div class="no-kpi-card__value">{{ primary.value }}</div>
          {% if primary.label is defined and primary.label %}
            <div class="no-kpi-card__label">{{ primary.label }}</div>
          {% endif %}
        </div>

        {% if secondary.value is defined and secondary.value %}
          <div class="no-kpi-card__metric no-kpi-card__metric--secondary">
            <div class="no-kpi-card__value no-kpi-card__value--secondary">{{ secondary.value }}</div>
            {% if secondary.label is defined and secondary.label %}
              <div class="no-kpi-card__label">{{ secondary.label }}</div>
            {% endif %}
          </div>
        {% endif %}

        {% if meta is not empty %}
          <div class="no-kpi-card__meta">
            {% for item in meta %}
              <div class="no-kpi-card__meta-item">
                <span class="no-kpi-card__meta-label">{{ item.label }}</span>
                <span class="no-kpi-card__meta-value">{{ item.value }}</span>
              </div>
            {% endfor %}
          </div>
        {% endif %}
      </div>

      <div class="no-kpi-card__breakdown">
        <div
          class="no-kpi-card__breakdown-chart"
          data-breakdown-chart-id="{{ breakdown.chart_id }}"
          aria-hidden="true"
        ></div>
        <ul class="no-kpi-card__breakdown-legend" aria-label="{{ 'Response time breakdown'|t }}">
          {% for item in breakdown.summary %}
            <li class="no-kpi-card__breakdown-legend-item">
              <span
                class="no-kpi-card__breakdown-legend-dot"
                style="background-color: {{ item.color }}"
                aria-hidden="true"
              ></span>
              <span class="no-kpi-card__breakdown-legend-label">{{ item.label }}</span>
              <span class="no-kpi-card__breakdown-legend-value">{{ item.value }}</span>
            </li>
          {% endfor %}
        </ul>
        {% if breakdown.is_fallback is defined and breakdown.is_fallback and breakdown.fallback_label is defined %}
          <p class="no-kpi-card__breakdown-context">{{ breakdown.fallback_label }}</p>
        {% endif %}
      </div>

    </div>

  {% else %}

    <div class="no-kpi-card__body">
      <div class="no-kpi-card__metric no-kpi-card__metric--primary">
        <div class="no-kpi-card__value">{{ primary.value }}</div>
        {% if primary.label is defined and primary.label %}
          <div class="no-kpi-card__label">{{ primary.label }}</div>
        {% endif %}
      </div>

      {% if secondary.value is defined and secondary.value %}
        <div class="no-kpi-card__metric no-kpi-card__metric--secondary">
          <div class="no-kpi-card__value no-kpi-card__value--secondary">{{ secondary.value }}</div>
          {% if secondary.label is defined and secondary.label %}
            <div class="no-kpi-card__label">{{ secondary.label }}</div>
          {% endif %}
        </div>
      {% endif %}

      {% if meta is not empty %}
        <div class="no-kpi-card__meta">
          {% for item in meta %}
            <div class="no-kpi-card__meta-item">
              <span class="no-kpi-card__meta-label">{{ item.label }}</span>
              <span class="no-kpi-card__meta-value">{{ item.value }}</span>
            </div>
          {% endfor %}
        </div>
      {% endif %}
    </div>

  {% endif %}

  <div class="no-kpi-card__chart">
    {% if has_chart %}
      <canvas
        id="{{ chart_id }}"
        class="no-kpi-card__sparkline"
        data-chart-id="{{ chart_id }}"
        data-chart-color="{{ color }}"
        aria-hidden="true"></canvas>
    {% else %}
      <div class="no-kpi-card__chart-empty">
        {{ 'No chart data available.'|t }}
      </div>
    {% endif %}
  </div>

</article>
