<x-filament-panels::page>
    @php
        $tenants = $this->getTenants();
        $environmentCount = $tenants->count();
    @endphp

    @if ($tenants->isEmpty())
        {{-- Empty state — enterprise-grade --}}
        <div class="mx-auto max-w-md">
            <div class="rounded-xl border border-gray-200 bg-white p-8 text-center shadow-sm dark:border-white/10 dark:bg-white/5">
                {{-- Workspace context badge --}}
                <div class="mb-5 inline-flex items-center gap-1.5 rounded-full border border-gray-200 bg-gray-50 px-3 py-1 text-xs font-medium text-gray-600 dark:border-white/10 dark:bg-white/5 dark:text-gray-400">
                    <x-filament::icon icon="heroicon-m-building-office-2" class="h-3.5 w-3.5" />
                    {{ $this->workspace->name }}
                </div>

                {{-- Icon --}}
                <div class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-primary-50 dark:bg-primary-950/30">
                    <x-filament::icon
                        icon="heroicon-o-server-stack"
                        class="h-7 w-7 text-primary-500 dark:text-primary-400"
                    />
                </div>

                <h3 class="text-base font-semibold text-gray-900 dark:text-white">{{ __('localization.shell.no_managed_environments_yet') }}</h3>
                <p class="mx-auto mt-2 max-w-xs text-sm text-gray-500 dark:text-gray-400">
                    {{ __('localization.shell.managed_environments_empty_state_description') }}
                </p>

                <div class="mt-6 flex flex-col items-center gap-3">
                    <x-filament::button
                        tag="a"
                        href="{{ route('admin.onboarding') }}"
                        icon="heroicon-m-plus"
                        size="lg"
                    >
                        {{ __('localization.shell.add_environment') }}
                    </x-filament::button>

                    <a href="{{ route('filament.admin.pages.choose-workspace') }}"
                       class="inline-flex items-center gap-1.5 text-sm text-gray-500 transition-colors hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                        <x-filament::icon icon="heroicon-m-arrows-right-left" class="h-4 w-4" />
                        Switch workspace
                    </a>
                </div>
            </div>
        </div>
    @else
        {{-- ManagedEnvironment list --}}
        <div class="mx-auto max-w-3xl">
            {{-- Header row --}}
            <div class="mb-6 flex items-center justify-between">
                <div class="flex items-center gap-2">
                    <div class="inline-flex items-center gap-1.5 rounded-full border border-gray-200 bg-gray-50 px-3 py-1 text-xs font-medium text-gray-600 dark:border-white/10 dark:bg-white/5 dark:text-gray-400">
                        <x-filament::icon icon="heroicon-m-building-office-2" class="h-3.5 w-3.5" />
                        {{ $this->workspace->name }}
                    </div>
                    <span class="text-sm text-gray-500 dark:text-gray-400">
                        &middot; {{ trans_choice('localization.shell.environment_count', $environmentCount, ['count' => $environmentCount]) }}
                    </span>
                </div>

                <x-filament::button
                    color="gray"
                    size="sm"
                    wire:click="goToChooseEnvironment"
                    icon="heroicon-m-arrow-right"
                    icon-position="after"
                >
                    {{ __('localization.shell.choose_environment') }}
                </x-filament::button>
            </div>

            {{-- ManagedEnvironment cards --}}
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-{{ min($tenants->count(), 3) }}">
                @foreach ($tenants as $tenant)
                    @php
                        $statusSpec = \App\Support\Badges\BadgeCatalog::spec(\App\Support\Badges\BadgeDomain::TenantStatus, $tenant->status);
                    @endphp
                    <button
                        type="button"
                        wire:key="tenant-{{ $tenant->id }}"
                        wire:click="openTenant({{ (int) $tenant->id }})"
                        class="group relative flex flex-col rounded-xl border border-gray-200 bg-white p-5 text-left shadow-sm transition-all duration-150 hover:border-gray-300 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:border-white/10 dark:bg-white/5 dark:hover:border-white/20 dark:focus:ring-offset-gray-900"
                    >
                        {{-- Loading overlay --}}
                        <div wire:loading wire:target="openTenant({{ (int) $tenant->id }})"
                             class="absolute inset-0 z-10 flex items-center justify-center rounded-xl bg-white/80 dark:bg-gray-900/80">
                            <x-filament::loading-indicator class="h-5 w-5 text-primary-500" />
                        </div>

                        <div class="flex items-start gap-3">
                            <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-gray-100 group-hover:bg-gray-200 dark:bg-white/10 dark:group-hover:bg-white/15">
                                <x-filament::icon
                                    icon="heroicon-o-server-stack"
                                    class="h-5 w-5 text-gray-500 group-hover:text-gray-600 dark:text-gray-400 dark:group-hover:text-gray-300"
                                />
                            </div>
                            <div class="min-w-0 flex-1">
                                <div class="flex items-start justify-between gap-3">
                                    <div class="min-w-0">
                                        <h3 class="truncate text-sm font-semibold text-gray-900 dark:text-white">
                                            {{ $tenant->name }}
                                        </h3>
                                        <p class="mt-0.5 truncate text-xs text-gray-500 dark:text-gray-400">
                                            {{ $tenant->external_id ?? 'No external ID' }}
                                        </p>
                                    </div>

                                    <x-filament::badge :color="$statusSpec->color" :icon="$statusSpec->icon" size="sm">
                                        {{ $statusSpec->label }}
                                    </x-filament::badge>
                                </div>
                            </div>
                        </div>

                        {{-- Hover arrow --}}
                        <div class="absolute right-4 top-5 opacity-0 transition-opacity group-hover:opacity-100">
                            <x-filament::icon
                                icon="heroicon-m-arrow-right"
                                class="h-4 w-4 text-gray-400 dark:text-gray-500"
                            />
                        </div>
                    </button>
                @endforeach
            </div>

            {{-- Footer links --}}
            <div class="mt-6 flex items-center justify-center gap-6">
                <a href="{{ route('admin.onboarding') }}"
                   class="inline-flex items-center gap-1.5 text-sm text-gray-500 transition-colors hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                    <x-filament::icon icon="heroicon-m-plus" class="h-4 w-4" />
                    {{ __('localization.shell.add_environment') }}
                </a>
                <a href="{{ route('filament.admin.pages.choose-workspace') }}"
                   class="inline-flex items-center gap-1.5 text-sm text-gray-500 transition-colors hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                    <x-filament::icon icon="heroicon-m-arrows-right-left" class="h-4 w-4" />
                    Switch workspace
                </a>
            </div>
        </div>
    @endif
</x-filament-panels::page>
