openmonetis/components/notificacoes/notification-bell.tsx

"use client";

import {
	RiAlertFill,
	RiCheckboxCircleFill,
	RiNotification3Line,
	RiTimeLine,
} from "@remixicon/react";
import { useState } from "react";
import { Badge } from "@/components/ui/badge";
import { buttonVariants } from "@/components/ui/button";
import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuItem,
	DropdownMenuLabel,
	DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
	Empty,
	EmptyDescription,
	EmptyMedia,
	EmptyTitle,
} from "@/components/ui/empty";
import {
	Tooltip,
	TooltipContent,
	TooltipTrigger,
} from "@/components/ui/tooltip";
import type { DashboardNotification } from "@/lib/dashboard/notifications";
import { cn } from "@/lib/utils/ui";

type NotificationBellProps = {
	notifications: DashboardNotification[];
	totalCount: number;
};

function formatDate(dateString: string): string {
	// Parse manual para evitar problemas de timezone
	// Formato esperado: "YYYY-MM-DD"
	const [year, month, day] = dateString.split("-").map(Number);

	// Criar data em UTC usando os valores diretos
	const date = new Date(Date.UTC(year, month - 1, day));

	return date.toLocaleDateString("pt-BR", {
		day: "2-digit",
		month: "short",
		timeZone: "UTC", // Força uso de UTC para evitar conversão de timezone
	});
}

function formatCurrency(amount: number): string {
	return new Intl.NumberFormat("pt-BR", {
		style: "currency",
		currency: "BRL",
	}).format(amount);
}

export function NotificationBell({
	notifications,
	totalCount,
}: NotificationBellProps) {
	const [open, setOpen] = useState(false);
	const displayCount = totalCount > 99 ? "99+" : totalCount.toString();
	const hasNotifications = totalCount > 0;

	return (
		<DropdownMenu open={open} onOpenChange={setOpen}>
			<Tooltip>
				<TooltipTrigger asChild>
					<DropdownMenuTrigger asChild>
						<button
							type="button"
							aria-label="Notificações"
							aria-expanded={open}
							data-has-notifications={hasNotifications}
							className={cn(
								buttonVariants({ variant: "ghost", size: "icon-sm" }),
								"group relative text-muted-foreground transition-all duration-200",
								"hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary/40",
								"data-[state=open]:bg-accent/60 data-[state=open]:text-foreground border",
							)}
						>
							<RiNotification3Line
								className={cn(
									"size-4 transition-transform duration-200",
									open ? "scale-90" : "scale-100",
								)}
							/>
							{hasNotifications && (
								<>
									<span
										aria-hidden
										className="absolute -right-1.5 -top-1.5 inline-flex min-h-5 min-w-5 items-center justify-center rounded-full bg-destructive px-1 text-[10px] font-semibold text-destructive-foreground shadow-xs ring-2 ring-background"
									>
										{displayCount}
									</span>
									<span className="absolute -right-1.5 -top-1.5 size-5 animate-ping rounded-full bg-destructive/40" />
								</>
							)}
						</button>
					</DropdownMenuTrigger>
				</TooltipTrigger>
				<TooltipContent side="bottom" sideOffset={8}>
					Pagamentos para os próximos 5 dias.
				</TooltipContent>
			</Tooltip>
			<DropdownMenuContent
				align="end"
				sideOffset={12}
				className="w-80 max-h-[500px] overflow-hidden rounded-lg border border-border/60 bg-popover/95 p-0 shadow-lg backdrop-blur-lg supports-backdrop-filter:backdrop-blur-md"
			>
				<DropdownMenuLabel className="sticky top-0 z-10 flex items-center justify-between gap-2 border-b border-border/60 bg-linear-to-b from-background/95 to-background/80 px-4 py-3 text-sm font-semibold">
					<span>Notificações | Próximos 5 dias.</span>
					{hasNotifications && (
						<Badge variant="outline" className="text-[10px] font-semibold">
							{totalCount} {totalCount === 1 ? "item" : "itens"}
						</Badge>
					)}
				</DropdownMenuLabel>
				{notifications.length === 0 ? (
					<div className="px-4 py-8">
						<Empty>
							<EmptyMedia>
								<RiCheckboxCircleFill color="green" />
							</EmptyMedia>
							<EmptyTitle>Nenhuma notificação</EmptyTitle>
							<EmptyDescription>
								Você está em dia com seus pagamentos!
							</EmptyDescription>
						</Empty>
					</div>
				) : (
					<div className="max-h-[400px] overflow-y-auto py-2">
						{notifications.map((notification) => (
							<DropdownMenuItem
								key={notification.id}
								className={cn(
									"group relative flex flex-col gap-2 rounded-none border-b border-dashed last:border-0 p-2.5",
									"cursor-default focus:bg-transparent data-highlighted:bg-accent/60",
								)}
							>
								<div className="flex items-start justify-between w-full gap-2">
									<div className="flex items-start gap-2 flex-1 min-w-0">
										<div
											className={cn(
												"flex items-center justify-center text-sm transition-all duration-200",
											)}
										>
											{notification.status === "overdue" ? (
												<RiAlertFill color="red" className="size-4" />
											) : (
												<RiTimeLine className="size-4" />
											)}
										</div>
										<div className="flex-1 min-w-0">
											<div className="flex flex-wrap items-center gap-2">
												<span className="truncate text-sm font-medium">
													{notification.name}
												</span>
												<Badge
													variant="outline"
													className="px-1.5 py-0  tracking-wide text-muted-foreground"
												>
													{notification.type === "invoice"
														? "Cartão"
														: "Boleto"}
												</Badge>
											</div>
											<div className="mt-1 flex flex-col items-start gap-2 text-xs text-muted-foreground">
												<span className="font-no">
													{notification.status === "overdue"
														? "Venceu em "
														: "Vence em "}
													{formatDate(notification.dueDate)}
												</span>

												{notification.showAmount && notification.amount > 0 && (
													<span className="font-medium">
														{formatCurrency(notification.amount)}
													</span>
												)}
											</div>
										</div>
									</div>
									<Badge
										variant={
											notification.status === "overdue" ? "destructive" : "info"
										}
										className={cn("shrink-0 px-2 py-0.5 tracking-wide")}
									>
										{notification.status === "overdue"
											? "Atrasado"
											: "Em breve"}
									</Badge>
								</div>
							</DropdownMenuItem>
						))}
					</div>
				)}
			</DropdownMenuContent>
		</DropdownMenu>
	);
}