@php
    use App\Services\ActionAttentionWorkflowService;
    use App\Support\WorkspaceNavigation;

    $alerts = $attentionAlerts ?? ['count' => 0, 'items' => []];
    $notificationsAttentionHref = WorkspaceNavigation::notificationsCenterUrl(['tab' => 'attention']);
    $taskQueueHref = WorkspaceNavigation::taskQueueUrl(['tab' => 'company']);
    $cpPreviewNav = ! empty($cpanelPreviewShell) || request()->attributes->get('cpanel_preview_shell');
    $alertCount = (int) ($alerts['count'] ?? 0);
    $variant = $attentionBannerVariant ?? 'full';
    $isGateway = $variant === 'gateway';

    $bannerItems = collect($alerts['items'] ?? []);

    if (! $isGateway && $bannerItems->isEmpty() && $alertCount > 0) {
        $workflow = app(ActionAttentionWorkflowService::class);
        $bannerItems = collect($alerts['notifications'] ?? [])
            ->map(fn ($n) => $workflow->itemFromNotification($n))
            ->merge(collect($alerts['directives'] ?? [])->map(fn ($d) => $workflow->itemFromDirective($d)));
    }

    $bannerItems = $bannerItems->take(10)->values();
    $shownCount = $bannerItems->count();
    $moreCount = max(0, $alertCount - $shownCount);
@endphp
@if ($alertCount > 0)
    <section
        @unless($isGateway) x-data="attentionWorkflow()" @endunless
        class="rounded-2xl border border-rose-200 bg-gradient-to-br from-rose-50/80 via-white to-amber-50/50 p-4 shadow-sm ring-1 ring-rose-100/90"
        role="alert"
        aria-label="Action required"
    >
        <div class="flex flex-wrap items-start justify-between gap-3">
            <div class="min-w-0 flex-1">
                <div class="flex items-center gap-2">
                    <span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-rose-100 text-rose-800" aria-hidden="true">
                        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
                    </span>
                    <div>
                        <p class="text-[10px] font-bold uppercase tracking-widest text-rose-800">Action required</p>
                        <h2 class="text-sm font-bold text-rose-950">
                            {{ $alertCount }} {{ $alertCount === 1 ? 'item needs' : 'items need' }} resolution
                        </h2>
                        @if ($isGateway)
                            <p class="text-xs text-rose-950/85 mt-0.5 max-w-2xl leading-relaxed">
                                Operational work continues below. Open <strong class="font-semibold">Notifications Center</strong> to review each item, follow numbered steps, and complete payables, task queue, and intake actions in one place.
                            </p>
                        @else
                            <p class="text-xs text-rose-950/85 mt-0.5 max-w-2xl leading-relaxed">
                                Attend to these as soon as you can. Click <strong class="font-semibold">View what to do</strong> for full instructions, numbered steps, and links to Payables, Task queue, Operations, or Offers intake.
                            </p>
                        @endif
                    </div>
                </div>
            </div>
            <div class="flex flex-wrap gap-2 shrink-0">
                <a
                    href="{{ $notificationsAttentionHref }}"
                    data-turbo="false"
                    data-turbo-frame="_top"
                    class="inline-flex h-9 items-center rounded-lg bg-[#012169] px-4 text-xs font-semibold text-white hover:bg-[#001550] transition"
                >
                    {{ $isGateway ? 'Open Notifications Center' : 'Open all in Notifications' }}
                </a>
                @if ($isGateway)
                    <a
                        href="{{ $taskQueueHref }}"
                        data-turbo="false"
                        data-turbo-frame="_top"
                        class="inline-flex h-9 items-center rounded-lg border border-[#012169]/25 bg-white px-4 text-xs font-semibold text-[#012169] hover:bg-[#FAFBFE] transition"
                    >
                        Task queue
                    </a>
                @endif
            </div>
        </div>

        @unless($isGateway)
            <ul class="mt-4 space-y-2">
                @foreach ($bannerItems as $item)
                    @include('partials.attention-workflow-item-card', ['item' => $item])
                @endforeach
            </ul>

            @if ($moreCount > 0)
                <p class="mt-3 text-xs text-[#6A6A6A]">
                    + {{ $moreCount }} more {{ $moreCount === 1 ? 'item' : 'items' }} in
                    <a href="{{ $notificationsAttentionHref }}" data-turbo="false" data-turbo-frame="_top" class="font-semibold text-[#012169] hover:underline">Notifications Center → Needs attention</a>.
                </p>
            @endif

            @once
                @include('partials.attention-workflow-dialog')
            @endonce
        @endunless
    </section>
@endif