<div class="space-y-5">
    <div class="animate-rise">
        <h1 class="text-2xl font-bold tracking-tight text-ink">{{ __('plans.title') }}</h1>
        <p class="mt-1 text-sm text-muted">{{ __('plans.subtitle') }}</p>
    </div>

    <div class="grid grid-cols-1 gap-5 lg:grid-cols-[1fr_320px] lg:items-start">
        {{-- Plan lines --}}
        <div class="overflow-hidden rounded-lg border border-line bg-surface shadow-xs animate-rise [animation-delay:60ms]">
            @if ($families->isEmpty())
                <p class="p-8 text-center text-sm text-muted">{{ __('plans.empty') }}</p>
            @else
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead>
                            <tr class="border-b border-line bg-surface-2 text-left text-xs font-semibold text-muted">
                                <th class="px-4 py-3 font-semibold">{{ __('plans.plan') }}</th>
                                <th class="px-4 py-3 font-semibold">{{ __('plans.tier') }}</th>
                                <th class="px-4 py-3 font-semibold">{{ __('plans.live_version') }}</th>
                                <th class="px-4 py-3 font-semibold">{{ __('plans.status') }}</th>
                                <th class="px-4 py-3 text-right font-semibold">{{ __('plans.actions') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($families as $family)
                                <tr wire:key="plan-{{ $family['uuid'] }}" class="border-b border-line last:border-0">
                                    <td class="px-4 py-3">
                                        <span class="font-semibold text-ink">{{ $family['name'] }}</span>
                                        <span class="ml-1.5 font-mono text-xs text-muted">{{ $family['key'] }}</span>
                                        @if ($family['is_recommended'])
                                            <span class="ml-2 rounded-pill bg-accent-active px-2 py-0.5 font-mono text-[10px] font-medium uppercase tracking-[0.07em] text-on-accent">
                                                {{ __('plans.recommended_badge') }}
                                            </span>
                                        @endif
                                        @if ($family['internal'])
                                            {{-- Dieselben Klassen wie der Schalter im Zustand "aus dem Verkauf"
                                                 (unten): ein internes Paket ist kein Angebot, also keine Farbe,
                                                 die nach Auszeichnung aussieht. --}}
                                            <span class="ml-2 rounded-pill border border-line-strong bg-surface-2 px-2 py-0.5 text-xs text-muted">
                                                {{ __('plans.internal_badge') }}
                                            </span>
                                        @endif
                                        @if ($family['drafts'] > 0)
                                            <span class="ml-2 rounded-pill border border-line-strong bg-surface-2 px-2 py-0.5 text-xs text-muted">
                                                {{ trans_choice('plans.drafts', $family['drafts'], ['count' => $family['drafts']]) }}
                                            </span>
                                        @endif
                                    </td>
                                    <td class="px-4 py-3 font-mono text-xs text-muted">{{ $family['tier'] }}</td>
                                    <td class="px-4 py-3 text-body">
                                        @if ($family['live'])
                                            v{{ $family['live']->version }}
                                            @if ($family['next'])
                                                <span class="block text-xs text-muted">
                                                    {{ __('plans.next_from', ['version' => $family['next']->version, 'date' => $family['next']->available_from->local()->isoFormat('L')]) }}
                                                </span>
                                            @endif
                                        @else
                                            <span class="text-muted">{{ __('plans.no_live_version') }}</span>
                                        @endif
                                    </td>
                                    <td class="px-4 py-3">
                                        @php
                                            // Vier Zustände, jeder sagt genau eine Sache. "steht die
                                            // Familie im Verkaufskatalog?" (sellable()) beantwortet nur
                                            // eine von zwei möglichen Fragen — die andere ist "läuft hier
                                            // überhaupt etwas?", und beide teilten sich bisher eine
                                            // Beschriftung. "Zurückgezogen" schlägt "nur über die
                                            // Konsole": der Notausschalter ist die stärkere Aussage.
                                            $selling = in_array($family['key'], $sellable, true);
                                            $status = match (true) {
                                                ! $family['sales_enabled'] => 'withdrawn_badge',
                                                $family['internal'] && $family['live'] => 'console_only',
                                                $selling => 'on_sale',
                                                default => 'nothing_available',
                                            };
                                        @endphp
                                        <button type="button" wire:click="toggleSales('{{ $family['uuid'] }}')"
                                                class="inline-flex items-center gap-1.5 rounded-pill border px-2.5 py-0.5 text-xs font-medium transition
                                                {{ $status === 'on_sale' ? 'border-success-border bg-success-bg text-success' : 'border-line-strong bg-surface-2 text-muted' }}">
                                            <span class="size-1.5 rounded-pill bg-current" aria-hidden="true"></span>
                                            {{ __('plans.'.$status) }}
                                        </button>
                                    </td>
                                    <td class="px-4 py-3 text-right">
                                        <div class="inline-flex items-center gap-2">
                                            {{-- Der zweite Schalter, je Familie einzeln — unabhängig vom
                                                 Verkaufsschalter in der Statusspalte. Ohne
                                                 Bestätigungsmodal wie toggleSales(): reversibel, und
                                                 niemandem wird damit etwas weggenommen. --}}
                                            <button type="button"
                                                    aria-label="{{ $family['internal'] ? __('plans.make_public') : __('plans.make_internal') }}"
                                                    wire:click="toggleInternal('{{ $family['uuid'] }}')"
                                                    class="grid size-8 place-items-center rounded-md border border-line text-muted hover:border-accent-border hover:text-accent-text">
                                                <x-ui.icon name="{{ $family['internal'] ? 'unlock' : 'lock' }}" class="size-4" />
                                            </button>
                                            <button type="button" aria-label="{{ __('plans.edit_marketing') }}"
                                                    x-on:click="$dispatch('openModal', { component: 'admin.edit-plan-family', arguments: { uuid: '{{ $family['uuid'] }}' } })"
                                                    class="grid size-8 place-items-center rounded-md border border-line text-muted hover:border-accent-border hover:text-accent-text">
                                                <x-ui.icon name="pen" class="size-4" />
                                            </button>
                                            <a href="{{ route('admin.plans.versions', $family['uuid']) }}" wire:navigate>
                                                <x-ui.button variant="secondary" size="sm">
                                                    {{ __('plans.manage_versions', ['count' => $family['versions_count']]) }}
                                                </x-ui.button>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>

        {{-- New plan line --}}
        <div class="rounded-lg border border-line bg-surface p-5 shadow-xs animate-rise [animation-delay:120ms]">
            <h2 class="text-base font-semibold text-ink">{{ __('plans.new_title') }}</h2>
            <p class="mt-1 text-sm text-muted">{{ __('plans.new_body') }}</p>

            <form wire:submit="save" class="mt-4 space-y-4">
                <x-ui.input name="key" :label="__('plans.key')" :hint="__('plans.key_hint')"
                            wire:model="key" autocomplete="off" />

                <x-ui.input name="name" :label="__('plans.name')" wire:model="name" autocomplete="off" />

                <x-ui.input name="tier" type="number" min="0" max="255"
                            :label="__('plans.tier')" :hint="__('plans.tier_hint')" wire:model="tier" />

                <x-ui.button type="submit" class="w-full" wire:loading.attr="disabled">
                    {{ __('plans.create') }}
                </x-ui.button>
            </form>
        </div>
    </div>
</div>
