<div class="space-y-5">
    {{-- Header --}}
    <div>
        <p class="font-mono text-[11px] uppercase tracking-[0.2em] text-accent-text">{{ __('terminal.eyebrow') }}</p>
        <h1 class="mt-0.5 font-display text-xl font-semibold text-ink sm:text-2xl">{{ __('terminal.heading') }}</h1>
        <p class="mt-1 text-sm text-ink-3">{{ __('terminal.subtitle') }}</p>
    </div>

    <div class="grid grid-cols-1 gap-4 lg:grid-cols-[260px_minmax(0,1fr)]">
        {{-- Target rail --}}
        <x-panel :title="__('terminal.targets_title')" :subtitle="__('terminal.targets_subtitle')" :padded="false">
            <div class="space-y-1 p-2">
                {{-- Clusev host — a real SSH login into the host machine (configured by the operator). --}}
                @can('manage-fleet')
                    <div @class([
                        'flex items-center rounded-md border transition-colors',
                        'border-accent/30 bg-accent/10' => $activeKey === 'host',
                        'border-transparent hover:border-line hover:bg-raised/60' => $activeKey !== 'host',
                    ])>
                        <button type="button" wire:click="open('host')" wire:loading.attr="disabled"
                            class="flex min-w-0 flex-1 items-center gap-3 px-3 py-2.5 text-left">
                            <span class="grid h-8 w-8 shrink-0 place-items-center rounded-md border border-accent/25 bg-accent/10 text-accent">
                                <x-icon name="command" class="h-4 w-4" />
                            </span>
                            <span class="min-w-0 flex-1">
                                <span @class(['block truncate font-mono text-sm', 'text-accent-text' => $activeKey === 'host', 'text-ink' => $activeKey !== 'host'])>{{ __('terminal.host_label') }}</span>
                                <span @class(['block truncate font-mono text-[11px]', 'text-ink-3' => $hostConfigured, 'text-warning' => ! $hostConfigured])>{{ $hostConfigured ? $hostTarget : __('terminal.host_not_configured') }}</span>
                            </span>
                        </button>
                        <button type="button" wire:click="configureHost" title="{{ __('terminal.host_configure') }}"
                            class="mr-1.5 grid h-7 w-7 shrink-0 place-items-center rounded-md text-ink-4 transition-colors hover:bg-raised hover:text-ink-2">
                            <x-icon name="settings" class="h-3.5 w-3.5" />
                        </button>
                    </div>
                @endcan

                <div class="my-1.5 px-3 font-mono text-[10px] uppercase tracking-[0.18em] text-ink-4">{{ __('terminal.servers_heading') }}</div>

                @if ($showSearch)
                    <div class="relative px-1 pb-1.5">
                        <x-icon name="search" class="pointer-events-none absolute left-3.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-ink-4" />
                        <input wire:model.live.debounce.200ms="search" type="search" autocomplete="off" placeholder="{{ __('terminal.search_placeholder') }}"
                               class="h-8 w-full rounded-md border border-line bg-inset pl-8 pr-8 font-mono text-[12px] text-ink placeholder:text-ink-4 transition-colors focus:border-accent/50 focus:outline-none focus:ring-1 focus:ring-accent/20 [&::-webkit-search-cancel-button]:appearance-none" />
                        @if ($search !== '')
                            <button type="button" wire:click="$set('search', '')" aria-label="{{ __('terminal.search_clear') }}"
                                    class="absolute right-2.5 top-1/2 grid h-5 w-5 -translate-y-1/2 place-items-center rounded text-ink-4 transition-colors hover:bg-raised hover:text-ink-2">
                                <x-icon name="x" class="h-3 w-3" />
                            </button>
                        @endif
                    </div>
                @endif

                @forelse ($servers as $s)
                    <button type="button" wire:key="term-{{ $s->uuid }}" wire:click="open('server', '{{ $s->uuid }}')" wire:loading.attr="disabled"
                        @class([
                            'flex w-full items-center gap-3 rounded-md border px-3 py-2.5 text-left transition-colors',
                            'border-accent/30 bg-accent/10' => $activeKey === $s->uuid,
                            'border-transparent hover:border-line hover:bg-raised/60' => $activeKey !== $s->uuid,
                        ])>
                        <x-status-dot :status="$s->status" class="shrink-0" />
                        <span @class(['min-w-0 flex-1 truncate font-mono text-sm', 'text-accent-text' => $activeKey === $s->uuid, 'text-ink' => $activeKey !== $s->uuid])>{{ $s->name }}</span>
                    </button>
                @empty
                    <p class="px-3 py-4 font-mono text-[11px] text-ink-4">{{ $search !== '' ? __('terminal.no_match') : __('terminal.no_servers') }}</p>
                @endforelse
            </div>
        </x-panel>

        {{-- Terminal island (self-contained; Livewire never touches it after the first render) --}}
        <div wire:ignore x-data="terminalView()" x-on:terminal-open.window="open($event.detail)"
            class="flex min-h-[28rem] flex-col overflow-hidden rounded-xl border border-line bg-void shadow-panel">
            {{-- Toolbar --}}
            <div class="flex items-center gap-3 border-b border-line-soft bg-surface px-4 py-2.5">
                <span class="flex gap-1.5">
                    <span class="h-2.5 w-2.5 rounded-full bg-offline/70"></span>
                    <span class="h-2.5 w-2.5 rounded-full bg-warning/70"></span>
                    <span class="h-2.5 w-2.5 rounded-full bg-online/70"></span>
                </span>
                <span class="truncate font-mono text-[12px] text-ink-2" x-text="title || '{{ __('terminal.no_target') }}'"></span>
                <span class="ml-auto flex items-center gap-2 font-mono text-[10px] uppercase tracking-[0.14em]">
                    <span class="h-1.5 w-1.5 rounded-full"
                        :class="{ 'bg-ink-4': status==='idle', 'bg-warning': status==='connecting', 'bg-online': status==='connected', 'bg-offline': status==='error'||status==='closed' }"></span>
                    <span class="text-ink-3"
                        x-text="({idle:'{{ __('terminal.status_idle') }}',connecting:'{{ __('terminal.status_connecting') }}',connected:'{{ __('terminal.status_connected') }}',closed:'{{ __('terminal.status_closed') }}',error:'{{ __('terminal.status_error') }}'})[status]"></span>
                </span>
                <button type="button" x-on:click="clear()" class="rounded-md border border-line px-2.5 py-1 font-mono text-[11px] text-ink-3 transition-colors hover:border-accent/40 hover:text-accent-text">{{ __('terminal.clear') }}</button>
            </div>

            {{-- Screen --}}
            <div class="relative flex-1">
                <div x-ref="screen" class="absolute inset-0 p-2"></div>
                {{-- Idle placeholder --}}
                <div x-show="status==='idle'" class="pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-2 text-center">
                    <x-icon name="command" class="h-7 w-7 text-ink-4" />
                    <p class="font-mono text-[12px] text-ink-4">{{ __('terminal.pick_target') }}</p>
                </div>
            </div>
        </div>
    </div>
</div>
