import { Bell, CheckCheck, RefreshCw, X } from 'lucide-react';
import { useState } from 'react';
import { Button } from '@/components/ui/button';
import {
    Sheet,
    SheetClose,
    SheetContent,
    SheetHeader,
    SheetTitle,
    SheetTrigger,
} from '@/components/ui/sheet';
import { useNotifications } from '@/hooks/use-notifications';
import { cn } from '@/lib/utils';
import { NotificationFilters } from './notification-filters';
import { NotificationList } from './notification-list';
import { NotificationSkeleton } from './notification-skeleton';

export function NotificationDrawer() {
    const [open, setOpen] = useState(false);
    const {
        notifications,
        unreadCount,
        categoryCounts,
        isLoading,
        activeFilter,
        setActiveFilter,
        markRead,
        markAllRead,
        refresh,
    } = useNotifications();

    return (
        <Sheet open={open} onOpenChange={setOpen}>
            <SheetTrigger asChild>
                <button
                    type="button"
                    className="relative flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                    aria-label="Open notifications"
                >
                    <Bell className="h-[18px] w-[18px]" />
                    {unreadCount > 0 && (
                        <span className="absolute -right-1 -top-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-red-500 px-1 text-[10px] font-bold leading-none text-white ring-2 ring-background">
                            {unreadCount > 99 ? '99+' : unreadCount}
                        </span>
                    )}
                </button>
            </SheetTrigger>

            <SheetContent
                side="right"
                showCloseButton={false}
                className="flex w-full flex-col gap-0 p-0 sm:max-w-md"
            >
                {/* ── Header ── */}
                <SheetHeader className="flex-row items-center justify-between space-y-0 border-b px-5 py-4">
                    <div className="flex items-center gap-3">
                        <div className="flex size-8 items-center justify-center rounded-lg bg-primary/10">
                            <Bell className="size-4 text-primary" />
                        </div>
                        <div>
                            <SheetTitle className="text-sm font-semibold leading-none">
                                Notifications
                            </SheetTitle>
                            {unreadCount > 0 ? (
                                <p className="mt-0.5 text-xs text-muted-foreground">
                                    {unreadCount} unread
                                </p>
                            ) : (
                                <p className="mt-0.5 text-xs text-muted-foreground">
                                    All caught up
                                </p>
                            )}
                        </div>
                    </div>

                    <div className="flex items-center gap-1">
                        <Button
                            variant="ghost"
                            size="icon-sm"
                            onClick={refresh}
                            title="Refresh"
                            aria-label="Refresh notifications"
                        >
                            <RefreshCw className={cn('h-4 w-4', isLoading && 'animate-spin')} />
                        </Button>
                        {unreadCount > 0 && (
                            <Button
                                variant="ghost"
                                size="icon-sm"
                                onClick={markAllRead}
                                title="Mark all as read"
                                aria-label="Mark all notifications as read"
                            >
                                <CheckCheck className="h-4 w-4" />
                            </Button>
                        )}
                        <SheetClose asChild>
                            <Button variant="ghost" size="icon-sm" aria-label="Close">
                                <X className="h-4 w-4" />
                            </Button>
                        </SheetClose>
                    </div>
                </SheetHeader>

                {/* ── Filter tabs ── */}
                <NotificationFilters
                    activeFilter={activeFilter}
                    categoryCounts={categoryCounts}
                    totalUnread={unreadCount}
                    onFilterChange={setActiveFilter}
                />

                {/* ── Notification list ── */}
                <div className="flex-1 overflow-y-auto">
                    {isLoading ? (
                        <NotificationSkeleton />
                    ) : (
                        <NotificationList
                            notifications={notifications}
                            activeFilter={activeFilter}
                            onMarkRead={markRead}
                            onClose={() => setOpen(false)}
                        />
                    )}
                </div>

                {/* ── Footer ── */}
                <div className="border-t bg-muted/20 px-5 py-3">
                    <p className="text-center text-[11px] text-muted-foreground">
                        Last 60 notifications · Auto-refreshes every 30s
                    </p>
                </div>
            </SheetContent>
        </Sheet>
    );
}