<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full">
<head>
    <x-shell.head :title="$title ?? config('app.name')" />
</head>
<body class="min-h-full bg-bg text-body antialiased" x-data="{ nav: false }" :class="nav && 'overflow-hidden lg:overflow-auto'" data-login-url="{{ route('login') }}">
    @php
        $maintenanceWindows = collect();
        if (auth()->check()) {
            $portalCustomer = \App\Models\Customer::query()->where('user_id', auth()->id())->first()
                ?? \App\Models\Customer::query()->where('email', auth()->user()->email)->first();
            if ($portalCustomer) {
                $maintenanceWindows = \App\Models\MaintenanceWindow::bannerFor($portalCustomer);
            }
        }
    @endphp

    @if (auth()->check() && ! ($portalCustomer ?? null))
        {{-- No customer behind this login (e.g. an operator account): say so, or
             every customer action on these pages looks like a dead button. --}}
        <div class="flex flex-wrap items-center justify-center gap-x-3 gap-y-1 border-b border-warning-border bg-warning-bg px-4 py-2.5 text-center text-sm text-ink">
            <x-ui.icon name="alert-triangle" class="size-4 text-warning" />
            <span class="font-semibold">{{ __('dashboard.no_customer_title') }}</span>
            <span class="text-muted">{{ __('dashboard.no_customer_hint') }}</span>
            {{-- The console link is gone: a portal account is never an operator (R21). --}}
        </div>
    @endif

    <div class="flex min-h-screen lg:h-screen lg:overflow-hidden">
        <x-shell.nav
            prefix="dashboard.nav"
            :groups="\App\Support\Navigation::portal()"
        />

        <div class="flex min-w-0 flex-1 flex-col lg:h-screen lg:overflow-hidden">
            <x-shell.topbar :crumbs="array_values(array_filter([$portalCustomer?->name, $title ?? \App\Support\Navigation::currentLabel()]))">
                {{-- Impersonation is a MODE, not a notice: it stays visible
                     rather than hiding in a dropdown, because acting as someone
                     else without noticing is how mistakes happen. --}}
                @if (session('impersonator_id'))
                    <div class="flex min-w-0 items-center gap-2 rounded-pill border border-warning-border bg-warning-bg px-3 py-1">
                        <x-ui.icon name="users" class="size-4 text-warning" />
                        <span class="truncate text-xs font-semibold text-ink">{{ __('impersonate.banner', ['name' => auth()->user()->name]) }}</span>
                        <form method="POST" action="{{ route('impersonate.leave') }}" class="inline shrink-0">
                            @csrf
                            <button type="submit" class="inline-flex items-center gap-1 rounded-pill px-2 py-0.5 text-xs font-semibold text-warning hover:underline">
                                <x-ui.icon name="log-out" class="size-3.5" />
                                <span class="hidden sm:inline">{{ __('impersonate.leave') }}</span>
                            </button>
                        </form>
                    </div>
                @endif

                @if ($maintenanceWindows->isNotEmpty())
                    <div class="relative" x-data="{ open: false }" @keydown.escape="open = false">
                        <button type="button" @click="open = !open" :aria-expanded="open" aria-haspopup="menu"
                                class="relative grid size-10 place-items-center rounded text-muted transition hover:bg-surface-hover hover:text-ink"
                                aria-label="{{ __('maintenance.notices') }}">
                            <x-ui.icon name="bell" />
                            <span class="absolute right-1.5 top-1.5 grid size-4 place-items-center rounded-pill bg-accent text-[10px] font-bold text-white ring-2 ring-surface">{{ $maintenanceWindows->count() }}</span>
                        </button>

                        <div x-show="open" x-cloak @click.outside="open = false"
                             class="absolute right-0 z-50 mt-1 w-80 overflow-hidden rounded-lg border border-line bg-surface shadow-md">
                            <p class="border-b border-line px-4 py-3 text-sm font-semibold text-ink">{{ __('maintenance.notices') }}</p>
                            <div class="max-h-80 divide-y divide-line overflow-y-auto">
                                @foreach ($maintenanceWindows as $mw)
                                    @php $isActive = now()->betweenIncluded($mw->starts_at, $mw->ends_at); @endphp
                                    <div class="flex gap-2.5 px-4 py-3">
                                        <x-ui.icon name="alert-triangle" class="mt-0.5 size-4 {{ $isActive ? 'text-warning' : 'text-info' }}" />
                                        <div class="min-w-0">
                                            <p class="text-sm font-semibold text-ink">{{ $mw->title }}</p>
                                            <p class="mt-0.5 text-xs leading-relaxed text-muted">
                                                {{ $isActive
                                                    ? __('maintenance.banner_active', ['end' => $mw->ends_at->local()->isoFormat('LT')])
                                                    : __('maintenance.banner_upcoming', ['start' => $mw->starts_at->local()->isoFormat('LLL'), 'end' => $mw->ends_at->local()->isoFormat('LT')]) }}
                                            </p>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endif

                @auth
                    <div class="relative" x-data="{ open: false }" @keydown.escape="open = false">
                        <button type="button" class="flex min-h-11 items-center gap-2.5 rounded px-2 hover:bg-surface-hover" @click="open = !open" :aria-expanded="open" aria-haspopup="menu">
                            <span class="grid size-8 place-items-center rounded-pill bg-accent-subtle text-sm font-bold text-accent-text">{{ \Illuminate\Support\Str::upper(\Illuminate\Support\Str::substr(auth()->user()->name, 0, 1)) }}</span>
                            <span class="hidden text-sm font-medium text-ink sm:block">{{ auth()->user()->name }}</span>
                            <x-ui.icon name="chevron-down" class="size-4 text-muted" />
                        </button>
                        <div x-show="open" x-cloak @click.outside="open = false" class="absolute right-0 mt-1 w-48 overflow-hidden rounded-lg border border-line bg-surface py-1 shadow-md">
                            <form method="POST" action="{{ route('logout') }}">
                                @csrf
                                <button type="submit" class="flex min-h-11 w-full items-center gap-2.5 px-3.5 text-left text-sm text-body hover:bg-surface-hover">
                                    <x-ui.icon name="log-out" class="size-4" />
                                    {{ __('dashboard.logout') }}
                                </button>
                            </form>
                        </div>
                    </div>
                @endauth
            </x-shell.topbar>

            <main class="mx-auto w-full max-w-[1240px] flex-1 px-4 py-6 lg:overflow-y-auto lg:px-8 lg:py-8">
                {{ $slot }}
            </main>
        </div>
    </div>

    {{-- Global toast — any element can trigger it with $dispatch('notify', { message }) --}}
    <div
        x-data="{ show: false, msg: '', timer: null }"
        @notify.window="msg = $event.detail.message; show = true; clearTimeout(timer); timer = setTimeout(() => show = false, 3200)"
        x-show="show"
        x-cloak
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0 translate-y-12"
        x-transition:enter-end="opacity-100 translate-y-0"
        x-transition:leave="transition ease-in duration-300"
        x-transition:leave-start="opacity-100 translate-y-0"
        x-transition:leave-end="opacity-0 translate-y-12"
        role="status"
        aria-live="polite"
        class="fixed bottom-6 left-1/2 z-[80] -translate-x-1/2 rounded-pill bg-plate px-5 py-3 text-sm font-semibold text-white shadow-md"
    >
        <span x-text="msg"></span>
    </div>

    <x-shell.connection-banner />

    @livewire('wire-elements-modal')
    @livewireScripts
</body>
</html>
