
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { formatCurrency } from "@/utils/locale";
import { TreasuryPlanDTO } from "@/types/treasury";
import { Check, CheckCircle2, Lock } from "lucide-react";
import { format } from "date-fns";

interface TreasuryPlanListProps {
    plans: TreasuryPlanDTO[];
    onApprove: (id: string) => void;
    isLoading?: boolean;
}

export function TreasuryPlanList({ plans, onApprove, isLoading }: TreasuryPlanListProps) {
    const getStatusBadge = (status: string) => {
        switch (status) {
            case 'APPROVED':
                return <Badge className="bg-green-500">Aprovado</Badge>;
            case 'DRAFT':
                return <Badge variant="secondary">Rascunho</Badge>;
            case 'CLOSED':
                return <Badge variant="outline">Fechado</Badge>;
            default:
                return <Badge>{status}</Badge>;
        }
    };

    const getProgressColor = (executed: number, ceiling: number) => {
        const percentage = (executed / ceiling) * 100;
        if (percentage > 90) return "text-red-500";
        if (percentage > 75) return "text-yellow-500";
        return "text-green-500";
    };

    return (
        <div className="rounded-md border">
            <Table>
                <TableHeader>
                    <TableRow>
                        <TableHead>Período</TableHead>
                        <TableHead>Status</TableHead>
                        <TableHead className="text-right">Teto Aprovado</TableHead>
                        <TableHead className="text-right">Executado</TableHead>
                        <TableHead className="text-right">Disponível</TableHead>
                        <TableHead className="text-right">Execução %</TableHead>
                        <TableHead>Aprovado Por</TableHead>
                        <TableHead className="text-right">Ações</TableHead>
                    </TableRow>
                </TableHeader>
                <TableBody>
                    {plans.length === 0 ? (
                        <TableRow>
                            <TableCell colSpan={8} className="text-center py-8 text-muted-foreground">
                                Nenhum plano de tesouraria encontrado.
                            </TableCell>
                        </TableRow>
                    ) : (
                        plans.map((plan) => {
                            const executionPercentage = plan.approvedCeiling > 0
                                ? (plan.executedAmount / plan.approvedCeiling) * 100
                                : 0;

                            return (
                                <TableRow key={plan.id}>
                                    <TableCell className="font-medium">
                                        {plan.fiscalYear} / {plan.referenceMonth.toString().padStart(2, '0')}
                                    </TableCell>
                                    <TableCell>{getStatusBadge(plan.status)}</TableCell>
                                    <TableCell className="text-right font-medium">
                                        {formatCurrency(plan.approvedCeiling)}
                                    </TableCell>
                                    <TableCell className="text-right">
                                        {formatCurrency(plan.executedAmount)}
                                    </TableCell>
                                    <TableCell className="text-right font-bold text-green-600">
                                        {formatCurrency(plan.availableAmount)}
                                    </TableCell>
                                    <TableCell className={`text-right font-medium ${getProgressColor(plan.executedAmount, plan.approvedCeiling)}`}>
                                        {executionPercentage.toFixed(1)}%
                                    </TableCell>
                                    <TableCell>
                                        {plan.approvedBy ? (
                                            <div className="flex flex-col text-xs">
                                                <span>{plan.approvedBy}</span>
                                                <span className="text-muted-foreground">
                                                    {plan.approvedAt && format(new Date(plan.approvedAt), "dd/MM/yyyy HH:mm")}
                                                </span>
                                            </div>
                                        ) : "-"}
                                    </TableCell>
                                    <TableCell className="text-right">
                                        {plan.status === 'DRAFT' && (
                                            <Button
                                                size="sm"
                                                onClick={() => onApprove(plan.id)}
                                                disabled={isLoading}
                                                className="bg-blue-600 hover:bg-blue-700 text-white"
                                            >
                                                <CheckCircle2 className="mr-2 h-4 w-4" />
                                                Aprovar
                                            </Button>
                                        )}
                                        {plan.status === 'APPROVED' && (
                                            <Lock className="ml-auto h-4 w-4 text-muted-foreground" />
                                        )}
                                    </TableCell>
                                </TableRow>
                            );
                        })
                    )}
                </TableBody>
            </Table>
        </div>
    );
}
