'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from 'react';
import { Search, User, ChevronDown, Menu, Sun, Moon } from 'lucide-react';
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
import { adminPortalContainer } from '../lib/portal-container.js';
import { CommandPalette } from '../components/CommandPalette.js';
import { NotificationBell } from '../components/NotificationBell.js';
import { useTheme } from '../components/ThemeProvider.js';
import { LocaleSwitcher } from '../components/LocaleSwitcher.js';
export function Header({ onToggleSidebar, session, onNavigate, onLogout, pageActions, }) {
    const [showCommandPalette, setShowCommandPalette] = useState(false);
    const [searchQuery, setSearchQuery] = useState('');
    const { resolvedTheme, setTheme } = useTheme();
    const toggleTheme = () => {
        setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
    };
    const initial = session?.user?.name?.charAt(0)?.toUpperCase() ??
        session?.user?.email?.charAt(0)?.toUpperCase() ??
        'A';
    return (_jsxs(_Fragment, { children: [_jsxs("header", { className: "border-border bg-background flex h-14 items-center gap-3 border-b px-4", children: [_jsx("button", { onClick: onToggleSidebar, className: "hover:bg-accent rounded-lg p-2 transition-colors md:hidden", "aria-label": "Toggle sidebar", children: _jsx(Menu, { className: "text-foreground h-5 w-5", strokeWidth: 2 }) }), _jsxs("div", { className: "relative hidden flex-1 md:block", children: [_jsx(Search, { className: "text-muted-foreground pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2", "aria-hidden": true }), _jsx("input", { type: "text", placeholder: "Search...", "aria-label": "Search content", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), onFocus: () => setShowCommandPalette(true), onKeyDown: (e) => {
                                    if (e.key === 'Escape')
                                        e.target.blur();
                                }, className: "border-border bg-input-background text-foreground placeholder:text-muted-foreground focus:ring-ring h-9 w-full max-w-md rounded-lg border py-1.5 pr-14 pl-9 text-sm focus:border-transparent focus:ring-2 focus:outline-none" }), _jsx("span", { className: "border-border bg-background text-muted-foreground pointer-events-none absolute top-1/2 right-2 hidden -translate-y-1/2 rounded border px-1.5 py-0.5 font-mono text-[10px] sm:inline-flex", "aria-hidden": true, children: "\u2318K" })] }), _jsx("button", { onClick: () => setShowCommandPalette(true), className: "hover:bg-accent rounded-lg p-2 transition-colors md:hidden", "aria-label": "Search", children: _jsx(Search, { className: "text-muted-foreground h-5 w-5" }) }), _jsxs("div", { className: "ml-auto flex items-center gap-1.5", children: [_jsx(LocaleSwitcher, {}), _jsx("button", { onClick: toggleTheme, className: "hover:bg-accent rounded-lg p-2 transition-colors", "aria-label": resolvedTheme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode', children: resolvedTheme === 'dark' ? (_jsx(Sun, { className: "text-muted-foreground h-5 w-5" })) : (_jsx(Moon, { className: "text-muted-foreground h-5 w-5" })) }), _jsx(NotificationBell, {}), _jsxs(DropdownMenu.Root, { children: [_jsx(DropdownMenu.Trigger, { asChild: true, children: _jsxs("button", { className: "hover:bg-accent flex items-center gap-1.5 rounded-lg p-1 transition-colors", "aria-label": "Account menu", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-linear-to-br from-blue-500 to-purple-600", children: _jsx("span", { className: "text-sm font-medium text-white", children: initial }) }), _jsx(ChevronDown, { className: "text-muted-foreground hidden h-4 w-4 sm:block", "aria-hidden": true })] }) }), _jsx(DropdownMenu.Portal, { container: adminPortalContainer(), children: _jsxs(DropdownMenu.Content, { className: "bg-popover text-popover-foreground border-border z-50 min-w-[200px] rounded-lg border p-1 shadow-lg", align: "end", sideOffset: 5, children: [_jsxs("div", { className: "border-border border-b px-3 py-2", children: [_jsx("p", { className: "text-sm font-medium", children: session?.user?.name ?? 'Admin User' }), _jsx("p", { className: "text-muted-foreground text-xs", children: session?.user?.email ?? 'admin@example.com' })] }), _jsxs(DropdownMenu.Item, { className: "hover:bg-accent flex cursor-pointer items-center gap-2 rounded px-3 py-2 text-sm outline-none", onSelect: () => onNavigate('/profile'), children: [_jsx(User, { className: "h-4 w-4" }), "Profile"] }), _jsx(DropdownMenu.Item, { className: "hover:bg-accent flex cursor-pointer items-center gap-2 rounded px-3 py-2 text-sm outline-none", onSelect: () => onNavigate('/settings'), children: "Settings" }), _jsx(DropdownMenu.Separator, { className: "bg-border my-1 h-px" }), _jsx(DropdownMenu.Item, { className: "text-destructive hover:bg-accent flex cursor-pointer items-center gap-2 rounded px-3 py-2 text-sm outline-none", onSelect: () => onLogout?.(), children: "Logout" })] }) })] }), pageActions && (_jsx("div", { className: "border-border ml-2 hidden items-center gap-2 border-l pl-3 md:flex", children: pageActions }))] })] }), _jsx(CommandPalette, { open: showCommandPalette, onOpenChange: setShowCommandPalette, onNavigate: onNavigate })] }));
}
//# sourceMappingURL=Header.js.map