@props(['widget' => []])

@php
    $w = is_array($widget) ? $widget : [];
    $direction = $w['deltaDirection'] ?? 'flat';
    $deltaClass = match ($direction) {
        'up' => 'mec-kpi-delta--up',
        'down' => 'mec-kpi-delta--down',
        default => 'mec-kpi-delta--flat',
    };
    $arrow = match ($direction) {
        'up' => '▲',
        'down' => '▼',
        default => '•',
    };
    $width = (int) ($w['sparklineWidth'] ?? 200);
    $height = (int) ($w['sparklineHeight'] ?? 48);
    $color = $w['sparklineColor'] ?? '#138476';
@endphp

<div {{ $attributes->merge(['class' => 'mec-chart-panel mec-kpi-sparkline-panel']) }}>
    <div class="mec-chart-panel__head">
        <h3 class="mec-chart-panel__title">{{ $w['title'] ?? '' }}</h3>
        @if(!empty($w['subtitle']))
            <p class="mec-chart-panel__subtitle">{{ $w['subtitle'] }}</p>
        @endif
    </div>
    <div class="mec-chart-panel__body mec-kpi-sparkline-panel__body">
        <div class="mec-kpi-sparkline-panel__kpi-row">
            <span class="mec-kpi-sparkline-panel__value">{{ $w['kpi'] ?? '—' }}</span>
            <span class="mec-kpi-delta {{ $deltaClass }}">
                <span class="mec-kpi-delta__arrow" aria-hidden="true">{{ $arrow }}</span>
                {{ $w['deltaLabel'] ?? '0%' }}
            </span>
        </div>
        @if(!empty($w['sparklinePath']))
            <svg
                class="mec-kpi-sparkline"
                viewBox="0 0 {{ $width }} {{ $height }}"
                preserveAspectRatio="none"
                role="img"
                aria-hidden="true"
            >
                <defs>
                    <linearGradient id="mecSparkGrad-{{ md5(($w['title'] ?? '').($w['kpi'] ?? '')) }}" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="0%" stop-color="{{ $color }}" stop-opacity="0.22" />
                        <stop offset="100%" stop-color="{{ $color }}" stop-opacity="0" />
                    </linearGradient>
                </defs>
                @if(!empty($w['sparklineAreaPath']))
                    <path
                        d="{{ $w['sparklineAreaPath'] }}"
                        fill="url(#mecSparkGrad-{{ md5(($w['title'] ?? '').($w['kpi'] ?? '')) }})"
                    />
                @endif
                <path
                    d="{{ $w['sparklinePath'] }}"
                    fill="none"
                    stroke="{{ $color }}"
                    stroke-width="2.25"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                />
            </svg>
        @endif
    </div>
</div>