@php
/**
 * Shared dashboard KPI card. Two layouts via $variant:
 *  - 'default' : label + value inline, caption/trend pill, watermark icon, a
 *               full-bleed sparkline along the bottom (the original look).
 *  - 'panel'   : a 2-column panel — a left rail with the sparkline on top and a
 *               "View all" link above a faint corner icon, and a right column
 *               with the title, number and description stacked. Cleaner / less busy.
 *               Optionally takes $rows + $pills to serve as a richer rollup card
 *               (e.g. the Dashboard's "Platform snapshot" row) — same card, same
 *               classes, just with a couple of extra sections switched on.
 *
 * @var string $accent    blue | green | amber | violet | rose | teal | orange | pink | slate
 * @var string $icon      Font Awesome 5 glyph, e.g. 'fa-receipt' — also draws the
 *                         big low-opacity watermark, so it is never repeated as a
 *                         second small icon elsewhere on the card.
 * @var string $label     uppercase label, e.g. 'Total Orders'
 * @var string $value     the metric (plain text — money()/number_format output is fine)
 * @var string $href      optional — the card link (the whole card in 'default', the
 *                         "View all" / "Full report" link in 'panel')
 * @var string $linkLabel 'panel' only — text for the $href link (default 'View all')
 * @var string $meta      optional raw HTML for the description line: a kpi_trend(...)
 *                         pill and/or <span class="qm-kpi-cap">caption</span>
 * @var array  $spark     optional list of numbers — renders a small trend sparkline
 * @var array  $rows      'panel' only, optional — [['label' => string, 'value' => string], ...]
 *                         breakdown lines shown under the meta line
 * @var array  $pills     'panel' only, optional — [['label' => string, 'tone' => 'green'|'amber'|'red'|'blue'|'grey'], ...]
 *                         a footer status-pill strip shown under $rows
 * @var string $bgImage   'panel' only, optional — an uploads-relative image drawn
 *                         as a faint accent-washed backdrop (e.g. the best seller's
 *                         dish photo). Replaces the icon watermark when present.
 * @var string $variant   'default' (default) | 'panel'
 */
$accent    = $accent ?? 'rose';
$icon      = $icon ?? 'fa-chart-bar';
$label     = $label ?? '';
$value     = $value ?? '';
$href      = $href ?? '';
$linkLabel = $linkLabel ?? t_raw('common.view_all');
$meta      = $meta ?? '';
$variant   = $variant ?? 'default';
$bgImage   = trim((string) ($bgImage ?? ''));
$spark     = (isset($spark) && is_array($spark)) ? array_values($spark) : [];
$rows      = $rows ?? [];
$pills     = $pills ?? [];

// Per-accent hex (mirrors the .qm-kpi--* CSS) so the sparkline draws in the
// card's own colour. ApexCharts needs a concrete colour, not a CSS variable.
$accentHex = [
    'blue' => '#2484c6', 'green' => '#1f9d4d', 'amber' => '#d98c1c', 'violet' => '#8a45b8',
    'rose' => '#ff003d', 'teal' => '#0f9b8e', 'orange' => '#e8590c', 'pink' => '#e64980', 'slate' => '#5b6675',
][$accent] ?? '#ff003d';
$hasSpark = $spark !== [];
$sparkCfg = $hasSpark ? json_encode([
    'type'      => 'area',
    'sparkline' => true,
    'height'    => $variant === 'panel' ? 38 : 42,
    'colors'    => [$accentHex],
    'series'    => [['name' => $label, 'data' => array_map(static fn ($v) => $v + 0, $spark)]],
]) : '';
@endphp
@if ($variant === 'panel' && ($rows || $pills))
@php // Rich rollup layout: rows/pills need the full card width, so there is no
// side rail here - the sparkline (when present) moves into a compact header
// line instead of a fixed-width column, alongside the label and the link.
@endphp
<div class="qm-kpi qm-kpi-rich qm-kpi-panel qm-kpi-panel--rich qm-kpi--{{ $accent }}{{ $hasSpark ? ' has-spark' : '' }}">
    <i class="fas {{ $icon }} qm-kpi-bg" aria-hidden="true"></i>
    <div class="qm-kpi-rich-head">
        <span class="qm-kpi-label">{{ $label }}</span>
        @if ($hasSpark)<div class="qm-kpi-mini-spark qm-chart" role="img" aria-label="{{ t_raw('dashboard.kpi_spark_aria', [':label' => $label]) }}" data-chart="{{ $sparkCfg }}"></div>@endif
        @if ($href !== '')<a class="qm-kpi-viewall" href="{{ $href }}">{{ $linkLabel }} <i class="fas fa-arrow-right" aria-hidden="true"></i></a>@endif
    </div>
    <span class="qm-kpi-value">{{ (string) $value }}</span>
    @if ($meta !== '')<span class="qm-kpi-meta">{!! $meta !!}</span>@endif
    @if ($rows)
    <div class="qm-kpi-rows">
        @foreach ($rows as $row)
        <div class="qm-kpi-row">
            <span class="qm-kpi-row-label"><span class="qm-kpi-dot" aria-hidden="true"></span>{{ (string) $row['label'] }}</span>
            <span class="qm-kpi-row-val">{{ (string) $row['value'] }}</span>
        </div>
        @endforeach
    </div>
    @endif
    @if ($pills)
    <div class="qm-kpi-pillrow">
        @foreach ($pills as $pill)
        <span class="qm-pill qm-pill-{{ (string) ($pill['tone'] ?? 'grey') }}">{{ (string) $pill['label'] }}</span>
        @endforeach
    </div>
    @endif
</div>
@elseif ($variant === 'panel')
@php // Stacked panel: label, value and description each get the FULL card width (no side
// rail), so labels read in full and captions sit on one line even at 5-per-row. The
// sparkline rides as a full-bleed strip along the bottom; the "View all" link sits under
// the description.
@endphp
<div class="qm-kpi qm-kpi-rich qm-kpi-panel qm-kpi--{{ $accent }}{{ $hasSpark ? ' has-spark' : '' }}{{ $bgImage !== '' ? ' has-bgimg' : '' }}">
    @if ($bgImage !== '')
    <span class="qm-kpi-bgimg" style="--kpi-hex: {{ $accentHex }}; background-image: url('{{ media($bgImage) }}')" aria-hidden="true"></span>
    @else
    <i class="fas {{ $icon }} qm-kpi-bg" aria-hidden="true"></i>
    @endif
    <div class="qm-kpi-main">
        <span class="qm-kpi-label">{{ $label }}</span>
        <span class="qm-kpi-value">{{ (string) $value }}</span>
        @if ($meta !== '')<span class="qm-kpi-meta">{!! $meta !!}</span>@endif
        @if ($href !== '')<a class="qm-kpi-viewall" href="{{ $href }}">{{ $linkLabel }} <i class="fas fa-arrow-right" aria-hidden="true"></i></a>@endif
    </div>
    @if ($hasSpark)<div class="qm-kpi-spark qm-chart" role="img" aria-label="{{ t_raw('dashboard.kpi_spark_aria', [':label' => $label]) }}" data-chart="{{ $sparkCfg }}"></div>@endif
</div>
@else
@php
$tag = $href !== '' ? 'a' : 'div';
@endphp
<{{ $tag }} class="qm-kpi qm-kpi-rich qm-kpi--{{ $accent }}{{ $hasSpark ? ' has-spark' : '' }}"{!! $href !== '' ? ' href="' . e($href) . '"' : '' !!}>
    <i class="fas {{ $icon }} qm-kpi-bg" aria-hidden="true"></i>
    <span class="qm-kpi-label">{{ $label }}</span>
    <span class="qm-kpi-value">{{ (string) $value }}</span>
    @if ($meta !== '')<span class="qm-kpi-meta">{!! $meta !!}</span>@endif
    @if ($hasSpark)<div class="qm-kpi-spark qm-chart" role="img" aria-label="{{ t_raw('dashboard.kpi_spark_aria', [':label' => $label]) }}" data-chart="{{ $sparkCfg }}"></div>@endif
</{{ $tag }}>
@endif