import { SidebarTrigger } from '@/components/ui/sidebar';
import { type BreadcrumbItem as BreadcrumbItemType } from '@/types';
import { Link } from '@inertiajs/react';
import { Home, ChevronRight, Bell } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { AdminUserMenu } from '@/components/admin-user-menu';
import {
    Breadcrumb,
    BreadcrumbItem,
    BreadcrumbLink,
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
} from '@/components/ui/breadcrumb';

interface AdminHeaderProps {
    readonly breadcrumbs?: BreadcrumbItemType[];
}

export default function AdminHeader({ breadcrumbs = [] }: AdminHeaderProps) {
    return (
        <header className="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4">
            {/* Sidebar Toggle */}
            <SidebarTrigger className="-ml-2" />

            {/* Breadcrumbs */}
            <div className="flex flex-1 items-center gap-2">
                {breadcrumbs.length > 0 ? (
                    <Breadcrumb>
                        <BreadcrumbList>
                            <BreadcrumbItem>
                                <BreadcrumbLink asChild>
                                    <Link href="/admin">
                                        <Home className="h-4 w-4" />
                                    </Link>
                                </BreadcrumbLink>
                            </BreadcrumbItem>
                            {breadcrumbs.map((crumb) => (
                                <div key={crumb.href || crumb.title} className="flex items-center gap-2">
                                    <BreadcrumbSeparator>
                                        <ChevronRight className="h-4 w-4" />
                                    </BreadcrumbSeparator>
                                    <BreadcrumbItem>
                                        {crumb.href ? (
                                            <BreadcrumbLink asChild>
                                                <Link href={crumb.href}>{crumb.title}</Link>
                                            </BreadcrumbLink>
                                        ) : (
                                            <BreadcrumbPage>{crumb.title}</BreadcrumbPage>
                                        )}
                                    </BreadcrumbItem>
                                </div>
                            ))}
                        </BreadcrumbList>
                    </Breadcrumb>
                ) : (
                    <div className="text-sm font-medium text-muted-foreground">Admin Dashboard</div>
                )}
            </div>

            {/* Right side actions */}
            <div className="flex items-center gap-2">
                {/* Notifications */}
                <Button variant="ghost" size="icon" className="relative">
                    <Bell className="h-5 w-5" />
                    <span className="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-xs text-white">
                        0
                    </span>
                </Button>

                {/* User Profile */}
                <AdminUserMenu />
            </div>
        </header>
    );
}