openmonetis/src/features/budgets/components/budgets-page.tsx

"use client";

import { RiAddFill, RiFileCopyLine, RiFundsLine } from "@remixicon/react";
import { useState } from "react";
import { toast } from "sonner";
import {
	deleteBudgetAction,
	duplicatePreviousMonthBudgetsAction,
} from "@/features/budgets/actions";
import { ConfirmActionDialog } from "@/shared/components/confirm-action-dialog";
import { EmptyState } from "@/shared/components/feedback/empty-state";
import { Button } from "@/shared/components/ui/button";
import { Card } from "@/shared/components/ui/card";
import { BudgetCard } from "./budget-card";
import { BudgetDialog } from "./budget-dialog";
import type { Budget, BudgetCategory } from "./types";

interface BudgetsPageProps {
	budgets: Budget[];
	categories: BudgetCategory[];
	selectedPeriod: string;
}

export function BudgetsPage({
	budgets,
	categories,
	selectedPeriod,
}: BudgetsPageProps) {
	const [editOpen, setEditOpen] = useState(false);
	const [selectedBudget, setSelectedBudget] = useState<Budget | null>(null);
	const [removeOpen, setRemoveOpen] = useState(false);
	const [budgetToRemove, setBudgetToRemove] = useState<Budget | null>(null);
	const [duplicateOpen, setDuplicateOpen] = useState(false);

	const hasBudgets = budgets.length > 0;

	const handleEdit = (budget: Budget) => {
		setSelectedBudget(budget);
		setEditOpen(true);
	};

	const handleEditOpenChange = (open: boolean) => {
		setEditOpen(open);
		if (!open) {
			setSelectedBudget(null);
		}
	};

	const handleRemoveRequest = (budget: Budget) => {
		setBudgetToRemove(budget);
		setRemoveOpen(true);
	};

	const handleRemoveOpenChange = (open: boolean) => {
		setRemoveOpen(open);
		if (!open) {
			setBudgetToRemove(null);
		}
	};

	const handleRemoveConfirm = async () => {
		if (!budgetToRemove) {
			return;
		}

		const result = await deleteBudgetAction({ id: budgetToRemove.id });

		if (result.success) {
			toast.success(result.message);
			return;
		}

		toast.error(result.error);
		throw new Error(result.error);
	};

	const handleDuplicateConfirm = async () => {
		const result = await duplicatePreviousMonthBudgetsAction({
			period: selectedPeriod,
		});

		if (result.success) {
			toast.success(result.message);
			setDuplicateOpen(false);
			return;
		}

		toast.error(result.error);
		throw new Error(result.error);
	};

	const removeTitle = budgetToRemove
		? `Remover orçamento de "${
				budgetToRemove.category?.name ?? "categoria removida"
			}"?`
		: "Remover orçamento?";

	const emptyDescription =
		categories.length === 0
			? "Cadastre uma categoria de despesa para começar a planejar seus gastos."
			: "Crie seu primeiro orçamento para controlar os gastos por categoria.";

	return (
		<>
			<div className="flex w-full flex-col gap-6">
				<div className="flex flex-col gap-2 sm:flex-row sm:gap-3">
					<BudgetDialog
						mode="create"
						categories={categories}
						defaultPeriod={selectedPeriod}
						trigger={
							<Button
								disabled={categories.length === 0}
								className="w-full sm:w-auto"
							>
								<RiAddFill className="size-4" />
								Novo orçamento
							</Button>
						}
					/>
					<Button
						variant="outline"
						disabled={categories.length === 0}
						onClick={() => setDuplicateOpen(true)}
						className="w-full sm:w-auto"
					>
						<RiFileCopyLine className="size-4" />
						Copiar orçamentos do último mês
					</Button>
				</div>

				{hasBudgets ? (
					<div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
						{budgets.map((budget, index) => (
							<BudgetCard
								key={budget.id}
								budget={budget}
								onEdit={handleEdit}
								onRemove={handleRemoveRequest}
							/>
						))}
					</div>
				) : (
					<Card className="flex min-h-[50vh] w-full items-center justify-center py-12">
						<EmptyState
							media={<RiFundsLine className="size-6 text-primary" />}
							title="Nenhum orçamento cadastrado"
							description={emptyDescription}
						/>
					</Card>
				)}
			</div>

			<BudgetDialog
				mode="update"
				budget={selectedBudget ?? undefined}
				categories={categories}
				defaultPeriod={selectedPeriod}
				open={editOpen && !!selectedBudget}
				onOpenChange={handleEditOpenChange}
			/>

			<ConfirmActionDialog
				open={removeOpen && !!budgetToRemove}
				onOpenChange={handleRemoveOpenChange}
				title={removeTitle}
				description="Esta ação remove o limite configurado para a categoria selecionada."
				confirmLabel="Remover"
				pendingLabel="Removendo..."
				confirmVariant="destructive"
				onConfirm={handleRemoveConfirm}
			/>

			<ConfirmActionDialog
				open={duplicateOpen}
				onOpenChange={setDuplicateOpen}
				title="Copiar orçamentos do último mês?"
				description="Isso copiará os limites definidos no mês anterior para as categorias que ainda não possuem orçamento neste mês."
				confirmLabel="Copiar"
				pendingLabel="Copiando..."
				onConfirm={handleDuplicateConfirm}
			/>
		</>
	);
}