import { Link, usePage } from "@inertiajs/react";
import type { PageProps } from "@inertiajs/core"; // <-- Tambahkan import ini
import { Bell, ChevronDown, Menu, Search } from "lucide-react";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { SidebarTrigger } from "@/components/ui/sidebar";
import { Input } from "@/components/ui/input";
import { UserMenuContent } from "@/components/user-menu-content";
import { useInitials } from "@/hooks/use-initials";
import type { BreadcrumbItem as BreadcrumbItemType } from "@/types";
import { Typewriter } from "./crm/global-animasiteks";

// Extend SharedProps dari PageProps
interface SharedProps extends PageProps {
    auth?: {
        user?: {
            name?: string;
            email?: string;
            avatar?: string;
            is_platform_admin?: boolean;
            role?: {
                slug?: string;
                name?: string;
                permissions?: Record<string, boolean> | null;
            } | null;
        };
    };
    notifications?: {
        unread_count?: number;
    };
    tenant?: {
        nama?: string;
    } | null;
}

export function AppSidebarHeader({
    breadcrumbs = [],
}: {
    breadcrumbs?: BreadcrumbItemType[];
}) {
    const getInitials = useInitials();

    // Sekarang usePage<SharedProps>() tidak akan melempar error
    const { auth, notifications, tenant } = usePage<SharedProps>().props;
    const user = auth?.user;

    return (
        <header className="sticky top-0 z-30 flex h-16 shrink-0 items-center gap-3 border-b border-slate-200/80 bg-white/90 px-4 backdrop-blur-xl md:px-6">
            <SidebarTrigger className="size-9 rounded-lg text-slate-500 hover:bg-slate-100 hover:text-slate-800" />
            <div className="hidden h-6 w-px bg-slate-200 md:block" />
            <div className="relative hidden w-full max-w-150 md:block uppercase font-bold">
                <Typewriter text={tenant?.nama || "Perusahaan"} speed={120} />
            </div>
            <div className="ml-auto flex items-center gap-2">
                <Button
                    variant="ghost"
                    size="icon"
                    className="relative size-9 rounded-lg text-slate-500 hover:bg-slate-100 hover:text-slate-800"
                >
                    <Bell className="size-4.75" />
                    {(notifications?.unread_count ?? 0) > 0 && (
                        <span className="absolute right-1 top-1 flex size-4 items-center justify-center rounded-full bg-red-500 text-[9px] font-bold text-white">
                            {Math.min(notifications?.unread_count ?? 0, 9)}
                        </span>
                    )}
                </Button>
                <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                        <Button
                            variant="ghost"
                            className="h-auto gap-2 rounded-xl px-1.5 py-1.5 hover:bg-slate-50"
                        >
                            <Avatar className="size-9 border border-slate-200">
                                <AvatarImage
                                    src={user?.avatar}
                                    alt={user?.name}
                                />
                                <AvatarFallback className="bg-blue-50 text-xs font-semibold text-blue-700">
                                    {getInitials(user?.name ?? "")}
                                </AvatarFallback>
                            </Avatar>
                            <span className="hidden text-left lg:block">
                                <span className="block max-w-32.5 truncate text-xs font-semibold text-slate-800">
                                    {user?.name || "User"}
                                </span>
                                <span className="block max-w-32.5 truncate text-[10px] text-slate-400">
                                    {user?.role?.name || "User"}
                                </span>
                            </span>
                            <ChevronDown className="hidden size-4 text-slate-400 lg:block" />
                        </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent className="w-60" align="end">
                        {user && <UserMenuContent user={user as never} />}
                    </DropdownMenuContent>
                </DropdownMenu>
            </div>
        </header>
    );
}