import { usePage } from '@inertiajs/react';
import { GlobalSearch } from '@/components/global-search';
import { NotificationDrawer } from '@/components/notifications/notification-drawer';
import { ThemeToggle } from '@/components/theme-toggle';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Separator } from '@/components/ui/separator';
import { SidebarTrigger } from '@/components/ui/sidebar';
import { UserMenuContent } from '@/components/user-menu-content';
import { useInitials } from '@/hooks/use-initials';
import type { Auth, BreadcrumbItem } from '@/types';

export function AppSidebarHeader({
    breadcrumbs: _breadcrumbs = [],
}: {
    breadcrumbs?: BreadcrumbItem[];
}) {
    const { auth } = usePage<{ auth: Auth }>().props;
    const getInitials = useInitials();
    const user = auth.user;

    return (
        <header className="flex h-14 shrink-0 items-center gap-2 border-b border-sidebar-border/50 px-4 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
            {/* Left: toggle + separator + search */}
            <SidebarTrigger className="-ml-1 shrink-0" />
            <Separator orientation="vertical" className="h-5 shrink-0 opacity-50" />
            <div className="min-w-0 flex-1">
                <GlobalSearch />
            </div>

            {/* Right: actions */}
            <div className="flex shrink-0 items-center gap-1">
                <ThemeToggle />
                <NotificationDrawer />
                {user && (
                    <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                            <button className="ml-1 flex items-center gap-2 rounded-md px-2 py-1.5 transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
                                <Avatar className="size-8 shrink-0 overflow-hidden rounded-full">
                                    <AvatarImage src={user.avatar} alt={user.name} />
                                    <AvatarFallback className="rounded-full bg-neutral-200 text-xs text-black dark:bg-neutral-700 dark:text-white">
                                        {getInitials(user.name)}
                                    </AvatarFallback>
                                </Avatar>
                                <div className="hidden max-w-[140px] flex-col text-left leading-tight sm:flex">
                                    <span className="truncate text-sm font-semibold">{user.name}</span>
                                    <span className="truncate text-xs capitalize text-muted-foreground">{user.role ?? 'User'}</span>
                                </div>
                            </button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent className="w-56" align="end">
                            <UserMenuContent user={user} />
                        </DropdownMenuContent>
                    </DropdownMenu>
                )}
            </div>
        </header>
    );
}