@php
    $hours24 = $this->last24Hours;
    $peak24 = max(1, collect($hours24)->max('bytes'));
    $daily = $this->dailyUsage;
    $dailyPeak = max(1, collect($daily)->max(fn ($d) => $d['up'] + $d['down']));
    $peakHours = $this->peakHours;
    $peakHourMax = max(1, max($peakHours));
    $trend = $this->paymentTrend;
    $trendPeak = max(1, collect($trend)->max('total'));

    $busiest = array_search(max($peakHours), $peakHours, true);
    $dayTotal = collect($daily)->sum(fn ($d) => $d['up'] + $d['down']);
    $activeDays = collect($daily)->filter(fn ($d) => $d['up'] + $d['down'] > 0)->count();
@endphp

{{-- Live counters. Refreshed on a poll rather than streamed: the numbers come
     from the accounting poller, which reads the router once a minute. --}}
<div class="sub-panel" wire:poll.30s>
    <div class="sub-panel__head">
        <div>
            <h6>
                {{ __('Live from :router', ['router' => $current?->router?->router_name ?: __('the network')]) }}
                @if ($stats['is_live'])
                    <span class="sub-badge sub-badge--live ms-1">{{ __('streaming') }}</span>
                @endif
            </h6>
            <p>
                {{ $stats['is_live']
                    ? __('Connected :for', ['for' => $stats['live_since']?->diffForHumans(null, true, true)])
                    : __('Not connected right now') }}
            </p>
        </div>
    </div>
    <div class="sub-panel__body">
        <div class="row g-3">
            <div class="col-12 col-md-6">
                <div class="sub-panel mb-0">
                    <div class="sub-panel__body">
                        <span class="sub-card__label sub-down">
                            <i class="bi bi-arrow-down"></i> {{ __('Download') }}
                        </span>
                        <span class="sub-card__value">{{ bytes_human($live?->bytes_out ?? 0) }}</span>
                        <span class="sub-card__sub">{{ __('this session') }}</span>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-6">
                <div class="sub-panel mb-0">
                    <div class="sub-panel__body">
                        <span class="sub-card__label sub-up">
                            <i class="bi bi-arrow-up"></i> {{ __('Upload') }}
                        </span>
                        <span class="sub-card__value">{{ bytes_human($live?->bytes_in ?? 0) }}</span>
                        <span class="sub-card__sub">{{ __('this session') }}</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="mt-3">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <span class="sub-card__label">{{ __('Last 24 hours') }}</span>
                <span class="sub-card__label">{{ bytes_human($peak24) }} {{ __('peak hour') }}</span>
            </div>
            <div class="sub-bars" style="height:110px;">
                @foreach ($hours24 as $slot)
                    <div class="sub-bar" title="{{ $slot['label'] }} — {{ bytes_human($slot['bytes']) }}">
                        <div class="fill" style="height: {{ max(2, (int) round($slot['bytes'] / $peak24 * 95)) }}px;
                            opacity: {{ $slot['bytes'] > 0 ? 1 : 0.2 }};"></div>
                    </div>
                @endforeach
            </div>
            <div class="d-flex justify-content-between mt-1">
                <span class="sub-card__sub">{{ $hours24[0]['label'] }}</span>
                <span class="sub-card__sub">{{ end($hours24)['label'] }}</span>
            </div>
        </div>

        <dl class="sub-facts mt-3">
            <div>
                <dt><i class="bi bi-clock"></i>{{ __('Session up') }}</dt>
                <dd>{{ $stats['live_since']?->diffForHumans(null, true, true) ?: '—' }}</dd>
            </div>
            <div>
                <dt><i class="bi bi-arrow-left-right"></i>{{ __('This session') }}</dt>
                <dd>{{ bytes_human(($live?->bytes_in ?? 0) + ($live?->bytes_out ?? 0)) }}</dd>
            </div>
            <div>
                <dt><i class="bi bi-calendar3"></i>{{ __('This month') }}</dt>
                <dd>{{ bytes_human($stats['bytes_month']) }}</dd>
            </div>
            <div>
                <dt><i class="bi bi-wifi"></i>{{ __('Connection') }}</dt>
                <dd>{{ $live?->ip_address ?: '—' }}</dd>
            </div>
        </dl>
    </div>
</div>

<div class="row g-3">
    <div class="col-12 col-lg-6">
        <div class="sub-panel h-100">
            <div class="sub-panel__head">
                <div>
                    <h6>{{ __('Payment trend') }}</h6>
                    <p>{{ __('Monthly payments · last 12 months') }}</p>
                </div>
            </div>
            <div class="sub-panel__body">
                <div class="sub-bars">
                    @foreach ($trend as $month)
                        <div class="sub-bar" title="{{ $month['label'] }} — {{ money($month['total'], 0) }}">
                            <div class="fill" style="height: {{ max(2, (int) round($month['total'] / $trendPeak * 120)) }}px;
                                opacity: {{ $month['total'] > 0 ? 1 : 0.18 }};"></div>
                            <span class="tick">{{ $month['label'] }}</span>
                        </div>
                    @endforeach
                </div>

                <dl class="sub-facts mt-3">
                    <div>
                        <dt>{{ __('Lifetime') }}</dt>
                        <dd>{{ money($stats['spent'], 0) }}</dd>
                    </div>
                    <div>
                        <dt>{{ __('Purchases') }}</dt>
                        <dd>{{ $stats['purchases'] }}</dd>
                    </div>
                    <div>
                        <dt>{{ __('Last payment') }}</dt>
                        <dd>{{ $this->sessions->where('amount', '>', 0)->first()?->created_at->format('M j, g:i A') ?: '—' }}</dd>
                    </div>
                </dl>
            </div>
        </div>
    </div>

    <div class="col-12 col-lg-6">
        <div class="sub-panel h-100">
            <div class="sub-panel__head">
                <div>
                    <h6>{{ __('Data usage') }}</h6>
                    <p>{{ __('Daily traffic · this month so far') }}</p>
                </div>
            </div>
            <div class="sub-panel__body">
                <div class="sub-bars">
                    @foreach ($daily as $day)
                        @php $total = $day['up'] + $day['down']; @endphp
                        <div class="sub-bar"
                            title="{{ __('Day :d — :down down, :up up', [
                                'd' => $day['day'], 'down' => bytes_human($day['down']), 'up' => bytes_human($day['up']),
                            ]) }}">
                            {{-- Upload stacked on download, so the split is
                                 visible without a second chart. --}}
                            <div class="fill" style="height: {{ max(1, (int) round($day['up'] / $dailyPeak * 120)) }}px;
                                background:#4dabf7; border-radius:0.25rem 0.25rem 0 0;
                                opacity: {{ $day['up'] > 0 ? 1 : 0.15 }};"></div>
                            <div class="fill" style="height: {{ max(1, (int) round($day['down'] / $dailyPeak * 120)) }}px;
                                border-radius:0; margin-top:-1px;
                                opacity: {{ $day['down'] > 0 ? 1 : 0.15 }};"></div>
                        </div>
                    @endforeach
                </div>

                <div class="d-flex gap-3 mt-2">
                    <span class="sub-legend"><i style="background:#21d07a;"></i>{{ __('Download') }}</span>
                    <span class="sub-legend"><i style="background:#4dabf7;"></i>{{ __('Upload') }}</span>
                </div>

                <dl class="sub-facts mt-2">
                    <div>
                        <dt>{{ __('This month') }}</dt>
                        <dd>{{ bytes_human($dayTotal) }}</dd>
                    </div>
                    <div>
                        <dt>{{ __('Peak day') }}</dt>
                        <dd>{{ bytes_human($dailyPeak) }}</dd>
                    </div>
                    <div>
                        <dt>{{ __('Average per active day') }}</dt>
                        <dd>{{ $activeDays > 0 ? bytes_human((int) ($dayTotal / $activeDays)) : '—' }}</dd>
                    </div>
                </dl>
            </div>
        </div>
    </div>
</div>

<div class="sub-panel">
    <div class="sub-panel__head">
        <div>
            <h6>{{ __('Peak usage hours') }}</h6>
            <p>{{ __('Average traffic by hour of day · last 30 days') }}</p>
        </div>
        <div class="sub-legend">
            {{ __('Quiet') }}
            @foreach ([0.12, 0.35, 0.65, 1] as $step)
                <i style="background: rgba(33,208,122,{{ $step }});"></i>
            @endforeach
            {{ __('Heavy') }}
        </div>
    </div>
    <div class="sub-panel__body">
        <div class="sub-hours">
            @foreach ($peakHours as $hour => $bytes)
                @php $weight = $bytes > 0 ? max(0.15, sqrt($bytes / $peakHourMax)) : 0; @endphp
                <i @if ($weight > 0) style="background: rgba(33,208,122,{{ round($weight, 2) }});" @endif
                    title="{{ sprintf('%02d:00', $hour) }} — {{ bytes_human($bytes) }}"></i>
            @endforeach
        </div>
        <div class="d-flex justify-content-between mt-1">
            @foreach ([0, 6, 12, 18, 23] as $mark)
                <span class="sub-card__sub">{{ sprintf('%02d', $mark) }}</span>
            @endforeach
        </div>

        <dl class="sub-facts mt-3">
            <div>
                <dt>{{ __('Peak hour') }}</dt>
                <dd>
                    @if (max($peakHours) > 0)
                        {{ sprintf('%02d:00 — %02d:00', $busiest, ($busiest + 1) % 24) }}
                    @else
                        —
                    @endif
                </dd>
            </div>
            <div>
                <dt>{{ __('Peak average') }}</dt>
                <dd>{{ bytes_human(max($peakHours)) }}</dd>
            </div>
            <div>
                <dt>{{ __('Usage pattern') }}</dt>
                <dd>
                    @if (max($peakHours) === 0)
                        —
                    @elseif ($busiest < 12)
                        {{ __('Morning user') }}
                    @elseif ($busiest < 18)
                        {{ __('Afternoon user') }}
                    @else
                        {{ __('Evening user') }}
                    @endif
                </dd>
            </div>
        </dl>

        @if ($dayTotal === 0)
            {{-- Counters only started when accounting was switched on, so an
                 established customer can legitimately show nothing here. --}}
            <p class="sub-card__sub mt-3 mb-0">
                <i class="bi bi-info-circle me-1"></i>{{ __('Traffic is measured from the moment accounting started collecting. Sessions before that were never counted, so history begins there rather than at signup.') }}
            </p>
        @endif
    </div>
</div>