@php
    // CHANGELOG.md uses German Keep-a-Changelog headings as the canonical section keys;
    // map each to a localized display label + a badge tone.
    $sectionKey = [
        'Hinzugefügt' => 'added',
        'Geändert' => 'changed',
        'Behoben' => 'fixed',
        'Sicherheit' => 'security',
        'Entfernt' => 'removed',
        'Veraltet' => 'deprecated',
    ];
    $sectionTone = [
        'added' => 'accent', 'changed' => 'cyan', 'fixed' => 'neutral',
        'security' => 'accent', 'removed' => 'neutral', 'deprecated' => 'neutral',
    ];
    $sectionLabel = fn (string $g): string => isset($sectionKey[$g]) ? __('versions.section_'.$sectionKey[$g]) : $g;
    $tone = fn (string $g): string => $sectionTone[$sectionKey[$g] ?? ''] ?? 'neutral';
    // Toned glance-dots on each collapsed release row (static classes so Tailwind's scanner sees them).
    $dotClass = ['accent' => 'bg-accent', 'cyan' => 'bg-cyan', 'neutral' => 'bg-ink-4'];

    $isUpdate = $updateState === 'update';
@endphp

{{-- Auto-check for updates on load (async, non-blocking) so an available update + button show
     without the operator clicking "check" first. autoCheck() no-ops while an update is running. --}}
<div class="space-y-5" wire:init="autoCheck">
    {{-- Header --}}
    <div class="flex flex-wrap items-end justify-between gap-3">
        <div>
            <p class="font-mono text-[11px] uppercase tracking-[0.2em] text-accent-text">{{ __('versions.eyebrow') }}</p>
            <h2 class="mt-0.5 font-display text-xl font-semibold text-ink sm:text-2xl">{{ __('versions.heading') }}</h2>
        </div>
        <x-btn variant="secondary" wire:click="checkUpdates" wire:target="checkUpdates" wire:loading.attr="disabled">
            <svg wire:loading wire:target="checkUpdates" class="h-3.5 w-3.5 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M21 12a9 9 0 1 1-6.219-8.56" stroke-linecap="round" /></svg>
            <x-icon name="rotate" class="h-3.5 w-3.5" wire:loading.remove wire:target="checkUpdates" />
            {{ __('versions.check_updates') }}
        </x-btn>
    </div>

    {{-- Honest status banner — installed version vs. newest release tag in the channel --}}
    <div @class([
        'flex flex-col gap-4 rounded-xl border bg-surface p-5 shadow-panel sm:flex-row sm:items-center',
        'border-warning/30' => $isUpdate,
        'border-line' => ! $isUpdate,
    ])>
        {{-- Icon + version/badges block --}}
        <div class="flex items-start gap-4 sm:contents">
            <span @class([
                'grid h-12 w-12 shrink-0 place-items-center rounded-xl border',
                'border-warning/30 bg-warning/10 text-warning' => $isUpdate,
                'border-accent/25 bg-accent/10 text-accent-text' => ! $isUpdate,
            ])>
                <x-icon :name="$isUpdate ? 'alert' : 'tag'" class="h-6 w-6" />
            </span>
            <div class="min-w-0 flex-1">
                <p class="flex flex-wrap items-center gap-2 font-display text-base font-semibold text-ink">
                    Clusev <span class="font-mono text-accent-text">v{{ $version }}</span>
                    <x-badge tone="accent">{{ __('versions.channel_badge', ['channel' => $channel]) }}</x-badge>
                    @if ($latestTag)
                        <x-badge tone="neutral">{{ __('versions.latest_release_badge', ['tag' => $latestTag]) }}</x-badge>
                    @endif
                </p>
                <p class="mt-0.5 font-mono text-[11px] leading-relaxed text-ink-3">
                    @if ($updateStatus)
                        {{ $updateStatus }}
                    @else
                        {{ __('versions.banner_default') }}
                    @endif
                </p>
            </div>
        </div>
        {{-- One-click update: writes the update sentinel; a host watcher runs update.sh. Mirrors
             the System restart button (direct click → "running" notice via a flag — not
             data-destructive, so no modal). Only offered once a check found a newer release. --}}
        @if ($updateRequested)
            {{-- Poll until the rebuilt stack reports a newer version (pollUpdate flips the state +
                 fires a success toast). Survives the rebuild downtime: failed polls just retry. --}}
            <p class="flex w-full items-center gap-1.5 font-mono text-[11px] text-warning sm:w-auto sm:shrink-0" wire:poll.5s="pollUpdate">
                <x-icon name="rotate" class="h-3.5 w-3.5 shrink-0 animate-spin" />{{ __('versions.update_running') }}
            </p>
        @elseif ($isUpdate)
            @can('manage-panel')
                <x-btn variant="primary" wire:click="requestUpdate" wire:target="requestUpdate" wire:loading.attr="disabled" class="w-full sm:w-auto sm:shrink-0">
                    <svg wire:loading wire:target="requestUpdate" class="h-3.5 w-3.5 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M21 12a9 9 0 1 1-6.219-8.56" stroke-linecap="round" /></svg>
                    <x-icon name="rotate" class="h-3.5 w-3.5" wire:loading.remove wire:target="requestUpdate" />
                    {{ __('versions.update_now') }}
                </x-btn>
            @endcan
        @endif
        @if ($lastChecked)
            <span class="font-mono text-[11px] text-ink-4 sm:shrink-0">{{ __('versions.checked_at', ['time' => $lastChecked]) }}</span>
        @endif
    </div>

    {{-- What's new in the available release — read BEFORE updating (fetched from the remote
         CHANGELOG.md at the latest tag). Only shown when behind a published release. --}}
    @if ($isUpdate && ! empty($availableUpdates))
        <x-panel :title="__('versions.whats_new_title', ['tag' => 'v'.$latestTag])" :subtitle="__('versions.whats_new_subtitle')">
            <div class="space-y-5">
                @foreach ($availableUpdates as $rel)
                    <div wire:key="whatsnew-{{ $rel['version'] }}" @class(['pt-5 border-t border-line' => ! $loop->first])>
                        <p class="font-mono text-[12px] font-semibold text-accent-text">
                            v{{ $rel['version'] }}@if ($rel['date']) <span class="text-ink-4">· {{ $rel['date'] }}</span>@endif
                        </p>
                        <div class="mt-2 space-y-3">
                            @foreach ($rel['groups'] as $group => $items)
                                <div>
                                    <x-badge :tone="$tone($group)" class="shrink-0">{{ $sectionLabel($group) }}</x-badge>
                                    <ul class="mt-1.5 space-y-1.5 pl-0.5">
                                        @foreach ($items as $text)
                                            <li class="flex items-start gap-2.5">
                                                <span class="mt-1.5 h-1 w-1 shrink-0 rounded-full bg-ink-4"></span>
                                                <span class="text-sm leading-relaxed text-ink-2">{{ $text }}</span>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>
        </x-panel>
    @endif

    <div class="grid grid-cols-1 gap-5 lg:grid-cols-[minmax(0,1fr)_300px]">
        {{-- Release history — grouped into major.minor series, paginated (no endless scroll) --}}
        <x-panel :title="__('versions.changelog_title')" :subtitle="__('versions.changelog_subtitle', ['count' => $totalReleases])" :padded="false">
            @if (empty($seriesList))
                <p class="px-4 py-4 font-mono text-[11px] text-ink-3 sm:px-5">{{ __('versions.changelog_empty') }}</p>
            @else
                <div class="grid grid-cols-1 xl:grid-cols-[172px_minmax(0,1fr)]">
                    {{-- Series index: horizontal pills on small/medium screens, a vertical rail from xl --}}
                    <nav aria-label="{{ __('versions.series_nav') }}"
                         class="flex gap-2 overflow-x-auto border-b border-line p-3 xl:flex-col xl:gap-1 xl:overflow-visible xl:border-b-0 xl:border-r xl:p-2.5">
                        @foreach ($seriesList as $s)
                            <button type="button" wire:key="series-{{ $s['key'] }}" wire:click="selectSeries('{{ $s['key'] }}')"
                                @class([
                                    'group flex min-h-11 shrink-0 items-center gap-2 rounded-lg border px-3 py-2 text-left transition-colors xl:min-h-0 xl:shrink',
                                    'border-accent/30 bg-accent/10' => $s['key'] === $activeKey,
                                    'border-transparent hover:border-line hover:bg-raised/60' => $s['key'] !== $activeKey,
                                ])
                                @if ($s['key'] === $activeKey) aria-current="true" @endif>
                                @if ($s['key'] === $currentSeries)
                                    <span class="h-1.5 w-1.5 shrink-0 rounded-full bg-online" title="{{ __('versions.series_installed') }}"></span>
                                @endif
                                <span @class([
                                    'font-mono text-sm font-semibold',
                                    'text-accent-text' => $s['key'] === $activeKey,
                                    'text-ink-2 group-hover:text-ink' => $s['key'] !== $activeKey,
                                ])>{{ $s['label'] }}</span>
                                <span @class([
                                    'ml-auto rounded-full px-1.5 py-px font-mono text-[10px] tabular-nums',
                                    'bg-accent/15 text-accent-text' => $s['key'] === $activeKey,
                                    'bg-raised text-ink-4' => $s['key'] !== $activeKey,
                                ])>{{ $s['count'] }}</span>
                            </button>
                        @endforeach
                    </nav>

                    {{-- Releases for the active series --}}
                    <div class="min-w-0">
                        @if ($activeSeries)
                            {{-- Series sub-header: which series, how many releases, latest date --}}
                            <div class="flex flex-wrap items-center gap-x-3 gap-y-1 border-b border-line px-4 py-3 sm:px-5">
                                <span class="font-display text-sm font-semibold text-ink">
                                    @if ($activeSeries['unreleased'] || $activeSeries['key'] === 'other')
                                        {{ $activeSeries['label'] }}
                                    @else
                                        {{ __('versions.series_label', ['series' => $activeSeries['label']]) }}
                                    @endif
                                </span>
                                <span class="font-mono text-[11px] text-ink-4">{{ trans_choice('versions.series_count', $activeSeries['count'], ['count' => $activeSeries['count']]) }}</span>
                                @if ($activeSeries['latest'])
                                    <span class="ml-auto font-mono text-[11px] text-ink-4">{{ $activeSeries['latest'] }}</span>
                                @endif
                            </div>

                            {{-- Accordion: the first release of each page is open, the rest collapse --}}
                            <div class="divide-y divide-line px-4 sm:px-5">
                                @foreach ($pagedReleases as $rel)
                                    {{-- wire:ignore.self keeps a user's open/closed toggle from being reset when an
                                         unrelated re-render (autoCheck / check-updates / the in-update poll) morphs the
                                         page; a series/page change uses a fresh wire:key, so it re-defaults to first-open. --}}
                                    <details wire:key="rel-{{ $rel['version'] }}" wire:ignore.self class="group" @if ($loop->first) open @endif>
                                        <summary class="flex cursor-pointer list-none items-center gap-2.5 py-3.5 [&::-webkit-details-marker]:hidden">
                                            <x-icon name="chevron-right" class="h-4 w-4 shrink-0 text-ink-4 transition-transform duration-200 [details[open]_&]:rotate-90" />
                                            @if ($rel['unreleased'])
                                                <span class="font-display text-sm font-semibold text-ink">{{ __('versions.unreleased') }}</span>
                                                <x-badge tone="cyan">{{ __('versions.in_progress') }}</x-badge>
                                            @else
                                                <span class="font-mono text-sm font-semibold text-accent-text">v{{ $rel['version'] }}</span>
                                                @if ($rel['date'])
                                                    <span class="font-mono text-[11px] text-ink-4">{{ $rel['date'] }}</span>
                                                @endif
                                            @endif
                                            {{-- Toned glance-dots: which change categories this release has --}}
                                            <span class="ml-auto flex items-center gap-1" aria-hidden="true">
                                                @foreach (array_unique(array_map($tone, array_keys($rel['groups']))) as $t)
                                                    <span class="h-1.5 w-1.5 rounded-full {{ $dotClass[$t] ?? 'bg-ink-4' }}"></span>
                                                @endforeach
                                            </span>
                                        </summary>
                                        <div class="space-y-3 pb-4 pl-[26px]">
                                            @foreach ($rel['groups'] as $group => $items)
                                                <div>
                                                    <div class="mb-1.5 flex items-center gap-2">
                                                        <x-badge :tone="$tone($group)" class="shrink-0">{{ $sectionLabel($group) }}</x-badge>
                                                    </div>
                                                    <ul class="space-y-1.5 pl-0.5">
                                                        @foreach ($items as $text)
                                                            <li class="flex items-start gap-2.5">
                                                                <span class="mt-1.5 h-1 w-1 shrink-0 rounded-full bg-ink-4"></span>
                                                                <span class="text-sm leading-relaxed text-ink-2">{{ $text }}</span>
                                                            </li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            @endforeach
                                        </div>
                                    </details>
                                @endforeach
                            </div>

                            {{-- Pagination within the active series --}}
                            @if ($totalPages > 1)
                                <nav aria-label="{{ __('versions.pagination_nav') }}" class="flex items-center justify-between gap-3 border-t border-line px-4 py-3 sm:px-5">
                                    <button type="button" wire:click="gotoChangelogPage({{ $changelogPage - 1 }})" @disabled($changelogPage <= 1)
                                        class="inline-flex h-11 items-center gap-1 rounded-md border border-line bg-raised px-2.5 font-mono text-[11px] text-ink-2 transition-colors hover:border-accent/30 hover:text-ink disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:border-line disabled:hover:text-ink-2 lg:h-7">
                                        <x-icon name="chevron-left" class="h-3.5 w-3.5" />
                                        <span class="hidden sm:inline">{{ __('versions.pagination_prev') }}</span>
                                    </button>

                                    <div class="flex items-center gap-1">
                                        @foreach ($pageWindow as $p)
                                            @if ($p === '…')
                                                <span class="px-1 font-mono text-[11px] text-ink-4" aria-hidden="true">…</span>
                                            @else
                                                <button type="button" wire:key="page-{{ $p }}" wire:click="gotoChangelogPage({{ $p }})"
                                                    @class([
                                                        'grid h-11 min-w-11 place-items-center rounded-md border px-2 font-mono text-[11px] tabular-nums transition-colors lg:h-7 lg:min-w-[28px]',
                                                        'border-accent/40 bg-accent/15 text-accent-text' => $p === $changelogPage,
                                                        'border-line bg-raised text-ink-2 hover:border-accent/30 hover:text-ink' => $p !== $changelogPage,
                                                    ])
                                                    @if ($p === $changelogPage) aria-current="page" @endif>{{ $p }}</button>
                                            @endif
                                        @endforeach
                                    </div>

                                    <button type="button" wire:click="gotoChangelogPage({{ $changelogPage + 1 }})" @disabled($changelogPage >= $totalPages)
                                        class="inline-flex h-11 items-center gap-1 rounded-md border border-line bg-raised px-2.5 font-mono text-[11px] text-ink-2 transition-colors hover:border-accent/30 hover:text-ink disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:border-line disabled:hover:text-ink-2 lg:h-7">
                                        <span class="hidden sm:inline">{{ __('versions.pagination_next') }}</span>
                                        <x-icon name="chevron-right" class="h-3.5 w-3.5" />
                                    </button>
                                </nav>
                            @endif
                        @endif
                    </div>
                </div>
            @endif
        </x-panel>

        {{-- Aside --}}
        <div class="space-y-5">
            <x-panel :title="__('versions.installed_title')" :padded="false">
                <div class="space-y-3 px-4 py-4 sm:px-5">
                    <div class="flex items-baseline gap-2">
                        <span class="font-display text-2xl font-bold text-ink">v{{ $version }}</span>
                        <span class="inline-flex items-center gap-1.5 font-mono text-[11px] text-online"><x-status-dot status="online" />{{ __('versions.running') }}</span>
                    </div>
                    <dl class="space-y-2 font-mono text-[11px]">
                        <div class="flex items-center justify-between gap-3"><dt class="text-ink-4">{{ __('versions.build') }}</dt><dd class="text-ink-2">{{ $build['sha'] ?? '—' }}</dd></div>
                        <div class="flex items-center justify-between gap-3"><dt class="text-ink-4">{{ __('versions.branch') }}</dt><dd class="truncate text-ink-2">{{ $build['branch'] }}</dd></div>
                        <div class="flex items-center justify-between gap-3"><dt class="text-ink-4">{{ __('versions.channel') }}</dt><dd class="text-ink-2">{{ $channel }}</dd></div>
                        <div class="flex items-center justify-between gap-3"><dt class="text-ink-4">{{ __('versions.latest_release') }}</dt><dd class="text-ink-2">{{ $latestTag ? 'v'.$latestTag : '—' }}</dd></div>
                        <div class="flex items-center justify-between gap-3"><dt class="text-ink-4">{{ __('versions.license') }}</dt><dd class="text-ink-2">{{ $license }}</dd></div>
                    </dl>
                </div>
            </x-panel>

            <x-panel :title="__('versions.update_title')" :padded="false">
                <div class="space-y-3 px-4 py-4 sm:px-5">
                    <p class="font-mono text-[11px] leading-relaxed text-ink-3">{{ __('versions.update_hint') }}</p>
                    <pre class="overflow-x-auto rounded-md border border-line bg-void px-3 py-2.5 font-mono text-[11px] leading-relaxed text-ink-2">sudo clusev update</pre>
                </div>
            </x-panel>

            <x-panel :title="__('versions.project_title')" :padded="false">
                <div class="space-y-3 px-4 py-4 sm:px-5">
                    @foreach ($repositories as $repo)
                    <a href="{{ $repo['url'] }}" target="_blank" rel="noopener noreferrer" wire:key="repo-{{ $loop->index }}" class="flex items-center gap-3 rounded-md border border-line bg-inset px-3 py-2.5 transition-colors hover:border-accent/30">
                        <span class="grid h-8 w-8 shrink-0 place-items-center rounded-md bg-raised text-ink-3"><x-icon name="git-branch" class="h-4 w-4" /></span>
                        <span class="min-w-0 flex-1">
                            <span class="block truncate font-mono text-xs text-ink">{{ $repo['path'] }}</span>
                            <span class="block truncate font-mono text-[11px] text-ink-3">{{ $repo['host'] }}</span>
                        </span>
                        <x-icon name="chevron-left" class="h-4 w-4 shrink-0 rotate-180 text-ink-4" />
                    </a>
                    @endforeach
                    <p class="flex items-center gap-2 font-mono text-[11px] text-ink-3"><x-icon name="shield" class="h-3.5 w-3.5 shrink-0 text-cyan" /> {{ __('versions.open_core', ['license' => $license]) }}</p>
                </div>
            </x-panel>
        </div>
    </div>
</div>