import { Link, router, usePage } from '@inertiajs/react';
import { Bell, Inbox, MessageSquareText } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { index as messagesIndex, show as messagesShow } from '@/routes/admin/messages';

type NotificationItem = {
    id: number;
    name: string;
    subject: string | null;
    message: string;
    created_at_human: string | null;
};

type NotificationsProp = {
    unread_count: number;
    items: NotificationItem[];
} | null;

/**
 * Notifikasi pesan masuk (modul Messages) di header admin — ikon bel dengan
 * badge jumlah belum dibaca + dropdown daftar pesan terbaru. Klik item membuka
 * detail pesan (otomatis ditandai dibaca server-side).
 */
export function MessagesNotification() {
    const { notifications } = usePage().props as { notifications?: NotificationsProp };
    const unreadCount = notifications?.unread_count ?? 0;
    const items = notifications?.items ?? [];

    return (
        <DropdownMenu>
            <DropdownMenuTrigger asChild>
                <Button
                    type="button"
                    variant="ghost"
                    size="icon"
                    className="relative size-9"
                    aria-label="Notifikasi pesan"
                >
                    <Bell className="size-5" />
                    {unreadCount > 0 && (
                        <Badge
                            variant="destructive"
                            className="absolute -right-0.5 -top-0.5 size-4 min-w-4 rounded-full px-0 text-[10px] font-semibold leading-none ring-2 ring-background"
                        >
                            {unreadCount > 9 ? '9+' : unreadCount}
                        </Badge>
                    )}
                </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-80 rounded-lg">
                <DropdownMenuLabel className="flex items-center justify-between">
                    <span className="text-popover-foreground">Notifikasi</span>
                    {unreadCount > 0 && (
                        <span className="text-xs font-normal text-foreground dark:text-muted-foreground">
                            {unreadCount} belum dibaca
                        </span>
                    )}
                </DropdownMenuLabel>
                <DropdownMenuSeparator />

                {items.length > 0 ? (
                    <>
                        {items.map((item) => (
                            <DropdownMenuItem
                                key={item.id}
                                onClick={() => router.visit(messagesShow(item.id))}
                                className="group flex flex-col items-start gap-0.5 px-3 py-2.5 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground"
                            >
                                <div className="flex w-full items-center justify-between gap-2">
                                    <span className="text-sm font-medium group-data-[highlighted]:text-accent-foreground">{item.name}</span>
                                    <span className="shrink-0 text-xs text-muted-foreground group-data-[highlighted]:text-accent-foreground/80">
                                        {item.created_at_human}
                                    </span>
                                </div>
                                {item.subject && (
                                    <span className="text-xs font-medium text-foreground/80 group-data-[highlighted]:!text-white group-data-[highlighted]:text-accent-foreground">
                                        {item.subject}
                                    </span>
                                )}
                                <span className="line-clamp-1 w-full text-xs text-muted-foreground group-data-[highlighted]:text-accent-foreground/80">
                                    {item.message}
                                </span>
                            </DropdownMenuItem>
                        ))}
                        <DropdownMenuSeparator />
                        <DropdownMenuItem asChild>
                            <Link href={messagesIndex()}>
                                <MessageSquareText />
                                Lihat semua pesan
                            </Link>
                        </DropdownMenuItem>
                    </>
                ) : (
                    <>
                        <div className="flex flex-col items-center gap-2 px-3 py-6 text-center">
                            <Inbox className="size-6 text-muted-foreground" />
                            <p className="text-sm text-muted-foreground">Tidak ada pesan baru.</p>
                        </div>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem asChild>
                            <Link href={messagesIndex()}>
                                <MessageSquareText />
                                Lihat semua pesan
                            </Link>
                        </DropdownMenuItem>
                    </>
                )}
            </DropdownMenuContent>
        </DropdownMenu>
    );
}