@props(['variant' => 'desktop'])

@php
    // Backend integration: replace these demo arrays with platform search, notifications, and account data.
    $prefix = 'super-admin';
    $languages = $activeLanguages ?? [
        ['code' => 'en', 'name' => 'English', 'native' => 'English', 'direction' => 'ltr'],
        ['code' => 'ar', 'name' => 'Arabic', 'native' => 'العربية', 'direction' => 'rtl'],
        ['code' => 'ur', 'name' => 'Urdu', 'native' => 'اردو', 'direction' => 'rtl'],
    ];
    $currentLanguageCode = $currentLanguage?->code ?? app()->getLocale() ?? 'en';
    $currentLanguageLabel = $currentLanguage?->name ?? 'English';
    $user = auth()->user();
    $userName = $user?->name ?? 'Platform Admin';
    $userInitials = collect(preg_split('/\s+/', trim($userName)) ?: [])
        ->filter()
        ->take(2)
        ->map(fn ($part) => strtoupper(substr($part, 0, 1)))
        ->implode('') ?: 'SA';

    $notifications = [
        ['icon' => 'briefcase', 'title' => 'New business registered', 'message' => 'Glow Beauty Salon completed onboarding.', 'time' => '5m', 'status' => 'unread', 'action' => 'Review business', 'href' => route('super-admin.businesses.index')],
        ['icon' => 'credit-card', 'title' => 'Payment received', 'message' => 'Professional yearly subscription payment posted.', 'time' => '28m', 'status' => 'unread', 'action' => 'View payment', 'href' => route('super-admin.payments.index')],
        ['icon' => 'ticket', 'title' => 'Support ticket opened', 'message' => 'A business owner requested billing help.', 'time' => '1h', 'status' => 'read', 'action' => 'Open tickets', 'href' => route('super-admin.support.index')],
        ['icon' => 'calendar-check', 'title' => 'Trial ending soon', 'message' => 'Three trial businesses expire this week.', 'time' => '2h', 'status' => 'read', 'action' => 'View subscriptions', 'href' => route('super-admin.subscriptions.index')],
    ];

    $quickActions = [
        ['icon' => 'badge-dollar-sign', 'label' => 'Create Plan', 'description' => 'Add SaaS pricing plan', 'href' => route('super-admin.plans.create')],
        ['icon' => 'briefcase', 'label' => 'Businesses', 'description' => 'Review tenant accounts', 'href' => route('super-admin.businesses.index')],
        ['icon' => 'calendar-check', 'label' => 'Subscriptions', 'description' => 'Track trials and renewals', 'href' => route('super-admin.subscriptions.index')],
        ['icon' => 'credit-card', 'label' => 'Payments', 'description' => 'Review transactions', 'href' => route('super-admin.payments.index')],
        ['icon' => 'settings', 'label' => 'System Settings', 'description' => 'Update platform options', 'href' => route('super-admin.settings.system')],
    ];

    $searchGroups = [
        'Businesses' => [
            ['title' => 'Glow Beauty Salon', 'meta' => 'Professional plan - Active', 'href' => route('super-admin.businesses.index', ['q' => 'Glow Beauty Salon'])],
            ['title' => 'Prime Dental Clinic', 'meta' => 'Trial business - Owner account', 'href' => route('super-admin.businesses.index', ['q' => 'Prime Dental Clinic'])],
        ],
        'Subscriptions' => [
            ['title' => 'Professional yearly subscriptions', 'meta' => 'Filter subscription records', 'href' => route('super-admin.subscriptions.index', ['status' => 'active'])],
            ['title' => 'Trial businesses', 'meta' => 'Trials and expiring accounts', 'href' => route('super-admin.subscriptions.index', ['status' => 'trialing'])],
        ],
        'Payments' => [
            ['title' => 'Stripe transactions', 'meta' => 'Gateway payments', 'href' => route('super-admin.payments.index', ['method' => 'stripe'])],
            ['title' => 'Failed payments', 'meta' => 'Needs review', 'href' => route('super-admin.payments.index', ['status' => 'failed'])],
        ],
    ];

    $recentSearches = ['Trial businesses', 'Failed payments', 'Support tickets'];
    $iconButton = 'relative flex h-11 w-11 shrink-0 items-center justify-center rounded-lg border border-booklio-border bg-white text-slate-600 shadow-soft transition hover:border-blue-200 hover:text-booklio-primary hover:shadow-card focus:outline-none focus:ring-4 focus:ring-blue-100';
    $labelButton = 'flex h-11 shrink-0 items-center gap-2 rounded-lg border border-booklio-border bg-white px-3 text-sm font-bold text-slate-700 shadow-soft transition hover:border-blue-200 hover:text-booklio-primary hover:shadow-card focus:outline-none focus:ring-4 focus:ring-blue-100';
@endphp

@if ($variant === 'desktop')
<div class="hidden flex-1 items-center justify-end gap-2 md:flex">
    <div class="relative w-full max-w-[380px] xl:max-w-[460px]" data-booklio-search-root>
        <x-ui.icon name="search" data-search-icon class="pointer-events-none absolute right-4 top-1/2 h-5 w-5 -translate-y-1/2 text-slate-500" />
        <input
            type="search"
            placeholder="Search businesses, payments, users..."
            data-booklio-search-input
            class="h-11 w-full rounded-lg border border-booklio-border bg-white pl-4 pr-12 text-sm font-medium text-booklio-dark shadow-soft outline-none transition placeholder:text-slate-400 focus:border-booklio-primary focus:ring-4 focus:ring-blue-100"
        >
        @include('components.admin.partials.dropdown-search', ['groups' => $searchGroups, 'recentSearches' => $recentSearches])
    </div>

    <x-ui.dropdown id="{{ $prefix }}-quick-actions" width="w-[330px]" triggerClass="{{ $iconButton }}">
        <x-slot name="trigger">
            <x-ui.icon name="plus" class="h-5 w-5" />
            <span class="sr-only">Quick actions</span>
        </x-slot>
        <div class="border-b border-booklio-border p-4">
            <p class="text-sm font-extrabold text-booklio-dark">Quick actions</p>
            <p class="mt-1 text-xs font-medium text-booklio-muted">Jump into common platform workflows.</p>
        </div>
        <div class="p-2">
            @foreach ($quickActions as $item)
                <a href="{{ $item['href'] }}" class="flex min-w-0 items-center gap-3 rounded-lg p-3 transition hover:bg-slate-50 focus:outline-none focus:ring-4 focus:ring-blue-100">
                    <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-blue-50 text-booklio-primary">
                        <x-ui.icon :name="$item['icon']" class="h-5 w-5" />
                    </span>
                    <span class="min-w-0">
                        <span class="block truncate text-sm font-extrabold text-booklio-dark">{{ $item['label'] }}</span>
                        <span class="block truncate text-xs font-medium text-booklio-muted">{{ $item['description'] }}</span>
                    </span>
                </a>
            @endforeach
        </div>
    </x-ui.dropdown>

    <x-ui.dropdown id="{{ $prefix }}-language" width="w-[330px]" triggerClass="{{ $labelButton }}">
        <x-slot name="trigger">
            <x-ui.icon name="languages" class="h-5 w-5" />
            <span data-booklio-language-code>{{ strtoupper($currentLanguageCode) }}</span>
            <x-ui.icon name="chevron-down" class="h-4 w-4 text-slate-500" />
        </x-slot>
        <div class="border-b border-booklio-border p-4">
            <p class="text-sm font-extrabold text-booklio-dark">Language</p>
            <p class="mt-1 text-xs font-medium text-booklio-muted">Current: <span data-booklio-language-label>{{ $currentLanguageLabel }}</span></p>
        </div>
        <div class="p-2">
            @foreach ($languages as $language)
                <a
                    href="{{ request()->fullUrlWithQuery(['lang' => $language['code']]) }}"
                    data-booklio-language-option="{{ $language['code'] }}"
                    data-direction="{{ $language['direction'] }}"
                    class="flex w-full items-center gap-3 rounded-lg p-3 text-left transition hover:bg-slate-50 focus:outline-none focus:ring-4 focus:ring-blue-100"
                >
                    <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-blue-50 text-xs font-extrabold text-booklio-primary">{{ strtoupper($language['code']) }}</span>
                    <span class="min-w-0 flex-1">
                        <span class="block truncate text-sm font-extrabold text-booklio-dark">{{ $language['name'] }}</span>
                        <span class="block truncate text-xs font-medium text-booklio-muted">{{ $language['native'] }} - {{ strtoupper($language['direction']) }}</span>
                    </span>
                    <x-ui.icon name="check" data-language-check="{{ $language['code'] }}" @class(['h-4 w-4 text-booklio-primary', 'hidden' => $language['code'] !== $currentLanguageCode]) />
                </a>
            @endforeach
        </div>
        <div class="grid gap-2 border-t border-booklio-border p-3">
            <a href="{{ route('super-admin.settings.system') }}" class="rounded-lg px-3 py-2 text-sm font-bold text-booklio-primary hover:bg-blue-50">Manage default language</a>
            <a href="{{ route('super-admin.settings.landing') }}" class="rounded-lg px-3 py-2 text-sm font-bold text-booklio-primary hover:bg-blue-50">Landing localization settings</a>
        </div>
    </x-ui.dropdown>

    <x-ui.dropdown id="{{ $prefix }}-help" width="w-[320px]" triggerClass="{{ $iconButton }}">
        <x-slot name="trigger">
            <x-ui.icon name="circle-help" class="h-5 w-5" />
            <span class="sr-only">Help and support</span>
        </x-slot>
        <div class="border-b border-booklio-border p-4">
            <p class="text-sm font-extrabold text-booklio-dark">Help & support</p>
            <p class="mt-1 text-xs font-medium text-booklio-muted">Platform operations and support shortcuts.</p>
        </div>
        <div class="grid gap-1 p-2">
            @foreach ([
                ['book-open', 'Documentation', 'Read setup and feature guides'],
                ['play-circle', 'Video Tutorials', 'Watch walkthroughs'],
                ['ticket', 'Support Tickets', 'Review tenant tickets'],
                ['keyboard', 'Keyboard Shortcuts', 'Productivity placeholder'],
                ['activity', 'System Status', 'Queue and service health placeholder'],
            ] as [$icon, $title, $description])
                <a href="{{ $title === 'Support Tickets' ? route('super-admin.support.index') : '#' }}" data-booklio-placeholder="{{ $title === 'Support Tickets' ? '' : $title.' will be connected in the backend support phase.' }}" class="flex items-center gap-3 rounded-lg p-3 transition hover:bg-slate-50 focus:outline-none focus:ring-4 focus:ring-blue-100">
                    <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-slate-50 text-slate-600">
                        <x-ui.icon :name="$icon" class="h-5 w-5" />
                    </span>
                    <span class="min-w-0">
                        <span class="block truncate text-sm font-extrabold text-booklio-dark">{{ $title }}</span>
                        <span class="block truncate text-xs font-medium text-booklio-muted">{{ $description }}</span>
                    </span>
                </a>
            @endforeach
        </div>
    </x-ui.dropdown>

    <x-ui.dropdown id="{{ $prefix }}-notifications" width="w-[390px]" triggerClass="{{ $iconButton }}">
        <x-slot name="trigger">
            <x-ui.icon name="bell" class="h-5 w-5" />
            <span class="absolute -right-0.5 -top-0.5 flex h-5 min-w-5 items-center justify-center rounded-full bg-red-500 px-1 text-[11px] font-bold text-white ring-2 ring-booklio-background">2</span>
            <span class="sr-only">Notifications</span>
        </x-slot>
        <div class="flex items-center justify-between gap-3 border-b border-booklio-border p-4">
            <div>
                <p class="text-sm font-extrabold text-booklio-dark">Notifications</p>
                <p class="mt-1 text-xs font-medium text-booklio-muted">2 unread platform updates</p>
            </div>
            <button type="button" data-booklio-placeholder="Notification read-state will persist when backend notification storage is connected." class="text-xs font-bold text-booklio-primary hover:text-blue-700">Mark all as read</button>
        </div>
        <div class="max-h-[380px] overflow-y-auto p-2 booklio-scrollbar">
            @foreach ($notifications as $notification)
                <a href="{{ $notification['href'] }}" class="flex gap-3 rounded-lg p-3 transition hover:bg-slate-50 focus:outline-none focus:ring-4 focus:ring-blue-100">
                    <span class="relative flex h-10 w-10 shrink-0 items-center justify-center rounded-lg {{ $notification['status'] === 'unread' ? 'bg-blue-50 text-booklio-primary' : 'bg-slate-50 text-slate-500' }}">
                        <x-ui.icon :name="$notification['icon']" class="h-5 w-5" />
                        @if ($notification['status'] === 'unread')
                            <span class="absolute -right-1 -top-1 h-2.5 w-2.5 rounded-full bg-booklio-primary ring-2 ring-white"></span>
                        @endif
                    </span>
                    <span class="min-w-0 flex-1">
                        <span class="flex items-center justify-between gap-3">
                            <span class="truncate text-sm font-extrabold text-booklio-dark">{{ $notification['title'] }}</span>
                            <span class="shrink-0 text-[11px] font-bold text-booklio-muted">{{ $notification['time'] }}</span>
                        </span>
                        <span class="mt-1 block line-clamp-2 text-xs leading-5 text-booklio-muted">{{ $notification['message'] }}</span>
                        <span class="mt-1 block text-xs font-bold text-booklio-primary">{{ $notification['action'] }}</span>
                    </span>
                </a>
            @endforeach
        </div>
        <a href="{{ route('super-admin.activity.index') }}" class="block border-t border-booklio-border p-3 text-center text-sm font-bold text-booklio-primary hover:bg-blue-50">View platform activity</a>
    </x-ui.dropdown>

    <x-ui.dropdown id="{{ $prefix }}-profile" width="w-[300px]" triggerClass="flex h-11 shrink-0 items-center gap-3 rounded-lg border border-booklio-border bg-white px-2 py-1.5 text-left shadow-soft transition hover:border-blue-200 hover:shadow-card focus:outline-none focus:ring-4 focus:ring-blue-100">
        <x-slot name="trigger">
            <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-booklio-primary text-sm font-extrabold text-white">{{ $userInitials }}</span>
            <span class="hidden min-w-0 text-left xl:block">
                <span class="block max-w-[130px] truncate text-sm font-bold text-booklio-dark">{{ $userName }}</span>
                <span class="block text-xs font-medium text-booklio-muted">Owner</span>
            </span>
            <x-ui.icon name="chevron-down" class="h-4 w-4 text-slate-500" />
        </x-slot>
        <div class="border-b border-booklio-border p-4">
            <div class="flex items-center gap-3">
                <span class="flex h-12 w-12 items-center justify-center rounded-lg bg-booklio-primary text-sm font-extrabold text-white">{{ $userInitials }}</span>
                <div class="min-w-0">
                    <p class="truncate text-sm font-extrabold text-booklio-dark">{{ $userName }}</p>
                    <p class="truncate text-xs font-medium text-booklio-muted">{{ $user?->email ?? 'Booklio SaaS owner' }}</p>
                </div>
            </div>
        </div>
        <div class="grid gap-1 p-2">
            @foreach ([
                ['settings', 'System Settings', route('super-admin.settings.system')],
                ['badge-dollar-sign', 'Plans', route('super-admin.plans.index')],
                ['activity', 'Activity Logs', route('super-admin.activity.index')],
            ] as [$icon, $label, $href])
                <a href="{{ $href }}" class="flex items-center gap-3 rounded-lg p-3 text-sm font-bold text-slate-700 transition hover:bg-slate-50 hover:text-booklio-primary">
                    <x-ui.icon :name="$icon" class="h-5 w-5 text-slate-500" />
                    {{ $label }}
                </a>
            @endforeach
        </div>
        <div class="border-t border-booklio-border p-2">
            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <button type="submit" class="flex w-full items-center gap-3 rounded-lg p-3 text-left text-sm font-bold text-booklio-danger transition hover:bg-red-50">
                    <x-ui.icon name="log-out" class="h-5 w-5" />
                    Logout
                </button>
            </form>
        </div>
    </x-ui.dropdown>
</div>

@else
<div class="mt-3 flex gap-2 overflow-x-auto pb-1 booklio-scrollbar md:hidden">
    <x-ui.dropdown id="{{ $prefix }}-mobile-search" width="w-[360px]" triggerClass="{{ $iconButton }}">
        <x-slot name="trigger">
            <x-ui.icon name="search" class="h-5 w-5" />
            <span class="sr-only">Search</span>
        </x-slot>
        <div class="border-b border-booklio-border p-3" data-booklio-search-root>
            <div class="relative">
                <x-ui.icon name="search" data-search-icon class="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-500" />
                <input type="search" data-booklio-search-input placeholder="Search platform..." class="h-10 w-full rounded-lg border border-booklio-border bg-white pl-3 pr-10 text-sm font-medium outline-none focus:border-booklio-primary focus:ring-4 focus:ring-blue-100">
            </div>
        </div>
        @include('components.admin.partials.dropdown-search-content', ['groups' => $searchGroups, 'recentSearches' => $recentSearches])
    </x-ui.dropdown>

    <x-ui.dropdown id="{{ $prefix }}-mobile-quick-actions" width="w-[330px]" triggerClass="{{ $iconButton }}">
        <x-slot name="trigger"><x-ui.icon name="plus" class="h-5 w-5" /></x-slot>
        <div class="p-2">
            @foreach ($quickActions as $item)
                <a href="{{ $item['href'] }}" class="flex items-center gap-3 rounded-lg p-3 hover:bg-slate-50">
                    <x-ui.icon :name="$item['icon']" class="h-5 w-5 text-booklio-primary" />
                    <span class="text-sm font-bold">{{ $item['label'] }}</span>
                </a>
            @endforeach
        </div>
    </x-ui.dropdown>

    <x-ui.dropdown id="{{ $prefix }}-mobile-language" width="w-[330px]" triggerClass="{{ $labelButton }}">
        <x-slot name="trigger">
            <x-ui.icon name="languages" class="h-5 w-5" />
            <span data-booklio-language-code>{{ strtoupper($currentLanguageCode) }}</span>
        </x-slot>
        <div class="p-2">
            @foreach ($languages as $language)
                <a href="{{ request()->fullUrlWithQuery(['lang' => $language['code']]) }}" data-booklio-language-option="{{ $language['code'] }}" class="flex items-center gap-3 rounded-lg p-3 hover:bg-slate-50">
                    <span class="flex h-9 w-9 items-center justify-center rounded-lg bg-blue-50 text-xs font-extrabold text-booklio-primary">{{ strtoupper($language['code']) }}</span>
                    <span class="text-sm font-bold">{{ $language['name'] }}</span>
                </a>
            @endforeach
        </div>
    </x-ui.dropdown>

    <x-ui.dropdown id="{{ $prefix }}-mobile-notifications" width="w-[360px]" triggerClass="{{ $iconButton }}">
        <x-slot name="trigger">
            <x-ui.icon name="bell" class="h-5 w-5" />
            <span class="absolute -right-0.5 -top-0.5 flex h-5 min-w-5 items-center justify-center rounded-full bg-red-500 px-1 text-[11px] font-bold text-white ring-2 ring-booklio-background">2</span>
        </x-slot>
        <div class="max-h-[420px] overflow-y-auto p-2 booklio-scrollbar">
            @foreach ($notifications as $notification)
                <a href="{{ $notification['href'] }}" class="flex gap-3 rounded-lg p-3 hover:bg-slate-50">
                    <x-ui.icon :name="$notification['icon']" class="h-5 w-5 shrink-0 text-booklio-primary" />
                    <span class="min-w-0">
                        <span class="block truncate text-sm font-extrabold">{{ $notification['title'] }}</span>
                        <span class="block line-clamp-2 text-xs text-booklio-muted">{{ $notification['message'] }}</span>
                    </span>
                </a>
            @endforeach
        </div>
    </x-ui.dropdown>

    <x-ui.dropdown id="{{ $prefix }}-mobile-profile" width="w-[300px]" triggerClass="{{ $iconButton }}">
        <x-slot name="trigger"><span class="text-sm font-extrabold">{{ $userInitials }}</span></x-slot>
        <div class="grid gap-1 p-2">
            <a href="{{ route('super-admin.settings.system') }}" class="rounded-lg p-3 text-sm font-bold hover:bg-slate-50">System Settings</a>
            <a href="{{ route('super-admin.activity.index') }}" class="rounded-lg p-3 text-sm font-bold hover:bg-slate-50">Activity Logs</a>
            <form method="POST" action="{{ route('logout') }}" class="border-t border-booklio-border pt-2">
                @csrf
                <button type="submit" class="w-full rounded-lg p-3 text-left text-sm font-bold text-booklio-danger hover:bg-red-50">Logout</button>
            </form>
        </div>
    </x-ui.dropdown>
</div>
@endif