openmonetis/components/lancamentos/dialogs/anticipate-installments-dialog/installment-selection-table.tsx

"use client";

import { format } from "date-fns";
import { ptBR } from "date-fns/locale";
import MoneyValues from "@/components/money-values";
import { Badge } from "@/components/ui/badge";
import { Checkbox } from "@/components/ui/checkbox";
import {
	Table,
	TableBody,
	TableCell,
	TableHead,
	TableHeader,
	TableRow,
} from "@/components/ui/table";
import type { EligibleInstallment } from "@/lib/installments/anticipation-types";
import { formatCurrentInstallment } from "@/lib/installments/utils";
import { cn } from "@/lib/utils/ui";

interface InstallmentSelectionTableProps {
	installments: EligibleInstallment[];
	selectedIds: string[];
	onSelectionChange: (ids: string[]) => void;
}

export function InstallmentSelectionTable({
	installments,
	selectedIds,
	onSelectionChange,
}: InstallmentSelectionTableProps) {
	const toggleSelection = (id: string) => {
		const newSelection = selectedIds.includes(id)
			? selectedIds.filter((selectedId) => selectedId !== id)
			: [...selectedIds, id];
		onSelectionChange(newSelection);
	};

	const toggleAll = () => {
		if (selectedIds.length === installments.length && installments.length > 0) {
			onSelectionChange([]);
		} else {
			onSelectionChange(installments.map((inst) => inst.id));
		}
	};

	const formatPeriod = (period: string) => {
		const [year, month] = period.split("-");
		const date = new Date(Number(year), Number(month) - 1);
		return format(date, "MMM/yyyy", { locale: ptBR });
	};

	const formatDate = (date: Date | null) => {
		if (!date) return "—";
		return format(date, "dd/MM/yyyy", { locale: ptBR });
	};

	if (installments.length === 0) {
		return (
			<div className="rounded-lg border border-dashed p-8 text-center">
				<p className="text-sm text-muted-foreground">
					Nenhuma parcela elegível para antecipação encontrada.
				</p>
				<p className="mt-1 text-xs text-muted-foreground">
					Todas as parcelas desta compra já foram pagas ou antecipadas.
				</p>
			</div>
		);
	}

	return (
		<div className="overflow-hidden rounded-lg border">
			<Table>
				<TableHeader>
					<TableRow>
						<TableHead className="w-12">
							<Checkbox
								checked={
									selectedIds.length === installments.length &&
									installments.length > 0
								}
								onCheckedChange={toggleAll}
								aria-label="Selecionar todas as parcelas"
							/>
						</TableHead>
						<TableHead>Parcela</TableHead>
						<TableHead>Período</TableHead>
						<TableHead>Vencimento</TableHead>
						<TableHead className="text-right">Valor</TableHead>
					</TableRow>
				</TableHeader>
				<TableBody>
					{installments.map((inst) => {
						const isSelected = selectedIds.includes(inst.id);
						return (
							<TableRow
								key={inst.id}
								className={cn(
									"cursor-pointer transition-colors",
									isSelected && "bg-muted/50",
								)}
								onClick={() => toggleSelection(inst.id)}
							>
								<TableCell onClick={(e) => e.stopPropagation()}>
									<Checkbox
										checked={isSelected}
										onCheckedChange={() => toggleSelection(inst.id)}
										aria-label={`Selecionar parcela ${inst.currentInstallment}`}
									/>
								</TableCell>
								<TableCell>
									<Badge variant="outline">
										{formatCurrentInstallment(
											inst.currentInstallment ?? 0,
											inst.installmentCount ?? 0,
										)}
									</Badge>
								</TableCell>
								<TableCell className="font-medium">
									{formatPeriod(inst.period)}
								</TableCell>
								<TableCell className="text-muted-foreground">
									{formatDate(inst.dueDate)}
								</TableCell>
								<TableCell className="text-right font-semibold tabular-nums">
									<MoneyValues amount={Number(inst.amount)} />
								</TableCell>
							</TableRow>
						);
					})}
				</TableBody>
			</Table>

			{selectedIds.length > 0 && (
				<div className="border-t bg-muted/20 px-4 py-3">
					<div className="flex items-center justify-between text-sm">
						<span className="text-muted-foreground">
							{selectedIds.length}{" "}
							{selectedIds.length === 1
								? "parcela selecionada"
								: "parcelas selecionadas"}
						</span>
						<span className="font-semibold">
							Total:{" "}
							<MoneyValues
								amount={installments
									.filter((inst) => selectedIds.includes(inst.id))
									.reduce((sum, inst) => sum + Number(inst.amount), 0)}
							/>
						</span>
					</div>
				</div>
			)}
		</div>
	);
}