openmonetis/components/pre-lancamentos/inbox-card.tsx

"use client";

import {
	RiCheckLine,
	RiDeleteBinLine,
	RiEyeLine,
	RiMoreLine,
} from "@remixicon/react";
import { formatDistanceToNow } from "date-fns";
import { ptBR } from "date-fns/locale";
import MoneyValues from "@/components/money-values";
import { Button } from "@/components/ui/button";
import {
	Card,
	CardAction,
	CardContent,
	CardFooter,
	CardHeader,
	CardTitle,
} from "@/components/ui/card";
import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuItem,
	DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import type { InboxItem } from "./types";

interface InboxCardProps {
	item: InboxItem;
	onProcess: (item: InboxItem) => void;
	onDiscard: (item: InboxItem) => void;
	onViewDetails: (item: InboxItem) => void;
}

export function InboxCard({
	item,
	onProcess,
	onDiscard,
	onViewDetails,
}: InboxCardProps) {
	const amount = item.parsedAmount ? parseFloat(item.parsedAmount) : null;

	// O timestamp vem do app Android em horário local mas salvo como UTC
	// Precisamos interpretar o valor UTC como se fosse horário de Brasília
	const rawDate = new Date(item.notificationTimestamp);

	// Ajusta adicionando o offset de Brasília (3 horas) para corrigir o cálculo do "há X tempo"
	const BRASILIA_OFFSET_MS = 3 * 60 * 60 * 1000;
	const notificationDate = new Date(rawDate.getTime() + BRASILIA_OFFSET_MS);

	const timeAgo = formatDistanceToNow(notificationDate, {
		addSuffix: true,
		locale: ptBR,
	});

	// Para exibição, usa UTC pois o valor já representa horário de Brasília
	const _formattedTime = new Intl.DateTimeFormat("pt-BR", {
		day: "2-digit",
		month: "short",
		hour: "2-digit",
		minute: "2-digit",
		timeZone: "UTC",
	}).format(rawDate);

	return (
		<Card className="flex flex-col gap-0 py-0 h-54">
			{/* Header com app e valor */}
			<CardHeader className="pt-4">
				<div className="flex items-center justify-between">
					<CardTitle className="text-md">
						{item.sourceAppName || item.sourceApp}
						{"  "}
						<span className="text-xs font-normal text-muted-foreground">
							{timeAgo}
						</span>
					</CardTitle>
					{amount !== null && (
						<MoneyValues amount={amount} className="text-sm" />
					)}
				</div>

				<CardAction>
					<DropdownMenu>
						<DropdownMenuTrigger asChild>
							<Button
								variant="ghost"
								size="icon"
								className="size-7 -mr-2 -mt-1"
							>
								<RiMoreLine className="size-4" />
							</Button>
						</DropdownMenuTrigger>
						<DropdownMenuContent align="end">
							<DropdownMenuItem onClick={() => onViewDetails(item)}>
								<RiEyeLine className="mr-2 size-4" />
								Ver detalhes
							</DropdownMenuItem>
							<DropdownMenuItem onClick={() => onProcess(item)}>
								<RiCheckLine className="mr-2 size-4" />
								Processar
							</DropdownMenuItem>
							<DropdownMenuItem
								onClick={() => onDiscard(item)}
								className="text-destructive"
							>
								<RiDeleteBinLine className="mr-2 size-4" />
								Descartar
							</DropdownMenuItem>
						</DropdownMenuContent>
					</DropdownMenu>
				</CardAction>
			</CardHeader>

			{/* Conteúdo da notificação */}
			<CardContent className="flex-1 py-2">
				{item.originalTitle && (
					<p className="mb-1 text-sm font-bold">{item.originalTitle}</p>
				)}
				<p className="whitespace-pre-wrap text-sm text-muted-foreground line-clamp-4">
					{item.originalText}
				</p>
			</CardContent>

			{/* Botões de ação */}
			<CardFooter className="gap-2 pt-3 pb-4">
				<Button size="sm" className="flex-1" onClick={() => onProcess(item)}>
					<RiCheckLine className="mr-1.5 size-4" />
					Processar
				</Button>
				<Button
					size="sm"
					variant="outline"
					onClick={() => onDiscard(item)}
					className="text-muted-foreground hover:text-destructive hover:border-destructive"
				>
					<RiDeleteBinLine className="size-4" />
				</Button>
			</CardFooter>
		</Card>
	);
}