@props([
    // Die fertige Befehlszeile, sobald der Host angelegt ist — sonst null.
    'command' => null,
    'archiveUrl' => '',
    'hostUuid' => null,
])

{{-- Die Anleitung für eine Host-Übernahme, an EINER Stelle geschrieben.

     Sie steht bewusst dort, wo jemand sie braucht, bevor er anfängt: die
     Schritte 1 und 2 passieren beim Anbieter, und wer sie erst nach dem Anlegen
     liest, hat den Einmal-Code schon in der Zwischenablage und dessen Frist
     schon laufen. Die erste Fassung dieser Seite zeigte die Anleitung erst
     hinterher — das war genau dieser Fehler.

     Deshalb sind IMMER alle sechs Schritte zu sehen, auch die erledigten und
     die kommenden. Eine Anleitung, die nur den aktuellen Schritt zeigt,
     beantwortet die Frage „wie lange dauert das noch" nicht. --}}

@php
    $done = $command !== null;
    // Schritt 3 ist das Formular auf dieser Seite; ist die Zeile da, sind 1–3
    // vorbei und 4 ist dran.
    $current = $done ? 4 : 3;

    $steps = [
        1 => ['title' => __('hosts.takeover.s1_title'), 'body' => __('hosts.takeover.s1_body')],
        2 => ['title' => __('hosts.takeover.s2_title'), 'body' => __('hosts.takeover.s2_body')],
        3 => ['title' => __('hosts.takeover.s3_title'), 'body' => __('hosts.takeover.s3_body')],
        4 => ['title' => __('hosts.takeover.s4_title'), 'body' => __('hosts.takeover.s4_body')],
        5 => ['title' => __('hosts.takeover.s5_title'), 'body' => __('hosts.takeover.s5_body')],
        6 => ['title' => __('hosts.takeover.s6_title'), 'body' => __('hosts.takeover.s6_body')],
    ];
@endphp

<div {{ $attributes->merge(['class' => 'rounded-lg border border-line bg-surface shadow-xs']) }}>
    <div class="border-b border-line px-6 py-4">
        <h2 class="text-sm font-semibold text-ink">{{ __('hosts.takeover.how_title') }}</h2>
        <p class="mt-1 text-sm text-muted">{{ __('hosts.takeover.how_sub') }}</p>
    </div>

    <ol class="divide-y divide-line">
        @foreach ($steps as $number => $step)
            @php
                $isCurrent = $number === $current;
                $isPast = $number < $current;
            @endphp
            <li class="flex gap-3 px-6 py-4 {{ $isCurrent ? 'bg-info-bg' : '' }}">
                {{-- Die Nummer trägt den Zustand, nicht ein Icon daneben: eine
                     Ziffer, die man mit dem Blick abzählen kann, ist an dieser
                     Stelle mehr wert als ein Häkchen. --}}
                <span class="mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full border text-xs font-bold
                             {{ $isPast ? 'border-success-border bg-success-bg text-success' : ($isCurrent ? 'border-info-border bg-surface text-info' : 'border-line text-muted') }}">
                    {{ $number }}
                </span>

                <div class="min-w-0 flex-1">
                    <div class="flex flex-wrap items-center gap-2">
                        <h3 class="text-sm font-semibold {{ $isCurrent ? 'text-ink' : 'text-body' }}">{{ $step['title'] }}</h3>
                        @if ($number <= 2 && ! $done)
                            <x-ui.badge status="warning">{{ __('hosts.takeover.badge_before') }}</x-ui.badge>
                        @elseif ($isCurrent)
                            <x-ui.badge status="info">{{ __('hosts.takeover.badge_now') }}</x-ui.badge>
                        @endif
                    </div>
                    <p class="mt-1 text-sm text-muted">{{ $step['body'] }}</p>

                    @if ($number === 4 && $done)
                        <div x-data="{ copied: false }" class="mt-3">
                            <div class="relative">
                                {{-- Umbrechen statt waagerecht rollen: aus einem
                                     Kasten mit Rollbalken markiert jemand die
                                     Hälfte und merkt es erst auf der Maschine. --}}
                                <pre class="max-h-56 overflow-y-auto rounded border border-line bg-canvas p-3 pr-24 font-mono text-xs leading-relaxed text-ink break-all whitespace-pre-wrap"
                                     x-ref="command">{{ $command }}</pre>
                                <button type="button"
                                        class="absolute right-2 top-2 inline-flex items-center gap-1 rounded border border-line bg-surface px-2 py-1 text-xs font-medium text-body hover:text-ink"
                                        x-on:click="navigator.clipboard.writeText($refs.command.textContent); copied = true; setTimeout(() => copied = false, 2000)">
                                    <x-ui.icon name="copy" class="size-4" x-show="!copied" />
                                    <x-ui.icon name="check" class="size-4" x-show="copied" x-cloak />
                                    <span x-text="copied ? @js(__('hosts.takeover.copied')) : @js(__('hosts.takeover.copy'))">{{ __('hosts.takeover.copy') }}</span>
                                </button>
                            </div>
                        </div>
                    @endif

                    @if ($number === 5)
                        <p class="mt-2 text-xs text-muted">{{ __('hosts.takeover.s5_hint', ['url' => $archiveUrl]) }}</p>
                    @endif

                    @if ($number === 6 && $hostUuid)
                        <div class="mt-3">
                            <a href="{{ route('admin.hosts.show', ['host' => $hostUuid]) }}" wire:navigate>
                                <x-ui.button variant="primary" size="sm">
                                    <x-slot:icon><x-ui.icon name="activity" class="size-4" /></x-slot:icon>
                                    {{ __('hosts.takeover.watch') }}
                                </x-ui.button>
                            </a>
                        </div>
                    @endif
                </div>
            </li>
        @endforeach
    </ol>

    <div class="border-t border-line px-6 py-3">
        <p class="text-xs text-muted">{{ __('hosts.takeover.footnote') }}</p>
    </div>
</div>