@php
    use App\Support\Bytes;
    use Illuminate\Support\Number;

    $locale = app()->getLocale();
    $money = fn (int $cents, string $currency) => Number::currency($cents / 100, in: $currency, locale: $locale);
@endphp
<div class="space-y-3.5">
    {{-- Page head. The same pill the public site uses to label a section, so a
         customer meets one vocabulary on both sides of the login. --}}
    <header class="mb-2 flex flex-wrap items-center gap-3.5 animate-rise">
        <div class="min-w-0 flex-1">
            <p class="lbl">
                {{ __('dashboard.sheet', ['when' => $asOf->local()->locale($locale)->isoFormat('LL, LT')]) }}
            </p>
            <h1 class="mt-[7px] text-[23px] font-bold leading-[1.12] tracking-[-0.03em] text-ink min-[901px]:text-[30px]">
                {{ $instance !== null
                    ? __('dashboard.title_running')
                    : ($endedAt !== null ? __('dashboard.title_ended') : __('dashboard.title_pending')) }}
            </h1>
        </div>

        @if ($instance !== null)
            <span @class([
                'inline-flex shrink-0 items-center gap-[7px] rounded-pill border px-[11px] py-1 text-xs font-medium',
                'border-success-border bg-success-bg text-success' => $instance->status === 'active',
                'border-warning-border bg-warning-bg text-warning' => $instance->status !== 'active',
            ])>
                <span class="size-1.5 rounded-pill bg-current" aria-hidden="true"></span>
                {{ __('dashboard.instance_status.'.$instance->status) }}
            </span>

            @if ($domain)
                <x-ui.button variant="ink" class="shrink-0" :href="'https://'.$domain" target="_blank" rel="noopener">
                    <x-ui.icon name="external-link" class="size-4" />{{ __('dashboard.cloud.open') }}
                </x-ui.button>
            @endif
        @endif
    </header>

    {{-- Live provisioning progress (only while a run is in flight) --}}
    <livewire:customer-provisioning />

    @if ($credentials)
        {{-- The initial admin password, shown here instead of mailed. Gone the
             moment the customer confirms they noted it — acknowledgeCredentials()
             deletes it outright, not just this card. --}}
        <section
            x-data="{
                copiedField: null,
                copy(field, text) {
                    navigator.clipboard.writeText(text).then(() => {
                        this.copiedField = field;
                        setTimeout(() => { if (this.copiedField === field) this.copiedField = null; }, 2000);
                    });
                },
            }"
            class="rounded-lg border border-warning-border bg-warning-bg p-6 shadow-xs animate-rise"
        >
            <div class="flex gap-4">
                <span class="grid size-10 shrink-0 place-items-center rounded-lg bg-warning-bg text-warning" aria-hidden="true">
                    <x-ui.icon name="lock" class="size-5" />
                </span>
                <div class="min-w-0 flex-1">
                    <h2 class="font-semibold text-warning">{{ __('dashboard.credentials.title') }}</h2>
                    <p class="mt-1 max-w-lg text-sm text-warning">{{ __('dashboard.credentials.body') }}</p>

                    <dl class="mt-4 grid gap-3 sm:grid-cols-3">
                        <div class="min-w-0">
                            <dt class="text-xs font-medium text-warning">{{ __('dashboard.credentials.address') }}</dt>
                            <dd class="mt-1 break-all rounded-lg border border-warning-border bg-surface px-3 py-2 font-mono text-xs text-ink">
                                {{ $credentials['url'] }}
                            </dd>
                        </div>
                        <div class="min-w-0">
                            <dt class="text-xs font-medium text-warning">{{ __('dashboard.credentials.user') }}</dt>
                            <dd class="mt-1 flex items-center gap-1.5">
                                <span class="select-all break-all rounded-lg border border-warning-border bg-surface px-3 py-2 font-mono text-sm text-ink">{{ $credentials['user'] }}</span>
                                <button type="button" class="shrink-0 text-warning hover:text-ink" x-on:click="copy('user', @js($credentials['user']))" aria-label="{{ __('dashboard.credentials.copy') }}">
                                    <x-ui.icon name="copy" class="size-4" />
                                </button>
                            </dd>
                        </div>
                        <div class="min-w-0">
                            <dt class="text-xs font-medium text-warning">{{ __('dashboard.credentials.password') }}</dt>
                            <dd class="mt-1 flex items-center gap-1.5">
                                <span class="select-all break-all rounded-lg border border-warning-border bg-surface px-3 py-2 font-mono text-sm text-ink">{{ $credentials['password'] }}</span>
                                <button type="button" class="shrink-0 text-warning hover:text-ink" x-on:click="copy('password', @js($credentials['password']))" aria-label="{{ __('dashboard.credentials.copy') }}">
                                    <x-ui.icon name="copy" class="size-4" />
                                </button>
                            </dd>
                        </div>
                    </dl>

                    <div class="mt-5 flex flex-wrap items-center gap-3">
                        <x-ui.button variant="primary" wire:click="acknowledgeCredentials('{{ $credentials['uuid'] }}')"
                                     wire:loading.attr="disabled" wire:target="acknowledgeCredentials">
                            <x-ui.icon name="check" class="size-4" />{{ __('dashboard.credentials.acknowledge') }}
                        </x-ui.button>
                        <p x-show="copiedField" x-cloak class="text-xs text-warning">{{ __('dashboard.credentials.copied') }}</p>
                    </div>
                </div>
            </div>
        </section>
    @endif

    @if ($ending)
        {{-- Die Frist, die den Kunden betrifft: wie lange SEIN Zugang noch
             steht — nicht, wann irgendetwas geloescht wird. Dieselbe
             Warnfarbe und Bauform wie der Zugangsdaten-Kasten darueber, an
             derselben Stelle im Fluss: eine Sprache fuer Dringlichkeit auf
             dieser Seite, nicht zwei. --}}
        <section class="rounded-lg border border-warning-border bg-warning-bg p-6 shadow-xs animate-rise">
            <div class="flex gap-4">
                <span class="grid size-10 shrink-0 place-items-center rounded-lg bg-warning-bg text-warning" aria-hidden="true">
                    <x-ui.icon name="calendar" class="size-5" />
                </span>
                <div class="min-w-0 flex-1">
                    <h2 class="font-semibold text-warning">{{ __('dashboard.ending.title') }}</h2>
                    <p class="mt-1 max-w-lg text-sm text-warning">
                        {{ __('dashboard.ending.until', ['date' => $ending['ends_at']->local()->locale($locale)->isoFormat('LL')]) }}
                        {{ $ending['show_days']
                            ? trans_choice('dashboard.ending.remaining_days', $ending['days'])
                            : trans_choice('dashboard.ending.remaining_hours', $ending['hours']) }}
                    </p>
                    <p class="mt-1 max-w-lg text-sm text-warning">{{ __('dashboard.ending.what_then') }}</p>

                    {{-- Aufgabe 4: dieselbe Frage wie beim Kuendigen, hier mit
                         der Moeglichkeit, sie sich anders zu ueberlegen — bis
                         zum Laufzeitende (setExportWish() prueft das selbst
                         nach).

                         Bewusst DIESELBEN zwei Auswahlfelder wie im
                         Kuendigungsdialog (livewire/confirm-cancel-package),
                         nicht der Schalter, der hier stand. `export_wish`
                         fuehrt drei Zustaende, ein Schalter kennt zwei — und
                         `(bool) null` ist `false`, also stand unter dem
                         Streifen „Kein Export gewuenscht" als Antwort eines
                         Menschen, den niemand gefragt hatte. Ein
                         unbeantworteter Zustand zeigt hier schlicht keine
                         Auswahl an und fragt darueber im Klartext nach. --}}
                    <div class="mt-4 max-w-sm rounded-lg border border-warning-border bg-surface px-3 py-2.5">
                        <p class="text-sm font-medium text-ink">{{ __('dashboard.ending.export_label') }}</p>
                        <p class="mt-0.5 text-xs leading-relaxed text-muted">
                            {{ $instance->export_wish === null
                                ? __('dashboard.ending.export_open')
                                : __('dashboard.ending.export_hint') }}
                        </p>
                        <div class="mt-2 flex flex-wrap gap-2">
                            <label class="flex cursor-pointer items-center gap-2 rounded border border-line-strong bg-surface px-3 py-2 text-sm text-ink transition has-[:checked]:border-ink">
                                <input type="radio" name="export_wish" value="1" id="export-wish-yes" @checked($instance->export_wish === true)
                                       wire:click="setExportWish(true)" class="size-4 shrink-0 border-line text-ink" />
                                {{ __('dashboard.ending.export_yes') }}
                            </label>
                            <label class="flex cursor-pointer items-center gap-2 rounded border border-line-strong bg-surface px-3 py-2 text-sm text-ink transition has-[:checked]:border-ink">
                                <input type="radio" name="export_wish" value="0" id="export-wish-no" @checked($instance->export_wish === false)
                                       wire:click="setExportWish(false)" class="size-4 shrink-0 border-line text-ink" />
                                {{ __('dashboard.ending.export_no') }}
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif

    @if ($instance === null && $endedAt !== null)
        {{-- Die abgelaufene Laufzeit — der dritte Fall, den es hier bisher
             nicht gab. Ein Kunde, dessen Instanz auf `ended` steht, holt
             Dashboard::render() nicht mehr; er fiel damit in den Zweig
             darunter und las „Ihre Cloud wird eingerichtet." samt „Paket
             buchen". Fuer jemanden, dem eben die Adresse eingezogen wurde
             (EndInstanceService), ist das die falscheste Zeile der Seite.
             Kein Kunde ohne Paket, sondern einer, dessen Paket vorbei ist —
             mit dem Datum, an dem es endete. --}}
        <section class="rounded-lg border border-line bg-surface p-8 shadow-xs animate-rise">
            <h2 class="text-lg font-semibold text-ink">{{ __('dashboard.ended.label') }}</h2>
            <p class="mt-2 max-w-prose text-md text-muted">
                {{ __('dashboard.ended.body', ['date' => $endedAt->local()->locale($locale)->isoFormat('LL')]) }}
            </p>
            <div class="mt-6 flex flex-wrap gap-2.5">
                <x-ui.button variant="secondary" :href="route('support')" wire:navigate>{{ __('dashboard.nav.support') }}</x-ui.button>
                <x-ui.button variant="secondary" :href="route('order')" wire:navigate>{{ __('dashboard.ended.order_again') }}</x-ui.button>
            </div>
        </section>
    @elseif ($instance === null)
        {{-- Said plainly rather than papered over with an empty record: a page
             of dashes reads as broken, and "we are still setting it up" and
             "you have not ordered yet" are different things. --}}
        <section class="rounded-lg border border-line bg-surface p-8 shadow-xs animate-rise">
            <h2 class="text-lg font-semibold text-ink">{{ __('dashboard.no_instance_label') }}</h2>
            <p class="mt-2 max-w-prose text-md text-muted">{{ __('dashboard.no_instance_body') }}</p>
            {{-- Booking first, because "you have not ordered yet" now has an
                 answer on this site: pick a package, pay, and the cloud builds
                 itself. Before self-service the only honest next step was to
                 write to somebody. --}}
            <div class="mt-6 flex flex-wrap gap-2.5">
                <x-ui.button variant="ink" :href="route('order')" wire:navigate>{{ __('dashboard.no_instance_order') }}</x-ui.button>
                <x-ui.button variant="secondary" :href="route('support')" wire:navigate>{{ __('dashboard.nav.support') }}</x-ui.button>
            </div>
        </section>
    @else
        {{-- ── The four cards, in the template's order and form ──────────
             Speicher · Benutzer · Datenvolumen · Verfügbarkeit. Figure, unit
             beside it, a line of context, the visual — ring, bar, sparkline.
             Every number below is measured; nothing is drawn at a level nobody
             read. --}}
        <section class="grid gap-3.5 min-[561px]:grid-cols-2 min-[1101px]:grid-cols-4">
            @if ($disk)
                <x-ui.metric
                    :label="__('dashboard.master.storage')"
                    :value="Number::format($disk['used'] / 1024 ** 3, precision: 0, locale: $locale)"
                    :unit="'/ '.Number::format($disk['total'] / 1024 ** 3, precision: 0, locale: $locale).' GB'"
                    :foot="trim(__('dashboard.master.storage_used', ['percent' => Number::format($disk['percent'], precision: 0, locale: $locale)])
                        .($disk['week_delta'] !== null ? ' · '.__('dashboard.master.storage_week', ['amount' => ($disk['week_delta'] >= 0 ? '+' : '−').Bytes::human(abs($disk['week_delta']))]) : ''))"
                    :href="route('cloud')"
                    class="animate-rise [animation-delay:60ms]"
                >
                    <x-slot:visual><x-ui.ring :percent="$disk['percent']" :size="62" /></x-slot:visual>
                </x-ui.metric>
            @elseif ($instance->quota_gb)
                <x-ui.metric
                    :label="__('dashboard.master.storage')"
                    :value="$instance->quota_gb"
                    unit="GB"
                    :foot="__('dashboard.master.storage_note')"
                    :href="route('cloud')"
                    class="animate-rise [animation-delay:60ms]"
                />
            @endif

            <x-ui.metric
                :label="__('dashboard.master.users')"
                :value="$seats['used']"
                :unit="$seats['total'] !== null ? __('dashboard.master.of_seats', ['total' => $seats['total']]) : null"
                :href="route('users')"
                class="animate-rise [animation-delay:100ms]"
            >
                @if ($seats['total'])
                    <div class="mt-3 h-[5px] overflow-hidden rounded-pill bg-surface-hover">
                        {{-- R4: width is data, not decoration. --}}
                        <div class="h-full rounded-pill bg-muted"
                             style="width: {{ min(100, (int) round($seats['used'] / max(1, $seats['total']) * 100)) }}%"></div>
                    </div>
                @endif
                @if ($seatBreakdown !== [])
                    <p class="mt-2.5 text-xs text-muted">
                        {{ collect($seatBreakdown)
                            ->map(fn (int $n, string $role) => trans_choice('users.role_count.'.$role, $n, ['count' => $n]))
                            ->join(' · ') }}
                    </p>
                @endif
            </x-ui.metric>

            @if ($traffic)
                @php $state = $traffic->state(); @endphp
                <x-ui.metric
                    :label="__('dashboard.traffic.label')"
                    :value="Number::format($traffic->usedBytes / 1024 ** 3, precision: 0, locale: $locale)"
                    :unit="'GB / '.Bytes::human($traffic->quotaBytes)"
                    :foot="__('dashboard.traffic.resets', ['days' => $traffic->daysUntilReset()])"
                    :href="route('billing')"
                    class="animate-rise [animation-delay:140ms]"
                >
                    @if (count($trend) > 2)
                        {{-- Orange because this is the metric with an action
                             attached: when it runs out, something can be done
                             about it. Observed figures stay grey. --}}
                        <x-slot:visual><x-ui.spark :points="$trend" area /></x-slot:visual>
                    @endif

                    @if ($state !== 'ok')
                        <a href="{{ route('billing') }}" wire:navigate class="mt-3 inline-flex items-center gap-1.5 text-xs font-semibold text-accent-text hover:underline">
                            <x-ui.icon name="plus" class="size-3.5" />{{ __('dashboard.traffic.buy') }}
                        </a>
                    @endif
                </x-ui.metric>
            @endif

            {{-- Availability, counted from our own monitoring answers. Absent
                 rather than 100 % when nothing has been checked: reporting an
                 unmonitored instance as perfect is the single most dishonest
                 number this page could carry. --}}
            @if ($availability !== null)
                <x-ui.metric
                    :label="__('dashboard.master.availability')"
                    :value="Number::format($availability, precision: 2, locale: $locale)"
                    unit="%"
                    :foot="__('dashboard.master.availability_note')"
                    :href="route('cloud')"
                    class="animate-rise [animation-delay:180ms]"
                >
                    @if (count($availabilityTrend) > 2)
                        <x-slot:visual><x-ui.spark :points="$availabilityTrend" tone="muted" /></x-slot:visual>
                    @endif
                </x-ui.metric>
            @elseif ($location)
                <x-ui.metric
                    :label="__('dashboard.master.location')"
                    :value="$location['name']"
                    :foot="__('dashboard.master.location_note')"
                    class="animate-rise [animation-delay:180ms]"
                />
            @endif
        </section>

        <section class="grid gap-4 lg:grid-cols-[minmax(0,1.5fr)_minmax(0,1fr)] lg:items-start">
            {{-- ── The proof register ────────────────────────────────────── --}}
            <article class="overflow-hidden rounded-lg border border-line bg-surface shadow-xs animate-rise [animation-delay:200ms]">
                <div class="flex items-center justify-between gap-4 border-b border-line px-5 py-4">
                    <h2 class="text-md font-semibold text-ink">{{ __('dashboard.proofs.label') }}</h2>
                    <a href="{{ route('backups') }}" wire:navigate class="text-sm font-semibold text-accent-text hover:underline">{{ __('dashboard.proofs.all') }}</a>
                </div>

                @if ($proofs === [])
                    <p class="px-5 py-8 text-sm text-muted">{{ __('dashboard.proofs.empty') }}</p>
                @else
                    <div class="overflow-x-auto">
                        <table class="w-full text-sm">
                            <tbody>
                                @foreach ($proofs as $proof)
                                    <tr class="border-b border-line last:border-0">
                                        <td class="px-5 py-4">
                                            <span class="font-semibold text-ink">{{ __('dashboard.proofs.item.'.$proof['key']) }}</span>
                                            <span class="mt-1 block font-mono text-xs text-muted">
                                                {{ $proof['at']?->local()->locale($locale)->isoFormat('DD.MM. HH:mm') ?? '—' }}@if ($proof['note']) · {{ $proof['note'] }}@endif
                                            </span>
                                        </td>
                                        <td class="w-px whitespace-nowrap px-5 py-4 text-right">
                                            <span @class([
                                                'inline-flex items-center gap-1.5 rounded-pill border px-2.5 py-1 text-xs font-semibold',
                                                'border-success-border bg-success-bg text-success' => $proof['state'] === 'ok',
                                                'border-info-border bg-info-bg text-info' => $proof['state'] === 'planned',
                                                'border-danger-border bg-danger-bg text-danger' => $proof['state'] === 'attention',
                                            ])>
                                                <span class="size-1.5 rounded-pill bg-current" aria-hidden="true"></span>
                                                {{ __('dashboard.proofs.state.'.$proof['state']) }}
                                            </span>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </article>

            <div class="space-y-4">
                {{-- ── The contract ───────────────────────────────────────── --}}
                <article class="rounded-lg border border-line bg-surface p-5 shadow-xs animate-rise [animation-delay:240ms]">
                    <h2 class="text-md font-semibold text-ink">{{ __('dashboard.master.label') }}</h2>
                    <dl class="mt-4">
                        <div class="flex items-baseline justify-between gap-4 border-b border-line py-2.5">
                            <dt class="text-sm text-muted">{{ __('dashboard.master.package') }}</dt>
                            <dd class="text-right text-sm font-semibold text-ink">
                                {{ __('billing.plan.'.($instance->plan ?: 'team')) }}
                                @if ($planPrice)
                                    <span class="mt-0.5 block font-mono text-xs font-normal text-muted">
                                        {{ __('dashboard.master.per_'.($planPrice['term'] === 'yearly' ? 'year' : 'month'), ['amount' => $money($planPrice['cents'], $planPrice['currency'])]) }}
                                    </span>
                                @endif
                            </dd>
                        </div>
                        @if ($contract?->performance)
                            <div class="flex items-baseline justify-between gap-4 border-b border-line py-2.5">
                                <dt class="text-sm text-muted">{{ __('dashboard.master.operation') }}</dt>
                                <dd class="text-right text-sm font-semibold text-ink">{{ __('billing.perf.'.$contract->performance) }}</dd>
                            </div>
                        @endif
                        @if ($domain)
                            <div class="flex items-baseline justify-between gap-4 py-2.5">
                                <dt class="text-sm text-muted">{{ __('dashboard.master.address') }}</dt>
                                <dd class="min-w-0 break-all text-right font-mono text-xs text-ink">{{ $domain }}</dd>
                            </div>
                        @endif
                    </dl>
                </article>

                @if ($nextInvoice)
                    <article class="rounded-lg border border-line bg-surface p-5 shadow-xs animate-rise [animation-delay:280ms]">
                        <h2 class="text-md font-semibold text-ink">{{ __('dashboard.invoice.label') }}</h2>
                        <dl class="mt-4">
                            @if ($nextInvoice['addons'] > 0)
                                {{-- Broken out only when there is something to
                                     break out: a "Module 0,00 €" line on every
                                     other customer's sheet is noise. --}}
                                <div class="flex items-baseline justify-between gap-4 border-b border-line py-2.5">
                                    <dt class="text-sm text-muted">{{ __('dashboard.invoice.plan') }}</dt>
                                    <dd class="font-mono text-sm text-ink">{{ $money($nextInvoice['plan'], $nextInvoice['currency']) }}</dd>
                                </div>
                                <div class="flex items-baseline justify-between gap-4 border-b border-line py-2.5">
                                    <dt class="text-sm text-muted">{{ __('dashboard.invoice.addons') }}</dt>
                                    <dd class="font-mono text-sm text-ink">{{ $money($nextInvoice['addons'], $nextInvoice['currency']) }}</dd>
                                </div>
                            @endif
                            <div class="flex items-baseline justify-between gap-4 border-b border-line py-2.5">
                                <dt class="text-sm text-muted">{{ __('dashboard.invoice.amount') }}</dt>
                                <dd class="text-right font-mono text-md font-semibold text-ink">
                                    {{ $money($nextInvoice['total'], $nextInvoice['currency']) }}
                                    <span class="mt-0.5 block text-xs font-normal text-muted">{{ __('dashboard.invoice.net') }}</span>
                                </dd>
                            </div>
                            <div class="flex items-baseline justify-between gap-4 py-2.5">
                                <dt class="text-sm text-muted">{{ __('dashboard.invoice.due') }}</dt>
                                <dd class="font-mono text-sm text-ink">{{ $nextInvoice['due']?->local()->locale($locale)->isoFormat('LL') ?? '—' }}</dd>
                            </div>
                        </dl>
                        <x-ui.button variant="secondary" :href="route('invoices')" wire:navigate class="mt-4 w-full">
                            {{ __('dashboard.invoice.all') }}
                        </x-ui.button>
                    </article>
                @endif

                @if ($openTasks > 0)
                    {{-- Only while there is something outstanding. A permanently
                         green checklist is furniture; one with work left on it
                         is a reason to open this page. --}}
                    <article class="rounded-lg border border-line bg-surface p-5 shadow-xs animate-rise [animation-delay:320ms]">
                        <h2 class="text-md font-semibold text-ink">{{ __('dashboard.setup.label') }}</h2>
                        <p class="mt-2 text-sm text-body">{{ trans_choice('dashboard.setup.open', $openTasks, ['count' => $openTasks]) }}</p>
                        <a href="{{ route('cloud') }}" wire:navigate class="mt-3 inline-flex items-center gap-1.5 text-sm font-semibold text-accent-text hover:underline">
                            {{ __('dashboard.setup.continue') }}
                        </a>
                    </article>
                @endif
            </div>
        </section>

        {{-- ── The three things customers come here to do ─────────────────── --}}
        <section class="grid gap-px overflow-hidden rounded-lg border border-line bg-line shadow-xs animate-rise [animation-delay:360ms] sm:grid-cols-3">
            @foreach ([
                ['users', 'users', 'add_user'],
                ['backups', 'rotate-ccw', 'restore'],
                ['billing', 'plus', 'grow'],
            ] as [$route, $icon, $key])
                <a href="{{ route($route) }}" wire:navigate class="flex min-h-11 items-center gap-3.5 bg-surface px-5 py-4 transition hover:bg-surface-hover">
                    <span class="grid size-9 shrink-0 place-items-center rounded bg-accent-subtle text-accent-text">
                        <x-ui.icon :name="$icon" class="size-[1.05rem]" />
                    </span>
                    <span class="min-w-0">
                        <span class="block text-sm font-semibold text-ink">{{ __('dashboard.quick.'.$key.'_title') }}</span>
                        <span class="block text-xs text-muted">{{ __('dashboard.quick.'.$key.'_body') }}</span>
                    </span>
                </a>
            @endforeach
        </section>
    @endif
</div>