@props([
    'power' => null,   // ['pe','pod','paz','psl','psa','pp2','pst','pgh','sum'] lub null
    'on' => false,
    'time' => null,    // czas pomiaru
])

@php
    // Schemat układu pompowego (zastępuje statyczny rozklad_mocy.png). Bez strzałek -
    // rozkład mocy opisany legendą pod rysunkiem (każda składowa = inny kolor).
    $f = fn ($v) => $v === null ? '-' : number_format(round((float) $v, 2), 2, ',', ' ');
    $pumpColor = $on ? '#16a34a' : '#9aa6a8';
    $lab = '#2f3e45';

    // Legenda: [kolor (unikalny), opis, klucz wartości].
    $legend = [
        ['#ff7a1a', 'Moc pobrana - kabel przyłączeniowy', 'pe'],
        ['#d32f2f', 'Moc na wyjściu pompy (agregatu)', 'pod'],
        ['#2563eb', 'Podnoszenie stałe (do zwierciadła statycznego)', 'pst'],
        ['#0891b2', 'Geo-hydraulika (na filtrach studni)', 'pgh'],
        ['#7c3aed', 'Odpływ (za zasuwą dławiącą)', 'pp2'],
        ['#f59e0b', 'Straty: agregat + zasilanie', 'paz'],
        ['#65a30d', 'Straty liniowe (rurociąg tłoczny)', 'psl'],
        ['#db2777', 'Straty w armaturze (zawór)', 'psa'],
    ];
@endphp

@if ($power === null)
    <div class="py-10 text-center font-body-sm text-body-sm text-on-surface-variant">Brak danych pomiarowych do bilansu mocy.</div>
@else
<svg viewBox="110 0 350 580" class="w-full h-auto max-h-[30rem] mx-auto block" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <pattern id="ps-ground" width="8" height="8" patternTransform="rotate(45)" patternUnits="userSpaceOnUse">
            <line x1="0" y1="0" x2="0" y2="8" stroke="#b9a58c" stroke-width="2"/>
        </pattern>
    </defs>

    {{-- ===== Instalacja powierzchniowa ===== --}}
    <rect x="216" y="90" width="8" height="56" fill="#7aa7c7"/>
    <path d="M220 92 H360" stroke="#7aa7c7" stroke-width="8" fill="none"/>
    {{-- zawór dławiący --}}
    <polygon points="248,82 248,102 272,82 272,102" fill="#e0e6ea" stroke="#3b3b3b" stroke-width="1.2"/>
    <text x="244" y="80" font-size="8" fill="{{ $lab }}" text-anchor="end">zawór</text>
    {{-- manometry + Q --}}
    <circle cx="234" cy="68" r="7" fill="#fff" stroke="#3b3b3b" stroke-width="1.3"/><text x="234" y="57" font-size="9" fill="{{ $lab }}" text-anchor="middle">p₁</text>
    <circle cx="296" cy="68" r="7" fill="#fff" stroke="#3b3b3b" stroke-width="1.3"/><text x="296" y="57" font-size="9" fill="{{ $lab }}" text-anchor="middle">p₂</text>
    <rect x="316" y="80" width="16" height="14" rx="2" fill="#fff" stroke="#3b3b3b" stroke-width="1.3"/><text x="324" y="91" font-size="8" font-weight="700" fill="#3b3b3b" text-anchor="middle">Q</text>
    {{-- głowica/silnik nawierzchniowy + skrzynka kabla --}}
    <rect x="198" y="120" width="56" height="22" rx="2" fill="#cfd8dd" stroke="#5b6566"/>
    <rect x="198" y="104" width="18" height="16" rx="2" fill="#37424a"/>
    <text x="194" y="100" font-size="8" fill="{{ $lab }}" text-anchor="end">kabel</text>

    {{-- ===== Grunt + studnia ===== --}}
    <rect x="0" y="175" width="460" height="14" fill="url(#ps-ground)"/>
    <line x1="0" y1="175" x2="460" y2="175" stroke="#8f706c" stroke-width="1.5"/>
    <line x1="196" y1="175" x2="196" y2="540" stroke="#5b6566" stroke-width="3"/>
    <line x1="246" y1="175" x2="246" y2="540" stroke="#5b6566" stroke-width="3"/>
    <line x1="196" y1="540" x2="246" y2="540" stroke="#5b6566" stroke-width="3"/>
    <rect x="198" y="345" width="48" height="195" fill="#cfeaf5" opacity="0.55"/>

    {{-- zwierciadła --}}
    <line x1="196" y1="315" x2="246" y2="315" stroke="#1565c0" stroke-width="1.3" stroke-dasharray="4 3"/>
    <text x="252" y="318" font-size="9" fill="{{ $lab }}">H<tspan baseline-shift="sub" font-size="6.5">st</tspan></text>
    <line x1="196" y1="345" x2="246" y2="345" stroke="#1565c0" stroke-width="1.8"/>
    <text x="252" y="348" font-size="9" fill="{{ $lab }}">H<tspan baseline-shift="sub" font-size="6.5">d</tspan></text>

    {{-- rurociąg pionowy + kabel zasilający --}}
    <rect x="216" y="142" width="8" height="332" fill="#7aa7c7"/>
    <line x1="208" y1="142" x2="208" y2="470" stroke="#37424a" stroke-width="2.5"/>

    {{-- filtry studni (perforacja) --}}
    @for ($i = 0; $i < 7; $i++)
        <line x1="188" y1="{{ 474 + $i * 9 }}" x2="196" y2="{{ 474 + $i * 9 }}" stroke="#5b6566" stroke-width="2"/>
        <line x1="246" y1="{{ 474 + $i * 9 }}" x2="254" y2="{{ 474 + $i * 9 }}" stroke="#5b6566" stroke-width="2"/>
    @endfor
    <text x="184" y="524" font-size="8" fill="{{ $lab }}" text-anchor="end">filtry</text>

    {{-- agregat: pompa + silnik --}}
    <rect x="206" y="472" width="30" height="36" rx="3" fill="{{ $pumpColor }}" stroke="#2f3e45" stroke-width="1.5"/>
    <rect x="211" y="508" width="20" height="18" rx="2" fill="#46555d"/>
    <text x="262" y="494" font-size="8" fill="{{ $lab }}">agregat</text>

    {{-- Czas pomiaru --}}
    <text x="452" y="566" font-size="11" fill="#1d4ed8" text-anchor="end">Czas pomiaru: {{ $time ?? '-' }}</text>
</svg>

{{-- Legenda: kolor + opis + wartość (każda składowa innym kolorem) --}}
<div class="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-x-5 gap-y-1.5 font-body-sm text-body-sm">
    @foreach ($legend as [$color, $desc, $key])
        <div class="flex items-center gap-2">
            <span class="inline-block w-3.5 h-3.5 rounded-sm shrink-0" style="background: {{ $color }}"></span>
            <span class="text-on-surface-variant flex-1">{{ $desc }}</span>
            <span class="font-data-label text-on-surface whitespace-nowrap">{{ $f($power[$key]) }} kW</span>
        </div>
    @endforeach
</div>
@endif