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

@php
    $compact = $variant === 'mobile';
    $prefix = 'booklio-' . $variant;

    // Backend integration: notifications and global search can later be hydrated from database queries.
    $booklioDemo = require resource_path('data/booklio.php');
    $notifications = $booklioDemo['notifications'];
    $languages = $activeLanguages ?? [];
    $currentLanguageCode = $currentLanguage?->code ?? app()->getLocale() ?? 'en';
    $currentLanguageLabel = $currentLanguage?->name ?? 'English';
    $user = auth()->user();
    $userName = $user?->name ?? 'Booklio User';
    $userInitials = collect(preg_split('/\s+/', trim($userName)) ?: [])
        ->filter()
        ->take(2)
        ->map(fn ($part) => strtoupper(substr($part, 0, 1)))
        ->implode('') ?: 'BU';
    $roleLabel = $user?->role ? \Illuminate\Support\Str::headline($user->role) : 'Owner';

    $accessibleBusinesses = collect();

    if ($user) {
        $accessibleBusinesses = $user->ownedBusinesses()
            ->with('subscription.plan')
            ->orderBy('name')
            ->get()
            ->concat(
                $user->businesses()
                    ->with('subscription.plan')
                    ->orderBy('businesses.name')
                    ->get()
            )
            ->unique('id')
            ->values();
    }

    if (($currentBusiness ?? null) && ! $accessibleBusinesses->contains('id', $currentBusiness->id)) {
        $accessibleBusinesses = collect([$currentBusiness])->concat($accessibleBusinesses)->unique('id')->values();
    }

    $quickCreates = [
        ['icon' => 'calendar-plus', 'label' => 'New Appointment', 'description' => 'Book a customer visit', 'href' => route('admin.appointments.index')],
        ['icon' => 'user-plus', 'label' => 'New Customer', 'description' => 'Add CRM contact', 'href' => route('admin.customers.index')],
        ['icon' => 'file-plus', 'label' => 'New Invoice', 'description' => 'Create payment request', 'href' => route('admin.invoices.create')],
        ['icon' => 'sparkles', 'label' => 'New Service', 'description' => 'Add bookable service', 'href' => route('admin.services.create')],
        ['icon' => 'user-round-cog', 'label' => 'New Staff Member', 'description' => 'Invite team member', 'href' => route('admin.staff.create')],
    ];

    $businesses = $accessibleBusinesses->map(function ($business) use ($currentBusiness) {
        $initials = collect(preg_split('/\s+/', trim($business->name)) ?: [])
            ->filter()
            ->take(2)
            ->map(fn ($part) => strtoupper(substr($part, 0, 1)))
            ->implode('') ?: 'B';
        $plan = $business->subscription?->plan?->name ? $business->subscription->plan->name.' Plan' : 'Trial Plan';
        $status = \Illuminate\Support\Str::headline($business->status ?: 'active');

        return [
            'initials' => $initials,
            'name' => $business->name,
            'plan' => $plan,
            'status' => $status,
            'active' => ($currentBusiness ?? null)?->id === $business->id,
            'switch_route' => route('admin.businesses.switch', $business),
        ];
    })->values()->all();

    $currentBusinessRow = collect($businesses)->firstWhere('active')
        ?? collect($businesses)->first()
        ?? [
            'initials' => 'B',
            'name' => $currentBusiness?->name ?? 'Business',
            'plan' => 'Trial Plan',
            'status' => 'Active',
            'active' => true,
            'switch_route' => null,
        ];

    $searchGroups = [
        'Customers' => [
            ['title' => 'Jessica Miller', 'meta' => 'Customer - (555) 123-4567'],
            ['title' => 'Amanda Taylor', 'meta' => 'Customer - 8 appointments'],
        ],
        'Appointments' => [
            ['title' => 'Hair Cut & Style', 'meta' => 'Today, 9:00 AM - Emma Wilson'],
            ['title' => 'Facial Treatment', 'meta' => 'Today, 11:00 AM - Sophia Davis'],
        ],
        'Invoices' => [
            ['title' => 'INV-1024', 'meta' => '$65.00 - Paid'],
            ['title' => 'INV-1027', 'meta' => '$120.00 - Partial'],
        ],
        'Services' => [
            ['title' => 'Hair Color', 'meta' => '$85 - 90 minutes'],
            ['title' => 'Beard Trim', 'meta' => '$25 - 45 minutes'],
        ],
    ];

    $recentSearches = ['Jessica Miller', 'Today appointments', 'Overdue invoices'];

    $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';
    $panelWidth = $compact ? 'w-[360px]' : 'w-[380px]';
@endphp

@if ($variant === 'desktop')
    <div class="hidden flex-1 items-center justify-end gap-2 md:flex">
        <x-ui.dropdown id="{{ $prefix }}-business" width="w-[360px]" triggerClass="{{ $labelButton }}">
            <x-slot name="trigger">
                <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-50 text-xs font-extrabold text-booklio-primary">{{ $currentBusinessRow['initials'] }}</span>
                <span class="hidden max-w-[150px] truncate xl:inline">{{ $currentBusinessRow['name'] }}</span>
                <x-ui.icon name="chevron-down" class="h-4 w-4 text-slate-500" />
            </x-slot>
            @include('components.admin.partials.dropdown-businesses', ['businesses' => $businesses, 'currentBusinessRow' => $currentBusinessRow])
        </x-ui.dropdown>

        <div class="relative w-full max-w-[360px] xl:max-w-[430px]" 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 customers, appointments..."
                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>

        @include('components.admin.partials.dropdown-action-set', compact('prefix', 'iconButton', 'labelButton', 'panelWidth', 'notifications', 'quickCreates', 'languages'))
    </div>
@else
    <div class="mt-3 flex gap-2 overflow-x-auto pb-1 booklio-scrollbar md:hidden">
        <x-ui.dropdown id="{{ $prefix }}-business" width="w-[360px]" triggerClass="{{ $labelButton }}">
            <x-slot name="trigger">
                <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-50 text-xs font-extrabold text-booklio-primary">{{ $currentBusinessRow['initials'] }}</span>
                <span class="max-w-[150px] truncate">{{ $currentBusinessRow['name'] }}</span>
                <x-ui.icon name="chevron-down" class="h-4 w-4 text-slate-500" />
            </x-slot>
            @include('components.admin.partials.dropdown-businesses', ['businesses' => $businesses, 'currentBusinessRow' => $currentBusinessRow])
        </x-ui.dropdown>

        <x-ui.dropdown id="{{ $prefix }}-search" width="w-[360px]" triggerClass="{{ $iconButton }}">
            <x-slot name="trigger">
                <x-ui.icon name="search" class="h-5 w-5" />
            </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 Booklio..." 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>

        @include('components.admin.partials.dropdown-action-set', compact('prefix', 'iconButton', 'labelButton', 'panelWidth', 'notifications', 'quickCreates', 'languages'))
    </div>
@endif