@props(['points' => [], 'color' => '#111827', 'unit' => '', 'height' => 140])

@php
    $values = array_filter(array_column($points, 'value'), fn ($v) => $v !== null);
    $width = 600;
    $padding = 30;
    $min = count($values) ? min($values) : 0;
    $max = count($values) ? max($values) : 1;
    if ($min === $max) { $min -= 1; $max += 1; } // جلوگیری از تقسیم بر صفر وقتی همه مقادیر یکسانند

    $count = count($points);
    $step = $count > 1 ? ($width - 2 * $padding) / ($count - 1) : 0;

    $coords = [];
    foreach ($points as $i => $p) {
        if ($p['value'] === null) { $coords[] = null; continue; }
        $x = $padding + $i * $step;
        $y = $height - $padding - (($p['value'] - $min) / ($max - $min)) * ($height - 2 * $padding);
        $coords[] = ['x' => $x, 'y' => $y, 'value' => $p['value'], 'label' => $p['label']];
    }

    $polylinePoints = collect($coords)->filter()->map(fn ($c) => "{$c['x']},{$c['y']}")->implode(' ');
@endphp

<div class="w-full overflow-x-auto">
    @if(count($values) === 0)
        <p class="text-xs text-gray-400 py-6 text-center">داده‌ای برای نمایش نمودار وجود ندارد.</p>
    @else
        <svg viewBox="0 0 {{ $width }} {{ $height }}" class="w-full" style="min-width: 320px;">
            {{-- خط روند --}}
            <polyline fill="none" stroke="{{ $color }}" stroke-width="2" points="{{ $polylinePoints }}" />

            {{-- نقاط + برچسب مقدار --}}
            @foreach($coords as $c)
                @continue(!$c)
                <circle cx="{{ $c['x'] }}" cy="{{ $c['y'] }}" r="3" fill="{{ $color }}" />
                <text x="{{ $c['x'] }}" y="{{ $c['y'] - 8 }}" font-size="10" text-anchor="middle" fill="#6b7280">
                    {{ $c['value'] }}{{ $unit }}
                </text>
                <text x="{{ $c['x'] }}" y="{{ $height - 8 }}" font-size="9" text-anchor="middle" fill="#9ca3af">
                    {{ $c['label'] }}
                </text>
            @endforeach
        </svg>
    @endif
</div>