'use client';

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
  TableFooter
} from "@/components/ui/table";
import { formatCurrency } from '@/lib/currency-formatter';

type CustomerBalanceSummary = {
  id: string;
  name: string;
  totalPurchases: number;
  totalPayments: number;
  remainingBalance: number;
};

type CustomerBalancesTableProps = {
  summaries: CustomerBalanceSummary[];
  t: any;
  currencySymbol?: string;
};

export default function CustomerBalancesTable({ summaries, t, currencySymbol = '$' }: CustomerBalancesTableProps) {
    
    const totals = summaries.reduce((acc, summary) => {
        acc.totalPurchases += summary.totalPurchases;
        acc.totalPayments += summary.totalPayments;
        acc.remainingBalance += summary.remainingBalance;
        return acc;
    }, { totalPurchases: 0, totalPayments: 0, remainingBalance: 0 });

  return (
    <Card>
      <CardHeader>
        <CardTitle>{t?.customerBalancesTitle ?? 'Customer Balances'}</CardTitle>
        <CardDescription>{t?.customerBalancesDescription ?? 'A summary of all customer balances.'}</CardDescription>
      </CardHeader>
      <CardContent>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="text-start">{t?.customerName ?? 'Customer Name'}</TableHead>
              <TableHead className="text-end">{t?.totalPurchases ?? 'Total Purchases'}</TableHead>
              <TableHead className="text-end">{t?.totalPayments ?? 'Total Payments'}</TableHead>
              <TableHead className="text-end">{t?.remainingBalance ?? 'Remaining Balance'}</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {summaries.length === 0 ? (
              <TableRow>
                <TableCell colSpan={4} className="h-24 text-center text-muted-foreground">
                  {t?.noCustomersFound ?? 'No customers found.'}
                </TableCell>
              </TableRow>
            ) : (
              summaries.map((summary) => (
                <TableRow key={summary.id}>
                  <TableCell className="font-medium text-start">{summary.name}</TableCell>
                  <TableCell className="text-end font-mono">{formatCurrency(summary.totalPurchases, currencySymbol)}</TableCell>
                  <TableCell className="text-end font-mono text-green-600">{formatCurrency(summary.totalPayments, currencySymbol)}</TableCell>
                  <TableCell className="text-end font-mono font-bold text-red-600">{formatCurrency(summary.remainingBalance, currencySymbol)}</TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
          <TableFooter>
            <TableRow className="bg-muted/50 font-bold text-base">
                <TableCell className="text-start">{t?.total ?? 'Total'}</TableCell>
                <TableCell className="text-end font-mono">{formatCurrency(totals.totalPurchases, currencySymbol)}</TableCell>
                <TableCell className="text-end font-mono text-green-600">{formatCurrency(totals.totalPayments, currencySymbol)}</TableCell>
                <TableCell className="text-end font-mono text-red-600">{formatCurrency(totals.remainingBalance, currencySymbol)}</TableCell>
            </TableRow>
          </TableFooter>
        </Table>
      </CardContent>
    </Card>
  );
}