openmonetis/components/pagadores/details/pagador-payment-method-cards.tsx

import { RiBarcodeLine } from "@remixicon/react";
import MoneyValues from "@/components/money-values";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { WidgetEmptyState } from "@/components/widget-empty-state";
import type { PagadorBoletoStats } from "@/lib/pagadores/details";
import { cn } from "@/lib/utils/ui";

type PagadorBoletoCardProps = {
	stats: PagadorBoletoStats;
};

export function PagadorBoletoCard({ stats }: PagadorBoletoCardProps) {
	const total = stats.totalAmount;
	const paidPercent =
		total > 0 ? Math.round((stats.paidAmount / total) * 100) : 0;
	const pendingPercent =
		total > 0 ? Math.round((stats.pendingAmount / total) * 100) : 0;

	return (
		<Card className="border">
			<CardHeader>
				<CardTitle className="text-xl font-semibold">Boletos</CardTitle>
				<p className="text-sm text-muted-foreground">
					Totais por status considerando o período atual.
				</p>
			</CardHeader>
			<CardContent className="space-y-4 pt-2">
				{total === 0 ? (
					<WidgetEmptyState
						icon={<RiBarcodeLine className="size-6 text-muted-foreground" />}
						title="Nenhum lançamento com boleto"
						description="Quando houver despesas registradas com boleto, elas aparecerão aqui."
					/>
				) : (
					<>
						<div>
							<span className="text-xs uppercase tracking-wide text-muted-foreground">
								Total de boletos
							</span>
							<MoneyValues
								amount={total}
								className="block text-2xl font-semibold text-foreground"
							/>
						</div>

						<div className="space-y-2 rounded-xl border border-dashed p-3">
							<StatusRow
								label="Pagos"
								amount={stats.paidAmount}
								count={stats.paidCount}
								percent={paidPercent}
								tone="success"
							/>
							<StatusRow
								label="Pendentes"
								amount={stats.pendingAmount}
								count={stats.pendingCount}
								percent={pendingPercent}
								tone="warning"
							/>
						</div>
					</>
				)}
			</CardContent>
		</Card>
	);
}

type StatusRowProps = {
	label: string;
	amount: number;
	count: number;
	percent: number;
	tone: "success" | "warning";
};

function StatusRow({ label, amount, count, percent, tone }: StatusRowProps) {
	const clampedPercent = Math.min(Math.max(percent, 0), 100);
	return (
		<div className="space-y-1 rounded-lg bg-muted/40 p-3">
			<div className="flex items-center justify-between text-sm font-semibold">
				<span>{label}</span>
				<span className="text-muted-foreground">{count} registros</span>
			</div>
			<MoneyValues
				amount={amount}
				className={cn(
					"text-xl font-semibold",
					tone === "success" ? "text-success" : "text-warning",
				)}
			/>
			<div className="flex items-center justify-between text-xs text-muted-foreground">
				<span>{clampedPercent}% do total</span>
				<div className="h-1.5 w-1/2 rounded-full bg-border/80">
					<div
						className={cn(
							"h-full rounded-full",
							tone === "success" ? "bg-success" : "bg-warning",
						)}
						style={{ width: `${clampedPercent}%` }}
					/>
				</div>
			</div>
		</div>
	);
}