"use client";

import {
  Table,
  TableBody,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { type StatementRow } from "@/lib/types";
import { formatCurrency as formatCurrencyUtil } from "@/lib/currency-formatter";

type Translation = {
  title: string;
  description: string;
  noRecords: string;
  month: string;
  grossSalary: string;
  deductions: string;
  bonuses: string;
  netSalary: string;
  status: string;
  paid: string;
  unpaid: string;
  total: string;
}

export default function AccountStatementTable({ data, t, currencySymbol }: { data: StatementRow[], t: Translation, currencySymbol: string }) {
  const formatAmount = (amount: number) => formatCurrencyUtil(amount, currencySymbol);
  const totals = data.reduce(
    (acc, row) => {
      acc.grossSalary += row.grossSalary;
      acc.deductions += row.deductions;
      acc.bonuses += row.bonuses;
      acc.netSalary += row.netSalary;
      return acc;
    },
    { grossSalary: 0, deductions: 0, bonuses: 0, netSalary: 0 }
  );

  return (
    <Card>
      <CardHeader>
        <CardTitle>{t.title}</CardTitle>
        <CardDescription>
            {t.description}
        </CardDescription>
      </CardHeader>
      <CardContent>
        {data.length === 0 ? (
           <p className="text-center text-muted-foreground py-12">
            {t.noRecords}
          </p>
        ) : (
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="text-start">{t.month}</TableHead>
              <TableHead className="text-end">{t.grossSalary}</TableHead>
              <TableHead className="text-end">{t.deductions}</TableHead>
              <TableHead className="text-end">{t.bonuses}</TableHead>
              <TableHead className="text-end">{t.netSalary}</TableHead>
              <TableHead className="text-center">{t.status}</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {data.map((row) => (
              <TableRow key={row.month}>
                <TableCell className="font-medium text-start">{row.month}</TableCell>
                <TableCell className="text-end">
                  {formatAmount(row.grossSalary)}
                </TableCell>
                <TableCell className="text-end text-red-600">
                  {row.deductions > 0 ? `-${formatAmount(row.deductions)}` : formatAmount(0)}
                </TableCell>
                <TableCell className="text-end text-green-600">
                  {row.bonuses > 0 ? `+${formatAmount(row.bonuses)}` : formatAmount(0)}
                </TableCell>
                <TableCell className="text-end font-bold">
                  {formatAmount(row.netSalary)}
                </TableCell>
                <TableCell className="text-center">
                  <Badge variant={row.isPaid ? "secondary" : "outline"} className={row.isPaid ? "bg-green-100 text-green-800" : ""}>
                    {row.isPaid ? t.paid : t.unpaid}
                  </Badge>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
          <TableFooter>
            <TableRow>
              <TableCell className="font-bold text-base text-start">{t.total}</TableCell>
              <TableCell className="text-end font-bold text-base">
                {formatAmount(totals.grossSalary)}
              </TableCell>
              <TableCell className="text-end font-bold text-base text-red-600">
                -{formatAmount(totals.deductions)}
              </TableCell>
               <TableCell className="text-end font-bold text-base text-green-600">
                +{formatAmount(totals.bonuses)}
              </TableCell>
              <TableCell className="text-end font-bold text-base">
                {formatAmount(totals.netSalary)}
              </TableCell>
              <TableCell />
            </TableRow>
          </TableFooter>
        </Table>
        )}
      </CardContent>
    </Card>
  );
}