{{--
    Topbar / Header Component
    Props:
      $title      – optional page title displayed in mobile header
      $showSearch – bool, show global search (default true)
--}}
@props(['title' => '', 'showSearch' => true])

<header class="topbar">
    
    {{-- Mobile hamburger --}}
    <button
        @click="$store.sidebar.toggleMobile()"
        class="lg:hidden btn-icon btn-ghost -ml-2"
        aria-label="Open sidebar"
    >
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
        </svg>
    </button>

    {{-- Search --}}
    @if($showSearch)
    <div class="flex-1 max-w-xs hidden sm:block">
        <div class="relative">
            <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-surface-400"
                 fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
            </svg>
            <input
                type="search"
                placeholder="Search…"
                class="form-input pl-9 pr-4 py-2 text-sm bg-surface-50 dark:bg-surface-800 border-0 focus:bg-white dark:focus:bg-surface-700"
            />
        </div>
    </div>
    @else
    <div class="flex-1"></div>
    @endif

    {{-- Right actions --}}
    <div class="ml-auto flex items-center gap-2">

        {{-- Theme toggle --}}
        <x-common.theme-toggle />

        {{-- Notifications --}}
        <div x-data="dropdown()" class="relative">
            <button @click="toggle()" class="btn-icon btn-ghost relative" aria-label="Notifications">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
                </svg>
                <span class="absolute -top-0.5 -right-0.5 h-4 w-4 text-[10px] font-bold bg-red-500 text-white rounded-full flex items-center justify-center">3</span>
            </button>

            <div
                x-show="open"
                @click.outside="close()"
                x-transition
                class="dropdown-menu right-0 w-80"
            >
                <div class="px-4 py-3 border-b border-surface-200 dark:border-surface-700 flex items-center justify-between">
                    <span class="font-semibold text-surface-900 dark:text-surface-100">Notifications</span>
                    <a href="#" class="text-xs text-primary-600 hover:underline dark:text-primary-400">Mark all read</a>
                </div>
                <div class="divide-y divide-surface-100 dark:divide-surface-700 max-h-72 overflow-y-auto">
                    @foreach([
                        ['title'=>'New user registered','time'=>'2 min ago','icon'=>'👤','read'=>false],
                        ['title'=>'Server CPU usage high','time'=>'15 min ago','icon'=>'⚠️','read'=>false],
                        ['title'=>'Monthly report ready','time'=>'1 hr ago','icon'=>'📊','read'=>true],
                    ] as $notif)
                    <a href="#" class="flex items-start gap-3 px-4 py-3 hover:bg-surface-50 dark:hover:bg-surface-700/50 transition-colors {{ !$notif['read'] ? 'bg-primary-50/30 dark:bg-primary-950/20' : '' }}">
                        <span class="text-xl flex-shrink-0 mt-0.5">{{ $notif['icon'] }}</span>
                        <div class="flex-1 min-w-0">
                            <p class="text-sm text-surface-900 dark:text-surface-100 {{ !$notif['read'] ? 'font-medium' : '' }}">{{ $notif['title'] }}</p>
                            <p class="text-xs text-surface-400 mt-0.5">{{ $notif['time'] }}</p>
                        </div>
                        @if(!$notif['read'])
                            <span class="mt-2 h-2 w-2 rounded-full bg-primary-500 flex-shrink-0"></span>
                        @endif
                    </a>
                    @endforeach
                </div>
                <div class="px-4 py-3 border-t border-surface-200 dark:border-surface-700">
                    <a href="{{ route('admin.notifications') }}" class="text-sm text-primary-600 hover:underline dark:text-primary-400">View all notifications</a>
                </div>
            </div>
        </div>

        {{-- User menu --}}
        <div x-data="dropdown()" class="relative">
            <button @click="toggle()" class="flex items-center gap-2 pl-1 pr-3 py-1.5 rounded-xl hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors duration-200">
                <x-utility.avatar
                    :src="auth()->user()?->avatar ?? null"
                    :name="auth()->user()?->name ?? 'User'"
                    size="sm"
                />
                <div class="hidden sm:block text-left">
                    <p class="text-sm font-medium text-surface-900 dark:text-surface-100 leading-none">
                        {{ auth()->user()?->name ?? 'User' }}
                    </p>
                    <p class="text-xs text-surface-400 mt-0.5">Administrator</p>
                </div>
                <svg class="w-4 h-4 text-surface-400 hidden sm:block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                </svg>
            </button>

            <div
                x-show="open"
                @click.outside="close()"
                x-transition
                class="dropdown-menu right-0 w-52"
            >
                <div class="px-4 py-3 border-b border-surface-200 dark:border-surface-700">
                    <p class="text-sm font-medium text-surface-900 dark:text-surface-100">{{ auth()->user()?->name ?? 'User' }}</p>
                    <p class="text-xs text-surface-500 dark:text-surface-400 truncate">{{ auth()->user()?->email ?? 'user@example.com' }}</p>
                </div>
                <a href="{{ route('admin.profile') }}" class="dropdown-item">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                    Profile
                </a>
                <a href="{{ route('admin.settings') }}" class="dropdown-item">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                    Settings
                </a>
                <div class="border-t border-surface-200 dark:border-surface-700 mt-1 pt-1">
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button type="submit" class="dropdown-item danger w-full text-left">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
                            Sign out
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</header>