<?php
function renderKpiCard(array $card): void {
    $title    = htmlspecialchars($card['title'] ?? '', ENT_QUOTES, 'UTF-8');
    $subtitle = htmlspecialchars($card['subtitle'] ?? '', ENT_QUOTES, 'UTF-8');
    $badge    = htmlspecialchars($card['badge'] ?? '', ENT_QUOTES, 'UTF-8');
    $items    = is_array($card['items'] ?? null) ? $card['items'] : [];
?>
<style>
.kpi-card { background:#ffffff; border:1px solid rgba(0,0,0,0.06); border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,0.06); padding:18px; }
.kpi-card__header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.kpi-card__title-group { display:flex; flex-direction:column; }
.kpi-card__title { font-size:20px; font-weight:700; text-transform:uppercase; color:#0f172a; line-height:1.2; }
.kpi-card__subtitle { font-size:13px; color:#6b7280; }
.kpi-badge { display:inline-block; font-size:12px; color:#374151; background:#f8fafc; border:1px solid #e5e7eb; border-radius:9999px; padding:3px 10px; }
.kpi-card__grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px 20px; align-items:start; }
.kpi-card__grid .kpi-item:nth-child(2n) { padding-left:12px; }
.kpi-item { display:flex; flex-direction:column; gap:2px; min-width:0; }
.kpi-item__label { font-size:12px; color:#6b7280; }
.kpi-item__value {
  font-size: clamp(12px, 2.2vw, var(--kpi-max, 20px));
  font-weight:700;
  color:#111827;
  white-space: nowrap;
  line-height:1.25;
  max-width:100%;
}
@media (max-width: 576px) {
  .kpi-item__value {
    font-size: clamp(14px, 5.5vw, var(--kpi-max, 22px));
  }
}
.kpi-item__helper { font-size:12px; color:#6b7280; }
.kpi--success { color:#16a34a; }
.kpi--warning { color:#f59e0b; }
.kpi--danger  { color:#dc2626; }
</style>
<div class="kpi-card">
  <div class="kpi-card__header">
    <div class="kpi-card__title-group">
      <div class="kpi-card__title"><?php echo $title; ?></div>
      <div class="kpi-card__subtitle"><?php echo $subtitle; ?></div>
    </div>
    <?php if ($badge !== ''): ?><span class="kpi-badge"><?php echo $badge; ?></span><?php endif; ?>
  </div>
  <div class="kpi-card__grid">
    <?php foreach ($items as $it):
      $label  = htmlspecialchars($it['label'] ?? '', ENT_QUOTES, 'UTF-8');
      $rawVal = (string)($it['value'] ?? '');
      $sanVal = htmlspecialchars(strip_tags($rawVal), ENT_QUOTES, 'UTF-8');
      $value  = $sanVal; // sem quebras forçadas
      $helper = htmlspecialchars($it['helper'] ?? '', ENT_QUOTES, 'UTF-8');
        $tone   = strtolower(trim($it['tone'] ?? 'default'));
        $toneClass = '';
        if ($tone === 'success') $toneClass = 'kpi--success';
        elseif ($tone === 'warning') $toneClass = 'kpi--warning';
        elseif ($tone === 'danger') $toneClass = 'kpi--danger';

      // Ajuste dinâmico: reduz o tamanho máximo para números muito longos
      $digits = strlen(preg_replace('/\D/', '', html_entity_decode($sanVal, ENT_QUOTES, 'UTF-8')));
      $maxPx = '20px';
      if ($digits >= 15) {
        $maxPx = '14px';
      } elseif ($digits >= 12) {
        $maxPx = '16px';
      } elseif ($digits >= 10) {
        $maxPx = '18px';
      }
    ?>
    <div class="kpi-item">
      <div class="kpi-item__label"><?php echo $label; ?></div>
    <div class="kpi-item__value <?php echo $toneClass; ?>" style="--kpi-max: <?php echo $maxPx; ?>; "><?php echo $value; ?></div>
      <div class="kpi-item__helper"><?php echo $helper; ?></div>
    </div>
    <?php endforeach; ?>
  </div>
</div>
<?php }
